JSFiddle - React, Tailwind, and code Playground

by Leon Alvarez Del Canto

HTML

<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css">
<script src="http://leaflet.github.io/Leaflet.label/leaflet.label.js"></script>
<link rel="stylesheet" href="http://leaflet.github.io/Leaflet.label/leaflet.label.css">
<div id="map" style="height:500px;"></div>

JavaScript

//example user location
var userLocation = new L.LatLng(28.735, 77.524);

var map = L.map('map').setView(userLocation, 10);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 18,
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>'
}).addTo(map);

var pointA = new L.LatLng(28.635308, 77.22496);
var pointB = new L.LatLng(28.984461, 77.70641);
var pointList = [pointA, pointB];

var firstpolyline = new L.Polyline(pointList, {
    color: 'red',
    weight: 3,
    opacity: 0.5,
    smoothFactor: 1
    
});
firstpolyline.bindLabel('Even polylines can have labels.', { noHide: true });
firstpolyline.addTo(map);