//

Leaflet und GeoJSON-Daten

11.6.2018 | 3 Minuten Lesezeit

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>
10

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 &copy; <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>
19

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}
13

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}
31

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);
16

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
2

Und schon ist das vollständige Beispiel abrufbar unter

1http://localhost:8080/leaflet.html
2

Beitrag teilen

Gefällt mir

0

//

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.