Ejemplo de mapa interactivo de España

Copia el código, pégalo en un editor de texto plano y guárdalo con la extensión .html. Aquí va el código (corregido). Aquí va:

<!DOCTYPE html>
<html>
<head>
  <title>Mapa Interactivo de España</title>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
  <style>
    #map { height: 600px; width: 100%; }
    #selector { margin: 10px; }
  </style>
</head>
<body>
  <h2>Mapa Interactivo con Filtro por Comunidad Autónoma</h2>
  <select id="selector">
    <option>Todas</option>
    <option>Andalucía</option>
    <option>Aragón</option>
    <option>Asturias</option>
    <option>Canarias</option>
    <option>Cantabria</option>
    <option>Castilla y León</option>
    <option>Castilla-La Mancha</option>
    <option>Cataluña</option>
    <option>Ceuta</option>
    <option>Comunidad Valenciana</option>
    <option>Extremadura</option>
    <option>Galicia</option>
    <option>Islas Baleares</option>
    <option>La Rioja</option>
    <option>Madrid</option>
    <option>Melilla</option>
    <option>Murcia</option>
    <option>Navarra</option>
    <option>País Vasco</option>
  </select>
  <div id="map"></div>

  <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
  <script>
    const map = L.map('map').setView([40.4168, -3.7038], 6);

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '© OpenStreetMap contributors'
    }).addTo(map);

    const provincias = [
      { nombre: "A Coruña", lat: 43.3623, lon: -8.4115, comunidad: "Galicia" },
      { nombre: "Álava", lat: 42.8467, lon: -2.6727, comunidad: "País Vasco" },
      { nombre: "Albacete", lat: 38.9943, lon: -1.8585, comunidad: "Castilla-La Mancha" },
      { nombre: "Alicante", lat: 38.3452, lon: -0.481, comunidad: "Comunidad Valenciana" },
      { nombre: "Almería", lat: 36.8403, lon: -2.4679, comunidad: "Andalucía" },
      { nombre: "Oviedo", lat: 43.3619, lon: -5.8494, comunidad: "Asturias" },
      { nombre: "Gijón", lat: 43.5322, lon: -5.6611, comunidad: "Asturias" },
      { nombre: "Ávila", lat: 40.6565, lon: -4.6818, comunidad: "Castilla y León" },
      { nombre: "Badajoz", lat: 38.8794, lon: -6.9707, comunidad: "Extremadura" },
      { nombre: "Barcelona", lat: 41.3851, lon: 2.1734, comunidad: "Cataluña" },
      { nombre: "Burgos", lat: 42.3439, lon: -3.6969, comunidad: "Castilla y León" },
      { nombre: "Cáceres", lat: 39.4753, lon: -6.372, comunidad: "Extremadura" },
      { nombre: "Cádiz", lat: 36.5164, lon: -6.2994, comunidad: "Andalucía" },
      { nombre: "Cantabria", lat: 43.4623, lon: -3.8099, comunidad: "Cantabria" },
      { nombre: "Castellón", lat: 39.9864, lon: -0.0513, comunidad: "Comunidad Valenciana" },
      { nombre: "Ciudad Real", lat: 38.9863, lon: -3.9271, comunidad: "Castilla-La Mancha" },
      { nombre: "Córdoba", lat: 37.8882, lon: -4.7794, comunidad: "Andalucía" },
      { nombre: "Cuenca", lat: 40.0704, lon: -2.1374, comunidad: "Castilla-La Mancha" },
      { nombre: "Girona", lat: 41.9794, lon: 2.8214, comunidad: "Cataluña" },
      { nombre: "Granada", lat: 37.1773, lon: -3.5986, comunidad: "Andalucía" },
      { nombre: "Guadalajara", lat: 40.6333, lon: -3.1667, comunidad: "Castilla-La Mancha" },
      { nombre: "Guipúzcoa", lat: 43.3128, lon: -1.9749, comunidad: "País Vasco" },
      { nombre: "Huelva", lat: 37.2614, lon: -6.9447, comunidad: "Andalucía" },
      { nombre: "Huesca", lat: 42.1401, lon: -0.4089, comunidad: "Aragón" },
      { nombre: "Illes Balears", lat: 39.5696, lon: 2.6502, comunidad: "Islas Baleares" },
      { nombre: "Jaén", lat: 37.7796, lon: -3.7849, comunidad: "Andalucía" },
      { nombre: "La Rioja", lat: 42.465, lon: -2.448, comunidad: "La Rioja" },
      { nombre: "Las Palmas", lat: 28.1235, lon: -15.4363, comunidad: "Canarias" },
      { nombre: "León", lat: 42.5987, lon: -5.5671, comunidad: "Castilla y León" },
      { nombre: "Lleida", lat: 41.6176, lon: 0.62, comunidad: "Cataluña" },
      { nombre: "Lugo", lat: 43.0097, lon: -7.556, comunidad: "Galicia" },
      { nombre: "Madrid", lat: 40.4168, lon: -3.7038, comunidad: "Madrid" },
      { nombre: "Málaga", lat: 36.7213, lon: -4.4214, comunidad: "Andalucía" },
      { nombre: "Murcia", lat: 37.9834, lon: -1.1299, comunidad: "Murcia" },
      { nombre: "Navarra", lat: 42.8125, lon: -1.6458, comunidad: "Navarra" },
      { nombre: "Ourense", lat: 42.3358, lon: -7.8639, comunidad: "Galicia" },
      { nombre: "Palencia", lat: 42.0095, lon: -4.5286, comunidad: "Castilla y León" },
      { nombre: "Pontevedra", lat: 42.4333, lon: -8.6333, comunidad: "Galicia" },
      { nombre: "Salamanca", lat: 40.9701, lon: -5.6635, comunidad: "Castilla y León" },
      { nombre: "Santa Cruz de Tenerife", lat: 28.4636, lon: -16.2518, comunidad: "Canarias" },
      { nombre: "Segovia", lat: 40.9481, lon: -4.1184, comunidad: "Castilla y León" },
      { nombre: "Sevilla", lat: 37.3886, lon: -5.9823, comunidad: "Andalucía" },
      { nombre: "Soria", lat: 41.7667, lon: -2.4667, comunidad: "Castilla y León" },
      { nombre: "Tarragona", lat: 41.1189, lon: 1.2445, comunidad: "Cataluña" },
      { nombre: "Teruel", lat: 40.3456, lon: -1.1065, comunidad: "Aragón" },
      { nombre: "Toledo", lat: 39.8628, lon: -4.0273, comunidad: "Castilla-La Mancha" },
      { nombre: "Valencia", lat: 39.4699, lon: -0.3763, comunidad: "Comunidad Valenciana" },
      { nombre: "Valladolid", lat: 41.6523, lon: -4.7245, comunidad: "Castilla y León" },
      { nombre: "Vizcaya", lat: 43.263, lon: -2.935, comunidad: "País Vasco" },
      { nombre: "Zamora", lat: 41.5033, lon: -5.7446, comunidad: "Castilla y León" },
      { nombre: "Zaragoza", lat: 41.6488, lon: -0.8891, comunidad: "Aragón" },
      { nombre: "Ceuta", lat: 35.8894, lon: -5.3213, comunidad: "Ceuta" },
      { nombre: "Melilla", lat: 35.2796, lon: -2.947, comunidad: "Melilla" }
    ];

    let markers = [];

function mostrarProvincias(comunidad) {
  markers.forEach(m => map.removeLayer(m));
  markers = [];
  provincias.forEach(p => {
    if (comunidad === "Todas" || p.comunidad === comunidad) {
      const marker = L.circleMarker([p.lat, p.lon], {
        radius: 6,
        color: "blue",
        fillColor: "blue",
        fillOpacity: 0.8
      }).addTo(map);

      // Enlace a la página de la ciudad
      const enlace = `<a href="${p.nombre.toLowerCase().replace(/ /g, '_')}.html" target="_blank">${p.nombre}</a>`;
      marker.bindPopup(`<b>${enlace}</b><br>${p.comunidad}`);
      markers.push(marker);
    }
  });
}

    mostrarProvincias("Todas");
  </script>
  </body>
  </html>

Ver ejemplo

Valora esta FAQ

0 (0 votos)

Etiquetas