Skip to content

Instantly share code, notes, and snippets.

@kunxin-chor
Created August 17, 2024 04:36
Show Gist options
  • Save kunxin-chor/8c09d70a24866c23362ca19a30870c9f to your computer and use it in GitHub Desktop.
Save kunxin-chor/8c09d70a24866c23362ca19a30870c9f to your computer and use it in GitHub Desktop.
Create a leaflet map
// DOMContentLoaded event is executed when the DOM is ready
// (i.e all the HTML elements have been created), so it's
// a good starting point to run any code
document.addEventListener("DOMContentLoaded", async function(){
// the first argument of L.map is the ID
// where the map will be rendered (i.e drawn)
const map = L.map('map');
// two parameters for setView
// 1st: lat lng of the center of the map
// 2nd: the zoom level
map.setView([1.2494, 103.8303], 13);
// a layer in leaflet = something that is drawn on top of th emap
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment