Leaflet für TYPO3

OpenStreetMap-Karten über Leaflet ersetzen Google Maps ohne Lizenzkosten und DSGVO-Risiko

Google Maps kostet ab 28.000 Kartenaufrufen pro Monat Geld und überträgt Nutzerdaten an US-Server. Für Unternehmen mit Filialfinder, Store Locator oder Standortkarte auf der Website sind das zwei Probleme auf einmal: Budget und Datenschutz. Leaflet löst beides. Die Open-Source JavaScript-Bibliothek rendert interaktive Karten auf Basis von OpenStreetMap-Daten, läuft komplett clientseitig und hat keine Lizenzkosten. Die TYPO3-Extension integriert Leaflet als Content-Element: Redakteure pflegen Standorte im Backend, die Extension generiert die Karte im Frontend.

Für Unternehmen mit 5 bis 500 Standorten ist Leaflet die Standardempfehlung. Erst wenn Google-spezifische Features wie Street View, 3D-Gebäude oder Live-Verkehrsdaten benötigt werden, ist Google Maps die bessere Wahl. In allen anderen Fällen liefert Leaflet die gleiche Funktionalität bei null Lizenzkosten und ohne Datenschutz-Diskussion.

Typische Einsatzszenarien sind Filialfinder, Immobilienkarten und Event-Standorte

Das häufigste Szenario ist der Filial- oder Standortfinder. Ein Unternehmen mit 20 bis 200 Filialen zeigt alle Standorte auf einer interaktiven Karte. Nutzer können zoomen, nach Postleitzahl suchen und auf Marker klicken, um Adresse, Öffnungszeiten und Kontaktdaten zu sehen. Bei dichter Marker-Verteilung gruppiert Clustering nahegelegene Standorte zu einem Sammel-Marker, der beim Zoomen in Einzelmarker aufgelöst wird. Ein typischer Filialfinder mit 100 Standorten und Clustering lädt in unter 500ms.

Zweites Szenario: Immobilien- und Objektkarten. Makler, Hausverwaltungen und Wohnungsbaugesellschaften zeigen verfügbare Objekte auf einer Karte an. Die Marker enthalten Basisinformationen (Preis, Zimmeranzahl, Wohnfläche) als Popup und verlinken auf die Detailseite. Die TYPO3-Extension kann Objekt-Datensätze aus einer Extbase-Tabelle als Marker rendern.

Drittes Szenario: Event-Standorte und Tourismus. Veranstalter, Tourismusverbände und Städte zeigen POIs (Points of Interest), Routen und Veranstaltungsorte auf einer Karte. Leaflet unterstützt neben Punkt-Markern auch Linien (für Wanderrouten) und Polygone (für Gebiete), was es zum flexiblen Werkzeug für touristische Anwendungen macht.

Technische Architektur trennt Daten-Backend und Karten-Rendering sauber

Die TYPO3-Extension speichert Standort-Daten als Extbase-Records in einer eigenen Tabelle. Jeder Record enthält Name, Adresse, Koordinaten (Latitude/Longitude), Beschreibung und optionale Felder wie Öffnungszeiten, Telefonnummer und Bild. Die Koordinaten können manuell eingegeben oder über einen Geocoding-Service automatisch aus der Adresse ermittelt werden.

Im Frontend rendert die Extension ein Karten-Container-Element und initialisiert Leaflet per JavaScript. Die Karten-Tiles werden von einem konfigurierbaren Tile-Server geladen. Der Standard ist OpenStreetMap, aber auch Mapbox, Stamen und andere Tile-Provider sind per TypoScript umschaltbar. Die Marker werden als JSON-Array in das JavaScript übergeben, was auch bei 500+ Standorten performant bleibt.

Clustering wird über das Leaflet.markercluster-Plugin realisiert, das Marker auf niedrigen Zoomstufen zusammenfasst und beim Hineinzoomen auflöst. Die Cluster-Schwellwerte sind konfigurierbar. Für die Suche nach Postleitzahl oder Ort wird clientseitig gefiltert, was bei bis zu 1.000 Markern ohne serverseitige Unterstützung funktioniert.

Die Karten-Styles sind vollständig anpassbar: Farben, Schriftarten, Strassenbreiten und Kartendetails lassen sich über Tile-Layer-Konfiguration und Custom-CSS steuern. Im Vergleich zu Google Maps, dessen Styling eingeschränkt ist, bietet Leaflet volle Kontrolle über das Erscheinungsbild.

Häufige Probleme betreffen Geocoding, Tile-Server-Verfügbarkeit und responsive Darstellung

Problem eins: Geocoding-Fehler bei ungenauen Adressen. Nicht jede Adresse wird vom Geocoding-Service korrekt aufgelöst. Besonders Gewerbegebiete, Neubaugebiete und Adressen in ländlichen Regionen liefern ungenaue oder falsche Koordinaten. Die Lösung: Automatisches Geocoding als Erstbefüllung nutzen und die Koordinaten manuell prüfen. Die Extension sollte ein Kartenfenster im Backend anzeigen, über das der Redakteur den Marker per Drag-and-Drop korrigieren kann.

Problem zwei: Tile-Server-Verfügbarkeit. Der Standard-Tile-Server von OpenStreetMap hat eine Fair-Use-Policy und kann bei hohem Traffic Rate-Limiting anwenden. Für produktive Websites mit mehr als 50.000 Kartenabrufen pro Monat empfiehlt sich ein eigener Tile-Server oder ein kommerzieller Provider wie Mapbox oder Maptiler. Die Kosten liegen bei 5 bis 50 Euro pro Monat, immer noch deutlich unter Google Maps.

Problem drei: Responsive Darstellung auf Mobilgeräten. Karten auf kleinen Bildschirmen sind schwer zu bedienen, weil das Zoomen mit dem Swipen der Seite kollidiert. Die Lösung: Touch-Gesten auf der Karte mit zwei Fingern einschränken (scrollWheelZoom und dragging auf Mobilgeräten deaktivieren) und einen “Karte vergrössern”-Button anbieten, der die Karte im Vollbildmodus öffnet.

Leaflet ist zukunftssicher, die TYPO3-Extension muss bei v13 geprüft werden

Leaflet als JavaScript-Bibliothek ist vom TYPO3-Versionsstand unabhängig und wird aktiv weiterentwickelt. Die TYPO3-Extension, die die Backend-Integration und das Rendering übernimmt, muss bei einem Upgrade auf v12 oder v13 geprüft werden. Die Extbase-API-Änderungen in v12 betreffen Repository-Klassen und Persistenz-Konfiguration. Bei Gosign migrieren wir Leaflet-Integrationen typischerweise durch ein Custom-Plugin im eigenen Sitepackage, das die Leaflet-Bibliothek direkt einbindet und die Standort-Daten aus einer Extbase-Tabelle oder einem JSON-Endpoint bezieht. Das eliminiert die Abhängigkeit von der Extension und gibt volle Kontrolle über Updates. Die Leaflet-Bibliothek selbst wird per npm oder CDN eingebunden und ist mit einer Grösse von 39 KB (komprimiert) deutlich leichter als die Google Maps JavaScript API (185+ KB), was sich positiv auf die Ladezeit der Kartenseiten auswirkt.