---
type: slide
---

## 淺談開放街圖(OpenStreetMap)<br>及其生態系

---

<!-- .slide: data-background="#FFFFFF" -->

### About me

<img width="300px" src="https://hackmd.io/_uploads/S1sB6N89h.png">

- 謝晉凡(typebrook)
- OSM, 登山, Unix
- 曾任究心公益科技(Android)
- 待業中

---

# The Basics

---

## Compare to Google Maps

----

## 軟體資源有幾個層次

- 原始資料（從現實世界取得的資訊）

- 服務（API、加值過後的資料）

- 產品（最終使用到的軟體）

----

## Google Map 是「產品」

- ~~原始資料~~（你接觸不到）
- 服務
- Map SDK
- POI/Navigation API
- 產品
- Google 地圖: www.google.com/maps/
- 我的地圖
- Android/iOS: 地圖
- Google Earth

----

## OSM 是「資料庫」

- [ 原始資料 ](https://planet.openstreetmap.org/pbf/planet-230417.osm.pbf.torrent)
- 使用開放資料庫授權
- 服務
- [圖磚 API](http://b.tile.openstreetmap.org/15/27430/14142.png)
- [資料庫 API](https://www.openstreetmap.org/api/0.6/node/3874898356)
- ~~產品~~

---

## Everyone owns OSM

- 一份地理資料集/庫，有制度、有社群
- 使用 ODbL 授權
- 由 OSMF (開放街圖基金會) 保護、推廣、支持
**但不擁有**

---

## How it works?

- Postgres: https://wiki.openstreetmap.org/wiki/Database
- Budget: https://wiki.osmfoundation.org/wiki/Board/Minutes/2023-02/Budget

----

<!-- .slide: data-background="#FFFFFF" -->

---

## Why it rocks?

- Community Driven, no one dominates
- [ODbL](https://wiki.openstreetmap.org/wiki/Legal_FAQ)
- [使用案例](https://hackmd.io/@osm-tw/rkhoFl9jO#/5)

---

# 資料長什麼樣?

---

## OSM 只包含三

| 種類 | id | tag | 地理資訊 |
|:--------:|:---:|:---:|:----------:|
| node | 有 | 有 | 座標 |
| way | 有 | 有 | nodes |
| relation | 有 | 有 | ways/nodes |

---

## 取得資料

- 好想工作室
https://openstreetmap.org/node/7602886831
- XML格式 (試著加上.json)
https://openstreetmap.org/api/0.6/node/7602886831
- L棟倉庫創意生活館
https://openstreetmap.org/api/0.6/way/204493492
- 公園里
https://openstreetmap.org/api/0.6/relation/3756152

----

## 依照條件取得資料

- 依照地名/關鍵字: osm.org
https://www.openstreetmap.org/search?query=

- tag 統計: taginfo
http://taginfo.openstreetmap.org/

- 依照 type/tag: Overpass
https://overpass-turbo.eu/

- 依照貢獻方式: OSM Change Analyzer
https://osmcha.mapbox.com/

-

## 取得整份資

- Planet
https://planet.openstreetmap.org/pbf
- Extract
http://download.geofabrik.de/asia/taiwan-latest.osm.pbf

----

## 自行分析資料

- [GDAL](https://gdal.org/drivers/vector/osm.html)
- 使用 ogr2ogr 轉換格式
- 使用 SQL 語句進行篩選
- [osm-c-tools](https://github.com/ramunasd/osmctools)
- osmconvert 轉換格式
- osmfilter 進行篩選
- [osmium](https://osmcode.org/osmium-tool/)
- 直接進行格式轉換和篩選

---

## 如何使用?

切換到 OSM 生態系

----

## Why?

別跟錢錢過不去！

----

[開發口罩地圖 他收60萬帳單驚呆了](https://tw.news.yahoo.com/%E9%96%8B%E7%99%BC%E5%8F%A3%E7%BD%A9%E5%9C%B0%E5%9C%96-%E4%BB%96%E6%94%B660%E8%90%AC%E5%B8%B3%E5%96%AE%E9%A9%9A%E5%91%86%E4%BA%86-132018239.html)

---

## 模式1<br>底圖 + 資料

----

### Case 展示點/線/面資料

[口罩地圖](https://kiang.github.io/pharmacies/)


----

## 使用相關圖磚服務

- openstreetmap.org
- OSM WIKI
- [Ready to use](https://wiki.openstreetmap.org/wiki/Using_OpenStreetMap#Ready-made_online_maps)
- [Tile Provider](https://wiki.openstreetmap.org/wiki/Tiles#Tile_providers)
- [Maptiler](https://www.maptiler.com/data/pricing/)
- [Stamen](https://stamen.com/)

----

## 使用相關框架

- Switch to OSM
-
https://switch2osm.org/the-basic

- Integrate OSM by default
- [Leaflet](https://leafletjs.com/examples/quick-start/)
- [Openlayers](https://openlayers.org/en/latest/examples/simple.html)
- [Maplibre](https://maplibre.org/)
- [Mapzen/tangram](https://www.mapzen.com/)

---

## 模式2<br>在圖磚中塞入向量資料

----


----

### Case: 自由變換使用語言

[Example](https://documentation.maptiler.com/hc/en-us/articles/4405445343889-How-to-set-the-language-for-your-map)

----

### [MVT (Mapbox Vector Tile)](https://docs.mapbox.com/help/glossary/vector-tiles/):
- 使用 [Protobuffer](https://raw.githubusercontent.com/mapbox/vector-tile-spec/master/2.1/vector_tile.proto) 格式來紀錄地理資料
- Tile -> Layer -> Feature
- 由 Schema 決定儲存的資料
- [Vector Tile Provider](https://wiki.openstreetmap.org/wiki/Vector_tiles#Providers)
- 依照框架調整渲染方式：
- [Mapbox/Maplibre style spec](https://maplibre.org/maplibre-style-spec/)
- [Trangram Scene FIle](https://tangrams.readthedocs.io/en/main/)

- 使用線上編輯器調整樣式:
- [Maputnik](https://maputnik.github.io/editor/)
- [Maptiler](https://cloud.maptiler.com/maps/editor)

---

## 模式3<br>擁有自己的圖磚服務！

----

### 想像一下，在底圖以外<br>要呈現的資料有上百萬個！

----

### Case: [台電電桿品質檢視](https://lists.openstreetmap.org/pipermail/talk-tw/2021-October/001463.html)

- [頁面連結](https://topo.tw/osm/taipower-import.html)

----

### [Brandon Liu](https://coscup.org/2023/zh-TW/session/TKMDCL) COSCUP 2023 (07/30)

----

### PMTiles and OSMExpress

- [OSMExpress](https://github.com/protomaps/OSMExpress)
- 使用單一檔案提供查找
- S2 Geometry: 快速產生地理搜尋結果
- [可以提供快速切片服務](https://app.protomaps.com/downloads/small_map)

- [PMTiles](https://protomaps.com/docs/pmtiles)
- 使用單一檔案提供 Tile Service
- S3 friendly! low-cost, zero-maintenance!

---

## 其它應用方式

- 資料庫
- [imposm](https://imposm.org)
- 產生向量圖磚
- [OpenMapTiles](https://openmaptiles.org)
- [tilemaker](https://tilemaker.org/)
- Terrain RGB
- [3D 地型](https://osmhacktw.github.io/terrain-rgb/3d.html)
- [等高線](https://onthegomap.github.io/maplibre-contour)

---

## 手機/電腦端

- Mapbox/Maplibre/Maptiler SDK
- 需要更加考慮離線方案
- rudymap.tw !

---

## Contritubion 增刪~~查~~改