【テクニカルウェビナー#10】Mapbox Maps SDK Flutter Plugin

テクニカルウェビナー #10 Mapbox Maps SDK Flutter Plugin

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

はじめに • Mapbox Maps SDK Flutter Pluginがリリース • Flutter Mapbox
GLとは異なり、Mapboxが開発・サポート • ベータ版（テクニカルサポート不可）

セットアップ

Pluginコードの入手および設定 1(󰳕) 1. GitHubからCloneもしくはダウンロード % git clone https://github.com/visgl/deck.gl.git % cd
deck.gl % git checkout v8.8.20 % cd examples/get-started 2. 依存関係ダウンロードのため、シークレットトークンを設定 Android: iOS: % git clone https://github.com/mapbox/mapbox-maps-flutter % cd mapbox-maps-flutter % git checkout v0.4.0 % cat ~/.gradle/gradle.properties SDK_REGISTRY_TOKEN=sk… % cat ~/.netrc machine api.mapbox.com login mapbox password sk….

Pluginコードの入手および設定 2(󰳕) 3. 実行時に必要なパブリックトークンの設定(Android Studioの場合) 1. run->Edit Configurations… 2. Additional
run args: に --dart-define=ACCESS_TOKEN=pk…. 追加

自分のプロジェクトで使用する場合(󰳕) 1.以下のコマンドでPlugin追加 2. /android/app/build.gradleのminSdkVersionを21に変更 % flutter pub add mapbox_maps_flutter

使い方

地図の表示(󰳕) Full screen map MapWidgetで作成

スタイル変更(󰳕) Full screen map onMapCreatedリスナーでMapboxMap オブジェクト取得、保存 MapboxMap#loadStyleURIでスタイル変更 (mapboxMap.style.setStyleURIも可)

レイヤーの追加(󰳕) Draw GeoJson Line アセットからGeoJSON取得

Persistent Layer 1(󰳕) Draw GeoJson Lineに以下を追加 → スタイル変更時にLineLayer消える

Persistent Layer 2(󰳕) style.addPersistentStyleLayerを利用

Annotation (Marker) Point Annotations PointAnnotationManager作成 valueがPointAnnoationmanagerのインスタンス保存アセットの画像一つのAnnotation作成複数のAnnotationをまとめて登録
一つの場合は .create クリックイベント

Cluster 1 StyleClusters

Cluster 2

まとめ • Mapbox Maps SDK Flutter PluginはMapboxが開発 • Maps SDK
for Android/iOSと似た開発体験

【テクニカルウェビナー#10】Mapbox Maps SDK Flutter Plugin

【テクニカルウェビナー#10】Mapbox Maps SDK Flutter Plugin

Mapbox Japan

More Decks by Mapbox Japan

Other Decks in Technology

Featured

Transcript