---
tags: Lidemy
---

# Miscellaneous

雜項。不知道要放哪的東西們👇

## Implementation

各種教學文章。

* [30天打造我的WebGIS](https://ithelp.ithome.com.tw/users/20107816/ironman/1541)：比較詳細的內容。
* [《你的地圖會說話？ WebGIS與JavaScript的情感交織》](https://ithelp.ithome.com.tw/users/20130604/ironman/3749)：比較詳細的內容2。
* [[筆記]Web地圖開發工作坊](https://yuhantaiwan.coderbridge.io/2020/02/16/Web%E5%9C%B0%E5%9C%96%E9%96%8B%E7%99%BC%E5%B7%A5%E4%BD%9C%E5%9D%8A/)：有用 Vue 實作口罩地圖的影片。
* [Google 地圖 ( 原理 ) - Webduino 實戰智慧插座教學](https://tutorials.webduino.io/zh-tw/docs/socket/useful/google-map-1.html)、[Google Maps JavaScript API](https://developers.google.com/maps/documentation/javascript/overview)：串 google 的 API。
* [Web 視覺化(四)：建立 OpenStreetMap 地圖](https://noob.tw/openstreetmap/)：Leaflet.js + OpenStreetMap(OSM) 實作。
* [建立一個即時天氣 App](https://ithelp.ithome.com.tw/articles/10222662)：PJ 大《從 Hooks 開始，讓你的網頁 React 起來系列》連好幾篇文章手把手教React串中央氣象局API
* [[JS] 透過 JavaScript 處理檔案上傳（AJAX Upload byte / JSON / formData File](https://pjchender.blogspot.com/2019/01/js-javascript-input-file-upload-file.html): 圖片上傳實作的各種方法。
* Firebase fb login:
* [firebase-facebook login document]( https://firebase.google.com/docs/auth/web/facebook-login?fbclid=IwAR2ySPjSfkPkzF89rbGRQFdkTCpGYYb8GNwuyNpM3uMhhAdLjOFtBi9VfD8)
* [教學影片](https://www.youtube.com/watch?v=D9kD9ynsBtY)
* Firebase google login:
* [firebase-google login document](https://firebase.google.com/docs/auth/web/google-signin)
* Firebase fb/google register:
* [it邦邦忙文章](https://ithelp.ithome.com.tw/articles/10199971)

## Source

各種資料來源。

* [地圖產生器](https://map.happyman.idv.tw/~mountain/twmap3/#)：我覺得這種呈現資料的方式不錯。以地圖瀏覽，選取想要的地點（山？）後右邊跳出詳細資料，列出不同路線的資料與 GPX。
* [[tile-URL] 紀錄一些圖磚的url](https://gist.github.com/typebrook/a61ccca5b3d46f36784c120bf30c4236)
* [happyman、魯地圖 tile server](https://gis.rchss.sinica.edu.tw/qgis/?p=4195)：有等高線，可能對登山來說比較適合。
* [中央研究院 WMTS 服務](https://gis.sinica.edu.tw/tileserver/)：政府的各種資料，爬山地圖方面經建三也蠻常看到的。
* [OpenStreetMap 台灣](https://osm.tw/)：開源免費，魯地圖也是取這邊的資料作為基底再加上等高線。
* [Windy](https://api.windy.com/map-forecast/docs)：天氣的API
* [查詢或修正高程資料之API服務](http://gis.rchss.sinica.edu.tw/qgis/?p=4539)：高度的 API。
* [民生示警公開資料平台](https://alerts.ncdr.nat.gov.tw/RSS.aspx#)：政府的 API，提供災害方面的資訊。

## Tools

各種工具。

* [Publib api](https://github.com/public-apis/public-apis): A collective list of free APIs for use in software and web development。內含各種類別可能會用得上的 api
* [Leaflet](https://leafletjs.com/index.html)：an open-source JavaScript library for mobile-friendly interactive maps.
* [台灣山林悠遊網開放資料](https://recreation.forest.gov.tw/Service/OpenData)：台灣步道相關資訊 api，包括經緯度、路況等等資訊 （除了步道以外的也是有）。
* [D3.js](https://d3js.org/)：資料視覺化的套件。
* [jsdoc](https://jsdoc.app/about-getting-started.html)：由註解自動產生 API 文件。

## UI design
[打造後台管理系統的好幫手：Ant Design](https://blog.techbridge.cc/2018/04/28/antd-and-admin-website/)
[Ant Design - admin](https://github.com/zuiidea/antd-admin)

## Others
### Tools
* [Hackmd 使用說明](https://hackmd.io/s/tutorials-tw)
* [🌳🚀 CS Visualized: Useful Git Commands](https://dev.to/lydiahallie/cs-visualized-useful-git-commands-37p1): 常用 git command 的使用方式及動畫的圖像化流程，很讚
### Related websites
* [健行筆記](https://hiking.biji.co/)
* [選山步道](https://meet-trail-right.firebaseapp.com/)
* [玩全台灣](http://camp.okgo.tw/)
* [登山補給站](https://www.keepon.com.tw/forum-1-1.html)
* [登山客你步知道的事](http://gportal.ncdr.nat.gov.tw/arcgis/apps/MapSeries/index.html?appid=4ba5731688d94279b428e3959de8b38c)
* [Give++](https://www.youtube.com/watch?v=o4nH5tC_XKk)：可參考學長姊的專案如何規劃 （[GitHub](https://github.com/krebikshaw/Give-plus-plus)）

---

## Notes

隨手記。

[source](https://www.nextpit.com/google-maps-gesture-controls)

我們從 OpenStreetMap 取得 Base Maps、Street View 等基礎資料後，只要把 Local Data 疊加上去就有個人化的地圖。

有地圖資料之外，還需要 Leaflet.js 之類的 library 才能讓我們用 JavaScript 操作。
[Top Mapping And Maps APIs](https://flatlogic.com/blog/top-mapping-and-maps-api/) 有各 library 的比較。

## Glossery

* [OGC](https://zh.wikipedia.org/wiki/%E5%BC%80%E6%94%BE%E5%9C%B0%E7%90%86%E7%A9%BA%E9%97%B4%E5%8D%8F%E4%BC%9A)：制定關於地理資料標準的組織。
* WMTS：Web Map Tile Service，提供圖磚的服務。通常會有一個 URL 模板如 `http://rudy.tile.basecamp.tw/{z}/{x}/{y}.png`。Leaflet.js 等等 Library 就能以此模板抓取圖磚放入地圖。
* GPX：用來記錄連續軌跡（track）、路徑（route）、興趣點（waypoint）的資料格式。因為相容問題無法在 GIS 軟體中直接使用。
* GeoJSON：OGC 所制定的標準資料格式。可以直接呈現點、線、面的空間資料。

## Difficulty

目前看下來，不論是用 google API 還是 Leaflet + 任一 WMTS 服務（Web Map Tile Service，例如 OpenStreetMap 或魯地圖都有提供，就是提供一塊一塊的圖磚的服務）都能達成在網站上呈現地圖，能標點、彈出資訊框框的功能。不過路線資訊與 GPX 的資料要從何而來？對健行筆記爬蟲怕是太花時間。後端儲存用戶的路線、興趣點的資料格式呢？