Leaflet: Marker PopUp über Link steuern

Claus Arndt, seines Zeichens Bedenken-Exorzist und OpenData-Aktivist der Stadt Moers nutze am 6 Juni 2016 sein Netzwerk, um herauszufinden ob und wie man mit Hilfe von Leaflet gesetzte Marker (POI) und dessen PopUp's über normale Links ansteuern kann.

Schnell kam eine bereits vorhandene Lösung, namens Bootleaf, ins Spiel. Meine persönliche Meinung ist, das dies eine bereits fertige Muster-Applikation ist, die nur noch mit eigenen Daten gefüllt werden muss. Also vielleicht nicht für jeden Anwendungsfall die beste bzw. flexibelste Lösung.

Mein Interesse war geweckt und so beschäftigte ich mich zum ersten Mal mit Leaflet und dessen Möglichkeiten. Ich habe ein einfaches Beispiel ausgearbeitet, um die geforderte Funktion zu implementieren.

Grundgedanke

Der Grundgedanke ist, während des setzen der einzelnen Marker auf die Karte, diese in einem Array zwischenzuspeichern. Als Schlüssel werden einfach die ID's der Marker genutzt. Die Marker kommen normalerweise aus einem GeoJSON.
Im Anschluss kann das Klick-Event auf präperierte Links mit einem Attribut data-id genutzt werden, um die Marker mittels ID aus dem Array zu holen, um anschließend die PopUps zu öffnen.

{
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "id": 1,
            "geometry": {
                "type": "Point",
                "coordinates": [6.540164, 51.350131]
            },
            "properties": {
                "name": "Zenbase HQ"
            }
        }
    ]
}

Die Umsetzung

Grundsätzlich benötigen wir für jede Leaflet-Anwendung eine initialisierte Karten-Ebene.

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: 'Your attributions of map data',
        maxZoom: 18,
    }
).addTo(map);

Ich denke, dass die meisten Anwendungen bereits vorhadenes GeoJSON verarbeiten. Dafür hat Leaflet bereits eine passende Methode, L.geoJson(),um GeoJSON zu parsen.

L.geoJson(places, {
    onEachFeature: function (feature, layer) {
        // set PopUp content with the name property of each marker
        layer.bindPopup(feature.properties.name);
    },
    pointToLayer: function (feature, latlng) {
        // init variable globally before: var mapMarkers = [];
        mapMarkers[feature.id] = L.marker(latlng);

        return mapMarkers[feature.id];
    }
}).addTo(map);

Zeile 6 ist die eigentlich Interessante. Hier befüllen wir ein Array dessen Schlüssel die ID der einzelnen POI's sind. So können wir beim Auslösen des Klick-Events auf einen Link mittels data-Attribut die ID nutzen, um die Marker-Instanz aus dem Array zu holen, um anschließend das PopUp zu öffnen.

// var markers = document.getElementById('markers');
// <ul id="markers"><li><a href="#" data-id="1">My Place</a></li></ul>
markers.addEventListener('click', function (e) {
    if (e.target.tagName === 'A') {
        var markerId = e.target.getAttribute('data-id');

        mapMarkers[markerId].openPopup()
        e.preventDefault();
    }
});

Das war's.

Kommentar schreiben

Benutzerdaten
Ihr Kommentar