📘

Mapbox Maps SDK Flutter Pluginを使ってみる

OttyLab

2023/05/10に公開

はじめに

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

  @override
  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});
  @override
  State<MapPage> createState() => _MapPageState();
}

class _MapPageState extends State<MapPage> {
  @override
  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が使用されます。これに伴い、パブリックトークンの設定方法が以下のように変更されました。

main()に以下を追加

WidgetsFlutterBinding.ensureInitialized();
MapboxOptions.setAccessToken(YOUR_MAPBOX_PUBLIC_ACCESS_TOKEN);

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

  @override
  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});
  @override
  State<MapPage> createState() => _MapPageState();
}

class _MapPageState extends State<MapPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: MapWidget()
    );
  }
}

記事一覧

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

GitHubで編集を提案

マップボックス・ジャパン合同会社Publication

マップボックス・ジャパン合同会社は、地図情報サービスの開発プラットフォームにおけるリーディングカンパニーです。ユーザー企業や代理店企業との共創により、地図を活用した新たな生活体験や業務改善ソリューションを生み出すことで、社会と暮らしの進化を支えています。