Scribd
Upload
16 views

leaflet

Uploaded by

griyawiwaha10
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
16 views

leaflet

Uploaded by

griyawiwaha10
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 14

An Intro to Leaflet.

js
What is Leaflet.js
Leaflet.js is an open-source library using which we can deploy simple,
interactive, lightweight web maps.

•Leaflet JavaScript library allows you to use layers such as Tile layers,
WMS, Markers, Popups, Vector layers (polylines, polygons, circles, etc.),
Image overlays and GeoJSON.

•You can interact with the Leaflet maps by dragging the map, zooming (by
double click or, wheel scroll), using keyboard, using event handling, and
by dragging the markers.

•Leaflet supports browsers such as Chrome, Firefox, Safari 5+, Opera


12+, IE 7–11 on desktop and, browsers like Safari, Android, Chrome,
Firefox for mobiles.
Open source
Lightweight
Mobile-friendly
Tons of features

www.leafletjs.com
Plugins
Map/tile options
Overlays (clusters, heatmaps, etc)
Advanced pan/zoom
Drawing
Timeline
Alternatives:
Google Maps
MapQuest
OpenLayers
Mapbox GL
Code!

Reference Leaflet JS and CSS files from CDN


Add a map
var map = L.map('map').setView([39.774, -84.182], 11); // Center on Dayton

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
Add a map Lat/Lon

var map = L.map('map').setView([39.774, -84.182], 11); // Center on Dayton

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
Add a map Zoom

var map = L.map('map').setView([39.774, -84.182], 11); // Center on Dayton

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
Add a map Tile server URL

var map = L.map('map').setView([39.774, -84.182], 11); // Center on Dayton

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
Draw a pin
var map = L.map('map').setView([39.774, -84.182], 11); // Center on Dayton

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

var marker = L.marker([39.76257, -84.181685]).addTo(map); // 2nd Street Market


Demo time!
Questions?

www.leafletjs.com

https://github.com/mattbanderson/leaflet-demo

You might also like