地図デザイン 重要性とMapbox 2021/6/30 [email protected] Senior Solution Architect, Mapbox

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

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

Mapboxと目指すゴール 目指す ゴール 最初 ゴール スタート コスト 移行性 マップユーザー 利便性 提供者 利便性 デザイン カスタマイズ 前回 (#1) 今回 (#2)

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

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

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

データとデザイン デザイン 定義 スタイル マップ描画 デザインを ドキュメントとして定義。 データ自体 持たず、ソースとレイ ヤーをデータソースと関連づけ、レ ンダリング方法を指定 20XX Vestibulum congue tempus Mapbox Style Specification https://docs.mapbox.com/mapb ox-gl-js/style-spec/ 20XX Vestibulum congue tempus MBTiles Specification https://github.com/mapbox/mbt iles-spec データ 集合 タイルセット ラスタあるい ベクタデータとして、 地理データ、位置情報データ、メタ データを格納。 スタイル要素 含めない

競合も（ようやく）認めるスタイル 重要性 是非、Mapboxと比べてみてください

マップ デザインとスタイル ● マップをデザインする ○ データ 指定(カスタム地理データ 利用 ) ○ 色やフォント、アイコン管理 ○ データドリブンな可視化、など ● スタイル (Style) ○ マップデザイン コア ○ JSONフォーマットにて、描画方法を定義 ● オープンな仕様 ○ Mapbox スタイル仕様に従い、Webやモバイ ルアプリケーション、あるい サードパーティ ライブラリなど、マルチプラットフォームで、 Mapboxスタイルを使った安定した描画が可 能 デモ Cartogram

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

データドリブンなスタイル 例 レイヤー 属性に応じて円 サイズを変更 レイヤー 属性に応じて塗りつぶし 配色を変更 レイヤー 属性に応じて線 配色を変更 レイヤー 属性に応じて高さを変更

ベクタタイル 特徴 ● ダイナミックなスタイリング ○ Mapbox GL JS やMapbox Maps SDKs for Android/iOS を使って、追加 タイルをダウンロードす ることなくマップ 外観を動的に変更が可能 ● なめらかな操作性 ○ クライアント側でロードされるため、す やく再レンダリングが可能、なめらかなズームや傾斜、回転 が可能 ● サイズとスピード ○ ベクタタイルフォーマットとして 特製である軽量さとスピードに加えて、 Mapbox カルトグラファー によるバランス とれたタイルを提供 ● ダイナミックなクエリ ○ ベクタタイルセットに含まれるデータ属性にアクセスが可能 . リファレンス: https://docs.mapbox.com/vector-tiles/reference/ 仕様: https://docs.mapbox.com/vector-tiles/specification/ Mapbox Vector Tile対応ツール: https://github.com/mapbox/awesome-vector-tiles/

Vector vs Raster https://blog.mapbox.com/mapbox-%EF%B8%8F-leaflet-d60b1be96615 ベクタタイル ラスタタイルに比べて、通常 20-50%程度ほど小さいサイズとなります。

Vector vs Raster https://blog.mapbox.com/mapbox-%EF%B8%8F-leaflet-d60b1be96615

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

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

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

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コマース レシートで 利用

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 }); 移行性

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

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

GL JS v2.3 リリース ● 3Dマップで霧 表現 ＋ 標高データ ク エリが高速化 ● 衛星画像マップ 工場 ● 海底地形タイルセットへ 対応 詳細 是非ブログをご確認ください https://blog.mapbox.jp/

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

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

次回開催予定 これから じめるMapbox活用 #3 - モバイルアプリ編 2021/7/28(水) 13:00-15:00 ( 120分拡大版 ) https://mapbox-jp.connpass.com/event/ 次回 、モバイルSDKを利用したアプリケーションについて、ご紹介いたします。2時間 拡大版 予定です。ご期待ください！

ありがとうございました

No content

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

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

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

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

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/

コスト:リーズナブルな料金体系 40 ※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 コスト

GLがもたらすデータビジュアライゼーション 価値 米国Weather Channel社におけるリアルタイム気象 データ 視覚化 - 気象データ 断続的に変化 -> 気象マップ 表示も同じように変化が必要 - Maps SDK for iOS/Androidにおけるランタイムスタイリング機 能により、リアルタイムにあらゆるレイヤ 変更が可能 -> こ 事例で 、暴風レーダー レイヤ配色 変更をリアルタイムに 実現

GL: Graphic Library ● GL Graphics Library 略 ○ グラフィックカード (GPU)上で動くソフトウェアを指す ● グラフィックカード レンダリング用に用意されたハードウェア ○ CPUよりも高速なレンダリング ○ CPUよりも様々な数値計算が高速 ● なぜ注目するべきか？ ○ クライアントで レンダリング処理 ○ 非常に強力でインタラクティブなグラフィックを実現 ○ より視覚的効果が高められる ● Mapbox GL = GPUを活用したマップ レンダリング