Web: https://webmapping-oer.github.io/1st-leaflet-map/
Source: https://github.com/webmapping-oer/1st-leaflet-map
Template: https://webmapping-oer.github.io/1st-leaflet-map/template.zip
Unter https://webmapping-oer.github.io/1st-leaflet-map/template.zip liegt ein vorbereitetes HTML/CSS/Javascript Template mit den Dateien index.html
, main.css
und main.js
(siehe Commit). Sie sind die Basis für unser erstes Leaflet Beispiel. Wir packen template.zip
am Desktop
in einem Unterverzeichnis 1stmap
aus und Öffnen dieses Verzeichnis mit Visual Studio Code (VScode ab jetzt) über File / Open Folder
.
Mit Hilfe des VScode Live Server Plugins von Ritwick Dey können wir die Webseite des Templates auf einem lokalen Webserver wie online im Web betrachten. Ein Klick aug Go Live
im rechten unteren Eck von VScode startet diesen Server und zeigt die noch recht unspektakuläre Seite im Standardbrowser an. Änderungen an unserer Seite werden später beim Speichern dort direkt angezeigt.
Screenshot des Karten-Templates von webmapping-oer unter der Lizenz CC0 1.0
Im ersten Schritt binden wir die Leaflet Bibliothek im <head>-Bereich von index.html
über https://cdnjs.com/ ein. Die Suche dort nach Leaflet bringt uns direkt zu https://cdnjs.com/libraries/leaflet. Mit dem Copy Script Tag Icon (</>) kopieren wir sowohl den Verweis auf leaflet.js
(die zentrale Javascript Bibliothek) als auch den Verweis zu leaflet.css
, dem Leaflet CSS Stylesheet und fügen beide in der index.html
Datei ein. Die Quelle der Leaflet Bibliothek von Volodymyr Agafonkin ergänzen wir zusätzlich im <footer> Bereich der Seite (siehe Commit).
<!-- Leaflet -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.css" />
Den Kartenbereich legen wir als <div>-Element im <article>-Bereich von index.html
fest. Über das id-Attribut map
können wir diesen Kartenbereich später im Javascript ansprechen und mit der Leaflet-Bibliothek dort die Karte zeichnen (siehe COMMIT).
<article>
<!-- Seiteninhalt -->
<div id="map"></div>
</article>
Die Größe und Randlinien der Karte definieren wir über CSS in main.css
(siehe COMMIT):
#map {
width: 100%;
height: 80vh;
border: 1px solid silver;
}
Screenshot des Templates mit Kartenbereich von webmapping-oer unter der Lizenz CC0 1.0
Damit ist das Layout vorbereitet und wir können die Karte in main.js
mit L.map()
, unserem ersten Aufruf an die Leaflet-Bibliothek, initialisieren (siehe Commit):
// Karte initialisieren
let map = L.map("map");
let map
speichert eine Referenz zur Karte in der Variablen map
L.map()
weist die Leaflet Bibliothek an, eine Karte zu initialisieren"map"
als Argument beim Aufruf legt fest, dass die Karte in einem Bereich mit dem id-Attribut map
, also unserem <div>-Element, gezeichnet werden soll.Screenshot der initialisierten Karte ohne Hintergrund Layer von webmapping-oer unter der Lizenz CC0 1.0
Die Zoom-Control Links Oben und der graue Kartenhintergrund signalisieren uns, dass die Initialisierung der Karte erfolgreich war und wir können den Ausschnitt mit map.setView()
auf Wien setzen. Als Mittelpunkt wählen wir den Stephansdom, dessen Koordinaten wir dem Wikipedia-Eintrag https://de.wikipedia.org/wiki/Wien entnehmen. Den Zoom-Level des Ausschnitts legen wir mit 12
fest - damit sollte später das gesamte Stadtgebiet von Wien sichtbar sein (siehe Commit).
// auf den Stephansdom blicken
map.setView([48.208493, 16.373118], 12);
Wohin wir genau blicken, wird erst im nächsten Schritt klar, denn wir ersetzen den grauen Hintergrund mit einem L.tileLayer()
der OpenStreetMap Karte
Kartenhintergründe werden bei Online Karten meist mit sogenannten Web Map Tile Services (WMTS) erzeugt. Ein vielfach genutzter und frei unter der Open Data Commons Open Database Lizenz (ODbL) verfügbarer WMTS-Dienst ist die OpenStreetMap. Wir binden sie als Leaflet TileLayer L.tileLayer()
ein (siehe Commit):
// Hintergrundkarte der OpenStreetMap hinzufügen
L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution: `© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors`
}).addTo(map);
Damit ist unsere Karte fast fertig, es fehlt nur noch der Maßstab, den wir als Leaflet Scale Control L.control.scale()
in der linken unteren Ecke platzieren. imperial: false
bewirkt, dass nur die metrische Skala angezeigt wird (siehe Commit):
// Maßstab
L.control.scale({
imperial: false
}).addTo(map);
Damit ist unsere erste Leaflet Karte fast fertig, denn wir wollen auch den Kartenmittelpunkt mit einem Marker und Popup hervorheben
Screenshot der ersten Leaflet Karte mit Hintergrund Layer der OpenStreetMap von webmapping-oer unter der Lizenz CC0 1.0
Über die Leaflet-Bibliothek können wir mittels map.setView()
nicht nur auf die Koordinaten des Stephansdoms blicken, sondern dort mit L.marker()
auch einen Standardmarker platzieren. Wir speichern ihn in einer Variablen marker
, setzen seine Koordinaten als Array auf die geographische Länge und Breite und hängen ihn mit .addTo(map)
an die Karte (siehe Commit):
// Marker für den Stephansdom hinzufügen
let marker = L.marker([48.208493, 16.373118]).addTo(map);
Das Popup für den Marker ergänzen wir mit marker.bindPopup()
, wobei wir den Inhalt des Popups als Javascript Template literal definieren. Nachdem der Inhalt jedes Popups auch HTML-Code sein kann, wählen wir eine Überschrift 4. Mit .openPopup()
können wir das Popup auch direkt anzeigen (siehe Commit):
// Popup zum Marker hinzufügen und öffnen
marker.bindPopup(`
<h4>Stephansdom</h4>
`).openPopup();
Screenshot der ersten Leaflet Karte mit Marker und Popup von webmapping-oer unter der Lizenz CC0 1.0
Damit ist unsere Karte fast fertig, denn wir wollen noch die Verwaltungsgrundkarte Österreichs basemap.at unter der Lizenz CC BY 4.0 an Stelle der OpenStreetMap als Kartenhintergrund verwenden. Um uns die Arbeit zu erleichtern, verwenden wir das Leaflet-Plugin Leaflet.providers und binden es wie die Leaflet-Bibliothek wieder über https://cdnjs.com/ ein. Die Suche dort nach Leaflet providers bringt uns direkt zu https://cdnjs.com/libraries/leaflet-providers. Mit dem Copy Script Tag Icon (</>) kopieren wir den Verweis auf leaflet-providers.js
in den <head>-Bereich von index.html
. Die Quelle des Leaflet.providers Plugins von Stefan Seelmann ergänzen wir zusätzlich im <footer> Bereich der Seite (siehe Commit):
<!-- Leaflet providers -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-providers/1.13.0/leaflet-providers.js"></script>
Statt dem L.tileLayer()
Aufruf der OpenStreetMap erzeugen wir mit L.control()
eine Leaflet Layer-Control und definieren den OpenStreetMap Eintrag über L.tileLayer.provider()
. Wir müssen nur das entsprechende Kürzel für die OpenStreetMap als Argument übergeben (siehe Commit). Die Demoseite des Leaflet.providers Plugins unter https://leaflet-extras.github.io/leaflet-providers/preview/ listet bequem alle verfügbaren Hintergrundlayer mit ihren Kürzeln auf.
L.control.layers({
"OpenStreetMap": L.tileLayer.provider("OpenStreetMap.Mapnik").addTo(map)
})
Damit die Layer Control in der Karte sichtbar wird, müssen wir sie mit .addTo(map)
wieder an die Karte hängen (siehe Commit):
L.control.layers({
"OpenStreetMap": L.tileLayer.provider("OpenStreetMap.Mapnik").addTo(map)
}).addTo(map);
Die beiden .addTo(map)
Aufrufe mögen anfangs verwirrend sein, sind aber zwei getrennte Dinge. Das erste .addTo(map)
beim OpenStreetMap-Layer bewirkt, dass dieser beim Laden der Karte direkt angezeigt wird. Das zweite .addTo(map)
kümmert sich darum, dass die Layer-Control in der rechten oberen Ecke der Karte als Hamburger-Menü angezeigt wird. Dort können wir jetzt fünf Layer der Verwaltungsgrundkarte Österreichs ergänzen. Die nötigen Kürzel finden wir wieder auf der Demoseite des Leaflet.providers Plugins. Mit addTo(map)
laden wir den BasemapAT Standard-Layer an Stelle der OpenStreetMap (siehe Commit):
L.control.layers({
"BasemapAT Standard": L.tileLayer.provider("BasemapAT.basemap").addTo(map),
"BasemapAT High-DPI": L.tileLayer.provider("BasemapAT.highdpi"),
"BasemapAT Grau": L.tileLayer.provider("BasemapAT.grau"),
"BasemapAT Gelände": L.tileLayer.provider("BasemapAT.terrain"),
"BasemapAT Oberfläche": L.tileLayer.provider("BasemapAT.surface"),
"OpenStreetMap": L.tileLayer.provider("OpenStreetMap.Mapnik"),
}).addTo(map);
Für das Orthofoto der Verwaltungsgrundkarte verwenden wir eine Kombination aus Bild und Beschriftung, die wir als L.layerGroup()
über einen Array der jeweiligen L.tileLayer.provider()
Layer definieren (siehe Commit):
"BasemapAT Orthofoto (beschriftet)": L.layerGroup([
L.tileLayer.provider("BasemapAT.orthofoto"),
L.tileLayer.provider("BasemapAT.overlay"),
]),
Screenshot der ersten Leaflet Karte mit Marker, Popup und Verwaltungsgrundkarte Österreich von webmapping-oer unter der Lizenz CC0 1.0