これからはじめるMapboxの活用 #1 ｜ ウェビナー発表スライド#210304 / getting-started-mapbox01

本スライドは、2021年3月4日に開催されたMapbox Japanによるウェビナー「これからはじめるMapbox活用 #1 - Webアプリ編」の発表スライドです。

▼ウェビナー概要▼
Mapboxを選ぶメリットから、WebアプリにおけるMapboxの可能性まで。
Mapboxの活用を検討している方に役立つ情報を、デモを交えてご説明します！

地図開発プラットフォームであるMapboxはこれまでに、Yahoo!JapanやFacebook、Shopifyなど、多くの企業から信頼を受け、様々な業界・用途でご活用いただいております。

なぜGoogle Mapsや他のサービスではなくMapboxなのか。ウェビナーにて、他の地図ソリューションからMapboxへ移行するメリットやそのポイントについてデモを交えながらご説明いたします。加えて、Mapbox Japanのテクニカルパートナーであるtagbangersの協力のもと、ReactやDeck.glを使った基本的な操作からデータビジュアライゼーションまで、WebアプリにおけるMapboxの可能性についてもお話しいたします。

1. これから じめるMapbox 活用 #1 2021/3/4
2. 本日 アジェンダ タイトル スピーカー 14:00 - 14:20 Mapboxへ 移行と考慮すべきポ イント 市村@Mapbox 14:20 - 14:45 Webアプリケーションへ Mapbox活用 設樂@tagbangers 14:45 - 15:00 Q&A ALL
3. アンケートへ ご協力 お願い https://bit.ly/3stLCl5
4. Mapboxへ 移行と活用について 2021/3/4 Tomohiro.Ichimura@mapbox.com Senior Solution Architect, Mapbox
5. About Me • Tomohiro Ichimura ◦ シニアソリューションアーキテクト ◦ Mapbox Japan ◦ @tomoichimura ◦ tomohiro.ichimura@mapbox.com
6. Mapbox 、位置情報による新しい世界を実現する ロケーション・プラットフォームを提供しています
7. マップ(Webマップ)に必要な要素 - データ - マップで表現したいも - ラスターデータ - ジオメトリ - レンダラー - データを視覚化するも - スタイル - 視覚化するために必要なルール - クライアント - マップを統合するクライアントソフトウェア
8. ベクターマップをコアとしたMapboxエコシステム クライアント アプリケーション api build デザイン（スタイル) データ api api >_ MTS, tippecanoe, rasterio Mapbox Studio, Mapbox Styles GL JS, GL Native, mapbox.js, leaflet.js 描画(レンダラー) SDK
9. Mapbox Style: より詳細な内容や、目的に応 じた表示により、これまでにな い地図体験が提供可能で す。
10. 地図上にデータ 全て データレイヤに アクセス可能 境界 道路 衛星 地形 あなた データ 場所 他 地図
11. 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
12. Mapbox じめ方 https://docs.mapbox.com/jp/yolp-to-mapbox/how-to-start/
13. さまざまなユースケースもご参考に！ nagix
14. デザイン性 従来で 実現できなかった、 ユニークで美しい地図を実現 ・地図デザイン 作成 ・インタラクティブなデザイン カスタマイズ性 従来で 実現できなかった、 地図 カスタマイズを実現 ・データ 持ち込み ・データ 重 合わせ コスト 従来 Webマップにかかっていた コストを削減 ・ライセンス ・開発 ・運用 移行性 既存資産を活かしながら、 新しいWebマップへ移行 新規アプリケーションとして 開発容易性 移行 ポイント パフォーマンス 向上、ユニークで美しいマップ 提供
15. Web アプリケーション Mapbox GL JSを利用することで、インタラクティブで、カスタマ イズが可能なWebアプリケーションを、Mapboxスタイルとベク タタイルを利用して作成可能 Leafletなどを利用する場合 、 Static Tiles APIを利用するこ とで、クライアントにラスタタイルで 提供が可能 静的なコンテンツを必要とする、あるい 印刷目的であれ Static Images APIが利用可能 Mapbox.js 、一世代前 JavaScriptライブラリで、Leaflet.js をベースとしており、旧来 スタイル、あるい ラスタスタイルを 利用、あるい クライアントスペックが不十分な場合で 利用が 想定される。 デモ 移行性
16. 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 一般にブラウザベースで ゲーム作成で利用されてきた技術で、より先進的なインタラクション を可能とし、滑らかなズーム操作や、カメラ 方角や傾斜 変更、マップデータ クエリ、動的なフィルタなど が可能
17. Static Tiles API Static Tiles API を利用することで、ラスタタイル 提供が可能 クライアントサイドで、ラスタタイルを必要とされ るケースにて利用 利用されるライブラリとして 、Leaflet.jsや Mapbox.jsが想定される 主なユースケース • 初期ロード スピードを求める場合 ◦ GLと併用して、GLをバックグラウンドでロードさせな がら、Static Tiles APIを使ってマップを表示すること で、GL 初期レンダリング 遅れを補完することが 可能 • フォールバックとして 利用 ◦ WebGLに対応していないブラウザやデバイス向け 対策 • インタラクティブ性 少なく、表示箇所もオーバレイも少 ないケースで 利用
18. Static Images API Static Images API 、インタラクティブ性を必 要としないクライアントに向けたAPI ベクタタイルが含まれる場合 PNGで出力 ラスタタイル み場合 JPEGで出力 画像イメージで 地図を提供するため、幅広い 対象 クライアントで 利用が想定される 主なユースケース • モバイル通知時に静的な地図を表示 • ユーザプロファイルページや SNSなどで フィード時に利 用 • アウトドア、あるい フィットネス アクティビティ 可視 化 • ライドシェアやeコマース レシートで 利用
19. 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
20. Web アプリケーション 作成 Mapbox GL JS - コードを書くに当たって、 JavaScriptライブラリと、CSSファイルが必要 - MapboxがCDNにてホストする場合と、パッケージ管理ツールで呼び出す場合 いずれかでライブラリを ロード( 以降 、ホストされている場合を想定） - HTML <head>タグにて以下 内容を定義 <script src='https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.js'></script> <link href='https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.css' rel='stylesheet' /> v2.1.1: 2021/3/1現在 移行性
21. マップ 初期化 • 基本となる 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 }); 移行性
22. 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 移行性
23. 地図を表示する 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
24. 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 移行性
25. 地図を表示する 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: '© <a href="https://www.mapbox.com/about/maps/">Mapbox</a> © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> <strong><a href="https://www.mapbox.com/map-feedback/" target="_blank">Improve this map</a></strong>', tileSize: 512, maxZoom: 18, zoomOffset: -1, id: 'mapbox/streets-v11', accessToken: 'your.mapbox.access.token' }).addTo(map);
26. Google MapsとMapboxで 定義 違い Google タイル レイヤー(カスタムレイヤー) タイプ GeoJSON APIキー Attribution Mapbox タイル レイヤー/タイルセット スタイル GeoJSON, TileJSON アクセス・トークン Attribution 移行性
27. 地図を表示する 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
28. 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. コスト:リーズナブルな料金体系 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 コスト
30. 道路や建物情報、POIを含め国内全域 99%をカバー https://blog.mapbox.com/high-quality-japan-data-available-for-all-developers-b4b9c971d907 ゼンリン社データ 活用 【Mapsにて対応している地理情報】 • 道路情報 • 住所 • POI （店舗、公園、建物ほか） • 屋内エリアデータ （駅、大型商業施設ほか ） Mapsを使った描画において 、追加コスト不要
31. クライアントレンダリングとデータ GL(GL JS) api.mapbox.com データソース レイヤー ソース レイヤー ソース レイヤー ソース マップ スタイルとデータ 読 み込み 外部データ 読み込み カスタムデータ 読み込み ☁ ☁ 外部データをアップロード カスタマイズ性
32. スタイル: マップ表示に必要な描画表現を定義 (編集可能) タイルセット: レイヤー ベースとなるデータ 集合 (編集不可) データセット: データソースとして利用可能な データ (編集可能) スタイル(Style) Mapbox Mapを支えるデータ要素 タイルセット(Tileset) データセット(Dataset)
33. GL JSを用いた描画機能 例 https://docs.mapbox.com/jp/mapbox-gl-js/example/ Webアプリケーション向けサンプル マップ 場所をスライドショーとして再生 マーカーでカスタムアイコンを追加 マーカーインスタンスにポップアップを添付 フィーチャをリアルタイムで更新 ベクター・タイルジオメトリを使用してローカル JSONデータを結合 カスタムプロパティで HTMLクラスター表示 ホバー効果を作成 データドリブンプロパティで線を設定 可変ラベル 配置 カスタマイズ性
34. Mapbox GL JS v2 • 従来 GL JSに比べて大幅な性能向上 ◦ ロード時間、初期化時間 • 3D機能 拡張 ◦ 丘陵、山岳、水平線、空 描画 • カメラ機能 拡張 ◦ 平面移動から、立体的な移動を実現 現行 GL JS と 互換性やスタイルを維持 しながら、新しい地図体験を提供 sky レイヤにより、時 間や季節、あるい 天 候イベントなどにも対 応が可能 カメラAPI カスタマイズ性
35. 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/
36. 快適なユーザ体験を提供するデザインツール • コード不要 デザイン • 各レイヤー毎 細かな制御 • ズームレベルに応じたスタイル調整 • データ可視化にも使えるベースマップをデフォルト で提供、あるい スクラッチで作成も可能 • Style Editor: スタイル 編集 • Dataset Editor: データセット 編集 Mapbox Studio デザイン性
37. Mapbox Vector Tiles :デザインを拡張するデータ インドアマップ (Indoor Map) 路線図 (Transits) ムーブメント (Movements) Mapbox Transit v2 | Vector tiles Mapbox Indoor v1 | Vector tiles Movement Data デザイン性
38. Mapboxと目指すゴール 目指す ゴール これまで ゴール スタート 最初 ゴール コスト 移行性 マップユーザー 利便性 提供者 利便性 デザイン カスタマイズ
39. さらなる活用 ポイント レイヤー 管理 04 • コードで操作可能(addLayerなど) • Mapbox Studio スタイルで管理も可 • customLayer Feature 操作 03 • queryRenderedFeatures • feature-state データドリブンな描画 02 • ズームレベルや属性内容を活用 • ダイナミックな描画 • パフォーマンスや見やすさなどにも影響 スタイル 01 • スタイルをデザイン • Mapbox Studio 活用
40. いくつか 注意事項について • ジオコーディング ◦ 現時点で OSMベース データをメインに利用 ◦ 2021年内にて大幅なアップデートを予定 • 3D対応 ◦ 2Dに高さ 要素を追加した hill-extrusionで立体的な建物 表現が可能 ◦ 3Dオブジェクトについて 、外部連携が必要 ▪ Loader.gl/Deck.gl ▪ Three.jsなど ◦ 3D Terrainで提供される標高データ 、グローバル データソースを利用 ▪ 国内 データソースへ 対応 今後検討予定 • 無償枠 確認 ◦ 通常利用であれ 十分な無償枠 提供 ▪ accounts.mapbox.comにて適宜ご確認ください
41. モバイルネイティブなアプリケーションへ 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
42. さあ、Mapboxを じめましょう！ https://docs.mapbox.com/jp/yolp-to-mapbox/how-to-start/
43. ありがとうございました