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

12,805 views

Published on

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

Published in: Technology
0 Comments
17 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
12,805
On SlideShare
0
From Embeds
0
Number of Embeds
3,294
Actions
Shares
0
Downloads
18
Comments
0
Likes
17
Embeds 0
No embeds

No notes for slide

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

  1. 1. 1 以 Leaflet 濫用 ^H^H 呈現 開放街圖資料 Rex Tsai chihchun@kalug.linux.org.tw http://nutsfactory.net/ OpenStreetMap Taiwan - Webinar #6 2014-03-18
  2. 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. 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. 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. 5 Easy to extend tiles ● 內政部國土測繪中心 ● 行政院農業委員會林務局 農林航空測量所 ● 中央研究院人文社會科學 研究中心地理資訊科學研 究專題中心 ● 嘉義百年地圖 ● 台南百年地圖 ● 經濟部地質圖 http://chihchun.github.io/leaflet-tw/
  6. 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. 7 Map Control
  8. 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. 9 台鐵嘉義車站 (node: 259995446) http://www.openstreetmap.org/node/259995446
  10. 10. 10 XML http://www.openstreetmap.org/api/0.6/node/259995446
  11. 11. 11 L.OSM.DataLayer https://github.com/chihchun/kano/blob/master/index.html http://chihchun.github.io/kano/
  12. 12. 12 Search API ● Changelog - whodidit ● Nomination ● XAPI
  13. 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. 14 A bit hack for chagnelog player http://chihchun.github.io/party20140215/ https://github.com/chihchun/party20140215
  15. 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. 16 Geocoding http://chihchun.github.io/leaflet-tw/sample/atis.html https://github.com/chihchun/leaflet-tw/blob/master/sample/atis.html
  17. 17. 17 OSM eXtended API ● Query Map ● Query by Tags ● Predicates ● Tag ● Bbox ● Child Element Predicates ● Implementations ● jXPI ● Overpass API ● Xappy.js
  18. 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. 19 公車路線 Bus Route http://chihchun.github.io/leaflet-bus/ https://github.com/chihchun/leaflet-bus
  20. 20. 20 Build you own map!
  21. 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

×