地圖嵌入網頁- MapBox

從wework網站看到 mapbox的串接，畫面簡單乾淨可客製化。
數字是區域的店家數，將map放大可顯示店家位置

需先建立帳號取得 API access token

有6種呈現方式

mapbox-present-map

想要呈現多個地點，所以選取 Data-driven visualizations

左側有 Tutorials 分頁選取 Add points to a web map, part 3: add interactivity 較符合想呈現的樣式。

分3個階段
Part 1: Prepare your data
Part 2: Create a map style
Part 3: Add interactivity

Part 1: Prepare your data

Mapbox Studio 右側欄選取 Datasets
Mapbox Studio
Datasets 頁面選取 New Dataset 按鈕
Upload 按鈕放入GeoJSON, JSON 或 CSV 檔案 (官網有提供範本) 選Confirm，選Create。

Start editing
一開始會看到整個地球地圖，右側工具欄可能會遮住清單的地點。
選取 search dataset會zoom in 地點。左欄可以增減property，和GeoJSON檔的結構。
沒更改就可 Export to tileset
會生成一個網址: mijouhsieh.cljgwg0me0gs82bpn8udrhv1x-7uvd6
PART I DONE
點選藍字 caneles-taipei 最終結果?

Part 2: Create a map style

Styles 頁面
styles page
選取 New Style
視窗可選6種樣式或上傳照片選顏色
styles-color-mapbox

style-with-image-mapbox
start-to-edit
Untitle改專案名稱 / 選Layer / 左上+ / [Select data]下方source 找到剛建立的tileset

[Select data] 下方 Type 可更改地點呈現方式-預設 circle => [Style] 可更換地點的圓點顏色。

[Select data] 下方 Type 選 Symbol(有使用icon或text標示)。
[Style] 下方 [Icon] 新增圖片svg檔。
part2-add-icon-mapbox

[Style] 下方 [Placement] 往下拉 Allow icon overlap 改為True。
Publish

Part 3: Add interactivity

複製code到index.html檔

<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='utf-8' />
    <title>Points on a map</title>
    <meta name='viewport' content='width=device-width, initial-scale=1' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.css' rel='stylesheet' />
    <style>
      body { 
        margin: 0; 
        padding: 0; 
      }
      #map { 
        position: absolute; 
        top: 0; 
        bottom: 0; 
        width: 100%; 
      }
    </style>
  </head>
  <body>
    <div id='map'></div>
    <script>
    // The value for 'accessToken' begins with 'pk...'
    mapboxgl.accessToken = 'pk.eyJ1IjoibWlqb3Voc2llaCIsImEiOiJjbGpnbG9sZ2gwYThlM3NzMm8yNjc3MnU5In0.TBv6xF7GvwThX7BW_ACfzg'; 
    const map = new mapboxgl.Map({
      container: 'map',
      // Replace YOUR_STYLE_URL with your style URL.
      style: 'YOUR_STYLE_URL', 
      center: [-87.661557, 41.893748],
      zoom: 10.7
    });

    // Code from the next step will go here.

    </script>
  </body>
</html>

share 頁面有Share style和Developer resources 依其改code屬性

style: 'YOUR_STYLE_URL',
mapboxgl.accessToken = 'pk.˙˙˙'
center: [-87.661557, 41.893748],
part3-share-map-mapbox

part3-map-default-position-center

更新styles-publish後，改styles屬性

styles-update-mapbox

tocken仍是建立專案使用的tocken

增加 popups 店家的彈跳視窗

Add an event listener
在 const map 之後貼上code

map.on('click', (event) => {
  // If the user clicked on one of your markers, get its information.
  const features = map.queryRenderedFeatures(event.point, {
    layers: ['YOUR_LAYER_NAME'] // replace with your layer name
  });
  if (!features.length) {
    return;
  }
  const feature = features[0];

  // Code from the next step will go here.
});

  // Code from the next step will go here.
  //  add
layers: ['YOUR_LAYER_NAME'] => SD Canelés

/* 
    Create a popup, specify its options 
    and properties, and add it to the map.
  */
const popup = new mapboxgl.Popup({ offset: [0, -15] })
  .setLngLat(feature.geometry.coordinates)
  .setHTML(
    `<h3>${feature.properties.title}</h3><p>${feature.properties.description}</p>`
  )
  .addTo(map);
  // });

code 包含在事件監聽器的回調函式中，因此只在user單擊地圖時才會執行。
code 使用四種方法來創建Popup、定義其位置和內容，並將其添加到地圖中：

mapboxgl.Popup() 創建一個新的彈出窗口並接受一個選項對象，{ offset: [0, -15] } 可以使用它來配置彈出窗口的行為。在此示例中，offset調整彈出窗口錨點的垂直位置，以便彈出窗口不會覆蓋其下方的標記。
Popup.setLngLat() 使用要素的屬性設置彈出窗口錨點的地理位置coordinates。
Popup.setHTML() 將彈出窗口的內容設置為提供的字串。雖然可以提供任何字串，但通常會提供 HTML 作為字串。上面的code將 HTML code與功能title和description屬性組合在一起。
Popup.addTo(map) 將彈出窗口與地圖相關聯，以便當user單擊地圖標記之一時它可以打開。

更改popup的寬度

新增地點

除了 geojson檔新增後，mapbox 的 Tilesets也要重新建立-New tileset
或是進入先前測試3個地點的tilteset， ...選單有replace選項可以換成新的geojson檔。
上傳後得到新的網址mijouhsieh.cljgwg0me0gs82bpn8udrhv1x-7uvd6
再到style頁面，選取之前次試版設定好的樣式，[Select data] 選單更換data，再回 [Style] 需等一下即可見更新。

地圖嵌入網頁- MapBox

需先建立帳號取得 API access token

有6種呈現方式

Part 1: Prepare your data

Part 2: Create a map style

share 頁面有Share style和Developer resources 依其改code屬性

更新styles-publish後，改styles屬性

增加 popups 店家的彈跳視窗

更改popup的寬度

新增地點

mijouhsieh

Related Posts

Comments

需先建立帳號 取得 API access token

有6種呈現方式

Part 1: Prepare your data

Part 2: Create a map style

share 頁面有Share style和Developer resources 依其改code屬性

更新styles-publish後，改styles屬性

增加 popups 店家的彈跳視窗

更改popup的寬度

新增地點

mijouhsieh

Related Posts

Day01 聊聊對話機器人與LINE Developers

[ JavaScript 03 ] 判斷式

[進階 js 10] 物件導向 & Prototype

Comments

需先建立帳號取得 API access token