📘

Mapbox Maps SDK Flutter Pluginを使ってみる

2023/05/10に公開

はじめに

MapboxはJavaScriptのSDKであるMapbox GL JSの他にモバイル向けSDKであるMapbox Maps SDK for AndroidMaps 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世代に分類できます。

  1. Mapbox GL JS v1と同世代
  • Mapbox Maps SDK for Android v9
  • Mapbox Maps SDK for iOS v6
  1. 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アカウントおよびアクセストークンが必要となります。

  1. Mapboxアカウントを作成する
  2. https://account.mapbox.com/ にアクセスする
  3. Tokensを選択
  4. 「Create a token」ボタンをクリック
  5. Nameに任意の名前を入力
  6. Public scopesのチェックをすべて外し、Secret Scopesの「DOWNLOADS:READ」のみを選択
  7. 「Create token」ボタンをクリック
  8. トークン一覧画面にトークンが表示されているので、コピーして安全な場所に保存

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.gradleminSdkVersion21に変更します。

地図を表示する

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),
      )
    );
  }
}

結果は以下のとおりです。

MapWidget

2024/05/11 更新

2024年3月1日にv1.0.0がリリースされました。v1.0.0ではMapbox Maps SDK for Android/iOS v11が使用されます。これに伴い、パブリックトークンの設定方法が以下のように変更されました。

  1. main()に以下を追加
WidgetsFlutterBinding.ensureInitialized();
MapboxOptions.setAccessToken(YOUR_MAPBOX_PUBLIC_ACCESS_TOKEN);
  1. MapWidgetのインスタンス時に指定していたresourceOptionsを削除

コード全体では以下のとおりです。

import 'package:flutter/material.dart';
import 'package:mapbox_maps_flutter/mapbox_maps_flutter.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  MapboxOptions.setAccessToken(YOUR_MAPBOX_PUBLIC_ACCESS_TOKEN);
  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()
    );
  }
}

記事一覧

以下の記事もぜひご参照ください。

https://zenn.dev/ottylab/articles/48bc1a0b1acde2/
https://zenn.dev/ottylab/articles/8d206839a11067/

GitHubで編集を提案
マップボックス・ジャパン合同会社

Discussion