Introduction to LeafletJS

Introduction to LeafletJS

James Seppi, TNRIS

Open Austin Geo Jam - February 22, 2014




What is this Leaflet thing?

www.leafletjs.com

What is this Leaflet thing?

Created by Vladimir Agafonkin, @mourner, now working at MapBox


Let's Go!

First, include the Leaflet CSS and JavaScript in the <head> of your page:

<link rel="stylesheet" href="styles/leaflet.css" />

<script src="scripts/leaflet.js"></script>

Then, Make a Map

var map = L.map('map', {
    center: [30.25, -97.75], //Austin!
    zoom: 13
});

L.map takes an id of a <div>, so have that in your html:

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

And this <div> must have a size, so specify it in your css:

.map { width: 800px; height: 400px; }

Tada!

Wait, where is the map?

Add a Base Tile Layer

L.tileLayer(
    'http://otile1.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.jpg'
).addTo(map);

Yay! We have a fully interactive map!

MapQuest Open Street Map

Try Some Other Tile Layers

L.tileLayer(
    'http://otile1.mqcdn.com/tiles/1.0.0/sat/{z}/{x}/{y}.jpg'
).addTo(map);

MapQuest Open Aerial

Try Some Other Tile Layers

L.tileLayer(
    'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
).addTo(map);

Open Street Map

Try Some Other Tile Layers

L.tileLayer(
    'https://{s}.tiles.mapbox.com/v3/eleanor.mnyzxgvi/{z}/{x}/{y}.png'
).addTo(map);

Woodcut from MapBox

Add Markers

L.marker([30.265108, -97.746683])
    .bindPopup("Austin City Hall")
    .addTo(map);

L.marker([30.309441, -97.666777])
    .bindPopup("University Hills Library")
    .addTo(map);

Bind Events

L.marker([30.265108, -97.746683])
    .on('click', function() { alert("Austin City Hall"); })
    .addTo(map);

L.marker([30.309441, -97.666777])
    .on('click', function() { alert("University Hills Library"); })
    .addTo(map);

Add Vectors

L.polygon([
    [30.19, -97.79], [30.38, -97.79],
    [30.38, -97.68], [30.19, -97.68]
]).bindPopup("I'm a Polygon!").addTo(map);
L.circle([30.26, -97.62], 4000, {color: "red", fillColor: "#f03"})
    .bindPopup("I'm a Circle!").addTo(map);

See also L.polyline() and L.rectangle()

Add WMS

L.tileLayer.wms(
    "http://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r.cgi", {
    layers: 'nexrad-n0r-900913',
    format: 'image/png',
    transparent: true,
    attribution: "Weather data © 2012 IEM Nexrad"
}).addTo(map);

Add GeoJSON

xhr("data/moontowers.geojson", function(err, resp) {
    var data = JSON.parse(resp.response);

    L.geoJson(data, {
        onEachFeature: function (feature, layer) {
            layer.bindPopup(feature.properties.ADDRESS);
        }
    }).addTo(map);
});

xhr is a method from the corslite library

Add GeoJSON

Moontowers from the City of Austin Historical Landmarks dataset

Add Cooler GeoJSON

Created using QGIS and Ogre

Tons of Plugins!

leafletjs.com/plugins.html

mapbox.com/mapbox.js/plugins/

Drawing Plugin

First include the plugin JavaScript and CSS:

<script src='scripts/leaflet.draw.js'></script>
<link href='styles/leaflet.draw.css' rel='stylesheet' />

Add the draw control to your map:

var drawControl = new L.Control.Draw();
map.addControl(drawControl);

map.on('draw:created', function (e) {
    var layer = e.layer;
    //Add to map, and save to backend, etc
    map.addLayer(layer);
});

Drawing Plugin

MakiMarkers Plugin

My personal favorite... Leaflet.MakiMarkers

Uses MapBox Static Marker API

<script src='scripts/Leaflet.MakiMarkers.js'></script>
var beerIcon = L.MakiMarkers.icon({
    icon: "beer",
    color: "#12a",
    size: "l"
});

L.marker([30.31096, -97.74277], {icon: beerIcon})
    .addTo(map)

MakiMarkers Plugin

MakiMarkers Plugin

LeafletJS Resources

Thanks!

TNRIS

@hydrologee

github.com/jseppi

Presentation viewable at github.io/jseppi/geojam-leaflet-pres, source available at github.com/jseppi/geojam-leaflet-pres

Generated with pandoc