Leaflet para TYPO3

Mapas OpenStreetMap via Leaflet substituem Google Maps sem custos de licença e risco de privacidade

Google Maps custa a partir de 28.000 carregamentos de mapa por mês e transfere dados de usuários a servidores nos EUA. Para empresas com localizador de filiais, store locator ou mapa de localização no site, esses são dois problemas de uma vez: orçamento e proteção de dados. Leaflet resolve ambos. A biblioteca JavaScript open-source renderiza mapas interativos com base em dados OpenStreetMap, roda completamente client-side e não tem custos de licença. A extensão TYPO3 integra Leaflet como elemento de conteúdo: editores mantêm localizações no backend, a extensão gera o mapa no frontend.

Para empresas com 5 a 500 localizações, Leaflet é a recomendação padrão. Somente quando funcionalidades específicas do Google como Street View, edifícios 3D ou dados de tráfego em tempo real são necessários, o Google Maps é a melhor escolha. Em todos os outros casos, Leaflet entrega a mesma funcionalidade com zero custos de licença e sem discussão de privacidade.

Cenários típicos de uso são localizadores de filiais, mapas imobiliários e localizações de eventos

O cenário mais frequente é o localizador de filiais ou localizações. Uma empresa com 20 a 200 filiais mostra todas as localizações em um mapa interativo. Usuários podem dar zoom, buscar por CEP e clicar em marcadores para ver endereço, horário de funcionamento e dados de contato. Com distribuição densa de marcadores, clustering agrupa localizações próximas em um marcador coletivo que se dissolve em marcadores individuais ao dar zoom. Um localizador de filiais típico com 100 localizações e clustering carrega em menos de 500ms.

Segundo cenário: mapas imobiliários e de objetos. Corretores, administradoras e construtoras mostram objetos disponíveis em um mapa. Os marcadores contêm informações básicas (preço, número de quartos, área) como popup e linkam para a página de detalhe.

Terceiro cenário: localizações de eventos e turismo. Organizadores, órgãos de turismo e cidades mostram POIs (Points of Interest), rotas e locais de eventos em um mapa. Leaflet suporta além de marcadores de ponto também linhas (para rotas de caminhada) e polígonos (para áreas).

Arquitetura técnica separa backend de dados e rendering de mapa de forma limpa

A extensão TYPO3 armazena dados de localização como registros Extbase em uma tabela própria. Cada registro contém nome, endereço, coordenadas (latitude/longitude), descrição e campos opcionais como horário de funcionamento, telefone e imagem. As coordenadas podem ser inseridas manualmente ou determinadas automaticamente a partir do endereço via serviço de geocoding.

No frontend, a extensão renderiza um elemento container de mapa e inicializa Leaflet via JavaScript. Os tiles do mapa são carregados de um servidor de tiles configurável. O padrão é OpenStreetMap, mas Mapbox, Stamen e outros provedores de tiles são alternáveis via TypoScript. Os marcadores são passados como array JSON ao JavaScript, o que permanece performante mesmo com mais de 500 localizações.

Clustering é realizado pelo plugin Leaflet.markercluster que agrupa marcadores em níveis de zoom baixos e dissolve ao dar zoom. Os limiares de cluster são configuráveis.

Problemas frequentes envolvem geocoding, disponibilidade de servidor de tiles e exibição responsiva

Problema um: erros de geocoding em endereços imprecisos. Nem todo endereço é corretamente resolvido pelo serviço de geocoding. Especialmente áreas industriais e endereços em regiões rurais entregam coordenadas imprecisas ou incorretas. A solução: usar geocoding automático como preenchimento inicial e verificar coordenadas manualmente.

Problema dois: disponibilidade do servidor de tiles. O servidor de tiles padrão do OpenStreetMap tem uma política de uso justo e pode aplicar rate limiting em tráfego alto. Para sites produtivos com mais de 50.000 carregamentos de mapa por mês, recomenda-se um servidor de tiles próprio ou provedor comercial como Mapbox ou Maptiler.

Problema três: exibição responsiva em dispositivos móveis. Mapas em telas pequenas são difíceis de usar porque o zoom colide com o scroll da página. A solução: restringir gestos touch no mapa a dois dedos e oferecer um botão “Ampliar mapa” que abre o mapa em modo tela cheia.

Leaflet é à prova de futuro, a extensão TYPO3 precisa ser verificada na v13

Leaflet como biblioteca JavaScript é independente da versão TYPO3 e é ativamente desenvolvida. A extensão TYPO3 que cuida da integração backend e do rendering precisa ser verificada em um upgrade para v12 ou v13. Na Gosign, migramos integrações Leaflet tipicamente por um plugin customizado no próprio sitepackage que incorpora diretamente a biblioteca Leaflet e obtém dados de localização de uma tabela Extbase ou endpoint JSON. Isso elimina a dependência da extensão e dá controle total sobre atualizações.