* OpenStreetMap Taiwan - Webinar #6 - Google+ https://plus.google.com/events/cnblf0a5cotnqonh75qn9uto87k

1. 1
以 Leaflet
濫用 ^H^H 呈現
開放街圖資料
Rex Tsai
chihchun@kalug.linux.org.tw
http://nutsfactory.net/
OpenStreetMap Taiwan - Webinar #6
2014-03-18

2. 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. 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. 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. 5
Easy to extend tiles
● 內政部國土測繪中心
● 行政院農業委員會林務局
農林航空測量所
● 中央研究院人文社會科學
研究中心地理資訊科學研
究專題中心
● 嘉義百年地圖
● 台南百年地圖
● 經濟部地質圖
http://chihchun.github.io/leaflet-tw/

6. 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 map
var 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. 7
Map Control

8. 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. 9
台鐵嘉義車站 (node: 259995446)
http://www.openstreetmap.org/node/259995446

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

11. 11
L.OSM.DataLayer
https://github.com/chihchun/kano/blob/master/index.html
http://chihchun.github.io/kano/

12. 12
Search API
● Changelog -
whodidit
● Nomination
● XAPI

13. 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. 14
A bit hack for chagnelog player
http://chihchun.github.io/party20140215/
https://github.com/chihchun/party20140215

15. 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. 16
Geocoding
http://chihchun.github.io/leaflet-tw/sample/atis.html
https://github.com/chihchun/leaflet-tw/blob/master/sample/atis.html

17. 17
OSM eXtended API
● Query Map
● Query by Tags
● Predicates
● Tag
● Bbox
● Child Element
Predicates
● Implementations
● jXPI
● Overpass API
● Xappy.js

18. 18
–台南百年地圖 古蹟 Histroic
https://github.com/chihchun/leaflet-tw/blob/gh-pages/sample/rchss-tainan-xapi.html
http://chihchun.github.io/leaflet-tw/sample/rchss-tainan-xapi.html

19. 19
公車路線 Bus Route
http://chihchun.github.io/leaflet-bus/
https://github.com/chihchun/leaflet-bus

20. 20
Build you own map!

21. 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