Framer 原型小插曲:Mapbox 地圖應用
在進入第四篇基礎教學前,想要跟大家分享一個比較進階的 Framer 應用。那就是如何在 Framer 上,顯示自己在 Mapbox 設計過的即時地圖,並真的可以放大縮小喔,讓各位可以大大的提高產品原型擬真度喔!
申請 MAPBOX 服務
首先先到 https://www.mapbox.com 先申請 MAPBOX 帳號。申請完後,點擊 Studio 開始進行地圖設計。由於這篇教學並非要教大如何使用 Mapbox,所以這邊我們就快轉吧!下圖是我簡單製作未來式風格的地圖 ,接下來就讓我們把 Mapbox 的服務與 Framer 連結吧!
把 MAPBOX 服務連結到 FRAMER 專案
讓 Framer 使用 Mapbox 的服務有很多種,在 Mapbox 官方網站上,他有提到在 Terminal 使用 npm 指令 的方式進行連結,但是!這個方式不夠設計師,所以我這邊提供一個更簡單好懂的方式 (暫時還沒有發現任何後遺症)。
首先,找到你的 Framer 專案裡面的 index.html, 用任何編輯器(推薦可以用 Sublime Text)打開它。
然後將下列的程式碼複製,貼上到<head> </head>的中間
<script src=’https://api.mapbox.com/mapbox-gl-js/v0.20.0/mapbox-gl.js'></script><link href=’https://api.mapbox.com/mapbox-gl-js/v0.20.0/mapbox-gl.css' rel=’stylesheet’ />
結束。接下來我們就進入到 Framer 開始進行我們的 Prototype 製作吧!
取得 MAPBOX 的 Access Token 以及 Style URL
不知道如何取得的 accessToken 的朋友,可以在 Mapbox 網頁上點擊 Style ,然後選擇剛剛自己所客制的地圖,並點擊右手邊 『</> share, develop & use』的選項。
然後就會看到等等會使用到的 Access token,以及 Style URL
在 FRAMER 顯示自創地圖
首先第一件事,我們要先創建 “mapboxgl” 的物件,去拿取 Mapbox 服務的Access Token,注意,該物件一定要叫 mapboxgl。
mapboxgl.accessToken = ‘pk.eyJ1IjoiZGVsaWNvIiwiYSI6ImNpa29yOHRiNTB5Z251Mm02eG0ybmRlZWUifQ.Xte6cEzBdxSfzs95-NvZ_A’
我們指定兩個變數,分別是裝置的寬跟高。
mapHeight = Screen.height
mapWidth = Screen.width
接下來創建一個新的圖層,高度與寬度設成剛剛兩個變數,把 html 的屬性設為 “<div id=’map’></div>”,這樣他就會去存取 mapbox
mapboxLayer = new Layer
width: mapWidth
height: mapHeight
html: “<div id=’map’></div>”
把該圖層預設的 ignoreEvents 關掉,這樣我們才能在該圖層進行拖移與放大的動作。
mapboxLayer.ignoreEvents = false
接下來要串接Mapbox的地圖,先創建一個物件叫 mapElement,然後透過 mapboxLayer 這個變數去要求 map 的物件,並指定我們希望這地圖顯示的高度。
mapElement = mapboxLayer.querySelector(“#map”)
mapElement.style.height = mapHeight + ‘px’ #顯示的高度
最後我們將創建真正的 map 的物件,我們講這物件顯示在我們上方所建立的 mapElement,並給它我們之前得到的 Style URL。其他參數各位可以自行試試看。
map = new mapboxgl.Map({
container: mapElement
zoom: 12.5
center: [-77.01866, 38.888]
style: ‘mapbox://styles/delico/citykubtl00c32inx907hh6aa’
hash: true
})
以下就是最終結果!各位放到手機上操作看看吧!
Framer 專案連結下載:
http://share.framerjs.com/za6pcl5vqyl0/#12.5/38.8880/-77.0187
結語
串接成功後,其實基本上你就可以開始應用 Mapbox 的 Api, 像是放上 Marker,在地圖上畫圖等等功能,或是配合 Framer 其他物件的運用就可以做到像是這樣高擬真的原型
但為了維持本教學的無腦程度,這邊就不多做分享,而初次聽到 Framer 的朋友們也可以透過我其他文章進一步的瞭解喔,有興趣的人也隨時歡迎到 Framer JS Taiwan 留言喔! HAPPY PROTOTYPING!