從 Chrome 外掛到 Leaflet 網站：台灣百岳地圖為什麼要重做

台灣百岳地圖最早叫「登山地圖助手」，是一個 Chrome 外掛：在 Google Maps 的畫面上疊一層圖釘，標出一百座百岳的位置。做起來很快，但用了一陣子之後，我發現幾個問題靠外掛的架構根本修不掉，最後決定整個重做成獨立網站。

外掛架構的三個天花板

圖釘位置要自己算。 外掛拿不到 Google Maps 的內部地圖物件，只能解析網址裡的座標與縮放層級，再自己用 Web Mercator 投影公式算出每座山在畫面上的像素位置。公式只要差一點，圖釘就偏一點，放大縮小時還會跟著漂移。

堆疊與展開是手刻的。 山多的地方圖釘會疊在一起，我用固定像素門檻做分群，結果不同縮放層級下的行為很不自然，點篩選清單裡的山也沒辦法真的飛過去，只能提示使用者「請自行移動地圖」。

會被別人擋住。 Google Maps 會動態插入自己的 DOM 元素，偶爾就蓋在我的疊加層上面。我不控制這張地圖，所以永遠不知道下一次更新會擋到什麼。

換成 Leaflet 之後

改用 Leaflet 之後，地圖是我自己的，上面這些問題一次解決：

• 圖釘直接用 Leaflet 的原生 API 放置，位置不再靠自己算，不會偏。
• 堆疊改用成熟的 markercluster 套件，依縮放層級自動分群。
• 篩選面板點一座山，地圖會直接飛過去並自動展開堆疊。
• 整個頁面都是我自己的，沒有別人的元素會蓋上來。
• 手機瀏覽器也能用。Chrome 外掛在手機上完全不支援，這是網站版最實際的好處。

還有一個小細節：Chrome 外掛版因為 .com 與 .com.tw 是不同網域，登山準備清單存在 localStorage 裡的資料彼此不通。網站版只有單一網域，這個問題自然消失。

工具鏈也順便換了

前端用 Vite 打包，leaflet 與 leaflet.markercluster 都改成 npm 安裝的正式套件，不再靠 CDN 的 <script> 標籤。山岳資料放在同一個 Cloudflare Worker 裡，透過 API 提供，前後端是同一個專案、同一次部署。

這件事教我的

當你發現一個工具最大的限制來自它「寄生」的平台，而不是你的程式寫得不夠好，就該認真考慮搬出來自己養。搬家的成本是一次性的，但被平台限制的代價是每天都在付。

你可以在台灣百岳地圖直接試用，登山準備清單的設計我另外寫了一篇。