Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

【テクニカルウェビナー#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

Mapbox Japan

March 01, 2023
Tweet

More Decks by Mapbox Japan

Other Decks in Technology

Transcript

  1. 目的・ゴール 目的 • Mapbox Maps製品のより詳しい使い方について理解する ゴール • 新機能、新製品について知る • Mapbox

    GL JSの機能についてさらに理解する • Mapbox GL JSとMapbox Maps SDK for Android/iOSとの違いを知る • Turf, deck.gl等のサードパーティツールとの連携方法を理解する 対象 • Mapbox Maps製品の技術にご興味のある方
  2. はじめに 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を比較
  3. 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 とする
  4. 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….
  5. Persistent Layer(󰳕) • Mapbox Maps SDK for Android / iOS

    SDK v10ではPersistent Layer • Styleが変更されても可能な限りソース、レイヤーを維持 ◦ above, below, atが存在しない場合は一番上 ◦ 同じsoruce id, layer idが存在する場合は削除
  6. Marker / Popup (󰳕) Marker • 直接mapに貼り付け • メソッドチェーンで設定 •

    イベント対応 Popup • 直接mapに貼り付け • メソッドチェーンで設定 • イベント対応
  7. MarkerとPopupの連携 MarkerにPopupを登録することで自動処理 • Marker#setPopup: this._popup に popupを保存 • オフセットの調整: PopupをMarkerの上に表示(デフォルトMarkerのみ)

    • クリックイベントの処理: mapのクリックイベントを_onMapClickで処理、Popupをト グル(Mapオブジェクトへの追加・削除処理)
  8. 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で表示
  9. 設定方法(󰳕) addSourceで以下の設定(リファレンス) • cluter: true • clusterMaxZoom: クラスタリングする最大ズーム。14の場合は15未満でクラス ター化。 •

    clusterRaduis: 同一クラスタに追加する距離(ドット数) • clusterMinPoints: クラスタを構成するのに必要な最小のポイント数 • clusterProperties: クラスタに対してプロパティを追加