This document provides an introduction and overview of Leaflet, an open-source JavaScript library for interactive maps. Leaflet is extremely lightweight, with no external dependencies, and includes features like layers, customization, map controls, interaction capabilities, and good performance. The document shares sample code for adding basic map elements like markers, circles, polygons, and popups to Leaflet maps using JavaScript. It also includes links to additional Leaflet documentation and examples for further exploring the library.

1. Thet Aung Min Latt
30 Jan 2022

2. What is?
• Interactive map
• Javascript library
• Mobile friendly

3. Extremely
lightweight

4. No external
dependencies

5. Features
• Layers Out of the Box
• Customization
• Map Controls
• Interaction
• Visual
• Performance

6. Leaflet 1.7.1
Sep 4, 2020
https://leafletjs.com/download.html

7. • ?AMP
1
• Computer / Lat Lon
2
• Browser / Editor
3
Prerequisite

8. Objectives
• Prepare
• Setting map
• Playing around
with markers,
circles, polygons,
popups and events

9. PREPARE

10. New Work
Leaflet CSS and JavaScript
<link rel="stylesheet" href="./css/leaflet.css"/>
<script src="./js/leaflet.js"></script>

11. New Work
Leaflet CSS and JavaScript
<link rel="stylesheet" href="leaflet.css">
<script src="leaflet.js"></script>

12. Map
Map div and style
<div id="map" style="width: 600px; height:
400px;"></div>

13. Define map
<script>
var map =
L.map('map').setView([16.840,96.173], 12);
//Yangon lat lon / Zoom

14. Mapbox
var tiles =
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.
eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG21
4AriISLbB6B5aw', {
maxZoom: 18,
attribution: 'Map data &copy; <a
href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>
contributors, ' +
'Imagery © <a
href="https://www.mapbox.com/">Mapbox</a>',
id: 'mapbox/streets-v11',
tileSize: 512,
zoomOffset: -1
}).addTo(map);
</script>

15. OpenStreetMap
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png',
//sk.eyJ1IjoidGhldGF1bmc4MiIsImEiOiJja285b3l2Z
Howd3k2MnVtcXpscmszYmc5In0.bFyEeMWERGGf
EFsGDLQClA
{
attribution: 'Tiles by Open Street Map',
maxZoom: 17,
minZoom: 5
}).addTo(map);

16. Google Map
L.tileLayer('http://{s}.google.com/vt/lyrs=m&x=
{x}&y={y}&z={z}',{ maxZoom: 20,
subdomains:['mt0','mt1','mt2','mt3']
}).addTo(map);

17. Marker
• var marker =
L.marker([16.840,96.163]).addTo(map).bindP
opup('<b>Hello world!</b><br />I am a
popup.').openPopup();

18. Circle
var circle = L.circle([16.840,96.243], {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5,
radius: 500
}).addTo(map).bindPopup('I am a circle.');

19. polygon
var polygon = L.polygon([
[16.840,96.173],
[16.840,96.179],
[16.840,96.187]
]).addTo(map).bindPopup('I am a
polygon.');

20. popup
var popup = L.popup()
.setLatLng([16.840,96.198])
.setContent('I am a standalone
popup.')
.openOn(map);

21. Event
function onMapClick(e) {
popup
.setLatLng(e.latlng)
.setContent('You clicked the
map at ' + e.latlng.toString())
.openOn(map);
}

22. Sample code
• Sample HTML
https://pastebin.com/FiwRSwU2

23. Summary
• Data
• Interaction
• Display
• Images & Layers

24. Resources
• leafletjs.com
• leafletjs.com/examples.html
• https://leafletjs.com/plugins.html

25. QUESTIONS?