JSFiddle - React, Tailwind, and code Playground

by Leon Alvarez Del Canto

HTML

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

CSS

#map { height: 400px; }

JavaScript

var map = L.map('map').setView([51.505, -0.09], 12);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 18
}).addTo(map);

var latlngs = [[51.49,-0.11],[51.51,-0.13],[51.505,-0.09],[51.507,-0.08],[51.509,-0.07]];

customMarker = L.Marker.extend({
   options: { 
      speed: '111',
      bearing: '111'
   }
});

for (var i = 0, len = latlngs.length; i < len; i++) {
    var m = new customMarker(latlngs[i], {
        speed: '123',
        bearing: '45'
    });
    m.on('click', function() {
        alert(this.options.speed)
    }
    m.addTo(map);
}

var polyline = L.polyline(latlngs,{});
polyline.addTo(map);