はじめに
MapboxはJavaScriptのSDKであるMapbox GL JSの他にモバイル向けSDKであるMapbox Maps SDK for Android、Maps SDK for iOSも提供しており、様々なプラットフォームで同じ体験の地図を使用することができます。そしてそれらに加えてFlutter用のSDKであるMapbox Maps SDK Flutter Pluginがリリースされました。この記事ではこのFlutter用のSDKの使い方を簡単に見ていこうと思います。
Mapbox Maps SDK Flutter Pluginとは
背景
FlutterでMapboxをサポートするプラグインとしてFlutter Mapbox GLがあります。これはMaps SDK for Android v9およびMapbox SDK for iOS v6を内包し、メソッドチャネル経由でこれらの機能を使用するSDKとして提供されています。当初Mapboxが開発していましたが、途中からコミュティサポートとなりました。積極的な開発が続けられますが、Mapbox Maps SDK for Android/iOS v10はサポートされていません。
そこで、Mapboxは新たにMapbox Maps SDK for Android/iOS v10をサポートするSDKとしてMapbox Maps SDK Flutter Pluginの開発に着手しました。Mapbox Maps SDK Flutter PluginはFlutter Mapbox GL同様にMapbox Maps SDK for Android/iOSを内包し、メソッドチャネル経由でそれらの機能を使用する構造となります。すでに基本的な機能は実装されており、Mapbox Maps SDK for Android/iOSと似た使用感で地図アプリケーションを構成できます。
寄り道 - SDKのバージョン
MapboxのSDKは大きく分けて以下の2世代に分類できます。
- Mapbox GL JS v1と同世代
- Mapbox Maps SDK for Android v9
- Mapbox Maps SDK for iOS v6
- Mapbox GL JS v2と同世代
- Mapbox Maps SDK for Android v10
- Mapbox Maps SDK for iOS v10
1.はライセンスがBSD、2.はToSとなり、使用条件が異なります。これに伴い、v2ではパブリックトークンの設定が必須になりました。また、2.では新しいスタイル（空の表現）、複数のプロジェクションのサポート等が追加されています。
Mapbox Maps SDK Flutter PluginはMapbox Maps SDK for Android/iOS v10を使用していることから2.の世代となります。
注意事項
Mapbox Maps SDK Flutter Pluginは現在ベータ版として提供されています。今後、予告なくAPIの変更等が発生する可能性があります。また、使い方等に関してテクニカルサポートにお問い合わせいただいてもご回答できません。
使ってみる
それでは早速SDKを使ってみましょう！
準備
Flutterの開発環境を作成
公式サイトを参考にセットアップしてください。私はAndroid StudioにFlutterプラグインを入れて使用しています。
アクセストークンの作成
Mapbox Maps SDK Flutter Pluginが内部的に使用するMaps SDK for Android/iOSのバイナリをダウンロードするにあたり、Mapboxアカウントおよびアクセストークンが必要となります。
- Mapboxアカウントを作成する
- https://account.mapbox.com/ にアクセスする
- Tokensを選択
- 「Create a token」ボタンをクリック
- Nameに任意の名前を入力
- Public scopesのチェックをすべて外し、Secret Scopesの「DOWNLOADS:READ」のみを選択
- 「Create token」ボタンをクリック
- トークン一覧画面にトークンが表示されているので、コピーして安全な場所に保存
Secret Scopesを含むアクセストークンは「シークレットトークン」と呼ばれます。アカウントに関する操作を許可するトークンであるため、外部に公開してはいけません。また、シークレットトークンは「sk.」で始まる文字列となるため、パブリックトークン（「pk.で始まる」）と区別できます。
シークレットトークンは作成直後にしか表示されないので、このタイミングで確実に保存してください。
アクセストークンの設定
Mapbox Maps SDK for Android
Mapbox SDK for AndroidのInstallaionに記載されている通りにシークレットトークンを設定します。具体的には~/.gradle/gradle.propertiesに以下の行を追加します。
MAPBOX_DOWNLOADS_TOKEN=YOUR_SECRET_MAPBOX_ACCESS_TOKEN
Mapbox Maps SDK for iOS
Mapbox SDK for iOSのInstallaionに記載されている通りにシークレットトークンを設定します。具体的には~/.netrcに以下の内容を記述します。
machine api.mapbox.com
login mapbox
password YOUR_SECRET_MAPBOX_ACCESS_TOKEN
Mapbox Maps SDK Flutter Pluginのインストール
以下のコマンドでインストールします
% flutter pub add mapbox_maps_flutter
Androidの設定
/android/app/build.gradleのminSdkVersionを21に変更します。
地図を表示する
MapWidgetが地図を表示するWidgetです。resourceOptionsの設定が必須です。ここでパブリックトークンを設定します。
import 'package:flutter/material.dart';
import 'package:mapbox_maps_flutter/mapbox_maps_flutter.dart';
void main() {
runApp(const MapboxSample());
}
class MapboxSample extends StatelessWidget {
const MapboxSample({super.key});
Widget build(BuildContext context) {
return MaterialApp(
title: 'Mapbox Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MapPage(),
);
}
}
class MapPage extends StatefulWidget {
const MapPage({super.key});
State<MapPage> createState() => _MapPageState();
}
class _MapPageState extends State<MapPage> {
Widget build(BuildContext context) {
return Scaffold(
body: MapWidget(
resourceOptions: ResourceOptions(accessToken: YOUR_MAPBOX_PUBLIC_ACCESS_TOKEN),
)
);
}
}
結果は以下のとおりです。
記事一覧
以下の記事もぜひご参照ください。
Discussion