Leaflet

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: tiles de OpenStreetMap, Mapbox o cualquier proveedor con zoom, pan y gestos táctiles
• Marcadores y popups: iconos personalizables con popups HTML dinámico y tooltips informativos en coordenadas
• GeoJSON nativo: lectura e interpretación de polígonos, líneas, puntos y áreas geográficas desde JSON
• Plugins de clustering: Leaflet.markercluster agrupa marcadores cercanos con expansión al hacer zoom
• Drawing tools: Leaflet.draw permite dibujar polígonos y círculos para definir zonas de entrega o cobertura
• Routing: Leaflet-routing-machine calcula rutas entre puntos usando OSRM o Mapbox Directions
• Heatmaps: Leaflet.heat visualiza densidad de datos geográficos como pedidos por zona en mapas de calor
• Framework wrappers: react-leaflet, vue-leaflet y ngx-leaflet para integración en apps SPA modernas

Se integra con 10 herramientas