• Like
  • Save
以 Leaflet 濫用^H^H呈現開放街圖資料
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 8,845 views

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

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

Statistics

Views

Total Views
8,845
Views on SlideShare
7,560
Embed Views
1,285

Actions

Likes
6
Downloads
5
Comments
0

17 Embeds 1,285

http://blog.nutsfactory.net 1105
http://iambigd.blogspot.tw 67
http://feedly.com 51
https://twitter.com 28
http://www.slideee.com 10
http://192.168.33.10 4
http://xianguo.com 3
http://iambigd.blogspot.hk 3
http://iambigd.blogspot.com 3
http://translate.googleusercontent.com 3
http://www.google.com.tw 2
http://www.newsblur.com 1
http://www.feedspot.com 1
http://reader.aol.com 1
http://iambigd.blogspot.ru 1
https://reader.aol.com 1
http://webcache.googleusercontent.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

    • 1 以 Leaflet 濫用 ^H^H 呈現 開放街圖資料 Rex Tsai chihchun@kalug.linux.org.tw http://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 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 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.html http://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.html https://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.html http://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