Your SlideShare is downloading. ×
Building Maps with Leaflet
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Building Maps with Leaflet

847
views

Published on

Building Maps using the LeafletJS toolkit

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
847
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
36
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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

×