Building Maps using the LeafletJS toolkit

1. !
Building Maps with Leaflet
Andrew Howard
Digital Humanities Hub
The Australian National University

2. What is Leaflet
• A lightweight Open Source toolkit for
displaying web and mobile friendly maps.
• http://www.leafletjs.com
!2

3. 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

4. Map API’s
• Leaflet
!
!
!
•
•
•
•
Google
Bing
OSM
ERSI
!
!
!
!
!
!4

5. 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

6. 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

7. Overlays
• DBpedia
• OpenWeatherMap
– Rain
– Pressure
• Acetate
!7

8. Overview of mapping services: Tiles
Client
!
Web page
or mobile app
Tile provider
!8

9. Overview of mapping services: Layers
Overlay layers
Client
!
Web page
or mobile app
Base layer
Layer providers
Tile provider
!9

10. Overview of mapping services: Layers
!10

11. Base Layer Examples
!11

12. Make your own maps
• mapbox.com
• cloudmade.com
!12

13. Overview of mapping services: Markers
!13

14. Overlay layers
• Can be generated from static image sets
or dynamically from database queries
• openweathermaps.org
!14

15. Rainfall from Openweathermaps
!15

16. Barometric Pressure from
Openweathermaps
!16

17. Markers and places of interest from
DBPedia linked data
!17

18. Leaflet Plugins
• Layers & Overlays
– Leaflet.MultiTileLayer
– Leaflet.AwesomeMarkers
– 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

19. 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

20. Leaflet basic example
<div> containing map in HTML page
// 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();
!20

21. Full featured example
• Multiple map tile and overlay
providers
• Address lookup
• Geolocation
• Annotation
• DBPedia Linked data search and
display
!21

22. Behind the scenes: SPARQL query
!22

23. Behind the scenes: SPARQL response
!23

24. Behind the scenes: SPARQL JSON
!24

25. OpenGeo Suite
• A packaged set of open source
technologies to operate a personal or
institutional map server
– http://boundlessgeo.com/solutions/opengeo-suite/
!25

26. Summary
• Leaflet
– Open Source
– Easy to use
– Powerful API
– Different map layers
• Open and Commercial
– Overlaying static and dynamic information
!26