leaflet.js

An Open Alternative to Google Maps

Presented by Raymond Chandler III / @raymondchandler / SpkrBar Profile

But First...

Shameless Plug #1

Introducting...

Shameless Plug #2

PyOhio 2013

July 27th and 28th

OSU Student Union

Why is it so awesome?

Open Source

Open Data

FREE!

Easy to use

In the beginning...

Install It

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.2/leaflet.css" />
<!--[if lte IE 8]>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.2/leaflet.ie.css" />
<![endif]-->
                    

<script src="http://cdn.leafletjs.com/leaflet-0.6.2/leaflet.js"></script>
                    

<div id="map"></div>

#map { height: 400px; }

Create the map

var map = L.map('map').setView([51.505, -0.09], 13);
                    

Setup an OpenStreetMap Tile Layer

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: "© OpenStreetMap contributors"
}).addTo(map);
                    

Or a CloudMade Tile Layer

L.tileLayer('http://{s}.tile.cloudmade.com/API-key/997/256/{z}/{x}/{y}.png', {
    attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © CloudMade',
    maxZoom: 18
}).addTo(map);
                    

Add Markers

L.marker([51.5, -0.09]).addTo(map)
    .bindPopup('A pretty CSS3 popup.  Easily customizable.')
    .openPopup();
                    

Or Circles, Polygons and More

var circle = L.circle([51.508, -0.11], 500, {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5
}).addTo(map);
                    

Events

function onMapClick(e) {
    alert("You clicked the map at " + e.latlng);
}

map.on('click', onMapClick);
                    

Gotchas

• Leaflet.js does not use JQuery
• Maps must have an "id" attribute. NOT CLASS
• You must set a height on the map via CSS
• Does not play well with reveal.js
• Default: Scroll with Mouse

Questions?

Resources

• http://leafletjs.com/examples/quick-start.html
• http://www.spkrbar.com/profile/rchandler
• leafletjs.com
• OSGeo.org

Launching August 1st 2013

signup.spkrbar.com

Export to PDF

Presentations can be exported to PDF, below is an example that's been uploaded to SlideShare.