webmapping

Session 9: Bike Trail Tirol Beispiel

Repo vorbereiten

Etappennavigation implementieren

Bevor wir die GPX-Dateien visualisieren, implementieren wir eine einfache Etappennavigation als Pulldown. Beim Wechseln der Etappe im Menü werden wir auch zur entsprechenden Online-Seite wechseln.

a) LibreOffice Daten nach JSON konvertieren

Für die Implementierung des Pulldowns benötigen wir ein Javascript Etappenobjekt, das wir aus der LibreOffice Tabelle https://webmapping.github.io/biketirol/etappen.ods erstellen

Zur Umwandlung der Tabelle nach JSON verwenden wir Online Convert CSV to JSON https://www.convertcsv.com/csv-to-json.htm

COMMIT: https://github.com/webmapping/biketirol/commit/3e06316d9eaac51bd61c9582c711058c970ce4f6

b) das Pulldown mit einer for … of Schleife und .innerHTML befüllen

Wir schreiben zuerst eine for ... of Schleife (https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Statements/for...of) für das ETAPPEN-Objekt. Bei jedem Schleifendurchgang ist das jeweilige Etappen-Objekt als Variable etappe verfügbar

// Etappennavigation über Pulldownmenü
for (let etappe of ETAPPEN) {
    console.log(etappe);
    console.log(etappe.nr);
    console.log(etappe.user);
    console.log(etappe.titel);
}

COMMIT: https://github.com/webmapping/biketirol/commit/be0e8fcf15027e69b295b0251b2d691fbd679eb5

Dann ergänzen wir in index.html oberhalb des map-DIVs das Formularelement <select>. Innerhalb dieses <select>-Elements werden wir mit der for-Schleife <option>-Elemente für alle Etappen erzeugen - so kann man sie sich vorstellen:

<select id="pulldown">
    <option value="webmapping">Etappen 7: Scharnitz - Achensee</option>
</select>

Damit wir das Pulldown befüllen können, speichern wir in main-js mit document.querySelector("#pulldown") eine Referenz zum Pulldown und erzeugen den Markup der Option als Template-String:

let pulldown = document.querySelector("#pulldown");
for (let etappe of ETAPPEN) {
    pulldown.innerHTML += `
        <option value="${etappe.user}">Etappe ${etappe.nr}: ${etappe.titel}</option>
    `;
}

COMMIT: https://github.com/webmapping/biketirol/commit/8ff07f294c49f561c64a32d668fb609f8b4b3e92

Bei jedem Schleifendurchgang wird dabei ein <option>-Element zum .innerHTML des Pulldowns hinzugefügt. Als value verwenden wir den/die github Userin (etappe.user) der jeweiligen Etappe. Nummer (etappe.nr) und Titel der Etappe (etappe.titel) bilden den Label des Eintrag

Die eigene Etappe sollten wir vorselektieren - das geht über das Attribut selected bei <option>

Wir setzen es mit einer if-Abfrage bei der eigenen Etappe auf "selected", bei allen anderen auf den leeren String ""

for (let etappe of ETAPPEN) {
    let selected = "";
    if ( etappe.nr == 7) {
        selected = "selected";
    }
    pulldown.innerHTML += `
        <option ${selected} value="${etappe.user}">Etappe ${etappe.nr}: ${etappe.titel}</option>
    `;
}

COMMIT: https://github.com/webmapping/biketirol/commit/f3f21513a8768c5aa842ebfc230a79be72c5362e

c) bei Änderung im Pulldown zur Etappe wechseln

Immer wenn wir einen anderen Eintrag im Pulldown auswählen, wird ein Event ausgelöst - wir reagieren darauf mit einem EventListener

pulldown.onchange = function(evt) {
    console.log(evt, evt.target);
}

In evt.target finden wir das Ziel der Änderung, also das Pulldown-Menü

In evt.target.value landet der aktuell selektierte Wert unseres value-Attributs, also der/die github Userin

Damit können wir den Browser anweisen, zur gewünschten Seite zu wechseln - wir müssen nur window.location.href neu setzen:

// auf Wechsel in Pulldown reagieren
pulldown.onchange = function(evt) {
    window.location.href = `https://${evt.target.value}.github.io/biketirol`;
}

COMMIT: https://github.com/webmapping/biketirol/commit/490767f47d54cbdb1d64252325a445b234ba9578

Das Pulldown können wir natürlich auch mit CSS in main.css noch ein bißchen stylen

#pulldown {
    font-size: 1.1em;
    margin-bottom: 0.3em;
}

COMMIT: https://github.com/webmapping/biketirol/commit/b954b6bedba205c3940cab3f4118b13388faa5dd

GPX Daten visualisieren

GPX - das GPS Exchange Format kennt wohl jede(r), gängiges Format zum Aufzeichnen von Tracks mit GPS, am Handy, etc.- siehe https://en.wikipedia.org/wiki/GPS_Exchange_Format und Spezifikation https://www.topografix.com/gpx.asp

a) Leaflet Plugin leaflet-elevation.js initialisieren

b) Kosmetik über Optionen

COMMIT: https://github.com/webmapping/biketirol/commit/5c1b77f96c51a87b41124beebead643868a75612

Leaflet Minimap Plugin für die Kartennavigation

COMMIT: https://github.com/webmapping/biketirol/commit/1cc61149ba73476182a8f747ea0476a10eaf0442

Leaflet Fullscreen plugin

Auf der Plugin-Seite von Leaflet finden wir das Leaflet Plugin Leaflet.fullscreen (https://github.com/Leaflet/Leaflet.fullscreen).

Wie bei jedem Plugin, müssen wir zuerst Scripts und Styles des Plugins im <head>-Bereich von index.html hinzufügen - wir verwenden jsdelivr.com:

<!-- Leaflet fullscreen -->
<script src="https://cdn.jsdelivr.net/npm/leaflet-fullscreen@1.0.2/dist/Leaflet.fullscreen.min.js" integrity="sha256-RQN1bmEq/28pzVG8Csu34O677VNj5/1xl1wUGyDjMuo=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet-fullscreen@1.0.2/dist/leaflet.fullscreen.min.css">

Dann können wir das Plugin in main.js verwenden. Es gibt dabei zwei Möglichkeiten:

COMMIT: https://github.com/webmapping/biketirol/commit/72e9d4863ba1095ab27fa29bd94e21affc7d4382

Damit ist unser fertiges Bike Trail Tirol Beispiel hier verfügbar: https://webmapping.github.io/biketirol