1

以 Leaflet 濫用^H^H呈現開放街圖資料

Rex Tsai

chihchun@kalug.linux.org.twhttp://nutsfactory.net/

OpenStreetMap Taiwan - Webinar #6

2014-03-18

2

Web Map

● Map Database● Geocoding● Routing

● Graphical Map Tiles● Presentation● Different Styles

● Slippy Map● modern web maps which

let you zoom and pan around

Aram Bartholl http://datenform.de/mapeng.html

3

Slippy Map libraries

● Google Maps API● OpenLayers● Leaflet● Mapstraction

Deploying your own Slippy Map - OpenStreetMap Wiki http://wiki.openstreetmap.org/wiki/Deploying_your_own_Slippy_Map

4

Leaflet

● Extremely lightweight● 輕薄短小● 額外功能可以透過 plugin 添加

● Using by OSM.

● No external dependencies

● Keeps your JS environment clean

● Features● Tile layers● WMS layers● GeoJSON layers● Vector layers● support Mobile Browser● Pure CSS3 popups and

controls

● 限制● Custom map projections

* Features - Leaflet - a JavaScript library for mobile-friendly maps http://leafletjs.com/features.html

5

Easy to extend tiles

● 內政部國土測繪中心● 行政院農業委員會林務局農林航空測量所

● 中央研究院人文社會科學研究中心地理資訊科學研究專題中心● 嘉義百年地圖● 台南百年地圖

● 經濟部地質圖

http://chihchun.github.io/leaflet-tw/

6

內政部圖資var osm = new L.OSM.Mapnik();var nlscmaps = [ // new L.NLSC.PHOTO2({opacity: 0.7}), new L.NLSC.B5000({opacity: 0.7}), new L.NLSC.MB5000({opacity: 0.7}), new L.NLSC.EMAP0({opacity: 0.7}), new L.NLSC.EMAP1({opacity: 0.7}), new L.NLSC.EMAP2({opacity: 0.7}), new L.NLSC.EMAP({opacity: 0.7}), new L.NLSC.LANDSECT({opacity: 0.7}), new L.NLSC.Village({opacity: 0.7}), new L.NLSC.LUIMAP({opacity: 0.7}), ];

var baseMaps = {};baseMaps["開放街圖 "] = osm;baseMaps["正射影像圖 (通用版 )"] = new L.NLSC.PHOTO2({opacity: 1});

var overlayMaps = {};for (var i in nlscmaps) { overlayMaps[nlscmaps[i].name] = nlscmaps[i];}

// set up the mapvar map = new L.Map('map', { center: new L.LatLng( 25.03738, 121.56351 ), zoom: 17, layers: [baseMaps["正射影像圖 (通用版 )"], overlayMaps["通用版電子地圖透明 "]],} ).addControl(new L.Control.Scale()).addControl(new L.Control.Layers(baseMaps, overlayMaps));

https://github.com/chihchun/leaflet-tw/blob/master/sample/nlsc.html

7

Map Control

8

Render OpenStreetMap Data

● API http://wiki.openstreetmap.org/wiki/API_v0.6

● Download XML data.● Render library

https://github.com/jfirebaugh/leaflet-osm

● Parsing xml data, and create a vector layer for leaflet.

9

台鐵嘉義車站 (node: 259995446)

http://www.openstreetmap.org/node/259995446

10

XML

http://www.openstreetmap.org/api/0.6/node/259995446

11

L.OSM.DataLayer

https://github.com/chihchun/kano/blob/master/index.htmlhttp://chihchun.github.io/kano/

12

Search API

● Changelog - whodidit

● Nomination● XAPI

13

whodidit

● Changeset as RSS● List changes by

age● Search user.

http://zverik.osm.rambler.ru/whodidit/simon04/whodidit https://github.com/simon04/whodidit

14

A bit hack for chagnelog player

http://chihchun.github.io/party20140215/https://github.com/chihchun/party20140215

15

Nomination

● tool to search OSM data by name and address and to generate synthetic addresses of OSM points (reverse geocoding)

● format=[html|xml|json|jsonv2]

● Accept-language=

● q=<uqery>

● countrycodes=<countrycode>

● viewbox=<left>,<top>,<right>,<bottom>

● bounded=[0|1]

* Nominatim - OpenStreetMap Wiki http://wiki.openstreetmap.org/wiki/Nominatim

16

Geocoding

http://chihchun.github.io/leaflet-tw/sample/atis.htmlhttps://github.com/chihchun/leaflet-tw/blob/master/sample/atis.html

17

OSM eXtended API

● Query Map● Query by Tags● Predicates

● Tag● Bbox● Child Element

Predicates

● Implementations● jXPI● Overpass API● Xappy.js

18

– 台南百年地圖 古蹟 Histroic

https://github.com/chihchun/leaflet-tw/blob/gh-pages/sample/rchss-tainan-xapi.htmlhttp://chihchun.github.io/leaflet-tw/sample/rchss-tainan-xapi.html

19

公車路線 Bus Route

http://chihchun.github.io/leaflet-bus/https://github.com/chihchun/leaflet-bus

20

Build you own map!

21

References

* Deploying your own Slippy Map - OpenStreetMap Wiki http://wiki.openstreetmap.org/wiki/Deploying_your_own_Slippy_Map

* Slippy map tilenames - OpenStreetMap Wiki http://wiki.openstreetmap.org/wiki/Slippy_map_tilenames

* 用 1932 年的嘉義地圖看「KANO 」http://blog.nutsfactory.net/2014/03/09/chiayi-map-for-kano/

* 台灣地圖 http://chihchun.github.io/leaflet-tw/

* perliedman/leaflet-control-geocoder https://github.com/perliedman/leaflet-control-geocoder

* Xapi - OpenStreetMap Wiki http://wiki.openstreetmap.org/wiki/Xapi

* Nominatim - OpenStreetMap Wiki http://wiki.openstreetmap.org/wiki/Nominatim

* Aram Bartholl http://datenform.de/mapeng.html