building maps with leaflet
DESCRIPTION
Building Maps using the LeafletJS toolkitTRANSCRIPT
!
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
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: '© <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