【テクニカルウェビナー#1】Mapbox GL JS入門編

本スライドは、Mapbox Japanによるウェビナー「【テクニカルウェビナー#1】Mapbox GL JS入門編」のスライドです。

目的：Mapbox Maps製品のエコシステムを技術的観点から理解する
ゴール：
・Source, Layer, Styleについて理解する
・Mapbox GL JSの簡単な使い方を理解する
・各種APIの役割を理解する
・Web上のリファレンスを見て調査できるようになる

Mapbox Japan公式サイト： https://www.mapbox.jp/
この資料に関するお問い合わせ： https://www.mapbox.jp/contact
このウェビナーはこちらからご覧いただけます：https://www.mapbox.jp/webinars/technical-mapbox-webinar-01

Transcript

1. Mapbox Maps Mapbox GL JS入門
2. 目的・ゴール 目的 • Mapbox Maps製品のエコシステムを技術的観点から理解する ゴール • Source, Layer, Styleについて理解する • Mapbox GL JSの簡単な使い方を理解する • 各種APIの役割を理解する • ウェブ上のリファレンスを見て調査できるようになる 対象 • Mapbox Maps製品の技術にご興味のある方
3. Maps SDKとは 1/2 地図を描画するためのSDK • Mapbox GL JS: Web用、リファレンス・デザイン ◦ ドキュメント ◦ GitHub • Maps SDK for Android: Android用 ◦ ドキュメント ◦ GitHub • Maps SDK for iOS: iOS用 ◦ ドキュメント ◦ GitHub
4. Maps SDKとは 2/2 サポート対象外 • Mapbox.js: Leafletのラッパー • Maps SDK for Unity: Unity用ライブラリ • Maps SDK for Qt: Qt用ライブラリ • React-mapbox-gl: Mapbox GL JSのReact用ラッパー、コミュニティサポート • Flutter Mapbox GL: Flutter用ラッパー、コミュニティサポート • Mapbox Maps SDK for React Native: React Native用ラッパー、コミュニティサ ポート
5. 前準備（トークン） • Public Token: エンドユーザに提供するアプリケーションに同梱するキー。タイル セット等のダウンロードに使用 • Secret Token: アカウント設定の変更や、タイルセットのアップロード等に使用 トークンをセキュアに保つために
6. トークン作成(󰳕)
7. Mapbox GL JSを試す(󰳕) https://docs.mapbox.com/mapbox-gl-js/example/simple-map/
8. コードの理解 <div id="map"></div> <script> mapboxgl.accessToken = 'YOUR_PUBLIC_KEY'; const map = new mapboxgl.Map({ container: 'map', // container ID style: 'mapbox://styles/mapbox/streets-v11', // style URL center: [-74.5, 40], // starting position [lng, lat] zoom: 9 // starting zoom }); </script>
9. 線を引いてみる(󰳕) • 中心座標を東京駅周辺に設定 • ズームレベルを14に設定 • GeoJSONを用いて東京駅周辺に線を引く
10. GeoJSONの作成(󰳕) • 地理空間情報をJSONで表現 • 3種類のfeature ◦ Point ◦ LineString ◦ Polygon • geojson.io が便利
11. 実装(󰳕) map.on('load', ()=> { map.addSource('line-source', { 'type': 'geojson', 'data': { "type": "FeatureCollection", "features": [ { "type": "Feature", "properties": {}, "geometry": { "type": "LineString", "coordinates": [ [ 139.76276636123657, 35.6779014631333 ], [ 139.77046966552734, 35.68332208681815 ] ] } } ] } }); map.addLayer({ 'id': 'line-layer', 'type': 'line', 'source': 'line-source', }); });
12. 結果(󰳕)
13. 線の色・幅を変える(󰳕) map.addLayer({ 'id': 'line-layer', 'type': 'line', 'source': 'line-source', 'paint': { 'line-color': 'red', 'line-width': 3, } });
14. Source / Layer / Expressions Source: 地理情報データを定義。GeoJson, Vector Tile, Raster Tile等が使用可能 Layer: sourceをどのように描画するかを定義。Layerを重ねて地図を構成 Expressions: 「どのように描画」を定義するための書式
15. LineStringの描画では 1. addSource 2. addLayer a. Expressions map.addSource('line-source', { 'type': 'geojson', 'data': { "type": "FeatureCollection", "features": [ { ソースID（任意値） GeoJSON map.addLayer({ 'id': 'line-layer', 'type': 'line', 'source': 'line-source', 'paint': { 'line-color': 'red', 'line-width': 3, } }); ソースID（addSourceのID） レイヤーID（任意値） Expressions
16. ベクタータイルセット • タイル: 世界地図を2nに分割したもの ◦ zoom 0: 世界全体, zoom1: 21*21=4等分 • ベクタータイル：データがベクター ◦ GeoJsonも一種のベクターデータ • 各ズームレベルのタイルを集めたファイルがタイルセット ◦ デファクトスタンダードの フォーマット定義 ◦ Mapbox以外のツールでも使用可（例 : QGIS） • タイルごとにデータ ◦ 描画に必要な領域のデータだけを取得すれば良い • Streets v11 styleで使用されているStreets v8もベクタータイルセット
17. ベクタータイルセット(󰳕) https://docs.mapbox.com/mapbox-gl-js/example/vector-source/ map.on('load', () => { map.addSource('mapbox-terrain', { type: 'vector', // Use any Mapbox-hosted tileset using its tileset id. // Learn more about where to find a tileset id: // https://docs.mapbox.com/help/glossary/tileset-id/ url: 'mapbox://mapbox.mapbox-terrain-v2' }); map.addLayer({ 'id': 'terrain-data', 'type': 'line', 'source': 'mapbox-terrain', 'source-layer': 'contour', 'layout': { 'line-join': 'round', 'line-cap': 'round' }, 'paint': { 'line-color': '#ff69b4', 'line-width': 1 } }); });
18. ベクタータイルセットのレイヤー • 一つのベクタータイルセットファイルに複数のデータを保持 • データごとにレイヤーとして保存 • Streets v8の場合 ◦ building: ビルの矩形を表すポリゴンデータ ◦ road: 道路を表すラインデータ • Studioで確認可能 地図上のレイヤーとベクターレイヤーは別物
19. 線の色・幅を変える(󰳕) GeoJSONと同様に変更可能 map.addLayer({ 'id': 'terrain-data', 'type': 'line', 'source': 'mapbox-terrain', 'source-layer': 'contour', 'layout': { 'line-join': 'round', 'line-cap': 'round' }, 'paint': { 'line-color': '#ff0000', 'line-width': 5 } });
20. ベクタータイルセット - 3rd party(󰳕) https://docs.mapbox.com/mapbox-gl-js/example/third-party/ パラメータの定義はこちら map.addSource('mapillary', { 'type': 'vector', 'tiles': [ 'https://tiles.mapillary.com/maps/vtp/mly1_public/2/{z}/{x}/{y}?access_token=MLY|4142433049200173|72206abe5035850d6743b23a49c41333 ' ], 'minzoom': 6, 'maxzoom': 14 });
21. スタイル • addSource, addLayer (+Expressions) をまとめて記載したJSONファイル ◦ スペック • 静的なデザインであれば スタイルを使うことで コーディング不要 { "version": 8, "name": "Sample", "center": [0, 0], "zoom": 0, "sources": { "street": { "url": "mapbox://mapbox.mapbox-streets-v8", "type": "vector" } }, "layers": [ { "id": "road", "type": "line", "source": "street", "source-layer": "road", "paint": { "line-width": 5, "line-color": "green" } } ] }
22. コードの理解（再掲） <div id="map"></div> <script> mapboxgl.accessToken = 'YOUR_PUBLIC_KEY'; const map = new mapboxgl.Map({ container: 'map', // container ID style: 'mapbox://styles/mapbox/streets-v11', // style URL center: [-74.5, 40], // starting position [lng, lat] zoom: 9 // starting zoom }); </script>
23. スタイルを試す(󰳕) • 先程のスタイルを指定して描画 • ローカルサーバでスタイルを試す const map = new mapboxgl.Map({ container: 'map', // container ID style: 'http://localhost:8000/08style.json', // style URL center: [139.768435, 35.681054], // starting position [lng, lat] zoom: 15 // starting zoom }); $ python -m http.server Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
24. 結果(󰳕)
25. Mapbox GL JSのまとめ • 地図 ◦ Source ◦ Layer ▪ Expressions • スタイルは上記をまとめたもの • 静的な部分はスタイルに記載、動的に変更する部分はコードで記述