JSFiddle - React, Tailwind, and code Playground

by paulovieira

HTML

<link rel="stylesheet" href="http://rawgithub.com/Leaflet/Leaflet/master/dist/leaflet.css">
<script src="https://rawgithub.com/Leaflet/Leaflet/master/dist/leaflet-src.js"></script>
<body>
	<div id="map" style="width: 500px; height: 400px"></div>
</body>

JavaScript

// center the map in lisbon
var map = L.map('map').setView([38.735, -9.150], 8);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
	maxZoom: 18,
	attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

// open the popup in london
setTimeout(function(){
	console.log("open the popup")

	var popup = L.popup({})
		.setLatLng([51.5, -0.09])
   		.setContent("Now do a little pan on the map. The center isn't right!")
   		.openOn(map);
}, 2000);