Building Maps with Leaflet

56 %
44 %
Information about Building Maps with Leaflet
Education

Published on January 20, 2014

Author: AndrewHoward2

Source: slideshare.net

Description

Building Maps using the LeafletJS toolkit

! 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 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 provider !9

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 ! • 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 <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

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

Add a comment

Related presentations

Related pages

Building Interactive Maps with Leaflet | DataScience+

Leaflet is an JavaScript library for building interactive maps. RStudio released a package that allows us to build these maps in R! You can do some really ...
Read more

Leaflet - a JavaScript library for interactive maps

Leaflet doesn't try to do everything for everyone. ... Very nice default design for markers, popups and map controls; Retina resolution support;
Read more

Getting started with Leaflet | switch2osm

Building a tile server from packages; ... Congratulations; you have embedded your first map with Leaflet. Showing markers as the user pans around the map.
Read more

Building Interactive Maps with Leaflet | R-bloggers

Leaflet is an JavaScript library for building interactive maps. RStudio released a package that allows us to build these maps in R! You can do some really cool
Read more

Download - Leaflet - a JavaScript library for interactive maps

for mobile-friendly interactive maps. Overview; ... Leaflet Source Code. These download packages above only contain ... Building a Custom Version of Leaflet.
Read more

Geolocation Part II: Building Interactive Maps with Leaflet

The first parameter passed into setView() represents the latitude and longitude, and the second parameter is the zoom level. Now we just need to add tiles.
Read more

Building your first Leaflet.js map - GitHub - csessig86 ...

readme.md Building your first Leaflet.js map. This is the code behind my NICAR 2016 session on making maps with Leaflet.js. This is map we will be building
Read more

Leaflet Google Maps | Drupal.org - Drupal - Open Source ...

Old description Leaflet integration with Google Maps layers. ... Maintainers for Leaflet Google Maps. jherencia - 10 commits. ... Site Building Guide; Support;
Read more