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

Contribute on GitHub, Follow on Twitter

built by

Vladimir Agafonkin works at MapBox.com

He is online Github, @mourner

Features

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: '© <a href="http://osm.org/copyright">OpenStreetMap</a> 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("<b>Hello world!</b><br>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: '© <a href="http://osm.org/copyright">OpenStreetMap</a> 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);
                    

LeaftJS - Plugins

...almost...

Plug ins Baby

• MarkerClusterer
• MiniMap
• HeatMap WebGL
• any many more

Stellar Links

• GeoJSON Example on GitHub

THE END