Wir loggen uns bei https://github.com/username ein und dann: Create a new repository / “wien”
danach clonen wir https://github.com/username/wien.git in VS Code lokal
Template auspacken, Inhalte ins wien-Verzeichnis verschieben, alles hinzufügen und committen
was ist neu im Template? In main.css verwenden wir display: flex, um die drei Bereiche für das Wappen, die Überschrift und die Links gleichmäßig über die Breite zu verteilen.
```css header { display: flex; justify-content: space-between; }
Mit CSS-Flexbox kann man noch viel mehr am Layout feilen - die MDN Docs Flexbox geben einen ersten Überblick, was alles möglich ist.
Push zurück auf https://github.com/username/wien
online verfügbar machen - der 2. Weg nach einem Repo username.github.io, das dann automatisch unter https://usernmane.github.io erreichbar ist
Beim wien-Repo: Settings -> Pages -> Source -> “main” wählen und “Save”
Your site is ready to be published at https://username.github.io/wien/
warten, es wird irgendwann verfügbar sein ;-)
in der Zwischenzeit bauen wir an der Seite weiter
bevor wir Leaflet.providers verwenden, bereiten wir den Blick auf den Stephansdom aus deren Wikipedia-Koordinate vor
let stephansdom = {
lat: 48.208493,
lng: 16.373118,
title: "Stephansdom"
};
Startlayer über Leaflet providers Plugin definieren und die Karte initialisieren
Quelle: Leaflet.providers Plugin
Demoapplikation für alle verfügbaren WMTS-Hintergründe des Plugins - wir werden BasemapAT.grau verwenden
in index.html: das Javascript von https://cdnjs.com/libraries/leaflet-providers einbinden
<!-- Leaflet providers plugin -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-providers/1.13.0/leaflet-providers.min.js" integrity="sha512-5EYsvqNbFZ8HX60keFbe56Wr0Mq5J1RrA0KdVcfGDhnjnzIRsDrT/S3cxdzpVN2NGxAB9omgqnlh4/06TvWCMw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
in main.js: Startlayer mit BasemapAT.grau definieren, die Karte initialisieren, auf den Stephansdom blicken und dabei den Startlayer verwenden.
let startLayer = L.tileLayer.provider("BasemapAT.grau");
let map = L.map("map", {
center: [ stephansdom.lat, stephansdom.lng ],
zoom: 12,
layers: [
startLayer
],
});
Layernavigation über L.control.layers mit dem Startlayer hinzufügen - wir verwenden startLayer als ersten Eintrag wieder, damit das Umschalten gleich funktioniert.
let layerControl = L.control.layers({
"BasemapAT Grau": startLayer,
}).addTo(map);
alle verfügbaren basemap.at Layer ergänzen
für einzelne Layer verwenden wir L.tileLayer.provider
let layerControl = L.control.layers({
"BasemapAT Grau": startLayer,
"Basemap Standard": L.tileLayer.provider("BasemapAT.basemap"),
"Basemap High-DPI": L.tileLayer.provider("BasemapAT.highdpi"),
"Basemap Gelände": L.tileLayer.provider("BasemapAT.terrain"),
"Basemap Oberfläche": L.tileLayer.provider("BasemapAT.surface"),
"Basemap Orthofoto": L.tileLayer.provider("BasemapAT.orthofoto"),
"Basemap Beschriftung": L.tileLayer.provider("BasemapAT.overlay"),
}).addTo(map);
für den kombinierten Layer beim Orthofoto mit Beschriftung nützen wir L.layerGroup zur Gruppierung der beiden L.tileLayer.provider Layer als Array
let layerControl = L.control.layers({
// bestehende Layer ...
"Basemap mit Orthofoto und Beschriftung": L.layerGroup([
L.tileLayer.provider("BasemapAT.orthofoto"),
L.tileLayer.provider("BasemapAT.overlay"),
])
}).addTo(map);
zusätzlich klappen wir die Layer control gleich aus
layerControl.expand();
Overlay für den Stephansdom vorbereiten
zuerst in der Variablen sightLayer eine L.featureGroup definieren
let sightLayer = L.featureGroup();
dann hängen wir diese featureGroup mit einem Label in die Layer control über .addOverlay ein
layerControl.addOverlay(sightLayer, "Sehenswürdigkeiten");
Marker für Stephansdom hinzufügen: der Marker wird jetzt nicht an die map sondern an das Overlay sightLayerangehängt
let mrk = L.marker([ stephansdom.lat, stephansdom.lng]).addTo(sightLayer);
Overlay an die Karte hängen
sightLayer.addTo(map);
L.control.scale platziert einen Maßstab im linken, unteren Eck
L.control.scale().addTo(map);
per Default werden sowohl Meter als auch Meilen angezeigt. Wenn wir nur Meter wollen, hilft uns das Options-Objekt beim Aufruf über die Boolean Option imperial weiter
L.control.scale({
imperial: false,
}).addTo(map);
Quelle: Leaflet.fullscreen Plugin
in index.html: Javascript und CSS-Stile von https://github.com/Leaflet/Leaflet.fullscreen einbinden (siehe Including via CDN)
<!-- Leaflet fullscreen plugin -->
<script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/Leaflet.fullscreen.min.js'></script>
<link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/leaflet.fullscreen.css' rel='stylesheet' />
in main.js, am Ende des Skripts
L.control.fullscreen().addTo(map);
Quelle: Leaflet.MiniMap Plugin (Demo)
in index.html: Javascript und CSS-Stile von https://cdnjs.com/libraries/leaflet-minimap einbinden
<!-- Leaflet MiniMap -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-minimap/3.6.1/Control.MiniMap.min.js" integrity="sha512-WL3nAJlWFKoDShduxQRyY3wkBnQsINXdIfWIW48ZaPgYz1wYNnxIwFMMgigzSgjNBC2WWZ8Y8/sSyUU6abuF0g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet-minimap/3.6.1/Control.MiniMap.min.css" integrity="sha512-qm+jY0iQ4Xf5RL79UB75REDLYD0jtvxxVZp2RVIW8sm8RNiHdeN43oksqUPrBIshJtQcVPrAL08ML2Db8fFZiA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
in main.js:
in der Github-Anleitung finden wir unter Using the MiniMap control ein Beispiel, wie wir die MiniMap einbinden können. Statt dem osm2 Layer verwenden wir einen neuen Tilelayer unsers Leaflet.providers Plugins. Wichtig: auch wenn es verlockend ist, den bereits definierten Startlayer zu verwenden, muss eine neuer Layer verwendet werden, sonst funktioniert die MiniMap nicht richtig.
let miniMap = new L.Control.MiniMap(
L.tileLayer.provider("BasemapAT")
).addTo(map);
im wahrsten Sinne “neu” ist das new vor L.Control.MiniMap - es bewirkt, dass ein neues MiniMap-Objekt erzeugt wird und ist gleich zu setzen mit einem Aufruf L.control.minimap() ohne new. Grundsätzlich sollten alle Leaflet Plugins auf diese zwei Arten verwendbar sein, die meisten verwenden allerding die Form ohne new mit Kleinschreibung der Methode. Wir könnten also unsere bisherigen Plugins jeweils in zwei Arten verwenden:
L.control.fullscreen() == new L.Control.Fullscreen()
L.control.minimap() == new L.Control.MiniMap()
über das Options-Objekt von L.Control.MiniMap können wir die Übersichtskarte noch ein-/ausklappbar machen
let miniMap = new L.Control.MiniMap(
L.tileLayer.provider("BasemapAT"), {
toggleDisplay: true
}
).addTo(map);