【テクニカルウェビナー#6】Mapbox GL JS ユースケース〜 Maps SDK for Android / iOSとの比較 〜

本スライドは、Mapbox Japanによるウェビナー「【テクニカルウェビナー#6】Mapbox GL JS ユースケース〜 Maps SDK for Android / iOSとの比較 〜」のスライドです。

目的：Mapbox Maps製品のより詳しい使い方について理解する
ゴール：
・新機能、新製品について知る
・Mapbox GL JSの機能についてさらに理解する
・Mapbox GL JSとMapbox Maps SDK for Android/iOSとの違いを知る
・Turf, deck.gl等のサードパーティツールとの連携方法を理解する

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

Transcript

1. テクニカルウェビナー #6 　〜 Maps SDK for Android / iOSとの比較 〜 Mapbox GL JS ユースケース
2. 目的・ゴール 目的 • Mapbox Maps製品のより詳しい使い方について理解する ゴール • 新機能、新製品について知る • Mapbox GL JSの機能についてさらに理解する • Mapbox GL JSとMapbox Maps SDK for Android/iOSとの違いを知る • Turf, deck.gl等のサードパーティツールとの連携方法を理解する 対象 • Mapbox Maps製品の技術にご興味のある方
3. はじめに Exampleの中でユースケースとして多そうなものをピックアップ • Change a map's style • Attach a popup to a marker instance • Create and style clusters Mapbox GL JSとMaps SDK for Android/iOSを比較
4. Android / iOSのセットアップ
5. Mapbox Maps SDK for Android 1 1. GitHubからcloneもしくはダウンロード 2. 依存関係ダウンロードのため、シークレットトークンを設定 % git clone https://github.com/mapbox/mapbox-maps-android % cd mapbox-maps-android % git checkout v10.10.0 % cat ~/.gradle/gradle.properties SDK_REGISTRY_TOKEN=sk… 注）自分のアプリでSDKバイナリをダウンロードする際は MAPBOX_DOWNLOADS_TOKEN にシークレットトークンを設定するか、 settings.gradleで password = SDK_REGISTRY_TOKEN とする
6. Mapbox Maps SDK for Android 2 3. app/src/main/res/values/developer-config.xmlの YOUR_MAPBOX_ACCESS_TOKEN_GOES_HEREにパブリックトークン
7. Maps SDK for iOS 1 1. GitHubからcloneもしくはダウンロード 2. 依存関係ダウンロードのため、シークレットトークンを設定 % git clone https://github.com/mapbox/mapbox-maps-ios % cd mapbox-maps-ios % git checkout v10.10.0 % cat ~/.netrc machine api.mapbox.com login mapbox password sk….
8. Maps SDK for iOS 2 3. Info.plistのMBXAccessTokenにパブリックトークン設定
9. Change a map's style
10. 概要 動的にスタイルを変更するサンプル Map#setStyleで変更
11. スタイル選択部分(󰳕) • click • event
12. レイヤーを追加(󰳕) スタイルを変更すると消える !
13. スタイル変更時の挙動 setStyleの処理 ->options.diffの設定で挙動変化 • true: 新しいスタイルに存在しないソース、レイヤーは削除 • false: 新たにStyleが作成されるためソース、レイヤーは消滅 追加したソース・レイヤーは削除
14. スタイル変更時に自動的にソース・レイヤー復元(󰳕) style.loadイベントを使用 スタイルがロードされるたびに呼ばれる
15. Persistent Layer(󰳕) • Mapbox Maps SDK for Android / iOS SDK v10ではPersistent Layer • Styleが変更されても可能な限りソース、レイヤーを維持 ◦ above, below, atが存在しない場合は一番上 ◦ 同じsoruce id, layer idが存在する場合は削除
16. Persistent Layer, Android(󰳕) コールバックを登録すると再度 onStyleLoaded実行
17. Persistent Layer, iOS(󰳕) onEveryを使用すると毎回実行
18. Persistent Layerのつかいどころ • 動的に変化するソース・レイヤー ◦ アプリケーションが変更を管理する必要性 • Mapbox Navigation SDK ◦ 夜間モード対応 ◦ 経路はLineLayerで描画 ◦ Vanishing Routeで走行済み経路を表現
19. Attach a popup to a marker instance
20. 概要 Marker / Popup のサンプル Popup Marker
21. Marker / Popup (󰳕) Marker • 直接mapに貼り付け • メソッドチェーンで設定 • イベント対応 Popup • 直接mapに貼り付け • メソッドチェーンで設定 • イベント対応
22. MarkerとPopupの連携 MarkerにPopupを登録することで自動処理 • Marker#setPopup: this._popup に popupを保存 • オフセットの調整: PopupをMarkerの上に表示（デフォルトMarkerのみ） • クリックイベントの処理: mapのクリックイベントを_onMapClickで処理、Popupをト グル（Mapオブジェクトへの追加・削除処理）
23. Popup / Markerの作成(󰳕) メソッドチェーンで設定 上方向のオフセット 自分でHTML要素を定義可 ({element: el}と等価) デフォルトは前出の青いマーカー
24. Mapbox SDK for Android / iOS Markerの実現方法は3通り(Android/iOS) • AnnotationManager: 内部的にレイヤを作成 • ViewAnnotationManager: View/UIViewで作ったMarkerを地図に連動 • Style Layer: 自分でLayer作成 サンプルコード • MarkerをPointAnnotation、PopupをViewAnnotationManagerで実現 • MarkerをSymbol Layer、PopupをViewAnnotationManagerで表示
25. サンプル Point Annotation + View Annotation, Android Point Annotation作成 View Annotation作成
26. Point Annotation + View Annotation, iOS(󰳕) サンプル Point Annotation作成 View Annotation作成 タップイベント処理
27. Symbol Layer + View Annotation, Android 1(󰳕) サンプル 初期化処理でソースとレイヤーを追加 ロングタップイベント処理
28. Symbol Layer + View Annotation, Android 2(󰳕) ソース差し替えでシンボル表示 対応するView Annotation作成 タップイベント処理
29. Symbol Layer + View Annotation, iOS 1(󰳕) サンプル 初期化処理でソースとレイヤーを追加 View Annotationを追加
30. Symbol Layer + View Annotation, iOS 2(󰳕) ロングタップイベント処理 タップイベント処理
31. Create and style clusters
32. 概要 クラスター（複数のデータを集計して表示する）サンプル GeoJSON Sourceに対してClueterを指定することで実現 • クラスターを示すPoint Featureが生成 • クラスターに入ったPoint Featureは不可視
33. 設定方法(󰳕) addSourceで以下の設定(リファレンス) • cluter: true • clusterMaxZoom: クラスタリングする最大ズーム。14の場合は15未満でクラス ター化。 • clusterRaduis: 同一クラスタに追加する距離（ドット数） • clusterMinPoints: クラスタを構成するのに必要な最小のポイント数 • clusterProperties: クラスタに対してプロパティを追加
34. クラスターのプロパティ • point_count：集約されたデータ数 • point_count_abbreviated: 集約されたデータ概数（例: 1k） point_countのある・なしでクラスターかどうかを判別
35. レイヤーの作成(󰳕) 円の表示 円の中の数字を表示 元データの表示
36. Android 1(󰳕) サンプル ソース
37. Android 2(󰳕) 元データの表示 円の表示 円の中の数字を表示
38. Android 3(󰳕) 円の表示を一つのレイヤで https://github.com/mapbox/mapbox-maps-android/pull/1928
39. iOS 1(󰳕) サンプル ソース
40. iOS 2(󰳕) 円の表示 円の中の数字を表示 元データの表示
41. Point Annotationによるクラスタ作成 クラスタのサンプル • Android • iOS
42. まとめ • Exampleは様々な機能を紹介 • 手を動かす＋リファレンスを見ながら理解 • Mapbox GL JSにしかない機能、Maps SDK for Android / iOSにしかない機能もあ るので注意