wien

Wien Beispiel HOWTO (Teil 3) - Icons für Punktlayer verwenden

Layer Sehenswürdigkeiten verfeinern

a) Popup hinzufügen

b) ein eigenes Icon statt dem Marker verwenden

Layer Bushaltestellen verfeinern

Bevor wir weiterarbeiten, setzen wir den Zoomfaktor beim Laden der Karte auf 16 und Blicken damit auf die Wiener Innenstadt

🔗 COMMIT

a) Farbige Icons für die Bushaltestellen erzeugen

Den Haltestellenlayer erzeugen wir mit Copy-Paste des Codes der Sehenswürdigkeiten und ein paar kleinen Änderungen in vier Schritten

  1. wir kopieren den geamten L.geoJSON() Code der Sehenswürdigkeiten und überschreiben damit den bestehenden L.geoJSON() Aufruf in der Funktion loadStops

  2. wir bessern den Popup-Code aus und verwenden die Attribute STAT_NAME und LINE_NAME

  3. wir bessern die iconUrl aus und verwenden icons/bus.png statt icons/photo.png

  4. wir löschen den Kommentar beim Funktionsaufruf loadStops("https://...") und aktivieren damit das Zeichnen des Haltestellen Layers

L.geoJSON(geojson, {
    pointToLayer: function(geoJsonPoint, latlng) {
        let popup = `
            <strong>${geoJsonPoint.properties.LINE_NAME}</strong><br>
            Station ${geoJsonPoint.properties.STAT_NAME}
        `;
        return L.marker(latlng, {
            icon: L.icon({
                iconUrl: "icons/bus.png",
                iconAnchor: [16, 37],
                popupAnchor: [0, -37]
            })
        }).bindPopup(popup);
    }
}).addTo(overlay);
loadStops("https://data.wien.gv.at/daten/geo?service=WFS&request=GetFeature&version=1.1.0&typeName=ogdwien:TOURISTIKHTSVSLOGD&srsName=EPSG:4326&outputFormat=json");

🔗 COMMIT

Ein Blick auf die Attribute der Bushaltestellen zeigt, dass zusätzlich zum Namen der Linie in LINIE_NAME, jede Linie eine LINIE_IDbesitzt, deren Werte von 1 bis 6 gehen.

Diese LINE_ID wird entscheiden, welches Icon wir verwenden und deshalb generieren wir bei der Map Icons Collection sechs Icons mit passenden Farben der Webseite Colors - A nicer color palette for the web

Übungsaufgabe: 6 Icons nach folgenden Vorgaben erzeugen

Lösung für die URLs bei der Map Icons Collection

🔗 COMMIT

Damit bleibt noch, die Icons je nach LINE_ID zu verwenden, wir bedienen uns wieder der Template-Syntax mit Backticks bei der iconUrl und erzeugen Links zu den Icons bus_1.png bis bus_6.png. Die Zahl, und damit die Farbe, folgt dem Attribut LINE_ID

icon: L.icon({
    iconUrl: `icons/bus_${geoJsonPoint.properties.LINE_ID}.png`,
    // ...
})

🔗 COMMIT

Layer Hotels und Unterkünfte verfeinern

Bevor wir die Funktion laodHotels verändern, besorgen wir uns drei Icons für die Hotels und Unterkünfte und speichern sie im Verzeichnis icons/

🔗 COMMIT

Danach erzeugen wir den Layer für Hotels und Unterkünfte wieder mit Copy-Paste, diesmal des Codes der Haltestellen und ein paar kleinen Änderungen in den bekannten vier Schritten

  1. wir kopieren den geamten L.geoJSON() Code der Haltestellen und überschreiben damit den bestehenden L.geoJSON() Aufruf in der Funktion loadHotels

🔗 COMMIT

  1. wir bessern den Popup-Code aus und verwenden die Attribute ADRESSE, BETRIEB, BETRIEBSART_TXT, KATEGORIE_TXT, KONTAKT_EMAIL, KONTAKT_TEL, und, WEBLINK1

     let popup = `
     <p>
         <strong>
             ${geoJsonPoint.properties.BETRIEB} -
             ${geoJsonPoint.properties.BETRIEBSART_TXT}
             ${geoJsonPoint.properties.KATEGORIE_TXT}
         </strong>
         <br>
         ${geoJsonPoint.properties.ADRESSE}
     </p>
     <hr>
     <address>
         Tel.:${geoJsonPoint.properties.KONTAKT_TEL}<br>
         E-Mail: <a href="mailto:${geoJsonPoint.properties.KONTAKT_EMAIL}">${geoJsonPoint.properties.KONTAKT_EMAIL}</a><br>
         Web: <a href="${geoJsonPoint.properties.WEBLINK1}" target="Wien">${geoJsonPoint.properties.WEBLINK1}</a>
     </address>
 `;
    • target="Wien" bewirkt wieder, dass alle Weblinks im selben Tab geöffnet werden

🔗 COMMIT

  1. wir bessern die iconUrl aus und verwenden vorerst icons/hotel_0star.png statt icons/bus.png für alle Icons. Die Unterscheidung nach Typen folgt später

🔗 COMMIT

  1. wir löschen den Kommentar beim Funktionsaufruf loadHotels("https://...") und aktivieren damit das Zeichnen des Hotel Layers

🔗 COMMIT

Bleibt noch, die Hotels und Unterkünfte nach Typen zu unterscheiden. Dazu verwenden wird das Attribut BETRIEBSART und ermitteln in einem if, else if, else Block das passende Icon für die Werte H (Hotel), P (Pension) und A (Appartment). Wir speichern den gefundenen Icon-Namen in einer Variablen icon, die wir vor der if-Abfrage initialisieren.

let icon;
if (geoJsonPoint.properties.BETRIEBSART == "H") {
    icon = "hotel_0star";
} else if (geoJsonPoint.properties.BETRIEBSART == "P") {
    icon = "lodging_0star";
} else {
    icon = "apartment-2";
}

🔗 COMMIT

Den gefundenen Icon-Namen setzen wir schließlich bei der iconUrl ein. Damit werden je nach Typ, verschiedene Icons angezeigt.

icon: L.icon({
    iconUrl: `icons/${icon}.png`,
    // ...
})

🔗 COMMIT