地震地圖
結合地震 API 和 Leaflet、OpenStreet Map，圖像化全世界的地震，調整日期與震度客製化你想要的地震資料。
使用資料與套件
- 前端框架：Next.js 13 app router
- 地震 API：本地震資料源自美國地質調查局(United States Geological Survey)
- 地圖套件：使用 React Leaflet、Leaflet、Open StreetMap。生成地震標誌。並依照震度具不同的視覺呈現
- 表單、驗證套件：React Hook Form、Zod
- API 資料管理：TanStack Query、axios
- 狀態管理：Jotai
- CSS 套件： TailwindCSS、HeadlessUI、clsx
使用說明
- 時間：本地圖顯示時間均為協調世界時(Universal Time Coordinated)，簡稱 UTC。
- 資料數量限制：根據 USGS API 提示，事件數量限制為 20,000 筆。若搜尋範圍太大將會被視為「400 Bad Request」。可以試著減少時間軸度、亦或增加震度再試一次。
緣由
被台灣時間 2022/3/23 半夜地震搖到驚醒的我，想到可以結合地震 API 和網課使用的 Leaflet 圖像化資料。這就是地震地圖的誕生。
更新記事 Change Log
2022/05/29 更新記事
- Next.js 13 app router 改寫，替換原有的 CRA
- 改用 Jotai 做全域狀態管理
- 使用 TanStack Query 做 API 資料管理
- TailwindCSS 替換掉原本的 CSS module、行動版表格使用 HeadlessUI 的 Modal
- 關於、更新記事頁面使用 Markdown 撰寫
2022/04/12 更新記事
- 使用 Redux Toolkit 替代 React Context API，分成多個 slice
- 減少 CSS media query 使用
- 嘗試使用 React Helmet
- 網站圖標加上背景，讓容易在瀏覽器黑暗模式辨識
- 增加 OG 標籤
- 導覽列使用響應式漢堡選單