!

Building Maps with Leaflet

Andrew Howard Digital Humanities Hub The Australian National University

What is Leaflet

• A lightweight Open Source toolkit for displaying web and mobile friendly maps.

• http://www.leafletjs.com

!2

Why Leaflet

• Small and fast (~33KB for base toolkit) • Easy to use API • Extensive range of plug-ins • Supports a variety of open and

commercial map tile and overlay providers

!3

Map API’s

• Leaflet !

!

!

!

!

!

!

!

• Google • Bing • OSM • ERSI

!4

Tile Sources (Open and Commercial)

• Bing – Road – Aerial

• Google – Satellite – Terrain – Hybrid !

!

!

• ERSI – World

• StreetMap • Topo • Imagery • Terrain • Shaded Relief • Physical

– DeLorme – Ocean base

!5

Tile Sources (Open and Commercial)

• Cloudmade • Mapbox • Open Street Maps (OSM) • Acetate • High definition imagery providers

!

• Run your own tile server – More detail here

!6

Overlays

• DBpedia • OpenWeatherMap

– Rain – Pressure

• Acetate

!7

Overview of mapping services: Tiles

!8

Client !Web page or mobile app

Tile provider

Overview of mapping services: Layers

!9

Client !Web page or mobile app

Tile providerLayer providersBase layer

Overlay layers

Overview of mapping services: Layers

!10

Base Layer Examples

!11

Make your own maps

• mapbox.com • cloudmade.com

!12

Overview of mapping services: Markers

!13

Overlay layers

• Can be generated from static image sets or dynamically from database queries • openweathermaps.org

!14

Rainfall from Openweathermaps

!15

Barometric Pressure from Openweathermaps

!16

Markers and places of interest from DBPedia linked data

!17

Leaflet Plugins

• Layers & Overlays – Leaflet.MultiTileLayer – Leaflet.Awesome-

Markers – Leaflet.markercluster !

• Services, Providers and Formats

– Plugins by Pavel Shramov GPX, KML layers; Bing tile layer; Google and Yandex layers (implemented with their APIs), Permalink and alternative Scale controls.

– leaflet-providers – Leaflet.dbpediaLayer

load via ajax from DBpedia's SPARQL endpoint.

!18

Leaflet plugins

• Controls and Interaction

– Leaflet.draw – Leaflet Time-Slider

• Other Plugins and Libraries !

!

!

• Geocoding (Address Lookup)

– Leaflet GeoSearch Google, OpenStreetMap Nominatim, Bing, Esri and Nokia.

!19

Leaflet basic example

!20

// create a map in the "map" div, set the view to a given place and zoom var map = L.map(‘map’).setView([-6.9147,107.6098 ], 13); !// add an OpenStreetMap tile layer L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' }).addTo(map); !// add a marker in the given location, // attach some popup content to it and open the popup L.marker([51.5, -0.09]).addTo(map) .bindPopup('A pretty CSS3 popup. <br> Easily customizable.') .openPopup();

<div> containing map in HTML page

Full featured example• Multiple map tile and overlay

providers • Address lookup • Geolocation • Annotation • DBPedia Linked data search and

display

!21

Behind the scenes: SPARQL query

!22

Behind the scenes: SPARQL response

!23

Behind the scenes: SPARQL JSON

!24

OpenGeo Suite

• A packaged set of open source technologies to operate a personal or institutional map server

– http://boundlessgeo.com/solutions/opengeo-suite/

!25

Summary

• Leaflet – Open Source – Easy to use – Powerful API – Different map layers

• Open and Commercial – Overlaying static and dynamic information

!26