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！
