0
!

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.co...
Why Leaflet
•
•
•
•

Small and fast (~33KB for base toolkit)
Easy to use API
Extensive range of plug-ins
Supports a variet...
Map API’s
• Leaflet
!
!
!

•
•
•
•

Google
Bing
OSM
ERSI

!
!
!
!
!

!4
Tile Sources (Open and Commercial)
• Bing
– Road
– Aerial

• Google
– Satellite
– Terrain
– Hybrid
!
!
!

• ERSI
– World
•...
Tile Sources (Open and Commercial)
•
•
•
•
•

Cloudmade
Mapbox
Open Street Maps (OSM)
Acetate
High definition imagery prov...
Overlays
• DBpedia
• OpenWeatherMap
– Rain
– Pressure

• Acetate

!7
Overview of mapping services: Tiles

Client
!

Web page
or mobile app

Tile provider

!8
Overview of mapping services: Layers
Overlay layers

Client
!

Web page
or mobile app

Base layer

Layer providers
Tile pr...
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.AwesomeMarkers
– Leaflet.markercluster
!

• Service...
Leaflet plugins
• Controls and
Interaction
– Leaflet.draw
– Leaflet Time-Slider

• Other Plugins and
Libraries

• Geocodin...
Leaflet basic example
<div> containing map in HTML page
// create a map in the "map" div, set the view to a given place an...
Full featured example
• Multiple map tile and overlay
providers
• Address lookup
• Geolocation
• Annotation
• DBPedia Link...
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://boun...
Summary
• Leaflet
– Open Source
– Easy to use
– Powerful API
– Different map layers
• Open and Commercial

– Overlaying st...
Upcoming SlideShare
Loading in...5
×

Building Maps with Leaflet

976

Published on

Building Maps using the LeafletJS toolkit

Published in: Education, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
976
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
43
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Building Maps with Leaflet"

  1. 1. ! Building Maps with Leaflet Andrew Howard Digital Humanities Hub The Australian National University
  2. 2. What is Leaflet • A lightweight Open Source toolkit for displaying web and mobile friendly maps. • http://www.leafletjs.com !2
  3. 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. 4. Map API’s • Leaflet ! ! ! • • • • Google Bing OSM ERSI ! ! ! ! ! !4
  5. 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. 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. 7. Overlays • DBpedia • OpenWeatherMap – Rain – Pressure • Acetate !7
  8. 8. Overview of mapping services: Tiles Client ! Web page or mobile app Tile provider !8
  9. 9. Overview of mapping services: Layers Overlay layers Client ! Web page or mobile app Base layer Layer providers Tile provider !9
  10. 10. Overview of mapping services: Layers !10
  11. 11. Base Layer Examples !11
  12. 12. Make your own maps • mapbox.com • cloudmade.com !12
  13. 13. Overview of mapping services: Markers !13
  14. 14. Overlay layers • Can be generated from static image sets or dynamically from database queries • openweathermaps.org !14
  15. 15. Rainfall from Openweathermaps !15
  16. 16. Barometric Pressure from Openweathermaps !16
  17. 17. Markers and places of interest from DBPedia linked data !17
  18. 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. 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. 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. 21. Full featured example • Multiple map tile and overlay providers • Address lookup • Geolocation • Annotation • DBPedia Linked data search and display !21
  22. 22. Behind the scenes: SPARQL query !22
  23. 23. Behind the scenes: SPARQL response !23
  24. 24. Behind the scenes: SPARQL JSON !24
  25. 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. 26. Summary • Leaflet – Open Source – Easy to use – Powerful API – Different map layers • Open and Commercial – Overlaying static and dynamic information !26
  1. Gostou de algum slide específico?

    Recortar slides é uma maneira fácil de colecionar informações para acessar mais tarde.

×