/*
let sightLayer = L.featureGroup();
layerControl.addOverlay(sightLayer, "Sehenswürdigkeiten");
let mrk = L.marker([ stephansdom.lat, stephansdom.lng]).addTo(sightLayer);
sightLayer.addTo(map);
*/
https://geojson.org/ liefert die Antwort: GeoJSON is a format for encoding a variety of geographic data structures
https://de.wikipedia.org/wiki/GeoJSON zeigt uns ein paar Beispiele für die einzelnen Geometrietypen
mehr müssen wir vorerst nicht wissen und wir holen uns ein erstes Real World Beispiel vom OpenData Auftritt der Stadt Wien - links unten in unserer Wienkarte finden wir bei Datenquellen den Link dorthin (https://digitales.wien.gv.at/open-data/), wir öffnen ihn in einem neuen Tab.
über die suche Sehens finden wir den Datensatz Sehenswürdigkeiten Standorte Wien bei https://data.gv.at, dem OpenData Portal von Österreich
auf der Katalog Seite der Sehenswürdigkeiten finden wir den Link zum GeoJSON bei WFS GetFeature (JSON) JSON
über Mehr Information landen wir auf der Detailsseite mit der gewünschten URL
wir sehen uns die Datei SEHENSWUERDIGOGD.json in VS Code an und verwenden natürlich F1 Beautify file damit wir die Struktur besser erkennen
wir erkennen, dass es sich um eine Sammlung von Features handelt, wieviele es insgesamt sind und in welcher Projektion sie vorliegen
{
"type": "FeatureCollection",
"totalFeatures": 63,
"features": [],
"crs": {
"type": "name",
"properties": {
"name": "urn:ogc:def:crs:EPSG::4326"
}
}
}
die einzelnen Features sind im features-Array zu finden - dessen Einträge sind wiederum Javascript-Objekte
{
"type": "Feature",
"id": "SEHENSWUERDIGOGD.411009",
"geometry": {
"type": "Point",
"coordinates": [16.373675865880358, 48.210760467880625]
},
"geometry_name": "SHAPE",
"properties": {
"OBJECTID": 411009,
"NAME": "Ankeruhr",
"ADRESSE": "Hoher Markt 10/11",
"WEITERE_INF": "http://www.wien.info/article.asp?IDArticle=2018",
"THUMBNAIL": "https://www.wien.gv.at/viennagis/bubble/ankeruhr.jpg",
"SE_ANNO_CAD_DATA": null
}
}
wir erkennen die Geometrie in geometry und die Attribute in properties
würde dieses Feature-Objekt in einer Variablen geoJsonPoint gespeichert sein, könnten wir so auf die einzelnen Werte zugreifen
geoJsonPoint.geometry.coordinates // [16.373675865880358, 48.210760467880625]
geoJsonPoint.geometry.coordinates[0] // 16.373675865880358
geoJsonPoint.geometry.coordinates[1] // 48.210760467880625
geoJsonPoint.properties.NAME // Ankeruhr
geoJsonPoint.properties.ADRESSE // Hoher Markt 10/11
geoJsonPoint.properties.THUMBNAIL // https://www.wien.gv.at/viennagis/bubble/ankeruhr.jpg
geoJsonPoint.properties.WEITERE_INF // http://www.wien.info/article.asp?IDArticle=2018
Leaflet versteht das GeoJSON-Format und kann es automatisch in Marker, Linien und Flächen umwandeln. Dazu müssen wir die Daten aber zuerst laden und das geht mit Hilfe einer Funktion, die noch dazu asynchron ausgeführt wird - wir müssen uns also zuerst noch kurz mit Funktionen beschäftigen
Eine Funktion ist vereinfacht gesagt ein Codeblock mit einem Namen, der “irgend etwas tut” wenn wir ihn aufrufen. Beim Aufruf können wir Parameter für “das Tun” innerhalb der Funktion mitschicken und wenn der Codeblock abgearbeitet ist, kann die Funktion auch wieder einen einzelnen Wert, einen Array oder eine Objekt zurückliefern.
eine einfach Funktion zum Addieren von zwei Zahlen sieht damit so aus:
funtion addiere (zahl1, zahl2) {
let summe = zahl1 + zahl2;
return summe;
}
um die Zahlen 2 und 4 zu addieren, müssen wir die Funktion mit den beiden Zahlen als Parameter aufrufen. Das Ergebnis speichern wir in der Variablen ergebnis und zeigen es mit console.log an
let ergebnis = addiere(2, 4);
console.log(ergebnis);
genau so eine Funktion werden wir jetzt schreiben, um die GeoJSON-Daten der Sehenswürdigkeiten zu laden
so sieht diese Funktion zum Laden aus :-o
// Sehenswürdigkeiten laden
async function loadSites(url) {
let response = await fetch(url);
let geojson = await response.json();
console.log(geojson);
}
loadSites("https://data.wien.gv.at/daten/geo?service=WFS&request=GetFeature&version=1.1.0&typeName=ogdwien:SEHENSWUERDIGOGD&srsName=EPSG:4326&outputFormat=json");
was passiert dabei?
in der ersten Zeile wird eine asynchrone (async) Funktion (function) mit dem Namen loadSites definiert, die als Parameter eine Internetadresse (url) erwartet
der Codeblock der Funktion wird durch geschwungene Klammern ({}) abgegrenzt
in der Funktion wird im ersten Schritt auf die Antwort (response) des Servers gewartet (wait) die er beim Aufruf (fetch) der Internetadresse (url) zurückliefert
ist die Antwort angekommen, kann im zweiten Schritt das GeoJSON-Objekt der Antwort (response.json) in der Variablen geojson gespeichert werden. Auch das kann dauern, deshalb warten wir wieder, bis es soweit ist (wait)
F12 zeigt uns schließlich in der Konsole das geladenen GeoJSON-Objekt
Wichtig: die Funktion wird natürlich nur ausgeführt, wenn wir sie aufrufen (loadSites("https://...") und dabei die Internetadresse des gewünschten GeoJSON Files übergeben - diese “landet” in der Funktion dann als Variable url
Zum Visualisieren benötigen wir noch eine Zeile Code. Wir verwenden die Leaflet Methode L.geoJSON, die wir in der Leaflet Dokumentation unter Other Layers / GeoJSON finden. Im Abschnitt Factory sehen wir, dass wir das GeoJSON-Objekt als ersten Parameter übergeben können, die Optionen brauchen wir vorerst nicht. Wie schon bei früheren Layern, verwenden wir .addTo(map) um den GeoJSON-Layer an die Karte zu hängen.
async function loadSites(url) {
// ...
L.geoJSON(geojson).addTo(map);
}
Die Marker für die Sehenswürdigkeiten sind damit auf der Karte sichtbar
Noch eleganter ist es, den GeoJSON-Layer in ein eigenes Overlay zu schreiben. Vor dem L.geoJSON-Aufruf definieren wir das Overlay als L.featureGroup, fügen es zur Karte hinzu und hängen es mit einem Label in die Layercontrol ein
let overlay = L.featureGroup();
layerControl.addOverlay(overlay, "Sehenswürdigkeiten");
overlay.addTo(map);
Den L.geoJSON() Layer müssen wir jetzt nur noch in das Overlay und nicht in die Karte direkt schreiben
L.geoJSON(geojson).addTo(overlay);
Damit kann der Sehenswürdigkeiten Layer ein- und ausgeschaltet werden
Über die Suche bei DigitalesWien finden wir Layer und implementieren sie mit den jeweiligen Vorgaben
loadStops
Overlay Label “Haltestellen Vienna Sightseeing”
loadLines
Overlay Label “Liniennetz Vienna Sightseeing”
loadZones
Overlay Label “Fußgängerzonen”
loadHotels
Overlay Label “Hotels und Unterkünfte”