JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://leaflet.cloudmade.com/dist/leaflet.js"></script>
<link rel="stylesheet" href="http://leaflet.cloudmade.com/dist/leaflet.css">
<div id="map" style="height: 400px"></div> <!-- width equals available horizontal space by default -->

JavaScript

var map = new L.Map('map');

var cloudmadeUrl = 'http://tiles.naqsha.net/Tiles/Tiles{z}/{x}/{y}.png';
// var cloudmadeUrl='http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png';
var cloudmadeAttribution = 'Map data &copy; 2012 Naqsha.net';

var cloudmade = new L.TileLayer(cloudmadeUrl, {
    maxZoom: 18,
    attribution: cloudmadeAttribution
});

map.setView(new L.LatLng(33.693888, 73.06509), 13).addLayer(cloudmade);

var markerLocation = new L.LatLng(33.694, 73.064),
    marker = new L.Marker(markerLocation);

map.addLayer(marker);
marker.bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();


var latlngs = new Array();
latlngs[0] = new L.LatLng(33.704, 73.084);
latlngs[1] = new L.LatLng(33.696, 73.069);
latlngs[2] = new L.LatLng(33.684, 73.047);
//latlngs[3]=new L.LatLng(33.692, 73.042);
//latlngs[4]=new L.LatLng(33.699, 73.036);
var polyline = new L.Polyline(latlngs, {
    color: 'red'
});

// zoom the map to the polyline
map.fitBounds(new L.LatLngBounds(latlngs));

// add the polyline to the map
map.addLayer(polyline);

map.on('contextmenu', onMapClick);

var popup = new L.Popup();

function onMapClick(e) {
    var latlngStr = '(' + e.latlng.lat.toFixed(3) + ', ' + e.latlng.lng.toFixed(3) + ')';

    popup.setLatLng(e.latlng);
    popup.setContent("You clicked the map at " + latlngStr);
    map.openPopup(popup);
    //popup.Open(); 
}