Leaflet minimal map

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: 400px; 
}

JavaScript

// Create the 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);