Leaflet.js Components Lab
Laboratorio frontend de mapas interactivos con Leaflet. Ocho patrones en vivo sobre datos reales de Chile —del marcador al choropleth con leyenda— con render diferido, tema claro/oscuro sincronizado y cero herramientas de build.
No es un Mapa Suelto: es Arquitectura Geográfica
Leaflet expone un API modular: capas base, vectores, GeoJSON, plugins de clustering y controles. Cada mapa parece un caso aparte, con su inicialización, sus datos y su manejo de tema.
Sin una capa de abstracción, cada mapa vuelve a ser copia del mismo boilerplate. El desafío fue construir un sistema donde añadir un mapa cueste una entrada en un registro, no cien líneas duplicadas.
Sin arquitectura
- Inicialización copiada y pegada por cada mapa
- Tema oscuro/claro rompe basemap y popups
- Mapas pesados inicializados de golpe al cargar
- Capas y listeners sin lifecycle: fugas de memoria
- Datos geográficos dispersos y duplicados
Un Sistema de Componentes de Mapa
Map Factory
createMap() centraliza la inicialización con defaults mergeados: bounds de Chile, atribución y renderer.
Registry de Mapas
Separar definición de instanciación: cada mapa vive en MAP_REGISTRY reutilizable.
Lazy Rendering
IntersectionObserver inicializa cada mapa al entrar en viewport, con skeleton e invalidateSize().
Theme Adapter
Basemap Carto light/dark y tokens CSS sincronizan con data-bs-theme sin flicker.
Decisiones con Evidencia en el Código
Contenedores Responsivos
Altura explícita + invalidateSize() al revelar. El mapa se adapta al contenedor, nunca al revés.
Performance Canvas
preferCanvas, chunkedLoading y keepBuffer mantienen 346 puntos fluidos sin jank.
Accesibilidad Geográfica
Cada mapa con role="region" + aria-label. Tabla HTML alternativa en <details> y navegación teclado nativa.
El Sistema en Números
Patrones de mapa
Regiones GeoJSON
Comunas en clúster
Dependencias de build
01 — Seis vistas del catálogo de ocho patrones
02 — Arquitectura en capas: datos → registry → factory → render → theme → tiles
Ocho Mapas, Un Sistema
La rueda del mouse se habilita al hacer clic o enfocar un mapa con teclado, para no secuestrar el desplazamiento de la página. Cada patrón incluye su tabla de datos como alternativa accesible.
Mapa Base + Capas
L.control.layersVer datos en tabla
| Capa | Proveedor | Uso |
|---|---|---|
| Carto Light | CARTO (OSM) | Base clara por defecto |
| Carto Dark | CARTO (OSM) | Base oscura por defecto |
| OpenStreetMap | OpenStreetMap | Capa alternativa manual |
Marcadores + Popups
L.markerVer datos en tabla
| Capital | Región | Población |
|---|---|---|
| Arica | Arica y Parinacota | 221.364 |
| Iquique | Tarapacá | 191.468 |
| Antofagasta | Antofagasta | 361.873 |
| Copiapó | Atacama | 158.438 |
| La Serena | Coquimbo | 205.531 |
| Valparaíso | Valparaíso | 296.655 |
| Santiago | Metropolitana | 404.495 |
| Rancagua | O'Higgins | 214.344 |
| Talca | Maule | 201.815 |
| Chillán | Ñuble | 161.963 |
| Concepción | Biobío | 223.574 |
| Temuco | La Araucanía | 223.724 |
| Valdivia | Los Ríos | 150.125 |
| Puerto Montt | Los Lagos | 218.858 |
| Coyhaique | Aysén | 53.410 |
| Punta Arenas | Magallanes | 120.760 |
Símbolos Proporcionales
circleMarkerVer datos en tabla
| Región | Población | Radio px |
|---|---|---|
| Metropolitana | 7.112.808 | 30,0 |
| Valparaíso | 1.815.902 | 18,1 |
| Biobío | 1.556.805 | 17,2 |
| Maule | 1.044.950 | 15,2 |
| La Araucanía | 957.224 | 14,8 |
| O'Higgins | 914.555 | 14,6 |
| Los Lagos | 828.708 | 14,2 |
| Coquimbo | 757.586 | 13,8 |
| Antofagasta | 607.534 | 13,0 |
| Ñuble | 480.609 | 12,2 |
| Los Ríos | 384.837 | 11,6 |
| Tarapacá | 330.558 | 11,2 |
| Atacama | 286.168 | 10,8 |
| Arica y Parinacota | 226.068 | 10,3 |
| Magallanes | 166.533 | 9,7 |
| Aysén | 103.158 | 8,9 |
Regiones GeoJSON
L.geoJSONVer datos en tabla
| Región | Superficie km² | Población |
|---|---|---|
| Tarapacá | 42.226,0 | 330.558 |
| Antofagasta | 126.049,1 | 607.534 |
| Atacama | 75.176,0 | 286.168 |
| Coquimbo | 40.580,0 | 757.586 |
| Valparaíso | 16.396,1 | 1.815.902 |
| O'Higgins | 16.363,9 | 914.555 |
| Maule | 30.296,1 | 1.044.950 |
| Biobío | 23.890,2 | 1.556.805 |
| La Araucanía | 31.842,3 | 957.224 |
| Los Lagos | 48.583,6 | 828.708 |
| Aysén | 108.494,4 | 103.158 |
| Magallanes | 138.229,1 | 166.533 |
| Metropolitana | 15.403,2 | 7.112.808 |
| Los Ríos | 18.429,5 | 384.837 |
| Arica y Parinacota | 16.873,3 | 226.068 |
| Ñuble | 13.178,5 | 480.609 |
Choropleth + Leyenda
choroplethVer datos en tabla
| Región | Densidad hab/km² | Clase |
|---|---|---|
| Tarapacá | 7,83 | 5 – 20 |
| Antofagasta | 4,82 | < 5 |
| Atacama | 3,81 | < 5 |
| Coquimbo | 18,67 | 5 – 20 |
| Valparaíso | 110,76 | 40 – 150 |
| O'Higgins | 55,90 | 40 – 150 |
| Maule | 34,49 | 20 – 40 |
| Biobío | 65,16 | 40 – 150 |
| La Araucanía | 30,06 | 20 – 40 |
| Los Lagos | 17,06 | 5 – 20 |
| Aysén | 0,95 | < 5 |
| Magallanes | 1,20 | < 5 |
| Metropolitana | 461,77 | > 150 |
| Los Ríos | 20,88 | 20 – 40 |
| Arica y Parinacota | 13,40 | 5 – 20 |
| Ñuble | 36,47 | 20 – 40 |
Fuente: INE, Censo 2017 (población) · SUBDERE (superficie).
Clustering de Comunas
markerClusterVer datos en tabla
| Macrozona | Comunas | Ejemplos |
|---|---|---|
| Norte Grande | 29 | Putre, Camiña, María Elena |
| Norte Chico | 15 | Ovalle, Andacollo, Los Vilos |
| Zona Centro | 153 | Codegua, Coltauco, Marchigüe |
| Zona Sur | 98 | Cunco, Freire, Galvarino |
| Zona Austral | 50 | Fresia, Llanquihue, Puqueldón |
Total: 346 comunas, incluida la comuna de la Antártica.
Ruta 5 Norte–Sur
L.polylineVer datos en tabla
| Hito | Lat | Lng |
|---|---|---|
| Arica | -18.4783 | -70.3126 |
| Iquique | -20.2133 | -70.1503 |
| Quillagua | -21.6533 | -69.5350 |
| Tocopilla | -22.0899 | -70.2018 |
| Antofagasta | -23.6509 | -70.3975 |
| Carmen Alto | -23.6689 | -69.8447 |
| Chañaral | -26.3486 | -70.6206 |
| Copiapó | -27.3664 | -70.3325 |
| Vallenar | -28.5754 | -70.7595 |
| La Serena | -29.9045 | -71.2489 |
| Los Vilos | -31.9105 | -71.5102 |
| Santiago | -33.4489 | -70.6693 |
| Rancagua | -34.1708 | -70.7444 |
| Talca | -35.4264 | -71.6554 |
| Chillán | -36.6064 | -72.1033 |
| Los Ángeles | -37.4697 | -72.3541 |
| Temuco | -38.7359 | -72.5904 |
| Osorno | -40.5740 | -73.1422 |
| Puerto Montt | -41.4693 | -72.9414 |
| Castro | -42.4806 | -73.7613 |
| Quellón | -43.1197 | -73.6312 |
Trazado simplificado de la Ruta 5: ~3.360 km entre Arica y Quellón.
Control Custom + DivIcon
L.ControlVer datos en tabla
| Elemento | API | Función |
|---|---|---|
| Botón Volver a Chile | L.Control.extend | Reinicia el zoom a la vista nacional |
| Pin Santiago | L.divIcon | Marcador HTML custom en la capital |
| Pulso del pin | CSS @keyframes | Anillo animado, desactivado con reduced-motion |
Herramientas del Laboratorio
Núcleo
Plugins
Patrones
Accesibilidad
¿Necesitas mapas claros y mantenibles?
Construyo visualizaciones geográficas interactivas sobre Leaflet: performance, accesibilidad y tema claro/oscuro.