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);

customPolyline = L.Polyline.extend({
    options: {
        speed: '',
        bearing: ''
    }
});

var polyline = new customPolyline([[51.49,-0.11],[51.51,-0.13],[51.505,-0.09],[51.507,-0.08],[51.509,-0.07]],{
    speed: '143',
    bearing: '38',
    style: style,
}).addTo(map);;

polyline.on('click', function() { 
    alert(this.options.speed) 
});

//polyline.addTo(map);

function getColor(speed) {
            return speed > 150 ? '#d94b38' :
                   speed > 100  ? '#d9a238' :
                   speed > 50  ? '#c8d938' :
                              '#309d27';
            }
function style(feature) {
            return {
                weight: 5,
                opacity: 1,
                color: getColor(feature.properties.speed),
            };
        }