JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="https://openplans.github.io/Leaflet.AnimatedMarker/src/AnimatedMarker.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">
<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>
<div id="map" style="width: 640px; height: 480px;"></div>
JavaScript
var map = L.map('map', {
center: new L.LatLng(46.07659, 18.22816),
zoom: 15
});
var mapbox = L.tileLayer('http://{s}.tiles.mapbox.com/v3/openplans.map-g4j0dszr/{z}/{x}/{y}.png', {
attribution: 'Map tiles © Development Seed and OpenStreetMap',
});
map.addLayer(mapbox);
var ride = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "LineString",
"coordinates": [
[
18.220964670181274,
46.07899121107015
],
[
18.221275806427002,
46.07910284438719
],
[
18.221640586853027,
46.07917726647309
],
[
18.22208046913147,
46.07922936187347
],
[
18.22247743606567,
46.07925913065162
],
[
18.222895860671997,
46.079288899413704
],
[
18.2232928276062,
46.079326110343736
],
[
18.22361469268799,
46.07936332124865
],
[
18.223979473114014,
46.07940053212848
],
[
18.22432279586792,
46.07943774298322
],
[
18.224687576293945,
46.0794972802986
],
[
18.225020170211792,
46.07954937539686
],
[
18.225417137145996,
46.07961635473662
],
[
18.225846290588375,
46.079683333995085
],
[
18.226125240325928,
46.07974287104546
],
[
18.226490020751953,
46.079794965911844
],
[
18.22680115699768,
46.079794965911844
],
[
...