Building Maps with Leaflet

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

DemoDemo2 (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

PluginsLeaflet.js also comes with a number plugins to suit your needs

• Marker Clustering• Drawing Tools• Heatmaps• Font-Awesome Markers• Animation

Thank You