これから じめるMapbox 活用 #1 2021/3/4 

本日 アジェンダ タイトル スピーカー 14:00 - 14:20 Mapboxへ 移行と考慮すべきポ イント 市村@Mapbox 14:20 - 14:45 Webアプリケーションへ Mapbox活用 設樂@tagbangers 14:45 - 15:00 Q&A ALL 

アンケートへ ご協力 お願い https://bit.ly/3stLCl5 

Mapboxへ 移行と活用について 2021/3/4 [email protected] Senior Solution Architect, Mapbox 

About Me ● Tomohiro Ichimura ○ シニアソリューションアーキテクト ○ Mapbox Japan ○ @tomoichimura ○ [email protected] 

Mapbox 、位置情報による新しい世界を実現する ロケーション・プラットフォームを提供しています 

マップ(Webマップ)に必要な要素 - データ - マップで表現したいも - ラスターデータ - ジオメトリ - レンダラー - データを視覚化するも - スタイル - 視覚化するために必要なルール - クライアント - マップを統合するクライアントソフトウェア 

ベクターマップをコアとしたMapboxエコシステム クライアント アプリケーション api build デザイン（スタイル) データ api api >_ MTS, tippecanoe, rasterio Mapbox Studio, Mapbox Styles GL JS, GL Native, mapbox.js, leaflet.js 描画(レンダラー) SDK 

Mapbox Style: より詳細な内容や、目的に応 じた表示により、これまでにな い地図体験が提供可能で す。 

地図上にデータ 全て データレイヤに アクセス可能 境界 道路 衛星 地形 あなた データ 場所 他 地図 

Mapbox Maps Map Styles 地図 テンプレートとなるスタイル ● Streets ● Outdoors ● Dark ● Light ● Satellite ● Satellite Streets Maps Libraries/SDKs 地図を描画するために必要なツール ● Mapbox GL/JS ● Mapbox JS ● iOS SDK ● Android SDK ● Unity SDK Map Tilesets スタイル 要素となるレイヤー群 ● Streets ● Terrain ● Boundaries ● Traffic ● Transit ● Indoor ( Beta ) ● Satellite ( Raster ) Maps APIs 地図要素となるデータ 操作 ● Vector Tiles API ● Raster Tiles API ● Static Images API ● Static Tiles API ● Styles API ● Tilequery API ● Uploads API ● Mapbox Tiling Service (Beta) ● Datasets API ● Fonts API 

Mapbox じめ方 https://docs.mapbox.com/jp/yolp-to-mapbox/how-to-start/ 

さまざまなユースケースもご参考に！ nagix 

デザイン性 従来で 実現できなかった、 ユニークで美しい地図を実現 ・地図デザイン 作成 ・インタラクティブなデザイン カスタマイズ性 従来で 実現できなかった、 地図 カスタマイズを実現 ・データ 持ち込み ・データ 重 合わせ コスト 従来 Webマップにかかっていた コストを削減 ・ライセンス ・開発 ・運用 移行性 既存資産を活かしながら、 新しいWebマップへ移行 新規アプリケーションとして 開発容易性 移行 ポイント パフォーマンス 向上、ユニークで美しいマップ 提供 

Web アプリケーション Mapbox GL JSを利用することで、インタラクティブで、カスタマ イズが可能なWebアプリケーションを、Mapboxスタイルとベク タタイルを利用して作成可能 Leafletなどを利用する場合 、 Static Tiles APIを利用するこ とで、クライアントにラスタタイルで 提供が可能 静的なコンテンツを必要とする、あるい 印刷目的であれ Static Images APIが利用可能 Mapbox.js 、一世代前 JavaScriptライブラリで、Leaflet.js をベースとしており、旧来 スタイル、あるい ラスタスタイルを 利用、あるい クライアントスペックが不十分な場合で 利用が 想定される。 デモ 移行性 

Mapbox GL JS Mapbox GL JS Web GL(*)をベースとした JavaScriptライブラリ Mapbox マップ技術を用いたWebアプリケー ション 作成を実現 主なユースケース ● クライアントサイドで ダイナミックな描画やスタイル 適 用 ● マップ上 データをつかったクエリやフィルタリング ● 地理データ 可視化、アニメーション化 ● お持ち データをカスタムレイヤとしてスタイル内に適用 可能 デモ 主な特徴 ● クライアントサイドで レンダリング ● カメラ ○ Center: 経度(lng)、緯度(lat) 順 ○ Zoom: ズームレンジない 任意 値 . ○ Bearing: 0から360まで 値で、マップ 方角を示す ○ Pitch: 0から60まで 値で、傾斜を指定 ● レイヤー ○ 従来 、ベースレイヤーとオーバレイレイヤー 二つ み ○ Mapbox GL JSに ベースレイヤとオーバレイレイヤとい う区別がないため、自由な編集が可能 ＊WebGL 一般にブラウザベースで ゲーム作成で利用されてきた技術で、より先進的なインタラクション を可能とし、滑らかなズーム操作や、カメラ 方角や傾斜 変更、マップデータ クエリ、動的なフィルタなど が可能 

Static Tiles API Static Tiles API を利用することで、ラスタタイル 提供が可能 クライアントサイドで、ラスタタイルを必要とされ るケースにて利用 利用されるライブラリとして 、Leaflet.jsや Mapbox.jsが想定される 主なユースケース ● 初期ロード スピードを求める場合 ○ GLと併用して、GLをバックグラウンドでロードさせな がら、Static Tiles APIを使ってマップを表示すること で、GL 初期レンダリング 遅れを補完することが 可能 ● フォールバックとして 利用 ○ WebGLに対応していないブラウザやデバイス向け 対策 ● インタラクティブ性 少なく、表示箇所もオーバレイも少 ないケースで 利用 

Static Images API Static Images API 、インタラクティブ性を必 要としないクライアントに向けたAPI ベクタタイルが含まれる場合 PNGで出力 ラスタタイル み場合 JPEGで出力 画像イメージで 地図を提供するため、幅広い 対象 クライアントで 利用が想定される 主なユースケース ● モバイル通知時に静的な地図を表示 ● ユーザプロファイルページや SNSなどで フィード時に利 用 ● アウトドア、あるい フィットネス アクティビティ 可視 化 ● ライドシェアやeコマース レシートで 利用 

Mapbox.js Leaflet.jsライブラリを拡張した Webマップ・ ライブラリ 開発 アクティブで ないため、 GL JS 利用を推 奨するも 、場合によって Mapbox.jsを利用す るケースが想定される - 初期ロードにフォーカス - 既存資産がラスタベース - クライアント リソースが古い、不十分 - IE(特にIE10以前 バージョン)へ 対応 Mapbox.js https://www.mapbox.com/mapbox.js/api/ Leaflet.js https://docs.mapbox.com/help/glossary/leaflet 

Web アプリケーション 作成 Mapbox GL JS - コードを書くに当たって、 JavaScriptライブラリと、CSSファイルが必要 - MapboxがCDNにてホストする場合と、パッケージ管理ツールで呼び出す場合 いずれかでライブラリを ロード( 以降 、ホストされている場合を想定） - HTML タグにて以下 内容を定義 v2.1.1: 2021/3/1現在 移行性 

マップ 初期化 ● 基本となる mapboxgl.Mapクラス ● Mapクラスをインスタンス化することで、最 低限 マップ表示が可能 ○ Container: マップを配置するHTMLエレメントIDを指定 (こ 例で id="map") ○ Style: 利用するスタイル URLを指定 mapbox://styles/mapbox/streets-v11. ○ Center: 地図 中心を指定 (Mapbox GL JSで 、(lng, lat) 順番な で 注意) ○ Zoom: ズームレベルを指定 var map = new mapboxgl.Map({ container: 'map', style: 'mapbox://styles/mapbox/streets-v11', center: [-74.50, 40], zoom: 9 }); 移行性 

YOLPとMapboxで 定義 違い YOLP タイル レイヤー レイヤーセット YDF アプリケーションID(app id) クレジット表示(attribution) Mapbox タイル レイヤー/タイルセット スタイル GeoJSON, TileJSON アクセス・トークン Attribution https://docs.mapbox.com/help/glossary/ https://developer.yahoo.co.jp/glossary/ https://map.yahoo.co.jp/promo/yolp/faq.html#19 移行性 

地図を表示する YOLP(地図):Yahoo! JavaScriptマップAPI - Yahoo!デベロッパーネットワーク var ymap = new Y.Map("map"); ymap.drawMap(new Y.LatLng(35.66572, 139.73100), 17, Y.LayerSetId.NORMAL); var map = new mapboxgl.Map({ container: 'map', style: 'mapbox://styles/mapbox/streets-v11', center: [139.73100, 35.66572], zoom: 17 }); YOLP: Mapインスタンスを生成して、緯度経度、縮尺、 レイヤーセットIDを指定 Mapbox: Mapインスタンスを生成して、緯度経度、縮尺、 スタイルIDを指定 Yahoo! Java Script APIから 移行 https://github.com/tichimura/mapbox-yolp-workshop 

Leaflet ● Web地図向け オープンソースJavaScriptライブラリ ○ 豊富なプラグインとデスクトップからモバイルまで 汎用性 高さ ○ ラスタタイルセットをネイティブにサポート ○ tileLayerからMapbox API(Static Tile API)を呼び出すことも可能 ■ classic style(‘mapbox.streets’) 2020/6にサポート終了したため、最新 styleに変更 ○ Mapbox エンジニア(Vladimir Agafonkin)が作成、現在 コミュニティで開発・運用 ● mapbox.jsと呼 れるプラグイン 利用も可能 ○ L.mapbox.styleLayer を利用してStatic Tile APIからベクタタイルセットを呼び出してラスタタイルと して表示 ○ 現在アクティブな開発 されてない Transition from Mapbox.js to Mapbox GL JS | Help Migrating to the modern Static Tiles API | Help 移行性 

地図を表示する var map = new mapboxgl.Map({ container: 'map', style: 'mapbox://styles/mapbox/streets-v11', center: [139.73100, 35.66572], zoom: 17 }); Leaflet: Mapインスタンスを生成して、緯度経度、縮尺、レイヤを指定 Mapbox GL JS: Mapインスタンスを生成して、緯度経度、縮尺、 スタイルIDを指定 Leafletから 移行 https://leafletjs.com/examples/quick-start/ var mymap = L.map('map').setView([35.66572, 139.73100], 17); 　// mapboxスタイルを呼び出している場合 L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', { attribution: '© Mapbox © OpenStreetMap Improve this map', tileSize: 512, maxZoom: 18, zoomOffset: -1, id: 'mapbox/streets-v11', accessToken: 'your.mapbox.access.token' }).addTo(map); 

Google MapsとMapboxで 定義 違い Google タイル レイヤー(カスタムレイヤー) タイプ GeoJSON APIキー Attribution Mapbox タイル レイヤー/タイルセット スタイル GeoJSON, TileJSON アクセス・トークン Attribution 移行性 

地図を表示する var map = new google.maps.Map(document.getElementById('map'), { mapTypeId: 'roadmap', center: { lat: 35.66572, lng: 139.73100 }, zoom: 17 }); var map = new mapboxgl.Map({ container: 'map', style: 'mapbox://styles/mapbox/streets-v11', center: [139.73100, 35.66572], zoom: 17 }); Google: Mapインスタンスを生成して、緯度経度、縮尺、 タイプIDを指定 Mapbox: Mapインスタンスを生成して、緯度経度、縮尺、 スタイルIDを指定 Google Maps JavaScript APIから 移行 https://docs.mapbox.com/help/tutorials/google-to-mapbox/ https://developers.google.com/maps/documentation/javascript/maptypes 

GeoJSON 取り込み ● Google Maps JavaScript API ○ Importing Data into Maps ● Mapbox GL JS ○ Add markers to a web map with a symbol layer | Mapbox GL JS ● サンプルデータ: USGS Earthquake ○ https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp ○ https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojson 移行性 map.addSource('points', { 'type': 'geojson', 'data': 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojson', }); GL JSで ここを置き換える サンプルコード: https://jsfiddle.net/c4zrv0p9/6/ 

コスト:リーズナブルな料金体系 29 ※Cost per 1,000 5万 10万 20万 応相談 Free! $5 $4 $3 Map Loads for Web Map SDK for Mobile 単価 (USD) 2.5万 12.5万 25万 125万 100万 ※Cost per 1,000 応相談 Free! $4 $3.2 $2.4 単価 (USD) Source：https://www.mapbox.com/pricing/ GL JS セッション(<ページビュー)が対象 Mobile SDK 月次 MAU*を対象 *Monthly Active User コスト 

道路や建物情報、POIを含め国内全域 99%をカバー https://blog.mapbox.com/high-quality-japan-data-available-for-all-developers-b4b9c971d907 ゼンリン社データ 活用 【Mapsにて対応している地理情報】 ● 道路情報 ● 住所 ● POI （店舗、公園、建物ほか） ● 屋内エリアデータ （駅、大型商業施設ほか ） Mapsを使った描画において 、追加コスト不要 

クライアントレンダリングとデータ GL(GL JS) api.mapbox.com データソース レイヤー ソース レイヤー ソース レイヤー ソース マップ スタイルとデータ 読 み込み 外部データ 読み込み カスタムデータ 読み込み ☁ ☁ 外部データをアップロード カスタマイズ性 

スタイル: マップ表示に必要な描画表現を定義 (編集可能) タイルセット: レイヤー ベースとなるデータ 集合 (編集不可) データセット: データソースとして利用可能な データ (編集可能) スタイル(Style) Mapbox Mapを支えるデータ要素 タイルセット(Tileset) データセット(Dataset) 

GL JSを用いた描画機能 例 https://docs.mapbox.com/jp/mapbox-gl-js/example/ Webアプリケーション向けサンプル マップ 場所をスライドショーとして再生 マーカーでカスタムアイコンを追加 マーカーインスタンスにポップアップを添付 フィーチャをリアルタイムで更新 ベクター・タイルジオメトリを使用してローカル JSONデータを結合 カスタムプロパティで HTMLクラスター表示 ホバー効果を作成 データドリブンプロパティで線を設定 可変ラベル 配置 カスタマイズ性 

Mapbox GL JS v2 ● 従来 GL JSに比べて大幅な性能向上 ○ ロード時間、初期化時間 ● 3D機能 拡張 ○ 丘陵、山岳、水平線、空 描画 ● カメラ機能 拡張 ○ 平面移動から、立体的な移動を実現 現行 GL JS と 互換性やスタイルを維持 しながら、新しい地図体験を提供 sky レイヤにより、時 間や季節、あるい 天 候イベントなどにも対 応が可能 カメラAPI カスタマイズ性 

Mapbox GL JS 拡張 GL JS用 プラグイン - mapbox-gl-geocoder - mapbox-gl-directions - mapbox-gl-draw - など 他フレームワークと 連携 - React - Angular - Nginx - Deck.gl - L7 サンプル Use Mapbox GL JS in a React app https://docs.mapbox.com/mapbox-gl-js/plugins/ 

快適なユーザ体験を提供するデザインツール ● コード不要 デザイン ● 各レイヤー毎 細かな制御 ● ズームレベルに応じたスタイル調整 ● データ可視化にも使えるベースマップをデフォルト で提供、あるい スクラッチで作成も可能 ● Style Editor: スタイル 編集 ● Dataset Editor: データセット 編集 Mapbox Studio デザイン性 

Mapbox Vector Tiles :デザインを拡張するデータ インドアマップ (Indoor Map) 路線図 (Transits) ムーブメント (Movements) Mapbox Transit v2 | Vector tiles Mapbox Indoor v1 | Vector tiles Movement Data デザイン性 

Mapboxと目指すゴール 目指す ゴール これまで ゴール スタート 最初 ゴール コスト 移行性 マップユーザー 利便性 提供者 利便性 デザイン カスタマイズ 

さらなる活用 ポイント レイヤー 管理 04 ● コードで操作可能(addLayerなど) ● Mapbox Studio スタイルで管理も可 ● customLayer Feature 操作 03 ● queryRenderedFeatures ● feature-state データドリブンな描画 02 ● ズームレベルや属性内容を活用 ● ダイナミックな描画 ● パフォーマンスや見やすさなどにも影響 スタイル 01 ● スタイルをデザイン ● Mapbox Studio 活用 

いくつか 注意事項について ● ジオコーディング ○ 現時点で OSMベース データをメインに利用 ○ 2021年内にて大幅なアップデートを予定 ● 3D対応 ○ 2Dに高さ 要素を追加した hill-extrusionで立体的な建物 表現が可能 ○ 3Dオブジェクトについて 、外部連携が必要 ■ Loader.gl/Deck.gl ■ Three.jsなど ○ 3D Terrainで提供される標高データ 、グローバル データソースを利用 ■ 国内 データソースへ 対応 今後検討予定 ● 無償枠 確認 ○ 通常利用であれ 十分な無償枠 提供 ■ accounts.mapbox.comにて適宜ご確認ください 

モバイルネイティブなアプリケーションへ Maps SDK モバイルネイティブなアプリケーションにマップ機能を実装するために、Mapbox GL Native,というOpenGLベース レンダリングエ ンジンを提供、最新 SDKで , iOS Metalにも対応 ● Mapbox SDK for iOS ● Mapbox SDK for Android Mapbox Maps web services(APIs) Mapbox Maps SDKs for iOS、Androidを軽量にするために、Mapbox Webサービスを利用する別 ライブラリを用意 ● Androidで 、Mapbox Java SDK を提供して、さまざまなMapbox web サービス APIにアクセスが可能 ● iOSで , MapboxGeocoder.swift, MapboxDirections.swift, MapboxStatic.swift といったライブラリにより、それ ぞれMapbox Geocoding API, Directions API, Static Images APIへ インターフェースを提供 ● Mapbox Java SDK ● Mapbox API libraries for iOS 

さあ、Mapboxを じめましょう！ https://docs.mapbox.com/jp/yolp-to-mapbox/how-to-start/ 

ありがとうございました