# 沒有60萬？<br>試試架設不花錢的地圖服務吧 謝晉凡 (typebrook) --- ## 自我介紹 - OpenStreetMap Mapper - Hiker - Android Developer --- ## 事情經過  --- ## 死鬼！錢花到哪裡去了？ - 30刀 的 Place API! - [Dynamic Maps Pricing](https://developers.google.com/maps/billing/gmp-billing?hl=zh-tw#dynamic-maps)  - (600,000 NTD / 30) / (5.6 USD / 1,000 usage) = 3571,428 =~ 360萬 （JS code usage） --- # 如何免費使用？ --- <iframe height=700px width=100% frameborder="0" src='https://gistpreview.github.io/?43ac7c182a8189c8561d2c97eaf2f4e2/unauthorized.html'></iframe> --- <iframe height=700px width=100% frameborder="0" src='https://gistpreview.github.io/?43ac7c182a8189c8561d2c97eaf2f4e2/google.html'></iframe> ---  --- <iframe height=700px width=100% frameborder="0" src='https://gistpreview.github.io/?43ac7c182a8189c8561d2c97eaf2f4e2/osm-in-google.html'></iframe> --- ## [OSM in Google Map](https://wiki.openstreetmap.org/wiki/Google_Maps_Example)  [https://tile.openstreetmap.org/{z}/{x}/{y}.png](https://tile.openstreetmap.org/14/13723/7015) --- # The End --- # The End? --- ## 先來講講圖磚 (Tiles) - WGS 84 / Pseudo-Mercator -> 將地球投影成**正方形** - z=0 全球表面積 - z=3 澳洲大陸 - z=6 全台灣 - z=10 大台北地區 - z=14 台大校總區 --- ## 先來講講圖磚 (Tiles) - z=1  --- ## 先來講講圖磚 (Tiles) - z=8  --- ## 口罩地圖  --- ## Map Tools - Google Map - Mapbox - ArcGIS Map - [Leaflet](https://leafletjs.com/plugins.html) - 小巧！ 138KB - Only JS - OpenLayer - Only JS - Tangram --- ## Raster Tiles - Pros - 毋需處理、取得即可用 - 支援大部分工具 - Cons - 無法進一步壓縮 -> 30KB - 太糊了 - 需要較高縮放層級 - 可觀的流量 --- ## OSM [Tile Usage Policy](https://operations.osmfoundation.org/policies/tiles/) > OpenStreetMap data is free for everyone to use. Our tile servers are not. --- ## 什麼是ODBL? - 開放資料庫授權 - 權利 - 分享：複製、散布與使用資料庫 - 創造：從資料庫產生作品 - 修改：變更、轉換與建立資料庫 - 義務 - 標明授權條款 - 相同方式分享 - 保持開放 - OGDL --- # Google Maps V.S. OpenStreetMap --- # Google Maps V.S. OpenStreetMap ## 不一樣的東西怎麼比？ --- ## Google Maps #### A full series of services  --- ## OpenStreetMap Infrastructure #### There is no magic!  --- ### [陳平偉紀念公園](https://www.google.com/maps/place/%E9%99%B3%E5%B9%B3%E5%81%89%E7%B4%80%E5%BF%B5%E5%85%AC%E5%9C%92/@24.6577749,124.6856013,17z/data=!4m5!3m4!1s0x34f56f1bd6d31815:0xd105290b4bd6c6d!8m2!3d24.65777!4d124.68779)  --- ## "OSM" Flow ```mermaid graph TD id1[(OSM Database)] id2(osm.pbf, osc) id3{{"Magic"}} id4(Tiles) id5(Other Dataset) id1--Dump-->id2--Pre-processing-->id3 id3--generate-->id4 id5--import-->id3 ``` --- ## NLSC - 符合OGC WMTS - 道路、地籍圖 - Only Raster Tiles --- ## Mapbox - 完整生態系 - Better default Styles - 自訂性高 (Mapbox Studio) - 直接將dataset發布為Tile Service --- ## Mapbox(2019)  --- ## Mapbox(2020)  --- ## MapTiler - Host Cluld Service - Show localized Map  --- ## Mapzen & Tangram - Nextzen - StreetComplete - Protomap --- ## 需求 撇除工程師偏好... - 格式： - [ ] XYZ - [ ] WMTS (變換圖層) - [ ] TileJSON - 用途 - [ ] Raster: 單純作為背景 （png, jpg) - [ ] Vector: 自訂、使用原始資料（MVT） - [ ] 使用人數 - [ ] 使用週期 (一場活動？ 一個政令？ 一個網頁？) 還有... --- # 你的口袋深度! --- ## 我的需求 - 山域使用、高度自訂 - 下載後離線使用 - 更新頻率高 - 需顯示不同語言 - 僅提供台灣地區 --- ## Github Workflow - 可以使用`Cron job`定時啟動 - 支援拉取Docker Hub - 直接將其它專案作為 Github Action - 真正免費！ - [mapstew](https://github.com/typebrook/mapstew) - 3個 YAML 檔案搞定一切 --- ## Steps - Houly update 1. Get latest `osm.pbf` from [Github Release](https://github.com/typebrook/mapstew/releases/tag/daily-taiwan-pbf) 1. Use `osmctools` to update `osm.pbf` 1. Update release 1. Check out at `gh-pages` 1. Use `tilemaker` to generate tiles 1. Commit tiles to git, and push to Github --- ## Steps - Daily fetch 1. Just download `osm.pbf` 1. Update Github Release --- ## Steps - Sync master #### Trigered when new commit on `master` 1. Check out with depth = 1 1. Fetch `master` with depth = 1 1. Merge with strategy & Push to Github --- ## Stacks - [**Goefabrik**](http://download.geofabrik.de/asia/taiwan.html) / Protomaps - Get daily osm.pbf. - [**osmctools**](https://github.com/ramunasd/osmctools) - Update osm.pbf hourly. - Here I use [custom docker image](https://hub.docker.com/r/osmtw/osmctools) (smaller size with `debian:stable-slim` to boost Github workflow) - [**tilemaker**](https://github.com/systemed/tilemaker) - Generate MVT directly from `osm.pbf` file. --- ## tilemaker ### 一步到位! ```mermaid graph TD id2(osm.pbf, osc) id3(tilemkaer) id4(Tiles) id2-->id3--Apply configuration-->id4 ``` --- ## Result  --- ## Result #### https://typebrook.github.io/mapstew <iframe height=700px width=100% frameborder="0" src='https://typebrook.github.io/mapstew'></iframe> --- ## tilemaker - Solved: - Filter features by `length` and `area` - OpenMapTiles Schema - Need: - Use MVT/MBTiles as Datasource --- ## 自己的資源自己Host  --- # THE END --- # 題外話 --- ## 其實...我也有痛過...  --- ## 工程師的素養-風險控管  --- ## Tile Collection https://gist.github.com/a61ccca5b3d46f36784c120bf30c4236 --- ## [Google Vector](https://developers.google.com/maps/documentation/javascript/vector-map) <iframe height=700px width=100% frameborder="0" src='https://gistpreview.github.io/?43ac7c182a8189c8561d2c97eaf2f4e2/styled.html'></iframe> --- ## Mapbox 的限制 - Offline Map - Studio 限制 --- ## POC on gist - Version Control - Source Code --- ## OpenLayer Example <iframe height=400px width=100% frameborder="0" src='https://sharkbig.github.io/rescue/#map=23/121.301578,/24.528892'></iframe> --- ### Others - Refs: OSM wiki - Issue I get when developing ### List of mentioned - icons - pros cons ### Check List - 市儈、safety first、懶趴握在別人手上 - 窩不知道 - check audience experience - Have project about Google Map SDK/API - 口罩地圖 - English desc - Promote protomap、卓騰