iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

1 Like 0 留言 997 瀏覽

鐵人賽 Modern Web DAY 29

打造你的主題地圖！Mapbox 也可以！(ft. React) 系列第 29 篇

技術 Day 29 - 一些很酷的 Mapbox Styles～(5)

最後一篇技術分享！這系列的文章我們都在介紹陸地上的東西，最後一篇看關於海洋的部分吧～我們最常拿大海的深度來做界線分類對吧，像是淺水區深海區之類的，今天來做一張...

no_ ‧ 2022-10-14 ‧團隊IT108xWKE

0 Like 0 留言 576 瀏覽

鐵人賽 Modern Web DAY 28

打造你的主題地圖！Mapbox 也可以！(ft. React) 系列第 28 篇

技術 Day 28 - 一些很酷的 Mapbox Styles～(4)

Mapbox 除了可以支援我們一般常在用的 2D 地圖，還有我們前幾天介紹的 3D 立體地球跟地形外貌以外，還可以用 3D 形式呈現建築物高度喔～有點像積木狀...

no_ ‧ 2022-10-13 ‧團隊IT108xWKE

1 Like 0 留言 745 瀏覽

鐵人賽 Modern Web DAY 27

打造你的主題地圖！Mapbox 也可以！(ft. React) 系列第 27 篇

技術 Day 27 - 一些很酷的 Mapbox Styles～(3)

還記得我在 Day 04 - 在地圖上標記 Marker 的時候寫了一篇地圖的 Marker 教學嗎～其實標點不限於常見的 2D 地圖喔，3D 的也可以！我們今...

no_ ‧ 2022-10-12 ‧團隊IT108xWKE

1 Like 0 留言 875 瀏覽

鐵人賽 Modern Web DAY 26

打造你的主題地圖！Mapbox 也可以！(ft. React) 系列第 26 篇

技術 Day 26 - 一些很酷的 Mapbox Styles～(2)

今天帶大家去日本看富士山吧～？不過是地圖版的啦，我也好想去日本玩 ༼இɷஇ༽ 程式碼我們沿用上一篇的 3D 地球地圖來繼續做，不清楚的可以點擊這裡！ 3D 地形...

no_ ‧ 2022-10-11 ‧團隊IT108xWKE

0 Like 0 留言 772 瀏覽

鐵人賽 Modern Web DAY 25

打造你的主題地圖！Mapbox 也可以！(ft. React) 系列第 25 篇

技術 Day 25 - 一些很酷的 Mapbox Styles～(1)

我們常見以及常用的地圖大多都是 2D 的，所以在分享這邊我們做 3D 地圖吧！今天就來看一下一顆簡單的旋轉地球我們要怎麼做～說是簡單，但看到的當下還是不禁讚...

no_ ‧ 2022-10-10 ‧團隊IT108xWKE

2 Like 0 留言 857 瀏覽

鐵人賽 Modern Web DAY 24

打造你的主題地圖！Mapbox 也可以！(ft. React) 系列第 24 篇

技術 Day 24 - 簡易版行程規劃地圖

想了兩天，我們來做一張可以進行行程規劃的地圖好了！不過是簡易版的啦，細節上的設定可以依據需求再去做更改～需求目標老樣子，在進入實作前先訂一下我們的需求：...

no_ ‧ 2022-10-09 ‧團隊IT108xWKE

0 Like 0 留言 460 瀏覽

鐵人賽 Modern Web DAY 23

打造你的主題地圖！Mapbox 也可以！(ft. React) 系列第 23 篇

技術 Day 23 - Direction (2)：適合懶人的插件

如果你覺得接 Direction API 實在是很麻煩，要寫一大堆東西、只想用現成的話，那麼～這篇非常適合你！其實我是在找 Demo 主題的時候，意外找到這個...

no_ ‧ 2022-10-08 ‧團隊IT108xWKE

0 Like 0 留言 531 瀏覽

鐵人賽 Modern Web DAY 22

打造你的主題地圖！Mapbox 也可以！(ft. React) 系列第 22 篇

技術 Day 22 - Direction (1)：基礎操作

昨天介紹了該如何呼叫 Direction 這支 API，我們今天就拿官網給的範例教學練練手～先說明一下我們要做的東西：載入地圖後會有個藍色的點，這個點是我們...

no_ ‧ 2022-10-07 ‧團隊IT108xWKE

1 Like 0 留言 695 瀏覽

鐵人賽 Modern Web DAY 21

打造你的主題地圖！Mapbox 也可以！(ft. React) 系列第 21 篇

技術 Day 21 - Direction API 怎麼用？

這應該是我們要介紹的最後一支 API 了，那就是 Direction～這個功能有在用 Google Map 的你應該再熟悉不過了吧！其實在 Mapbox 也有...

no_ ‧ 2022-10-06 ‧團隊IT108xWKE

0 Like 0 留言 851 瀏覽

鐵人賽 Modern Web DAY 20

打造你的主題地圖！Mapbox 也可以！(ft. React) 系列第 20 篇

技術 Day 20 - Layers (6)：Heatmap

耶～終於到我們介紹的最後一篇 Layer 啦～你一定看過這種類型的地圖：圖片來源：https://www.soft4fun.net/tech/news/...

no_ ‧ 2022-10-05 ‧團隊IT108xWKE

0 Like 0 留言 1183 瀏覽

鐵人賽 Modern Web DAY 19

打造你的主題地圖！Mapbox 也可以！(ft. React) 系列第 19 篇

技術 Day 19 - Layers (5)：Cluster

不知道大家還記不記得我們在 Day 07 - 來做一個美食地圖吧！做了一張美食地圖呢？當初許的承諾今天就來實現吧！我們來把那張密集的很可怕的地圖做視覺上的修改...

no_ ‧ 2022-10-04 ‧團隊IT108xWKE

0 Like 0 留言 756 瀏覽

鐵人賽 Modern Web DAY 18

打造你的主題地圖！Mapbox 也可以！(ft. React) 系列第 18 篇

技術 Day 18 - Layers (4)：Circle

第一次看到 Circle Layer 的時候，天真的我還以為就是在地圖上畫圓圈 ... 但原來是指在地圖上標圓點的意思 XD (一定也有人跟我一樣誤會的吧！)那...

no_ ‧ 2022-10-03 ‧團隊IT108xWKE

0 Like 0 留言 666 瀏覽

鐵人賽 Modern Web DAY 17

打造你的主題地圖！Mapbox 也可以！(ft. React) 系列第 17 篇

技術 Day 17 - Layers (3)：Symbol

之前我們學到了怎麼用 Marker 在地圖上標點，其實利用 Layer 也可以做到一樣的效果喔！那就是 Symbol Layer～雖然效果一樣，但在過來人的...

no_ ‧ 2022-10-02 ‧團隊IT108xWKE

2 Like 0 留言 807 瀏覽

鐵人賽 Modern Web DAY 16

打造你的主題地圖！Mapbox 也可以！(ft. React) 系列第 16 篇

技術 Day 16 - Layers (2)：Fill

昨天我們用 Line 畫了台灣地圖，那今天就來幫台灣地圖上個色吧資料來源我們一樣用政府資料開放平台所提供的縣市邊界檔案，如果沒看前一篇的介紹可以看一下資料處理...

no_ ‧ 2022-10-01 ‧團隊IT108xWKE

1 Like 0 留言 973 瀏覽

鐵人賽 Modern Web DAY 15

打造你的主題地圖！Mapbox 也可以！(ft. React) 系列第 15 篇

技術 Day 15 - Layers (1)：Line

上一篇介紹 Layer 的架構時，我們有說過「除了 background 和 sky 以外，每個圖層都需要從 source 引用數據」，那我們要怎麼引用這些數據...

no_ ‧ 2022-09-30 ‧團隊IT108xWKE

1 Like 0 留言 617 瀏覽

鐵人賽 Modern Web DAY 14

打造你的主題地圖！Mapbox 也可以！(ft. React) 系列第 14 篇

技術 Day 14 - Layer 圖層疊起來

接下來要介紹一些進階應用啦～你一定看過像這種類型的地圖：這個只是圖層 (Layer) 的應用之一，它的做法其實就是在一張基礎地圖上面再疊一張圖層，接下來的這...

no_ ‧ 2022-09-29 ‧團隊IT108xWKE

0 Like 0 留言 581 瀏覽

鐵人賽 Modern Web DAY 13

打造你的主題地圖！Mapbox 也可以！(ft. React) 系列第 13 篇

技術讓 Mapbox 帶你經歷一趟美食之旅！

上次做的 Demo 是台南美食之旅，今天就來用台中舉例好了！台中也好多好吃的 ... 一樣的，我拿 TDX (Transport Data eXchange)...

no_ ‧ 2022-09-28 ‧團隊IT108xWKE

0 Like 0 留言 697 瀏覽

鐵人賽 Modern Web DAY 12

打造你的主題地圖！Mapbox 也可以！(ft. React) 系列第 12 篇

技術 Day 12 - Camera (2)：為轉換視角加上過渡動畫

知道如何控制視角位置後，今天我們來替這個過程加上過渡動畫！那在 Camera 的部分也是有相關的 Event 可以使用，一起來用抗抗吧～ (其實我也是昨天在打...

no_ ‧ 2022-09-27 ‧團隊IT108xWKE

0 Like 0 留言 580 瀏覽

鐵人賽 Modern Web DAY 11

打造你的主題地圖！Mapbox 也可以！(ft. React) 系列第 11 篇

技術 Day 11 - Camera (1)：地圖相機位置由你決定！

說是相機位置可能會有點抽象 (對！我就是直接英翻中的，標題真難下)其實就是使用者在地圖的第一視角位置啦～ Mapbox 對於 Camera 提供了以下功能：...

no_ ‧ 2022-09-26 ‧團隊IT108xWKE

0 Like 0 留言 799 瀏覽

鐵人賽 Modern Web DAY 10

打造你的主題地圖！Mapbox 也可以！(ft. React) 系列第 10 篇

技術 Day 10 - Events (3)：Movement

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

no_ ‧ 2022-09-25 ‧團隊IT108xWKE

0 Like 0 留言 743 瀏覽

鐵人賽 Modern Web DAY 9

打造你的主題地圖！Mapbox 也可以！(ft. React) 系列第 9 篇

技術 Day 09 - Events (2)：Lifecycle

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

no_ ‧ 2022-09-24 ‧團隊IT108xWKE

0 Like 0 留言 712 瀏覽

鐵人賽 Modern Web DAY 8

打造你的主題地圖！Mapbox 也可以！(ft. React) 系列第 8 篇

技術 Day 08 - Events (1)：Interaction

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

no_ ‧ 2022-09-23 ‧團隊IT108xWKE

1 Like 0 留言 950 瀏覽

鐵人賽 Modern Web DAY 7

打造你的主題地圖！Mapbox 也可以！(ft. React) 系列第 7 篇

技術 Day 07 - 來做一個美食地圖吧！

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

no_ ‧ 2022-09-22 ‧團隊IT108xWKE

0 Like 0 留言 721 瀏覽

鐵人賽 Modern Web DAY 6

打造你的主題地圖！Mapbox 也可以！(ft. React) 系列第 6 篇

技術 Day 06 - 給地圖加上彈跳窗

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

no_ ‧ 2022-09-21 ‧團隊IT108xWKE

0 Like 0 留言 825 瀏覽

鐵人賽 Modern Web DAY 5

打造你的主題地圖！Mapbox 也可以！(ft. React) 系列第 5 篇

技術 Day 05 - 關於一些 Control

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

no_ ‧ 2022-09-20 ‧團隊IT108xWKE

0 Like 0 留言 1069 瀏覽

鐵人賽 Modern Web DAY 4

打造你的主題地圖！Mapbox 也可以！(ft. React) 系列第 4 篇

技術 Day 04 - 在地圖上標記 Marker

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

no_ ‧ 2022-09-19 ‧團隊IT108xWKE

0 Like 0 留言 1551 瀏覽

鐵人賽 Modern Web DAY 3

打造你的主題地圖！Mapbox 也可以！(ft. React) 系列第 3 篇

技術 Day 03 - 環境安裝 & init Map

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

no_ ‧ 2022-09-18 ‧團隊IT108xWKE

1 Like 0 留言 4680 瀏覽

鐵人賽 Modern Web DAY 2

打造你的主題地圖！Mapbox 也可以！(ft. React) 系列第 2 篇

技術 Day 02 - 認識 Mapbox

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

no_ ‧ 2022-09-17 ‧團隊IT108xWKE

5 Like 2 留言 14266 瀏覽