Leaflet
Integración avanzada de Drupal con la biblioteca de mapas Leaflet JS para mostrar y editar datos geográficos.
leaflet
Install
composer require 'drupal/leaflet:^10.3'
Overview
El módulo Leaflet proporciona una integración completa con la biblioteca JavaScript Leaflet, habilitando capacidades de mapeo web interactivo en Drupal. Permite a los editores de contenido crear, editar y mostrar datos geográficos a través de interfaces de mapa intuitivas.
El módulo ofrece un widget Geofield con herramientas de dibujo (impulsado por Leaflet-Geoman), un formateador para mostrar ubicaciones en mapas e integración completa con Views para crear listados de contenido basados en mapas. Soporta múltiples proveedores de capas de mosaicos, agrupación de marcadores, tooltips, popups, búsqueda por geocodificación y amplia personalización a través de tokens y hooks.
Las características incluyen soporte para mosaicos vectoriales vía MapLibre GL JS, integración de capas GeoJSON para dibujo de precisión, modo de pantalla completa, detección de ubicación del usuario y carga diferida para optimización del rendimiento.
Features
- Widget de Mapa Leaflet interactivo con herramientas de dibujo Leaflet-Geoman para crear y editar Points, LineStrings, Polygons, Circles y Rectangles
- Formateador de Campo Leaflet Map para mostrar datos geofield como mapas interactivos con marcadores, popups y tooltips personalizables
- Integración completa con Views mediante el plugin de estilo Leaflet Map para mostrar cualquier View como un mapa interactivo con capas superpuestas y controles de capas
- Soporte para múltiples capas base de mosaicos incluyendo OpenStreetMap, Stadia Maps, Google Maps, MapTiler y proveedores personalizados
- Soporte de mosaicos vectoriales vía integración con MapLibre GL JS para renderizado de mapas de alto rendimiento
- Funcionalidad de agrupación de marcadores a través del submódulo Leaflet Markercluster para manejar grandes cantidades de marcadores
- Integración de capas GeoJSON permitiendo fuentes externas e internas como capas de referencia para dibujo de precisión con ajuste automático
- Iconos de marcadores dinámicos que soportan imágenes personalizadas, SVG, HTML DivIcons y Circle Markers con personalización basada en tokens
- Tooltips y Popups de Leaflet con contenido configurable usando tokens, campos de entidad o modos de vista renderizados
- Geocodificación de búsqueda de direcciones con integración de autocompletado (requiere el módulo Geocoder)
- Detección de ubicación del usuario vía plugin Leaflet.Locate
- Control de mapa en pantalla completa vía plugin Leaflet.Control.FullScreen
- Control de Restablecer Vista del Mapa para volver a la posición inicial del mapa
- Control de Escala del Mapa para mostrar escala de distancia
- Manejo de gestos para mejorar la interacción en dispositivos táctiles
- Carga diferida usando IntersectionObserver API para optimización del rendimiento
- Soporte de tokens y patrones de reemplazo en todas las configuraciones de componentes del mapa
- Sistema extenso de hooks para personalizar definiciones de mapas, características y renderizado
- Integración con Search API Views para mostrar contenido indexado en mapas
- Carga de popups vía AJAX para mejorar el rendimiento con modos de vista de entidades
- Agrupación de capas superpuestas mediante agrupación de campos en Views para gestión del control de capas
Use Cases
Mapa Localizador de Tiendas
Crear un tipo de contenido para ubicaciones de tiendas con un geofield. Usar Leaflet Views para mostrar todas las tiendas en un mapa interactivo con agrupación para áreas densas. Configurar popups para mostrar detalles de la tienda y usar el geocodificador para que los usuarios busquen por dirección.
Editor de Ubicación de Eventos
Agregar un geofield a un tipo de contenido de evento con el widget Leaflet. Habilitar herramientas de dibujo para marcado preciso de ubicación. Usar capas GeoJSON de un campo separado que contenga límites del lugar para ajuste automático a ubicaciones predefinidas.
Mapa de Listados de Propiedades
Construir un sitio de bienes raíces con ubicaciones de propiedades mostradas en una View de mapa Leaflet. Usar iconos basados en tokens para mostrar diferentes marcadores por tipos de propiedad. Habilitar agrupación de marcadores y popups AJAX para rendimiento con miles de listados.
Panel Geográfico Multi-Capa
Crear una View con agrupación por campo de categoría para mostrar diferentes tipos de ubicaciones como capas superpuestas separadas. Los usuarios pueden activar/desactivar capas usando el control de capas. Combinar con visualizaciones de adjuntos de Leaflet para capas de datos adicionales.
Mapeo de Rutas/Senderos
Usar el widget Leaflet para dibujar geometrías LineString/Polygon para rutas de senderismo o rutas de entrega. Configurar opciones de estilo de ruta para diferenciación visual. Mostrar rutas en mapas con el formateador usando colores de ruta personalizados basados en tokens de dificultad.
Visualización de Datos Interactiva
Aprovechar el soporte de múltiples capas de mosaicos y mosaicos vectoriales vía MapLibre GL JS para visualizaciones de mapas ricas en datos. Usar propiedades adicionales de características para pasar datos personalizados a JavaScript para interactividad avanzada a través de hooks.
Tips
- Usar hook_leaflet_map_info() para definir preajustes de mapas personalizados con diferentes proveedores de mosaicos que pueden seleccionarse en la configuración del widget/formateador
- El reemplazo de tokens soporta valores de campos, propiedades de entidad y tokens del sitio - usar el explorador de tokens para explorar las opciones disponibles
- Para mejor rendimiento con muchos marcadores, habilitar la agrupación de marcadores y considerar la carga de popups vía AJAX para modos de vista de entidades
- Las capas GeoJSON en el widget soportan ajuste automático - ideal para dibujar puntos precisamente en geometrías de referencia como contornos de edificios
- Los mosaicos vectoriales vía MapLibre GL JS proporcionan zoom y rotación más suaves para mapas base modernos que soportan formatos vectoriales
- Usar el campo JSON feature_properties para pasar datos personalizados a JavaScript para interactividad avanzada vía hooks
- La opción de carga diferida mejora la carga inicial de la página cuando los mapas están debajo del pliegue - los mapas se inicializan cuando se desplazan a la vista
- La agrupación de capas superpuestas en Views permite a los usuarios activar/desactivar categorías de características - usar un campo de taxonomía o lista para agrupar
- Las clases CSS personalizadas en marcadores (con soporte de tokens) permiten estilizar marcadores de manera diferente basándose en datos de la entidad
Technical Details
Permissions 1
Hooks 10
hook_leaflet_map_info
Definir definiciones de mapas personalizados con capas de mosaicos, configuraciones y configuraciones predeterminadas
hook_leaflet_map_info_alter
Modificar definiciones de mapas existentes para cambiar capas de mosaicos, configuraciones o agregar iconos personalizados
hook_leaflet_default_widget_alter
Modificar la configuración del Widget de Mapa Leaflet antes del renderizado
hook_leaflet_formatter_feature_alter
Modificar características/marcadores individuales de Leaflet en el formateador antes del renderizado
hook_leaflet_default_map_formatter_alter
Modificar toda la configuración y características del Formateador de Mapa Leaflet
hook_leaflet_map_view_geofield_value_alter
Modificar valores de geofield en Views antes del procesamiento
hook_leaflet_views_feature_alter
Modificar características/marcadores individuales en Leaflet Views
hook_leaflet_views_features_alter
Modificar todo el array de características en Leaflet Views antes del renderizado
hook_leaflet_views_features_group_alter
Modificar grupos de características (capas superpuestas) en Leaflet Views
hook_leaflet_map_view_style_alter
Modificar toda la configuración del estilo de Vista de Mapa Leaflet
Troubleshooting 6
Verificar la consola del navegador para errores de JavaScript. Asegurar que la biblioteca Leaflet esté correctamente instalada (verificar el informe de estado en /admin/reports/status). Verificar que el contenedor del mapa tenga una altura definida. Limpiar las cachés de Drupal.
Verificar que las rutas URL de los iconos sean accesibles y absolutas. Comprobar que los tamaños de los iconos estén especificados (el módulo puede auto-detectar desde la imagen si la URL es válida). Asegurar que los permisos de archivo permitan acceso web a las imágenes de iconos.
Confirmar que el módulo Geocoder esté instalado y configurado con al menos un proveedor. Verificar que el usuario tenga el permiso 'access geocoder api endpoints'. Verificar que las claves API del proveedor estén configuradas si son requeridas.
Asegurar que al menos un geofield esté agregado a los campos de la View y seleccionado como Fuente de Datos en la configuración del estilo Leaflet Map. Verificar que el geofield contenga datos WKT válidos. Verificar que la View esté devolviendo resultados.
Asegurar que los patrones de tokens sean correctos (usar el explorador de tokens). Verificar que la entidad tenga valores para los campos referenciados. Para Views, asegurarse de que el campo de reemplazo esté agregado a los campos de la View.
Habilitar el submódulo Leaflet Markercluster. Verificar que la agrupación esté habilitada en la configuración del formateador/View. Asegurar que haya múltiples marcadores en proximidad cercana para activar la agrupación.
Security Notes 4
- El permiso 'configure leaflet' controla el acceso para ver advertencias administrativas del módulo - asignar apropiadamente
- La funcionalidad del geocodificador requiere el permiso 'access geocoder api endpoints' para prevenir uso no autorizado de la API
- El reemplazo de tokens en popups/tooltips usa sanitización apropiada pero revisar contenido personalizado para riesgos de XSS
- Los proveedores externos de mosaicos pueden registrar direcciones IP de usuarios - revisar las implicaciones de privacidad de los proveedores de mapas elegidos