iT邦幫忙

鐵人檔案

2022 iThome 鐵人賽
回列表
Modern Web

打造你的主題地圖!Mapbox 也可以!(ft. React) 系列

用膩了 Google Map,發現 Mapbox 也是不錯的選擇~(其實是因為介面很好看 )
那就來學習一下好了ヽ( ° ▽°)ノ
..
應該不會就這樣迷失在 Mapbox ㄅ (有人看出來這是雙關嗎)

鐵人鍊成 | 共 30 篇文章 | 11 人訂閱 訂閱系列文 RSS系列文 團隊IT108xWKE
DAY 1

Day 1 - 前言與大綱介紹

前言 嗨~沒想到我真的參賽了... 這是我第一次參加鐵人賽,如果用詞或是觀念有誤拜託告訴我~ 這個系列主要分享我在使用 Mapbox 上比較常會用到的 API,...

2022-09-16 ‧ 由 no_ 分享
DAY 2

Day 02 - 認識 Mapbox

Mapbox ? 說到地圖,大家第一個想到的絕對是 Google Map 了吧~但其實你還有其他選擇,那就是 Mapbox! Mapbox 起源自英國的「開放街...

2022-09-17 ‧ 由 no_ 分享
DAY 3

Day 03 - 環境安裝 & init Map

耶~終於來到我們的寫 code 環節了~ 基本裝備 Mapbox access token Mapbox GL JS VSCode (主要以自己熟悉為主) N...

2022-09-18 ‧ 由 no_ 分享
DAY 4

Day 04 - 在地圖上標記 Marker

一起在地圖上進行標記吧!在地圖上加上很多 Marker 好像就做完一半的 Project 了...?(絕對是視覺影響判斷) 我們把 Marker 分為 2 種,...

2022-09-19 ‧ 由 no_ 分享
DAY 5

Day 05 - 關於一些 Control

今天來說一下常用的控制元件! (就是地圖上的小工具啦)預設地圖是長這樣的: 對的沒錯,這些小工具需要我們寫程式來把它們呼叫出來...我們使用 addContr...

2022-09-20 ‧ 由 no_ 分享
DAY 6

Day 06 - 給地圖加上彈跳窗

彈跳窗也是個常用的功能,所以我們今天來看看如何在地圖上產生彈跳窗!剛好前幾天學了如何在地圖上標記 Marker,結合一下來做一個小功能~ GoGo Popup...

2022-09-21 ‧ 由 no_ 分享
DAY 7

Day 07 - 來做一個美食地圖吧!

來到第七天,我們利用這禮拜所學做一個台南美食地圖!美食之都說是台南應該不為過吧 那我是拿 TDX (Transport Data eXchange) 提供的...

2022-09-22 ‧ 由 no_ 分享
DAY 8

Day 08 - Events (1):Interaction

讓我們來跟地圖做一些互動吧!其實前幾天的文章我們就有跟地圖做到互動了,像是點擊 Marker 或是使用者定位等等,那我們這幾天會特別專注於 Event 的部分~...

2022-09-23 ‧ 由 no_ 分享
DAY 9

Day 09 - Events (2):Lifecycle

今天來介紹第二個關於 Event 的應用,「Lifecycle」生命週期~跟 React 的生命週期是一樣的概念,主要是在控制地圖渲染的時機,舉個例子:我希望在...

2022-09-24 ‧ 由 no_ 分享
DAY 10

Day 10 - Events (3):Movement

最後一個 Event 我們來介紹在地圖上所做的一些「動作」~ 這邊說的動作是指像是對地圖進行移動、拖拉、旋轉、放大縮小等等,像點擊、懸停那些是歸類在互動 (In...

2022-09-25 ‧ 由 no_ 分享