Animierter SVG Karten Marker

Leaflet.js ist eine der bekanntesten Javascript Bibliotheken, um interaktive Karten im Netz zu veröffentlichen.

Während der Einstieg in die Welt der JavaScript "Kartografie" doch recht einfach ist, kommt man doch immer wieder an Grenzen, wenn man z. B. Erscheinungsbild der Marker verändern will.

Ich möchte hier kurz eine Lösung vorstellen, welche eine animierte SVG Markergrafik auf die Karte bringt. Ich benötigte exakt diese Art Marker, um die Liveposition auf einer Karte zu visualisieren.

See the Pen Animated SVG Marker on Leaflet.js Map by Marcus Obst (@localhorst) on CodePen.

Mit L.divIcon stellt Leaflet.js eine Möglichkeit zur Verfügung, <div> Container als Marker zu positionieren. Die Hauptmethode ist L.Icon und erwartet einen Bildpfad. L.divIcon hingegen kann mit beliebigen HTML gefüllt werden. Und hier kommt mein SVG Marker ins Spiel.

// Pseudocode - bitte Codepen anschauen!

var locationLayer = new L.FeatureGroup();

var meIcon = L.divIcon({
    className: "leaflet-data-marker",
    // Inhalt des Markers - beachte die CSS Klassen!
    html: '<svg id="mePin" xmlns="http://www.w3.org/2000/svg" width="43.3" height="42.4" viewBox="0 0 43.3 42.4"><path class="ring_outer" fill="#878787" d="M28...4z"/><path class="ring_inner" fill="#5F5F5F" d="M27...1.5z"/><path class="mePin" d="M...z" fill="#282828"/></svg>'.replace('#','%23'),
    iconAnchor  : [22, 28],
    iconSize    : [36, 42],
    popupAnchor : [0, -30],
});

var meMarker = L.marker(latlng, {
    icon: meIcon,
})

locationLayer.addLayer(meMarker).addTo(map);
// 
$('.mePin').addClass('bounceInDown');

Damit ist der Marker auf der Karte positioniert.

Zu beachten ist, daß die zu animierenden SVG Elemente natürlich auch CSS Klassen oder IDs haben müssen.

Via CSS wird nun die Deckkraft der 2 Ringe animiert und durch das anfügen der .bounceInDown Klasse beim initialisieren des Markers, wird eine einmalige Animation des "Männchen" durchgeführt.

Auch hier bitte das Codepen Beispiel ansehen.

Als nächstes werde ich wohl Mouseover Effekte für Marker vorstellen. Das war recht tricky zu implementieren.