Leaflet para TYPO3

Mapas OpenStreetMap con Leaflet sustituyen a Google Maps sin costes de licencia ni riesgos RGPD

Google Maps cobra a partir de 28.000 cargas de mapa al mes y transfiere datos de usuarios a servidores en EE.UU. Para empresas con buscador de sucursales, Store Locator o mapa de ubicaciones en su web, eso son dos problemas a la vez: presupuesto y protección de datos. Leaflet resuelve ambos. La librería JavaScript de código abierto renderiza mapas interactivos basados en datos de OpenStreetMap, funciona completamente en el lado del cliente y no tiene costes de licencia. La extensión TYPO3 integra Leaflet como elemento de contenido: los editores gestionan ubicaciones en el backend, la extensión genera el mapa en el frontend.

Para empresas con 5 a 500 ubicaciones, Leaflet es la recomendación estándar. Solo cuando se necesitan funcionalidades específicas de Google como Street View, edificios 3D o datos de tráfico en tiempo real, Google Maps es la mejor opción. En todos los demás casos, Leaflet ofrece la misma funcionalidad con cero costes de licencia y sin discusiones sobre protección de datos.

Los escenarios típicos son buscadores de sucursales, mapas inmobiliarios y ubicaciones de eventos

El escenario más frecuente es el buscador de sucursales o ubicaciones. Una empresa con 20 a 200 sucursales muestra todas las ubicaciones en un mapa interactivo. Los usuarios pueden hacer zoom, buscar por código postal y hacer clic en los marcadores para ver dirección, horarios y datos de contacto. Cuando la densidad de marcadores es alta, el clustering agrupa ubicaciones cercanas en un marcador colectivo que se desglosa al hacer zoom. Un buscador típico con 100 ubicaciones y clustering carga en menos de 500ms.

Segundo escenario: mapas inmobiliarios y de propiedades. Inmobiliarias, administradores de fincas y promotoras muestran propiedades disponibles en un mapa. Los marcadores contienen información básica (precio, habitaciones, superficie) como popup y enlazan a la página de detalle. La extensión TYPO3 puede renderizar registros de una tabla Extbase como marcadores.

Tercer escenario: ubicaciones de eventos y turismo. Organizadores, asociaciones turísticas y ayuntamientos muestran POIs (Points of Interest), rutas y sedes de eventos en un mapa. Leaflet soporta además de marcadores de punto, líneas (para rutas de senderismo) y polígonos (para áreas), lo que lo convierte en una herramienta flexible para aplicaciones turísticas.

La arquitectura técnica separa limpiamente el backend de datos y el renderizado del mapa

La extensión TYPO3 almacena datos de ubicación como registros Extbase en una tabla propia. Cada registro contiene nombre, dirección, coordenadas (latitud/longitud), descripción y campos opcionales como horario, teléfono e imagen. Las coordenadas pueden introducirse manualmente o generarse automáticamente desde la dirección mediante un servicio de geocodificación.

En el frontend, la extensión renderiza un contenedor de mapa e inicializa Leaflet con JavaScript. Los tiles del mapa se cargan desde un servidor de tiles configurable. El estándar es OpenStreetMap, pero Mapbox, Stamen y otros proveedores son configurables via TypoScript. Los marcadores se pasan como array JSON al JavaScript, lo que funciona con buen rendimiento incluso con más de 500 ubicaciones.

El clustering se realiza mediante el plugin Leaflet.markercluster, que agrupa marcadores en niveles de zoom bajos y los desglosa al hacer zoom. Los umbrales de cluster son configurables. Para la búsqueda por código postal o localidad se filtra en el lado del cliente, lo que funciona hasta 1.000 marcadores sin soporte del servidor.

Los estilos del mapa son completamente personalizables: colores, tipografías, anchos de calle y detalles del mapa se controlan mediante configuración de tile layer y CSS personalizado. Comparado con Google Maps, cuyo estilizado es limitado, Leaflet ofrece control total sobre la apariencia.

Los problemas habituales afectan a geocodificación, disponibilidad de tile server y visualización responsive

Problema uno: errores de geocodificación con direcciones imprecisas. No todas las direcciones se resuelven correctamente. Especialmente polígonos industriales, nuevas urbanizaciones y direcciones rurales producen coordenadas inexactas. La solución: usar geocodificación automática como llenado inicial y revisar las coordenadas manualmente. La extensión debería mostrar una ventana de mapa en el backend donde el editor pueda corregir el marcador arrastrándolo.

Problema dos: disponibilidad del tile server. El servidor de tiles estándar de OpenStreetMap tiene una política de uso justo y puede aplicar rate limiting con tráfico alto. Para webs productivas con más de 50.000 cargas de mapa al mes se recomienda un tile server propio o un proveedor comercial como Mapbox o Maptiler. Los costes rondan los 5 a 50 euros al mes, todavía muy por debajo de Google Maps.

Problema tres: visualización responsive en móviles. Los mapas en pantallas pequeñas son difíciles de manejar porque el zoom entra en conflicto con el scroll de la página. La solución: restringir gestos táctiles del mapa a dos dedos (desactivar scrollWheelZoom y dragging en móviles) y ofrecer un botón “Ampliar mapa” que abra el mapa a pantalla completa.

Leaflet es a prueba de futuro, la extensión TYPO3 debe verificarse para v13

Leaflet como librería JavaScript es independiente de la versión de TYPO3 y se desarrolla activamente. La extensión TYPO3 que gestiona la integración backend y el renderizado debe verificarse al actualizar a v12 o v13. Los cambios en la API Extbase de v12 afectan a clases de repositorio y configuración de persistencia. En Gosign migramos integraciones Leaflet típicamente mediante un plugin personalizado en el propio Sitepackage que incorpora la librería Leaflet directamente y obtiene los datos de ubicación de una tabla Extbase o un endpoint JSON. Esto elimina la dependencia de la extensión y da control total sobre las actualizaciones. La propia librería Leaflet se incluye via npm o CDN y con un tamaño de 39 KB (comprimida) es significativamente más ligera que la API JavaScript de Google Maps (más de 185 KB), lo que impacta positivamente en el tiempo de carga.