Building Maps with Leaflet
-
Upload
andrew-howard -
Category
Education
-
view
939 -
download
10
description
Transcript of Building Maps with Leaflet
![Page 1: Building Maps with Leaflet](https://reader034.fdocuments.net/reader034/viewer/2022042700/5584437cd8b42a56178b532e/html5/thumbnails/1.jpg)
!
Building Maps with Leaflet
Andrew Howard Digital Humanities Hub The Australian National University
![Page 2: Building Maps with Leaflet](https://reader034.fdocuments.net/reader034/viewer/2022042700/5584437cd8b42a56178b532e/html5/thumbnails/2.jpg)
What is Leaflet
• A lightweight Open Source toolkit for displaying web and mobile friendly maps.
• http://www.leafletjs.com
!2
![Page 3: Building Maps with Leaflet](https://reader034.fdocuments.net/reader034/viewer/2022042700/5584437cd8b42a56178b532e/html5/thumbnails/3.jpg)
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
![Page 4: Building Maps with Leaflet](https://reader034.fdocuments.net/reader034/viewer/2022042700/5584437cd8b42a56178b532e/html5/thumbnails/4.jpg)
Map API’s
• Leaflet !
!
!
!
!
!
!
!
• Google • Bing • OSM • ERSI
!4
![Page 5: Building Maps with Leaflet](https://reader034.fdocuments.net/reader034/viewer/2022042700/5584437cd8b42a56178b532e/html5/thumbnails/5.jpg)
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
![Page 6: Building Maps with Leaflet](https://reader034.fdocuments.net/reader034/viewer/2022042700/5584437cd8b42a56178b532e/html5/thumbnails/6.jpg)
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
![Page 7: Building Maps with Leaflet](https://reader034.fdocuments.net/reader034/viewer/2022042700/5584437cd8b42a56178b532e/html5/thumbnails/7.jpg)
Overlays
• DBpedia • OpenWeatherMap
– Rain – Pressure
• Acetate
!7
![Page 8: Building Maps with Leaflet](https://reader034.fdocuments.net/reader034/viewer/2022042700/5584437cd8b42a56178b532e/html5/thumbnails/8.jpg)
Overview of mapping services: Tiles
!8
Client !Web page or mobile app
Tile provider
![Page 9: Building Maps with Leaflet](https://reader034.fdocuments.net/reader034/viewer/2022042700/5584437cd8b42a56178b532e/html5/thumbnails/9.jpg)
Overview of mapping services: Layers
!9
Client !Web page or mobile app
Tile providerLayer providersBase layer
Overlay layers
![Page 10: Building Maps with Leaflet](https://reader034.fdocuments.net/reader034/viewer/2022042700/5584437cd8b42a56178b532e/html5/thumbnails/10.jpg)
Overview of mapping services: Layers
!10
![Page 11: Building Maps with Leaflet](https://reader034.fdocuments.net/reader034/viewer/2022042700/5584437cd8b42a56178b532e/html5/thumbnails/11.jpg)
Base Layer Examples
!11
![Page 13: Building Maps with Leaflet](https://reader034.fdocuments.net/reader034/viewer/2022042700/5584437cd8b42a56178b532e/html5/thumbnails/13.jpg)
Overview of mapping services: Markers
!13
![Page 14: Building Maps with Leaflet](https://reader034.fdocuments.net/reader034/viewer/2022042700/5584437cd8b42a56178b532e/html5/thumbnails/14.jpg)
Overlay layers
• Can be generated from static image sets or dynamically from database queries • openweathermaps.org
!14
![Page 15: Building Maps with Leaflet](https://reader034.fdocuments.net/reader034/viewer/2022042700/5584437cd8b42a56178b532e/html5/thumbnails/15.jpg)
Rainfall from Openweathermaps
!15
![Page 16: Building Maps with Leaflet](https://reader034.fdocuments.net/reader034/viewer/2022042700/5584437cd8b42a56178b532e/html5/thumbnails/16.jpg)
Barometric Pressure from Openweathermaps
!16
![Page 17: Building Maps with Leaflet](https://reader034.fdocuments.net/reader034/viewer/2022042700/5584437cd8b42a56178b532e/html5/thumbnails/17.jpg)
Markers and places of interest from DBPedia linked data
!17
![Page 18: Building Maps with Leaflet](https://reader034.fdocuments.net/reader034/viewer/2022042700/5584437cd8b42a56178b532e/html5/thumbnails/18.jpg)
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
![Page 19: Building Maps with Leaflet](https://reader034.fdocuments.net/reader034/viewer/2022042700/5584437cd8b42a56178b532e/html5/thumbnails/19.jpg)
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
![Page 20: Building Maps with Leaflet](https://reader034.fdocuments.net/reader034/viewer/2022042700/5584437cd8b42a56178b532e/html5/thumbnails/20.jpg)
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
![Page 21: Building Maps with Leaflet](https://reader034.fdocuments.net/reader034/viewer/2022042700/5584437cd8b42a56178b532e/html5/thumbnails/21.jpg)
Full featured example• Multiple map tile and overlay
providers • Address lookup • Geolocation • Annotation • DBPedia Linked data search and
display
!21
![Page 22: Building Maps with Leaflet](https://reader034.fdocuments.net/reader034/viewer/2022042700/5584437cd8b42a56178b532e/html5/thumbnails/22.jpg)
Behind the scenes: SPARQL query
!22
![Page 23: Building Maps with Leaflet](https://reader034.fdocuments.net/reader034/viewer/2022042700/5584437cd8b42a56178b532e/html5/thumbnails/23.jpg)
Behind the scenes: SPARQL response
!23
![Page 24: Building Maps with Leaflet](https://reader034.fdocuments.net/reader034/viewer/2022042700/5584437cd8b42a56178b532e/html5/thumbnails/24.jpg)
Behind the scenes: SPARQL JSON
!24
![Page 25: Building Maps with Leaflet](https://reader034.fdocuments.net/reader034/viewer/2022042700/5584437cd8b42a56178b532e/html5/thumbnails/25.jpg)
OpenGeo Suite
• A packaged set of open source technologies to operate a personal or institutional map server
– http://boundlessgeo.com/solutions/opengeo-suite/
!25
![Page 26: Building Maps with Leaflet](https://reader034.fdocuments.net/reader034/viewer/2022042700/5584437cd8b42a56178b532e/html5/thumbnails/26.jpg)
Summary
• Leaflet – Open Source – Easy to use – Powerful API – Different map layers
• Open and Commercial – Overlaying static and dynamic information
!26