JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css">
<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
<div id="map-tiles" class="map-tiles"></div>
CSS
.map-tiles {
width: 500px;
height: 500px;
position: absolute;
top: 0;
left: 0;
}
.leaflet-marker-icon.animated {
-webkit-transition: -webkit-transform 0.2s;
transition: transform 0.2s;
}
JavaScript
(function () {
var map = L.map('map-tiles', {
zoom: 16,
center: [59.913031, 10.741367]
});
var tiles = L.tileLayer('http://{s}.tiles.mapbox.com/v3/examples.map-zq0f1vuc/{z}/{x}/{y}.png', {
tileSize: 256,
maxZoom: 17,
minZoom: 6,
reuseTiles: true,
detectRetina: true,
unloadInvisibleTiles: true,
updateWhenIdle: true
});
tiles.addTo(map);
var divIcon = L.divIcon({
iconSize: [39, 42]
});
var marker = L.marker([59.913031, 10.741367], { icon: divIcon});
marker.addTo(map);
window.setInterval(function () {
var lat = 59.913031 + (0.0005 * Math.random()),
lng = 10.741367 + (0.0005 * Math.random());
marker.setLatLng([lat, lng]);
}, 500);
marker._icon.classList.add('animated')
})();