JSFiddle - React, Tailwind, and code Playground

by alfannas

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{width:100%;height:300px;}

JavaScript

// Leaflet simple map
// initialize the map on the "map" div with a given center and zoom
var map = L.map('map', {
    center: [-2.623069,118.3901453],
    zoom: 4
});

// Set up the OSM layer
L.tileLayer(
    'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', 
    {maxZoom: 18}).addTo(map);

// add a marker in the given location
L.marker([-6.1755564,106.8264889]).bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup().addTo(map);

L.marker([-7.2756368,112.6416433]).bindPopup("<b>Hello world!</b><br>Surabaya.").openPopup().addTo(map);