JSFiddle - React, Tailwind, and code Playground

by Adriany

HTML

<script src="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.css">
<div id="map"></div>

<!-- Problem: The marker animates incorrectly when zooming -->

CSS

#map { height: 400px; width: 450px; }

JavaScript

var map;
var marker;

map = L.map('map').setView([63.83158, 20.16189], 16);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map);

marker = new L.CircleMarker([63.83158, 20.16189], {
    fillColor: 'red',
    color: 'black',
    radius: 5,
    opacity: 1,
    fillOpacity: 1,
    clickable: false
}).addTo(map);

// removes the svg animate element after animation is complete
function removeAnimation () {
    if(marker._container.childNodes[0].childNodes[0]){
        var a = marker._container.childNodes[0];
        var b = a.childNodes[0];
        a.removeChild(b);
    }
}

// starts the animation
setTimeout(function () {
    var markerCurrentPath = marker.getPathString();
    marker.setLatLng([63.83158, 20.16489]);
    var markerNewPath = marker.getPathString();
    
    var markerAnim = document.createElementNS('http://www.w3.org/2000/svg', 'animate');
    markerAnim.setAttributeNS(null, 'attributeName', 'd');
    markerAnim.setAttributeNS(null, 'begin', 'indefinite');
    markerAnim.setAttributeNS(null, 'dur', 10);
    markerAnim.setAttributeNS(null, 'fill', 'freeze');
    markerAnim.setAttributeNS(null, 'values', markerCurrentPath+';'+markerNewPath);
    marker._container.childNodes[0].appendChild(markerAnim);
    markerAnim.beginElement();
    
    setTimeout(removeAnimation,10000);
    
},1500);