Tu primer mapa web con Leaflet

1. Prepara los datos

Exporta tu capa desde QGIS a GeoJSON en EPSG:4326, con solo los campos necesarios y las geometrías simplificadas.

2. La página

• Carga la hoja de estilos y el script de Leaflet desde su CDN oficial (versión fija).
• Crea un <div id="mapa"> con altura definida en CSS.
• Crea el mapa: const mapa = L.map('mapa').setView([40.4, -3.7], 6);
• Añade un mapa base: L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap' }).addTo(mapa);
• Añade tu capa: fetch('datos.geojson').then(r => r.json()).then(d => L.geoJSON(d, { onEachFeature: (f, l) => l.bindPopup(f.properties.nombre) }).addTo(mapa));

3. Publica

Sube la carpeta a un hosting estático: GitHub Pages, Netlify o Vercel.

Importante

• Los mapas base de OpenStreetMap tienen una política de uso. Para tráfico alto, usa un proveedor de teselas o las tuyas propias.
• Si no quieres programar, qgis2web genera esto mismo desde QGIS.