Leaflet.js is an open source JavaScript library for building web mapping applications. It is lightweight at only 123kb, customizable, and easy to learn and migrate to from Google Maps API. Leaflet.js allows for tile selection from online sources like Cloudmade or Mapquest, or custom tiles can be provided. Popular sites like Flickr and Foursquare use Leaflet.js for its fast performance on desktop and mobile. Basic maps can be created by including Leaflet.js files, HTML, and JavaScript code to add markers, shapes, layers, events, and plugins.

1. Building Maps with
Jereme S. Causing

2. 2
What is Leaflet.js and
Why choose it?

3. What is leaflet.js?
Leaflet.js is an open source Javascript library
used to build web mapping applications

4. The Problems with Maps
•
Usage Limits
•
Limited to provided map
•
Google is in control

5. Why Leaflet.js
•
Fast Performance
•
Lightweight (only 123kb)
•
Customizable
•
Easy to Learn
•
Easy Migration (for Google Maps API users)
•
Mobile-Friendly

6. Getting Started

7. 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

8. Who uses leaflet.js
•
Flickr
•
Foursquare
•
Pinterest
•
IGN
•
OpenStreetMap
•
craigslist

9. Creating a Basic Map

10. 10
Stylesheet…
Include the files (either download or use cdn)

11. Html…
…and Javascript code

12. Markers
Demo
Demo2 (Custom Icons)

13. Shapes
•
Shapes like circles and polygons are also
supported

14. Layer Control

15. Getting Location

16. Custom Tiles
As mentioned earlier, you can also provide
your own tiles
•
Skyrim
•
The Forest(fan map)
•
Olivarez Maps(thesis)

17. Events
•
Leaflet supports a variety of events from click
to touch interaction for mobile devices.
Demo

18. Plugins
Leaflet.js also comes with a number plugins to
suit your needs
•
Marker Clustering
•
Drawing Tools
•
Heatmaps
•
Font-Awesome Markers
•
Animation

19. Thank You