JSFiddle - React, Tailwind, and code Playground

by Kyros Koh

HTML

<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="https://unpkg.com/[email protected]/dist/leaflet.markercluster.js"></script>
<script src="https://asean.onemap.asia/js/leaflet-search.js"></script>
<script src="https://asean.onemap.asia/js/leaflet-easy-button.js"></script>
<script src="https://asean.onemap.asia/data/asean.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<link rel="stylesheet" href="https://asean.onemap.asia/css/leaflet-MarkerCluster.css">
<link rel="stylesheet" href="https://asean.onemap.asia/css/leaflet-search.css">
<link rel="stylesheet" href="https://asean.onemap.asia/css/leaflet-easy-button.css">
<link rel="stylesheet" href="https://asean.onemap.asia/css/style.css">
<body>
<div id="coord"></div>
<div id="map" style='width:100%;height:800px;'</div>
</body>

<script>

//sample data values define in asean.js
var data = asean;

var map = L.map('map', {
	center: [7, 114],
	zoom: 5
});

var geojsonMarkerOptions = {
	radius: 8,
	fillColor: "#ff7800",
	color: "#000",
	weight: 1,
	opacity: 1,
	fillOpacity: 0.8
};

var featuresLayer = new L.GeoJSON(data, {
        onEachFeature: function(feature, marker) {
            marker.bindPopup('type: ' + feature.properties.type + '<br><b>name: ' + feature.properties.name + '</b>').openPopup();
        },
    	pointToLayer: function (feature, latlng) {
		return L.circleMarker(latlng, geojsonMarkerOptions);
		}
    });

//add Search Control
var searchControl = new L.Control.Search({
	layer: featuresLayer,
	propertyName: 'name',
	circleLocation: false,
	moveToLocation: function(latlng, title, map) {
		map.setView(latlng, 17); // access the zoom
	},
	initial: false});

	//OSM layer
	//map.addLayer(new L.TileLayer('https://{s}.tile.openstreetmap.org/${z}/${x}/${y}.png'));

	//ASEAN base layer
	map.addLayer(new L.TileLayer('https://maps-all.smartgeo.sg/v3/ASEAN/{z}/{x}/{y}.png'));
	
	//Hanoi
	map.addLayer(new...