An introduction to the Javascript library Leaflet.js that would enable you to build maps

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