JSFiddle - React, Tailwind, and code Playground

by winsent

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<div id="map"></div>

CSS

#map {
    height: 500px;
    width: 80%;
}

JavaScript

var osmUrl = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
	  osm = L.tileLayer(osmUrl, {
	 	        maxZoom: 18
	 	    });
        
var mymap = L.map('map').setView([51.505, -0.09], 13);

	L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
		maxZoom: 18,
		id: 'mapbox.streets'
	}).addTo(mymap);

	L.marker([51.5, -0.09]).addTo(mymap)
		.bindPopup("<b>Hello world!</b><br />I am a popup.")
    .openPopup();

	L.circle([51.508, -0.11], 500, {
		color: 'red',
		fillColor: '#f03',
		fillOpacity: 0.5
	}).addTo(mymap).bindPopup("I am a circle.");

	L.polygon([
		[51.509, -0.08],
		[51.503, -0.06],
		[51.51, -0.047]
	]).addTo(mymap).bindPopup("I am a polygon.");

	L.polyline([
		[51.515, -0.10],
		[51.523, -0.06],
		[51.530, -0.047]
	]).addTo(mymap).bindPopup("I am a polyline.");

	L.point(51.5, -0.09).addTo(mymap).bindPopup("I am a point.");
  
	var popup = L.popup();

	function onMapClick(e) {
		popup
			.setLatLng(e.latlng)
			.setContent("You clicked the map at " + e.latlng.toString())
			.openOn(mymap);
	}
	mymap.on('click', onMapClick);
  
  
  // Add geometry end