JSFiddle - React, Tailwind, and code Playground

by Stefano

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Test</title>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
		<script type="text/javascript" src="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet-src.js"></script>
		<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.css">
		<style type="text/css">

		body {
			height: 4000px;
		}

		#map {
			position: fixed;
			width: 500px;
			height: 300px;
			top: 50px;
			left: 100px;
		}
		</style>
	</head>
	
	<body>

		<div id="map"></div>

		<script type="text/javascript">
		// Initialize the map on the "map" div
		map = L.map('map', {
		    maxZoom: 18,
		    minZoom: 12,
		    zoom: 14,
		    scrollWheelZoom: false
		});

		map.setView([51.505, -0.09], 13);
            
        this.map.on('dblclick', function (e) {
            console.log(e);
        });

		L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
		</script>
	</body>
</html>