Leaflet.js

Introduction for @JSLuxembourg

By Thierry Nicola / eevol.lu / @littleiffel

Disclaimer

No Kittens where harmed in the creation of these slides

Be prepared to...

You said leaflet
Get a map
You said API-what
Geo J S O N
Plug in(s) baby

What is leaflet.js

“An Open-Source JavaScript Library for Mobile-Friendly Interactive Maps”

LeafletJS.com

Contribute on GitHub, Follow on Twitter

built by

Vladimir Agafonkin works at MapBox.com

He is online Github, @mourner

Features

Extremely lightweight — around 34 KB of gzipped JS code , No external dependencies , Tile layers , Drag panning with inertia , Multi-touch support , GeoJson Layers , Markers (custom markers support) , Popups , Pure CSS3 popups and controls (easy Styling) , Use any map Provider (OSM, MapBox, Google, ...) (almost everyone) , Browser Support works in IE7 , Open Source , Vector layers, Image Layers, WMS Layers, Layer Groups, Scroll wheel zoom, Double click zoom, Zoom to area (shift-drag), Keyboard navigation, Multi-touch zoom, Double tap zoom, Marker dragging, Zoom animation (for all layers, including tile layers, markers and vector layers), Panning animation, Smooth continuous zoom on modern mobile devices, Tile and popup fade animation, Very nice default design for markers, popups and other map controls, Retina resolution support for tile layers and markers, , ...and others

List them all

Hey..Stop it! You can read that stuff on your own...

Where is the sexy code!

LeaftJS - Let's get Started

Attention! Live coding

The first time

                        
var map = L.map('map', {
    center: [49, 6],
    zoom: 13
});
L.tileLayer('http://a.tiles.mapbox.com/v3/eevol.h0194mcj/{z}/{x}/{y}.png', {

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

Basic Elements

                        
var marker = L.marker([49, 5.49]).addTo(map);
var polygon = L.polygon([
    [51.509, -0.08],
    [51.503, -0.06],
    [51.51, -0.047]
]).addTo(map);
marker.bindPopup("Hello world!
I am a popup.").openPopup();
polygon.bindPopup("I am a polygon.");

Royale with Cheese (& Layers)

                        
var mapbox   = L.tileLayer('http://a.tiles.mapbox.com/v3/eevol.h0194mcj/{z}/{x}/{y}.png'),
    osm  = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '© OpenStreetMap contributors'
    });

var map = L.map('map', {
    center: new L.LatLng(49.72, 6.13),
    zoom: 10,
    layers: [mapbox, osm]
});
var maps = {
    "MapBox.com": mapbox,
    "OSM": osm
};
var controlLayers = L.control.layers(maps).addTo(map);

var amazon     = L.marker([49.72, 6.134]).bindPopup('YOU ARE HERE'),
    skype    = L.marker([49.74, 6.137]).bindPopup('The app next door');

var markers = L.layerGroup([amazon, skype]);
controlLayers.addOverlay(markers, "Markers");
map.removeLayer(osm);

Where were we?

Execute this code in Console for iframe 'wherewerewe'

                        
map.getCenter();
map.getBounds();
map.getZoom();
map.getPixelBounds();

Control the map

Execute this code in Console for iframe 'controlthemap'

                        
map.setView(L.latLng(50, 30), 5);
var popup = L.popup().setLatLng([51.5, -0.09]).setContent("I am a standalone popup.").openOn(map);
L.control.scale().addTo(map);

Can you hear me?

Click the map to log Event, and Double Click to get Position

                        
function onClickMap(e){
    console.log(e);
}
map.on('click', onClickMap); // Listen to Click on Map
//map.off('click', onClickMap); // Remove event Listener

var popup = L.popup();

function onMapDblClick(e) {
    popup
        .setLatLng(e.latlng)
        .setContent("You clicked the map at " + e.latlng.toString() )
        .openOn(map);
}

map.on('dblclick', onMapDblClick);

LeaftJS - GeoJSON

If you made it this far...

GeoJ S O N

                        
var myLines = [{
    "type": "LineString",
    "coordinates": [[-100, 40], [-105, 45], [-110, 55]]
}, {
    "type": "LineString",
    "coordinates": [[-105, 40], [-110, 45], [-115, 55]]
}];

var myStyle = {
    "color": "#ff7800",
    "weight": 5,
    "opacity": 0.65
};

L.geoJson(myLines, {
    style: myStyle
}).addTo(map);