The document discusses the use of the Leaflet JavaScript library for creating web maps, particularly for OpenStreetMap data. It highlights various features of Leaflet, including its lightweight nature, customizability through plugins, and support for different map layers. It also provides resources and examples for deploying custom maps and using related APIs for geocoding and data rendering.

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