Heute zeige ich euch, wie man GeoJSON-Daten in eigenen Anwendungen in Zusammenhang mit Google Maps anzeigen kann. In meinem GeoJSON-Tutorial hatte ich kurz angesprochen, wie man GeoJSON-Daten mit Drittanbieter-Diensten darstellen kann.
Zur Einbettung in eigene Anwendungen ist dieses Vorgehen aber wenig geeignet, daher werfen wir heute einen Blick auf das Google Maps JavaScript API, mit dem wir Karten von Google Maps in unsere Web-Anwendung einbetten und sehr einfach mit GeoJSON-Daten anreichern können.
Google Maps JavaScript API
Grundsätzlich gestaltet sich die Nutzung des Google Maps JavaScript APIs sehr einfach. Um es nutzen zu können, müssen wir uns allerdings erst einen API-Key generieren .
Beachtet bitte, dass die Nutzung ab einer gewissen Größenordnung kostenpflichtig ist. Wenn ihr euch keinen eigenen API-Key generieren wollt, könnt ihr trotzdem diesen Artikel lesen, nur die Beispiele nicht selber lokal ausführen. Meinen eigenen API-Key werde ich in Sourcecode-Beispielen symbolisch als [API_KEY] darstellen.
Unser minimales Beispiel sieht so aus, dass wir ein DIV-Element definieren, auf dem die Google Map dann dargestellt wird. Die Initialisierung geschieht in einer Callback-Funktion, die vom Google Maps API aufgerufen wird:
1<!DOCTYPE html>
2<html>
3 <body>
4 <div id="map" style="width: 600px; height: 400px;"</div>
5 <script>
6 function initMap() {
7 var map = new google.maps.Map(document.getElementById('map'), {
8 center: {lat: 49.451993, lng: 11.073397}
9 , zoom: 5
10 });
11 }
12 </script>
13 <script async defer
14 src="https://maps.googleapis.com/maps/api/js?key=[API_KEY]&callback=initMap"
15 </script>1617
Die Attribute center und zoom legen den Mittelpunkt der Karte und den Zoom-Faktor fest. Beim Zoom-Faktor gilt: Je größer der Wert, desto „tiefer“ zoomt man in die Karte. Das Ergebnis kann dann so aussehen:
Im Folgenden werden wir nun suksessive die Funktion initMap() erweitern, um weitere Funktionalität zu ergänzen.
GeoJSON
Wir stellen eine GeoJSON-Datei ccbranches.geojson mit den Niederlassungen der codecentric AG dar, die auch bereits in meinem GeoJSON-Tutorial als Beispiel für einen MultiLineString diente. Dazu ist nur eine weitere Code-Zeile notwendig:
1function initMap() {
2 var map = new google.maps.Map(document.getElementById('map'), {
3 center: {lat: 49.451993, lng: 11.073397}
4 , zoom: 5
5 });
6
7 // Load GeoJSON
8 map.data.loadGeoJson('ccbranches.geojson');
9}
Standardmäßig werden GeoJSON-Punkte als die typischen roten Marker gerendert, Linien in schwarzer Farbe:
Darstellung der GeoJSON-Daten anpassen
Das geht noch besser, indem wir Styling-Informationen ergänzen:
1function initMap() {
2 var map = new google.maps.Map(document.getElementById('map'), {
3 center: {lat: 49.451993, lng: 11.073397}
4 , zoom: 5
5 });
6
7 // Styling
8 map.data.setStyle({
9 icon: "cc-logo-black.png",
10 strokeColor: "#808080",
11 strokeWeight: 2,
12 clickable: true
13 });
14
15 // Load GeoJSON
16 map.data.loadGeoJson('ccbranches.geojson');
17}
Wir definieren ein eigenes Marker-Icon, ändern Eigenschaften der Linien und unsere Geometrien sollen klickbar sein (mehr dazu gleich). Die Karte sieht nun so aus:
Schnell mal ein Popup
Beim Klick auf einen Marker sollen nun noch bestimmte Properties des jeweiligen GeoJSON-Features (in unserem Fall Name der Niederlassung und Adresse) angezeigt werden. Dazu verwenden wir das Standard-Popup aus dem Google API, das für viele Anwendungsfälle bereits ausreichen sollte, da es frei definierbare HTML-Snippets beinhalten kann:
1function initMap() {
2 var map = new google.maps.Map(document.getElementById('map'), {
3 center: {lat: 49.451993, lng: 11.073397}
4 , zoom: 5
5 });
6
7 // Styling
8 map.data.setStyle({
9 icon: "cc-logo-black.png",
10 strokeColor: "#808080",
11 strokeWeight: 2,
12 clickable: true
13 });
14
15 // Load GeoJSON
16 map.data.loadGeoJson('ccbranches.geojson');
17
18 // Click listener
19 map.data.addListener('click', function(event) {
20 var popup = new google.maps.InfoWindow({
21 content:
22 "<b>" + event.feature.getProperty("name") + "</b><br/>"
23 + event.feature.getProperty("address"),
24 position: event.latLng
25 });
26 popup.open(map);
27 });
28}
Wir regisitrieren einen Listener für das click-Event, mit dem wir ein neues Objekt vom Typ InfoWindow konstruieren. Das Feld content ist der Inhalt des Popups, in das wir Daten aus dem GeoJSON-Feature einfließen lassen, das wir als Eigenschaft event.feature abgreifen können. Die position des Popups soll der des Events entsprechen. Diese steht unter event.latLng zur Verfügung.
Bei einem Klick auf einen Marker sehen wir dann ein Popup:
Zusammenfassung
Wir haben gesehen, wie man das Google Maps JavaScript API zur Darstellung von Karten nutzen kann. Eigene Geo-Daten im GeoJSON-Format sind extrem einfach einzubinden, wobei die Darstellung noch anpassbar ist. Interaktionen mit den Geometrien haben wir am Beispiel eines einfachen Popups demonstriert.
Die vollständigen Code-Beispiele gibt es in meinem GitHub-Repository ttrelle/geojson-examples .
Einfach dieses Repository klonen, den Inhalt des Ordners docroot als statischen Content in einen Web-Server werfen und in der Datei index.html den eigenen API-Key eintragen. Noch einfacher geht es mit dem beiliegenden docker-compose.yml:
1$ docker-compose up
Und schon ist das vollständige Beispiel abrufbar unter
1http://localhost:8080
War dieser Beitrag hilfreich?
Weitere Beiträge
von Tobias Trelle
17.12.2018 Dein Job bei codecentric?
Jobs
Agile Developer und Consultant (w/d/m)
Alle Standorte
Weitere Artikel in diesem Themenbereich
Entdecke spannende weiterführende Themen und lass dich von der codecentric Welt inspirieren.
Gemeinsam bessere Projekte umsetzen.
Wir helfen deinem Unternehmen.
Du stehst vor einer großen IT-Herausforderung? Wir sorgen für eine maßgeschneiderte Unterstützung. Informiere dich jetzt.
Hilf uns, noch besser zu werden.
Wir sind immer auf der Suche nach neuen Talenten. Auch für dich ist die passende Stelle dabei.
Blog-Autor*in
Tobias Trelle
Software Architect
Du hast noch Fragen zu diesem Thema? Dann sprich mich einfach an.
Du hast noch Fragen zu diesem Thema? Dann sprich mich einfach an.