Leaflet

Análisis en profundidad de Leaflet

Qué es Leaflet y su posición en el ecosistema de mapas

Leaflet es la biblioteca JavaScript open source más utilizada del mundo para mapas interactivos. Creada en 2010 por Volodymyr Agafonkin (ucraniano, entonces en CloudMade), hoy es un proyecto comunitario alojado en GitHub con más de 42.000 estrellas y mantenido por cientos de contribuidores. La versión estable actual es 1.9.4; la versión 2.0.0-alpha.1 se publicó en agosto de 2025 con refactorización completa del núcleo.

La propuesta de Leaflet es radical en su simplicidad: una biblioteca de 42KB que hace perfectamente las cosas fundamentales. No compite con Google Maps Platform en funcionalidades, sino en coste cero, control total y ausencia de dependencias de terceros con acceso a tus datos.

Arquitectura técnica: diseño modular y extensible

Leaflet implementa un sistema de capas (layers) que permite combinar:

• Tile layers: OSM, Mapbox, Stamen, CartoDB, HERE y cualquier proveedor con URL estándar {z}/{x}/{y}
• Capas vectoriales: polylines, polígonos, círculos, rectángulos con control total de estilo CSS
• Marcadores e iconos: personalizables mediante imágenes o HTML/CSS puro
• GeoJSON: importación directa de datos geográficos estándar
• WMS/WMTS: compatibilidad con servicios cartográficos institucionales

El sistema de plugins es el mayor activo ecosistémico: más de 350 plugins verificados en leafletjs.com/plugins amplían Leaflet con clustering de marcadores (Leaflet.markercluster), mapas de calor (Leaflet.heat), routing (Leaflet Routing Machine), geocoding, animaciones y decenas de proveedores de tiles.

Rendimiento real: por qué 42KB importa

Google Maps Platform carga más de 500KB de JavaScript. Mapbox GL JS supera los 200KB. Leaflet con un tile layer básico de OpenStreetMap carga el mapa funcional en menos de 100ms en conexiones 4G. Para ecommerce, donde cada 100ms de tiempo de carga afecta la tasa de conversión, esta diferencia es relevante especialmente en mercados con conectividad variable.

La versión 2.0 introduce mejoras de rendimiento adicionales: mejor gestión de SVG, soporte nativo para canvas rendering en dispositivos con alta densidad de píxeles y arquitectura de eventos rediseñada para reducir reflows del DOM.

Casos de uso en ecommerce

Los usos más frecuentes de Leaflet en tiendas online son:

• Localizador de tiendas físicas: mapa con marcadores de puntos de venta, filtros por categoría, popup con horarios
• Mapa de cobertura de envíos: polígonos de zonas de reparto con precios diferenciados
• Seguimiento de pedidos: visualización de ruta del transportista (combinado con API de logística)
• Geolocalización de usuario: detección automática de ubicación para sugerir tienda más cercana

Limitaciones honestas

Leaflet no es la herramienta correcta para todos los escenarios. Sus limitaciones reales:

• Sin Street View ni vistas de satélite de alta resolución nativas (requieren integración con APIs de pago)
• Sin Places API ni búsqueda de establecimientos integrada
• Sin tráfico en tiempo real ni rutas con estimaciones de tiempo precisas
• Los tiles de OpenStreetMap tienen política de uso justo: para alto volumen de tráfico se recomienda alojar tiles propios o usar Mapbox/CloudFlare Workers
• Curva de aprendizaje media: requiere conocimientos JavaScript para configuraciones avanzadas

Comparativa con alternativas de pago

Google Maps Platform cobra 7 USD por cada 1.000 cargas de mapa dinámico (tras el crédito mensual de 200 USD). Para una tienda con 50.000 páginas vistas/mes con mapa, el coste mensual supera los 150 USD. Mapbox cobra 0,50 USD por 1.000 tiles a partir de 50.000. Leaflet con tiles de OpenStreetMap: coste $0. La comparativa es significativa para sitios con tráfico elevado.

Qué es Leaflet

Leaflet es una biblioteca JavaScript open source para crear mapas interactivos en páginas web, diseñada por el desarrollador ucraniano Volodymyr Agafonkin y publicada inicialmente en 2011. Con un peso de solo 42KB de JavaScript (gzipped), Leaflet es la biblioteca de mapas más ligera y utilizada del ecosistema open source, empleada por empresas como Facebook, GitHub, Foursquare, Pinterest y The Washington Post. Distribuida bajo licencia BSD-2-Clause, Leaflet funciona con cualquier proveedor de tiles de mapas: OpenStreetMap (gratuito), Mapbox, CartoDB, Stamen, HERE Maps y Google Maps, dando al desarrollador libertad para elegir el servicio cartográfico sin lock-in. La versión Leaflet 2.0 (alpha lanzada en 2025) moderniza el código eliminando soporte para Internet Explorer, adoptando Pointer Events, publicándose como módulo ESM y mejorando el rendimiento en dispositivos móviles. El ecosistema incluye cientos de plugins de terceros que extienden las funcionalidades base.

Funcionalidades principales

Leaflet proporciona las funcionalidades de mapas que la mayoría de proyectos web necesitan sin sobrecarga innecesaria. Los marcadores se colocan en coordenadas geográficas con iconos personalizables, popups con HTML dinámico y tooltips informativos. Las capas de datos soportan GeoJSON nativo para representar polígonos, líneas, puntos y áreas geográficas complejas directamente desde archivos JSON. Los controles de zoom, navegación, escala y atribución se configuran con opciones simples. La API de eventos maneja click, drag, zoom, move y otros gestos táctiles nativamente en móvil y desktop. Las capas de tiles (tile layers) cargan mapas rasterizados desde cualquier servidor de tiles compatible, permitiendo combinar mapas base de OpenStreetMap con capas de datos propias superpuestas. La extensibilidad mediante clases JavaScript permite crear controles custom, capas de visualización personalizadas y comportamientos específicos del proyecto sin modificar el core de la biblioteca.

Leaflet para ecommerce: store locators y mapas de tiendas

El caso de uso más relevante de Leaflet para ecommerce es la creación de store locators (localizadores de tiendas) que muestran las ubicaciones físicas de una marca en un mapa interactivo. A diferencia de Google Maps JavaScript API que cobra por cada carga de mapa después de un free tier de 28.000 cargas mensuales, Leaflet con OpenStreetMap es completamente gratuito sin límites de uso ni costes por carga. Un store locator típico con Leaflet incluye: mapa interactivo con marcadores de tiendas, popups con dirección, horarios y contacto, búsqueda por geolocalización del usuario, filtros por tipo de tienda o servicios disponibles, y clustering de marcadores cuando hay muchas ubicaciones cercanas. Para tiendas online con envío local, los mapas de Leaflet pueden mostrar zonas de cobertura de envío, estimar tiempos de entrega basados en distancia, y permitir al comprador seleccionar su punto de recogida más cercano en el checkout.

Plugins y ecosistema

El ecosistema de plugins de Leaflet extiende significativamente sus funcionalidades base. Leaflet.markercluster agrupa marcadores cercanos en clusters que se expanden al hacer zoom, esencial para store locators con cientos de ubicaciones. Leaflet.draw permite a los usuarios dibujar polígonos, círculos y rectángulos en el mapa, útil para definir zonas de entrega o áreas de cobertura. Leaflet-routing-machine calcula rutas y direcciones entre puntos utilizando servicios como OSRM o Mapbox Directions. Leaflet.heat genera mapas de calor para visualizar densidad de datos geográficos como pedidos por zona. Leaflet.fullscreen añade un control de pantalla completa para inmersión en el mapa. Para ecommerce, los plugins de geocoding (Leaflet-Control-Geocoder) permiten convertir direcciones en coordenadas y viceversa, alimentando funcionalidades de búsqueda por dirección en store locators y calculadoras de envío que necesitan distancias entre el almacén y el destino.

Integración con WordPress y frameworks

Para WordPress, el plugin Jetstagram Maps y otros plugins integran Leaflet para mostrar mapas sin dependencia de Google Maps API y sus costes. WP Leaflet Map permite embeber mapas de Leaflet con shortcodes directamente en posts y páginas, con marcadores definidos en el editor de WordPress. Para WooCommerce, plugins de store locator basados en Leaflet permiten mostrar ubicaciones de tiendas físicas y puntos de recogida sin costes de API de Google Maps. En frameworks frontend modernos como React (react-leaflet), Vue (vue-leaflet) y Angular (ngx-leaflet), existen wrappers que integran Leaflet como componente reactivo. Next.js y Nuxt.js requieren importación dinámica (dynamic import) para evitar problemas con el server-side rendering ya que Leaflet depende del DOM del navegador. La documentación oficial cubre todos los métodos, eventos y opciones de configuración con ejemplos interactivos.

Limitaciones frente a Google Maps y Mapbox

Leaflet no incluye funcionalidades avanzadas que Google Maps y Mapbox ofrecen nativamente: Street View, routing integrado, Places API para búsqueda de negocios, indoor maps, y tráfico en tiempo real requieren servicios externos o plugins de terceros. Los tiles de OpenStreetMap, aunque gratuitos, tienen calidad variable por región y menor precisión en datos comerciales (nombres de tiendas, horarios, reviews) que Google Maps. Mapbox ofrece mapas base con diseño visual superior y personalización de estilos CSS que Leaflet con OpenStreetMap no puede igualar sin capas de tiles premium. Para proyectos que necesitan geocoding de alto volumen, routing avanzado o datos de Places, Google Maps sigue siendo la opción más completa aunque la más costosa. Sin embargo, para store locators, mapas de cobertura de envío y visualización de ubicaciones donde el coste es prioritario, Leaflet con OpenStreetMap ofrece la mejor relación funcionalidad/precio del mercado.

Características Principales

• Mapas interactivos responsivos: zoom, paneo, soporte táctil en móviles y tablets
• Tile layers compatibles con OpenStreetMap, Mapbox, CartoDB, Stamen y cualquier proveedor estándar
• Capas vectoriales: polylines, polígonos, círculos, rectángulos con estilos CSS personalizables
• Marcadores e iconos: personalizables con imágenes o HTML/CSS puro
• Popups y tooltips configurables con contenido HTML libre
• Soporte nativo GeoJSON para datos geográficos estándar
• Compatibilidad WMS/WMTS para servicios cartográficos institucionales
• API de eventos completa: click, mouseover, drag, zoom, etc.
• Proyecciones cartográficas: EPSG:3857, 4326, 3395 nativas; otras mediante plugin Proj4Leaflet
• Hardware acceleration en móviles para animaciones fluidas
• Versión 2.0.0-alpha (agosto 2025): arquitectura rediseñada, mejor rendimiento SVG/canvas

Se integra con 10 herramientas