際際滷

際際滷Share a Scribd company logo
Building Maps with
Jereme S. Causing
2
What is Leaflet.js and
Why choose it?
What is leaflet.js?
Leaflet.js is an open source Javascript library
used to build web mapping applications
The Problems with Maps

Usage Limits

Limited to provided map

Google is in control
Why Leaflet.js

Fast Performance

Lightweight (only 123kb)

Customizable

Easy to Learn

Easy Migration (for Google Maps API users)

Mobile-Friendly
Getting Started
Tiles

In creating a map, you always start from
selecting your tile source.

There are a number of online services that
provide tiles.

Cloudmade

Mapquest

Openstreetmap

Bing

As a matter of fact, you can also provide your
own tiles
Who uses leaflet.js

Flickr

Foursquare

Pinterest

IGN

OpenStreetMap

craigslist
Creating a Basic Map
10
Stylesheet
Include the files (either download or use cdn)
Html
and Javascript code
Markers
Demo
Demo2 (Custom Icons)
Shapes

Shapes like circles and polygons are also
supported
Layer Control
Getting Location
Custom Tiles
As mentioned earlier, you can also provide
your own tiles

Skyrim

The Forest(fan map)

Olivarez Maps(thesis)
Events

Leaflet supports a variety of events from click
to touch interaction for mobile devices.
Demo
Plugins
Leaflet.js also comes with a number plugins to
suit your needs

Marker Clustering

Drawing Tools

Heatmaps

Font-Awesome Markers

Animation
Thank You
Ad

Recommended

Programming&coding
Programming&coding
Barbara M. King
State of the Map 2012 talk
State of the Map 2012 talk
Wm Leler
Intro to Graphs for Fedict
Intro to Graphs for Fedict
Rik Van Bruggen
Android application development
Android application development
Linh Vi T動畛ng
Getting Started with BigQuery ML
Getting Started with BigQuery ML
Dan Sullivan, Ph.D.
An online viewer for Geospatial Vector Data using HTML5 Canvas and JavaScript
An online viewer for Geospatial Vector Data using HTML5 Canvas and JavaScript
Manikanta Kondeti
D3 & MeteorJS
D3 & MeteorJS
saarmstrong
IWMW 2001: XML and XSLT report
IWMW 2001: XML and XSLT report
IWMW
Building Maps with Leaflet
Building Maps with Leaflet
Andrew Howard
Up and Running with Leaflet.js
Up and Running with Leaflet.js
Patrick McKinney
NACIS 2012 talk
NACIS 2012 talk
Wm Leler
Leaflet maptime
Leaflet maptime
Harald Schernthanner
How to create an interactive map with Leaflet.pdf
How to create an interactive map with Leaflet.pdf
Rakesh Purbey
Seeing your place in a new way - NodeconfEU 2018
Seeing your place in a new way - NodeconfEU 2018
Melissa Auclaire
Finding Your Way (WRK6) - Post-Conference Workshop at HighEdWeb 2014
Finding Your Way (WRK6) - Post-Conference Workshop at HighEdWeb 2014
farktal
Leaflet - Devoxx 2018
Leaflet - Devoxx 2018
Guillaume Soldera
2015 FOSS4G Track - Building Lightweight Mapping Apps with Esri Leaflet by An...
2015 FOSS4G Track - Building Lightweight Mapping Apps with Esri Leaflet by An...
GIS in the Rockies
Application devevelopment with open source libraries
Application devevelopment with open source libraries
Allan Laframboise
2013 Vendor, MapQuest Plugins for Leaflet by Jonathan Harahush
2013 Vendor, MapQuest Plugins for Leaflet by Jonathan Harahush
GIS in the Rockies
Intro To Google Maps
Intro To Google Maps
Eric ShangKuan
Mapping APIs
Mapping APIs
Lucas Cotner
Sharing the Openness of the Maps via FOSS4G and the Web
Sharing the Openness of the Maps via FOSS4G and the Web
Hidenori Fujimura
Performance and Scalability for Maps API Sites (Dev Fest '10 Mexico)
Performance and Scalability for Maps API Sites (Dev Fest '10 Mexico)
Ossama Alami
Open layers
Open layers
Janak Parajuli
ESRI Dev Meetup: Building Distributed JavaScript Map Widgets
ESRI Dev Meetup: Building Distributed JavaScript Map Widgets
Allan Glen
Open Maps (Or Close Enough?)
Open Maps (Or Close Enough?)
Pamela Fox
Mongo db washington dc 2014
Mongo db washington dc 2014
ikanow
51811680 open layers
51811680 open layers
Gien Rockmantic
Curietech AI in action - Accelerate MuleSoft development
Curietech AI in action - Accelerate MuleSoft development
shyamraj55
9-1-1 Addressing: End-to-End Automation Using FME
9-1-1 Addressing: End-to-End Automation Using FME
Safe Software

More Related Content

Similar to Building Maps with Leaflet (20)

Building Maps with Leaflet
Building Maps with Leaflet
Andrew Howard
Up and Running with Leaflet.js
Up and Running with Leaflet.js
Patrick McKinney
NACIS 2012 talk
NACIS 2012 talk
Wm Leler
Leaflet maptime
Leaflet maptime
Harald Schernthanner
How to create an interactive map with Leaflet.pdf
How to create an interactive map with Leaflet.pdf
Rakesh Purbey
Seeing your place in a new way - NodeconfEU 2018
Seeing your place in a new way - NodeconfEU 2018
Melissa Auclaire
Finding Your Way (WRK6) - Post-Conference Workshop at HighEdWeb 2014
Finding Your Way (WRK6) - Post-Conference Workshop at HighEdWeb 2014
farktal
Leaflet - Devoxx 2018
Leaflet - Devoxx 2018
Guillaume Soldera
2015 FOSS4G Track - Building Lightweight Mapping Apps with Esri Leaflet by An...
2015 FOSS4G Track - Building Lightweight Mapping Apps with Esri Leaflet by An...
GIS in the Rockies
Application devevelopment with open source libraries
Application devevelopment with open source libraries
Allan Laframboise
2013 Vendor, MapQuest Plugins for Leaflet by Jonathan Harahush
2013 Vendor, MapQuest Plugins for Leaflet by Jonathan Harahush
GIS in the Rockies
Intro To Google Maps
Intro To Google Maps
Eric ShangKuan
Mapping APIs
Mapping APIs
Lucas Cotner
Sharing the Openness of the Maps via FOSS4G and the Web
Sharing the Openness of the Maps via FOSS4G and the Web
Hidenori Fujimura
Performance and Scalability for Maps API Sites (Dev Fest '10 Mexico)
Performance and Scalability for Maps API Sites (Dev Fest '10 Mexico)
Ossama Alami
Open layers
Open layers
Janak Parajuli
ESRI Dev Meetup: Building Distributed JavaScript Map Widgets
ESRI Dev Meetup: Building Distributed JavaScript Map Widgets
Allan Glen
Open Maps (Or Close Enough?)
Open Maps (Or Close Enough?)
Pamela Fox
Mongo db washington dc 2014
Mongo db washington dc 2014
ikanow
51811680 open layers
51811680 open layers
Gien Rockmantic
Building Maps with Leaflet
Building Maps with Leaflet
Andrew Howard
Up and Running with Leaflet.js
Up and Running with Leaflet.js
Patrick McKinney
NACIS 2012 talk
NACIS 2012 talk
Wm Leler
How to create an interactive map with Leaflet.pdf
How to create an interactive map with Leaflet.pdf
Rakesh Purbey
Seeing your place in a new way - NodeconfEU 2018
Seeing your place in a new way - NodeconfEU 2018
Melissa Auclaire
Finding Your Way (WRK6) - Post-Conference Workshop at HighEdWeb 2014
Finding Your Way (WRK6) - Post-Conference Workshop at HighEdWeb 2014
farktal
2015 FOSS4G Track - Building Lightweight Mapping Apps with Esri Leaflet by An...
2015 FOSS4G Track - Building Lightweight Mapping Apps with Esri Leaflet by An...
GIS in the Rockies
Application devevelopment with open source libraries
Application devevelopment with open source libraries
Allan Laframboise
2013 Vendor, MapQuest Plugins for Leaflet by Jonathan Harahush
2013 Vendor, MapQuest Plugins for Leaflet by Jonathan Harahush
GIS in the Rockies
Intro To Google Maps
Intro To Google Maps
Eric ShangKuan
Sharing the Openness of the Maps via FOSS4G and the Web
Sharing the Openness of the Maps via FOSS4G and the Web
Hidenori Fujimura
Performance and Scalability for Maps API Sites (Dev Fest '10 Mexico)
Performance and Scalability for Maps API Sites (Dev Fest '10 Mexico)
Ossama Alami
ESRI Dev Meetup: Building Distributed JavaScript Map Widgets
ESRI Dev Meetup: Building Distributed JavaScript Map Widgets
Allan Glen
Open Maps (Or Close Enough?)
Open Maps (Or Close Enough?)
Pamela Fox
Mongo db washington dc 2014
Mongo db washington dc 2014
ikanow

Recently uploaded (20)

Curietech AI in action - Accelerate MuleSoft development
Curietech AI in action - Accelerate MuleSoft development
shyamraj55
9-1-1 Addressing: End-to-End Automation Using FME
9-1-1 Addressing: End-to-End Automation Using FME
Safe Software
OpenACC and Open Hackathons Monthly Highlights June 2025
OpenACC and Open Hackathons Monthly Highlights June 2025
OpenACC
PyCon SG 25 - Firecracker Made Easy with Python.pdf
PyCon SG 25 - Firecracker Made Easy with Python.pdf
Muhammad Yuga Nugraha
AI vs Human Writing: Can You Tell the Difference?
AI vs Human Writing: Can You Tell the Difference?
Shashi Sathyanarayana, Ph.D
"How to survive Black Friday: preparing e-commerce for a peak season", Yurii ...
"How to survive Black Friday: preparing e-commerce for a peak season", Yurii ...
Fwdays
Enhance GitHub Copilot using MCP - Enterprise version.pdf
Enhance GitHub Copilot using MCP - Enterprise version.pdf
Nilesh Gule
Using the SQLExecutor for Data Quality Management: aka One man's love for the...
Using the SQLExecutor for Data Quality Management: aka One man's love for the...
Safe Software
Techniques for Automatic Device Identification and Network Assignment.pdf
Techniques for Automatic Device Identification and Network Assignment.pdf
Priyanka Aash
GenAI Opportunities and Challenges - Where 370 Enterprises Are Focusing Now.pdf
GenAI Opportunities and Challenges - Where 370 Enterprises Are Focusing Now.pdf
Priyanka Aash
Lessons Learned from Developing Secure AI Workflows.pdf
Lessons Learned from Developing Secure AI Workflows.pdf
Priyanka Aash
10 Key Challenges for AI within the EU Data Protection Framework.pdf
10 Key Challenges for AI within the EU Data Protection Framework.pdf
Priyanka Aash
cnc-processing-centers-centateq-p-110-en.pdf
cnc-processing-centers-centateq-p-110-en.pdf
AmirStern2
MuleSoft for AgentForce : Topic Center and API Catalog
MuleSoft for AgentForce : Topic Center and API Catalog
shyamraj55
Securing Account Lifecycles in the Age of Deepfakes.pptx
Securing Account Lifecycles in the Age of Deepfakes.pptx
FIDO Alliance
From Manual to Auto Searching- FME in the Driver's Seat
From Manual to Auto Searching- FME in the Driver's Seat
Safe Software
Cyber Defense Matrix Workshop - RSA Conference
Cyber Defense Matrix Workshop - RSA Conference
Priyanka Aash
Oh, the Possibilities - Balancing Innovation and Risk with Generative AI.pdf
Oh, the Possibilities - Balancing Innovation and Risk with Generative AI.pdf
Priyanka Aash
2025_06_18 - OpenMetadata Community Meeting.pdf
2025_06_18 - OpenMetadata Community Meeting.pdf
OpenMetadata
CapCut Pro Crack For PC Latest Version {Fully Unlocked} 2025
CapCut Pro Crack For PC Latest Version {Fully Unlocked} 2025
pcprocore
Curietech AI in action - Accelerate MuleSoft development
Curietech AI in action - Accelerate MuleSoft development
shyamraj55
9-1-1 Addressing: End-to-End Automation Using FME
9-1-1 Addressing: End-to-End Automation Using FME
Safe Software
OpenACC and Open Hackathons Monthly Highlights June 2025
OpenACC and Open Hackathons Monthly Highlights June 2025
OpenACC
PyCon SG 25 - Firecracker Made Easy with Python.pdf
PyCon SG 25 - Firecracker Made Easy with Python.pdf
Muhammad Yuga Nugraha
AI vs Human Writing: Can You Tell the Difference?
AI vs Human Writing: Can You Tell the Difference?
Shashi Sathyanarayana, Ph.D
"How to survive Black Friday: preparing e-commerce for a peak season", Yurii ...
"How to survive Black Friday: preparing e-commerce for a peak season", Yurii ...
Fwdays
Enhance GitHub Copilot using MCP - Enterprise version.pdf
Enhance GitHub Copilot using MCP - Enterprise version.pdf
Nilesh Gule
Using the SQLExecutor for Data Quality Management: aka One man's love for the...
Using the SQLExecutor for Data Quality Management: aka One man's love for the...
Safe Software
Techniques for Automatic Device Identification and Network Assignment.pdf
Techniques for Automatic Device Identification and Network Assignment.pdf
Priyanka Aash
GenAI Opportunities and Challenges - Where 370 Enterprises Are Focusing Now.pdf
GenAI Opportunities and Challenges - Where 370 Enterprises Are Focusing Now.pdf
Priyanka Aash
Lessons Learned from Developing Secure AI Workflows.pdf
Lessons Learned from Developing Secure AI Workflows.pdf
Priyanka Aash
10 Key Challenges for AI within the EU Data Protection Framework.pdf
10 Key Challenges for AI within the EU Data Protection Framework.pdf
Priyanka Aash
cnc-processing-centers-centateq-p-110-en.pdf
cnc-processing-centers-centateq-p-110-en.pdf
AmirStern2
MuleSoft for AgentForce : Topic Center and API Catalog
MuleSoft for AgentForce : Topic Center and API Catalog
shyamraj55
Securing Account Lifecycles in the Age of Deepfakes.pptx
Securing Account Lifecycles in the Age of Deepfakes.pptx
FIDO Alliance
From Manual to Auto Searching- FME in the Driver's Seat
From Manual to Auto Searching- FME in the Driver's Seat
Safe Software
Cyber Defense Matrix Workshop - RSA Conference
Cyber Defense Matrix Workshop - RSA Conference
Priyanka Aash
Oh, the Possibilities - Balancing Innovation and Risk with Generative AI.pdf
Oh, the Possibilities - Balancing Innovation and Risk with Generative AI.pdf
Priyanka Aash
2025_06_18 - OpenMetadata Community Meeting.pdf
2025_06_18 - OpenMetadata Community Meeting.pdf
OpenMetadata
CapCut Pro Crack For PC Latest Version {Fully Unlocked} 2025
CapCut Pro Crack For PC Latest Version {Fully Unlocked} 2025
pcprocore
Ad

Building Maps with Leaflet