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
2025-09-03 09:44
FAQs Puntocomunica