【テクニカルウェビナー#2】Mapbox Studioの基本的な使い方

本スライドは、Mapbox Japanによるウェビナー「【テクニカルウェビナー#2】Mapbox Studioの基本的な使い方」のスライドです。

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

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

Transcript

1. Mapbox Maps Mapbox Studio
2. 目的・ゴール 目的 • Mapbox Maps製品のエコシステムを技術的観点から理解する ゴール • Source, Layer, Styleについて理解する • Mapbox GL JSの簡単な使い方を理解する • 各種APIの役割を理解する • ウェブ上のリファレンスを見て調査できるようになる 対象 • Mapbox Maps製品の技術にご興味のある方
3. Mapbox Studio • https://studio.mapbox.com/ • Mapsエコシステムを簡単に使うためのサービス • 機能は3種類 ◦ Datasets: 地理空間情報(GeoJSON)を作成 ◦ Tilesets: ベクター・ラスタータイルセットを作成・管理 ◦ Styles: Styleを編集・管理
4. Datasets • 地図上でPoint, Line, Polygonを作成 • プロパティの設定 • “Export to tileset”でタイルセットにしてから使用
5. Datasetsを試す(󰳕) • 東京駅をPolygonで囲む • name: Tokyo Station • platform: 23
6. Tilesets • ホストしているベクター・ラスタータイルセットの一覧 • データの変更はできない（閲覧用） • コーディング時、IDやレイヤを確認
7. Tilesetsを試す(󰳕) Datasetsで作成したfeatureが確認 レイヤ名 ID
8. Styles 既存のスタイルをもとに編集できる（ゼロからもつくれる）
9. Stylesを試す(󰳕) • 自作タイルセットを配置 • レイヤの順番を変更 • 見た目を変更
10. 少し凝ったExpressions 「新」で始まる駅名を赤文字（例：新横浜、新大阪）、それ以外は黄文字 • 駅名を取得 • if 駅名の「新」のインデックスが0 ◦ 赤 • else ◦ 黄
11. スタイルをGL JSで表示(󰳕) • URLはShareから確認 • styleを変更 const map = new mapboxgl.Map({ container: 'map', // container ID style: 'mapbox://styles/yochi/cl3fx56b9000114o1cbriqhgc/draft', center: [139.768435, 35.681054], // starting position [lng, lat] zoom: 15 // starting zoom });
12. Tips: Production/Publishとは • スタイルがプロダクトとして使える状態 • ドラフトとの違い ◦ CDNにキャッシュ ◦ Rate Limit
13. コードで見た目を変更(󰳕) • 描画済みのスタイルも変更可能 • 元からあるレイヤー・自作レイヤー関係なく変更可能 map.on('load', () => { map.setPaintProperty('seminar', 'fill-color', 'yellow'); });
14. Styleを使わずに直接コードで記述(󰳕) スタイルと同じことが コードでも実現可能 map.addSource('my-tileset', { type: 'vector', url: 'mapbox://yochi.cl410j602093u2bkiwvbyd2hn-8g0uz' }); map.addLayer({ 'id': 'my-point', 'type': 'fill', 'source': 'my-tileset', 'source-layer': 'seminar', 'paint': { 'fill-color': [ "interpolate", ["linear"], ["zoom"], 12,"hsl(0, 100%, 50%)", 15,"hsl(120, 100%, 50%)", 18,"hsl(240, 100%, 50%)" ] } },'aeroway-polygon');
15. デザイナー向けツール Gallery: 様々なデザインが閲覧可能。Studioにインポート可能 Cartogram: カラーピッカーにより、テーマとなる画像から地図色を配色
16. Mapbox Studioのまとめ • Mapsエコシステムを簡単に使うためのサービス • 提供されるサービスは3種類 ◦ Datasets ◦ Tilesets ◦ Style