Leaflet for TYPO3

Leaflet with OpenStreetMap replaces Google Maps without license fees or GDPR risk

Since March 2025, Google Maps starts charging once you pass 10,000 map loads per month, and it transfers user data to US servers. For companies with a branch finder, store locator or location map on their website, that is two problems at once: budget and data protection. Leaflet solves both. The open-source JavaScript library renders interactive maps based on OpenStreetMap data, runs entirely client-side and has no license fees. The TYPO3 extension integrates Leaflet as a content element: editors maintain locations in the backend, and the extension generates the map in the frontend.

For companies with 5 to 500 locations, Leaflet is the default recommendation. Google Maps only becomes the better choice when Google-specific features such as Street View, 3D buildings or live traffic data are required. In every other case, Leaflet delivers the same functionality at zero license cost and without a privacy debate.

Typical use cases are store locators, property maps and event venues

The most common scenario is the branch or store locator. A company with 20 to 200 branches shows all its locations on an interactive map. Users can zoom, search by postal code and click a marker to see address, opening hours and contact details. Where markers sit close together, clustering groups nearby locations into one cluster marker that splits into individual markers as you zoom in. A typical store locator with 100 locations and clustering loads in under 500 ms.

The second scenario is real estate and property maps. Real estate agents, property managers and housing companies show available properties on a map. Each marker carries basic information (price, number of rooms, floor area) in a popup and links to the detail page. The TYPO3 extension can render property records from an Extbase table as markers.

The third scenario is event venues and tourism. Event organizers, tourism boards and cities display points of interest (POIs), routes and venues on a map. Besides point markers, Leaflet supports lines for hiking trails and polygons for areas, which makes it a flexible tool for tourism applications.

The technical architecture cleanly separates the data backend from map rendering

The TYPO3 extension stores location data as Extbase records in its own table. Each record contains name, address, coordinates (latitude/longitude), description and optional fields such as opening hours, phone number and image. Coordinates can be entered manually or derived automatically from the address via a geocoding service.

In the frontend, the extension renders a map container element and initializes Leaflet via JavaScript. The map tiles are loaded from a configurable tile server. The default is OpenStreetMap, but Mapbox, Stadia Maps (with the Stamen styles) and other tile providers can be switched in via TypoScript. Markers are handed to the JavaScript as a JSON array, which stays fast even with 500+ locations.

Clustering is handled by the Leaflet.markercluster plugin, which combines markers at low zoom levels and splits them apart as you zoom in. The cluster thresholds are configurable. Search by postal code or town is filtered client-side, which works for up to 1,000 markers without any server-side support.

The map styles are fully customizable: colors, fonts, road widths and map details can be controlled through the tile layer configuration and custom CSS. Compared with Google Maps, where styling options are limited, Leaflet gives you full control over the look and feel.

Common problems involve geocoding, tile server availability and responsive display

Problem one: geocoding errors with imprecise addresses. Not every address is resolved correctly by the geocoding service. Industrial parks, new developments and rural addresses in particular return imprecise or wrong coordinates. The fix: use automatic geocoding for the initial import and check the coordinates manually. The extension should offer a map view in the backend where editors can correct a marker by drag and drop.

Problem two: tile server availability. The standard OpenStreetMap tile server has a fair-use policy and may apply rate limiting under heavy traffic. For production websites with more than 50,000 map views per month, a dedicated tile server or a commercial provider such as Mapbox or MapTiler is recommended. The cost is €5 to €50 per month, still far below Google Maps.

Problem three: responsive display on mobile devices. Maps on small screens are hard to use because zooming collides with scrolling the page. The fix: restrict touch gestures on the map to two fingers (disable scrollWheelZoom and dragging on mobile devices) and offer an “Enlarge map” button that opens the map in full-screen mode.

Leaflet is future-proof, but the TYPO3 extension needs checking for v13

As a JavaScript library, Leaflet is independent of the TYPO3 version and under active development. The TYPO3 extension that handles backend integration and rendering, however, has to be checked when upgrading to v12 or v13. The Extbase API changes in v12 affect repository classes and persistence configuration. At Gosign, we typically migrate Leaflet integrations to a custom plugin in the project’s own sitepackage that includes the Leaflet library directly and pulls location data from an Extbase table or a JSON endpoint. This removes the dependency on the extension and gives full control over updates. The Leaflet library itself is included via npm or a CDN and, at 39 KB compressed, is far lighter than the Google Maps JavaScript API (185+ KB), which shortens the load time of every page with a map.