Your SlideShare is downloading. ×
0
以 Leaflet 濫用^H^H呈現開放街圖資料
以 Leaflet 濫用^H^H呈現開放街圖資料
以 Leaflet 濫用^H^H呈現開放街圖資料
以 Leaflet 濫用^H^H呈現開放街圖資料
以 Leaflet 濫用^H^H呈現開放街圖資料
以 Leaflet 濫用^H^H呈現開放街圖資料
以 Leaflet 濫用^H^H呈現開放街圖資料
以 Leaflet 濫用^H^H呈現開放街圖資料
以 Leaflet 濫用^H^H呈現開放街圖資料
以 Leaflet 濫用^H^H呈現開放街圖資料
以 Leaflet 濫用^H^H呈現開放街圖資料
以 Leaflet 濫用^H^H呈現開放街圖資料
以 Leaflet 濫用^H^H呈現開放街圖資料
以 Leaflet 濫用^H^H呈現開放街圖資料
以 Leaflet 濫用^H^H呈現開放街圖資料
以 Leaflet 濫用^H^H呈現開放街圖資料
以 Leaflet 濫用^H^H呈現開放街圖資料
以 Leaflet 濫用^H^H呈現開放街圖資料
以 Leaflet 濫用^H^H呈現開放街圖資料
以 Leaflet 濫用^H^H呈現開放街圖資料
以 Leaflet 濫用^H^H呈現開放街圖資料
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

11,056

Published on

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

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

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

No Downloads
Views
Total Views
11,056
On Slideshare
0
From Embeds
0
Number of Embeds
20
Actions
Shares
0
Downloads
13
Comments
0
Likes
10
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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

×