Heute zeige ich euch, wie man mittels der JavaScript-Bibliothek Leaflet GeoJSON -Daten auf einer Karte in eigenen Anwendungen darstellen kann. Wie man dies mittels des Google Maps JavaScript API macht, habe ich in diesem Beitrag erklärt . Wir werden den gleichen Use Case nun mit Leaflet umsetzen.
Leaflet
Grundsätzlich gestaltet sich die Nutzung von Leaflet sehr einfach. Im Gegensatz etwa zum Google Maps JavaScript API kann Leaflet unter anderem auch das Kartenmaterial von Open Street Map einbinden, so dass wir ohne API-Key arbeiten können.
Unser minimales Beispiel sieht so aus, dass wir ein DIV-Element definieren, auf dem Leaflet dann die OSM-Karte darstellt. Im Header-Bereich binden wir Stylesheets und das Script für Leaflet ein:
1<head> 2 <title>Leaflet and GeoJSON</title> 3 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" 4integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" 5crossorigin=""/> 6<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" 7integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" 8crossorigin=""></script> 9</head>
Unser Body besteht im Wesentlichen aus dem DIV für die Map und einer JavaScript-Funktion:
1<body>
2<h1>Leaflet and GeoJSON</h1>
3<div id="map" style="width: 600px; height: 400px;"></div>
4<script>
5 window.onload = function() {
6 // set up the map
7 var map = new L.Map('map');
8 var osm = new L.TileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
9 minZoom: 0,
10 maxZoom: 20,
11 attribution: 'Map data © <a href="https://openstreetmap.org">OpenStreetMap</a> contributors'
12 });
13
14 // define view
15 map.setView(new L.LatLng(49.451993, 11.073397), 5);
16 map.addLayer(osm);
17</script>
18</body>
Wir erzeugen ein Objekt map, das die Map und eins, das den OSM-Karten-Layer (osm) repräsentiert. Durch den Aufruf map.setView(…) legen wir den Mittelpunkt der Karte und den initialen Zoom-Faktor fest. Beim Zoom-Faktor gilt: je größer, desto „tiefer“ zoomt man in die Karte.
Das Ergebnis kann dann so aussehen:
Im Folgenden werden wir nun sukzessive die Funktion window.onload 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 MultLineString diente.
Die Integration von GeoJSON-Daten in Leaflet kann über eins der Plugins erfolgen, die GeoJSON-Dateien verarbeiten können. Um mir aber eine weitere Abhängigkeit zu sparen, führe ich selber einen entsprechenden AJAX-Request aus (mehr machen die Plugins auch nicht) und füge die Antwort als als GeoJSON-Layer ein:
1window.onload = function() {
2 ...
3 var xhr = new XMLHttpRequest();
4 xhr.open('GET', 'ccbranches.geojson');
5 xhr.setRequestHeader('Content-Type', 'application/json');
6 xhr.onload = function() {
7 if (xhr.status === 200) {
8 L.geoJSON(JSON.parse(xhr.responseText)).addTo(map);
9 }
10 };
11 xhr.send();
12}
Standardmäßig werden GeoJSON-Punkte als blaue Marker gerendert, Linien ebenso:
Darstellung der GeoJSON-Daten anpassen
Das geht noch besser, indem wir Styling-Informationen ergänzen. Ein eigenes Icon für die Marker und die Farbe der Linie passen wir an, indem wir der Function L.geoJSON(…) weitere Parameter übergeben:
1window.onload = function() {
2 ...
3
4 // CC Icon
5 var ccIcon = L.icon({
6 iconUrl: 'cc-logo-black.png',
7 iconSize: [35, 35],
8 iconAnchor: [17, 17],
9 popupAnchor: [0, -28]
10 });
11
12 var xhr = new XMLHttpRequest();
13 xhr.open('GET', 'ccbranches.geojson');
14 xhr.setRequestHeader('Content-Type', 'application/json');
15 xhr.onload = function() {
16 if (xhr.status === 200) {
17 L.geoJSON(JSON.parse(xhr.responseText), {
18 // Marker Icon
19 pointToLayer: function (feature, latlng) {
20 return L.marker(latlng, {icon: ccIcon});
21 },
22 // Style
23 style: function(feature) {
24 return {color: '#808080', width:2};
25 }
26 }).addTo(map);
27 }
28 };
29 xhr.send();
30}
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 von Leaflet, das für viele Anwendungsfälle bereits ausreichen sollte, da es frei definierbare HTML-Snippets beinhalten kann. Dazu müssen wir nur eine weitere Funktion als Parameter übergeben:
1L.geoJSON(JSON.parse(xhr.responseText), {
2 // Marker Icon
3 pointToLayer: function (feature, latlng) {
4 return L.marker(latlng, {icon: ccIcon});
5 },
6 // Style
7 style: function(feature) {
8 return {color: '#808080', width:2};
9 },
10 // Popup
11 onEachFeature: function (feature, layer) {
12 layer.bindPopup("<b>" + feature.properties.name + '</b><br />'
13 + feature.properties.address);
14 }
15}).addTo(map);
Bei einem Klick auf einen Marker sehen wir dann ein Popup:
Zusammenfassung
Wir haben gesehen, wie man Leaflet 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 und den Inhalt des Ordners docroot als statischen Content in einen Web-Server werfen. 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/leaflet.html
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.