Leaflet varcamp 2022

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?