JSFiddle - React, Tailwind, and code Playground

by Alex Azuero

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.2.3/leaflet.draw.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet-src.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.2.3/leaflet.draw.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.2.3/leaflet.draw-src.js"></script>
<body>
    <div id="map"></div>
</body>

CSS

#map {
	width: 553px;
	height: 329px;
	position: absolute;
}

JavaScript

var cir;
		var w = 553, h = 329, url = 'https://kathleenmillar.files.wordpress.com/2012/10/picture2.png';

		var map = L.map('map', {
			minZoom : 1,
			maxZoom : 4,
			center : [ w / 2, h / 2 ],
			zoom : 1,
			crs : L.CRS.Simple

		});

		// calculate the edges of the image, in coordinate space
		var southWest = map.unproject([ 0, h ], map.getMaxZoom() - 3);
		var northEast = map.unproject([ w, 0 ], map.getMaxZoom() - 3);
		var bounds = new L.LatLngBounds(southWest, northEast);

		// add the image overlay, so that it covers the entire map
		L.imageOverlay(url, bounds).addTo(map);

		// tell leaflet that the map is exactly as big as the image
		map.setMaxBounds(bounds);

		// Initialize the FeatureGroup to store editable layers
		var drawnItems = new L.FeatureGroup();
		map.addLayer(drawnItems);

		L.DrawToolbar.include({
			getModeHandlers : function(map) {
				return [ {
					enabled : true,
					handler : new L.Draw.Marker(map),
					title : 'Place  marker'
				},{
							enabled : this.options.circle,
							handler : new L.Draw.Circle(map,
									this.options.circle),
							title : L.drawLocal.draw.toolbar.buttons.circle
						} ];
			}
		});

		// Initialize the draw control and pass it the FeatureGroup of editable layers
		var drawControl = new L.Control.Draw({
			position : 'topleft',
            edit:{
                featureGroup : drawnItems}
		});
		map.addControl(drawControl);

		map.on('draw:created', function(e) {
			var type = e.layerType, layer = e.layer;
			drawnItems.addLayer(layer);

		});
/*map.on('click', function(e) { alert("Lat, Lon : " + e.latlng.lat + ", " +
 e.latlng.lng) });*/


var content = 'Hi everybody I am here. How are you? Please resolve this.';
L.marker([-67, 265.5]).bindPopup(content,{autoPan:false}).addTo(map);
L.marker([-44.5, 108.5]).bindPopup(content,{autoPan:false}).addTo(map);