前提

この記事では以下を前提としています。

• Mapbox のアカウントは作成済みとする
• Flutter のバージョンは 3.19.0
• Dart のバージョンは 3.3.0
• 「mapbox_maps_flutter」のバージョンは 1.0.0
• 開発環境は macOS Sonoma 14.0

本記事で使用する Mapbox 公式のmapbox_maps_flutterパッケージは現在も活発に開発が進められているようなので、この記事の内容が古くなってしまう可能性高いです。あらかじめご了承ください。

この記事のゴール

この記事では以下のように Flutter で Mapbox を使って日本語での地図表示するところまでをゴールとします。

なお、Mapbox 公式の Flutter 用パッケージは以下になります。

また、本記事で使用するコードは以下の Mapbox 公式のリポジトリ内にあるサンプルコードをもとにしています。

Mapbox アクセストークンについて

まずはじめに、Flutter で Mapbox を使用するためには、Mapbox のアクセストークンが必要です。そして Mapbox のアクセストークンは、パブリックトークンとシークレットトークンの２つがあります。パブリックトークンについては、以下の様に Mapbox の管理画面にログインした後に表示されるダッシュボード画面にあるDefault public tokenが該当します。このpk.から始まるパブリックトークンを後程 Flutter アプリ内で使用します。

もしデフォルトのパブリックトークンではなく、専用のパブリックトークンを作成したい場合は、次節でシークレットトークンの作成と合わせて説明します。

Mapbox のシークレットトークンを作成する

続いてパブリックトークンとは別に Mapbox の管理画面からシークレットトークンを作成する必要があります。ブラウザから Mapbox の管理画面にログインすると、以下の様にCreate a tokenボタンがあるのでこれをクリックします。以下ではすでに２つ別のアクセストークンを作成済みですが、初めての場合はDefault public tokenのみが表示されていると思います。

Create a tokenをクリックすると、以下の様な画面が表示されるので、Token nameのNameには任意の名前を入力し、Token scopesには Flutter アプリで許可したい項目をチェックします。

なお、Mapbox 公式の Flutter 用パッケージであるmapbox-maps-flutterを使うためには、Secret scopes内にあるDOWNLOADS:READはチェック必須項目となります。

Token nameとToken scopesの設定が完了したら、ページ最下部にあるCreate tokenボタンをクリックして作成します。

Create tokenボタンをクリックしてアクセストークンを作成すると、以下の様にパスワード確認ダイアログが表示されるので、Mapbox アカウントのパスワードを入力してSubmitボタンをクリックします。

Submitボタンをクリックすると以下の様にアクセストークン一覧が表示され、その中にいま作成したアクセストークンのシークレットトークン（skから始まる文字列）が表示されます。このシークレットトークンを、コピー用のアイコンをクリックしてコピーしておきます。なお、シークレットトークンは一度しか表示されず二度と表示できないので、コピーして適切なところに保存するように注意してください。このシークレットトークンを後程使用します。

Mapbox 管理画面のダッシュボードに戻ると、以下の様に作成したアクセストークンが追加表示されていることを確認できます。

以上で、Mapbox のアクセストークンの作成は完了です。

シークレットトークンを PC に設定する

mapbox-maps-flutterを通して Mapbox の SDK を使用するには、PC 自体に前節で取得したシークレットトークンを設定する必要があります。設定と言っても PC の特定パスにファイルを１つ作成するだけになります。iOS と Android 用それぞれについて以降に記載します。なお、 この手順も公式のドキュメントに記載されている内容です。

Android 用の設定

PC（私の場合は macOS） のパス~/.gradle/gradle.propertiesに以下の内容のファイルを作成します。sk.abcdefghijklmnopqrstuvwxyz0123456789は取得したシークレットトークンに置き換えてください。

SDK_REGISTRY_TOKEN=sk.abcdefghijklmnopqrstuvwxyz0123456789

iOS 用の設定

PC（私の場合は macOS） のパス~/.netrcに以下の内容のファイルを作成します。sk.abcdefghijklmnopqrstuvwxyz0123456789は取得したシークレットトークンに置き換えてください。

machine api.mapbox.com
  login mapbox
  password sk.abcdefghijklmnopqrstuvwxyz0123456789

以上で Android 用、iOS 用それぞれの設定が完了しました。最後に次節で権限の設定を行います。

権限を設定する

Mapbox を使うために、Android と iOS それぞれで権限を設定する必要があります。

Android の権限設定

Flutter プロジェクトルートにあるandroid/app/src/main/AndroidManifest.xmlに以下を追記します。

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <uses-permission android:name="android.permission.INTERNET"/>
    <!-- 以下２つをMapbox用に追記 -->
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
    <application
        android:label="mapbox_maps_example"
        android:name="${applicationName}"
        android:icon="@mipmap/launcher_icon">
        <activity
            android:name=".MainActivity"
            android:exported="true"
    <!-- ...以降省略...  -->

iOS の権限設定

Runner/Info.plistに以下を追記します。

<key>NSLocationWhenInUseUsageDescription</key>
<string>マップ機能のために位置情報を使用します。</string>

以上で Flutter アプリからmapbox-maps-flutterパッケージを使って Mapbox の SDK を使用する準備が整いました。

mapbox_maps_flutter を Flutter プロジェクトに追加する

以下を実行して、mapbox_maps_flutterパッケージを Flutter プロジェクトに追加します。

$ flutter pub add mapbox_maps_flutter

pubspec.yamlに以下のように追加されます。1.0.0は執筆時点での最新バージョンです。

dependencies:
  mapbox_maps_flutter: ^1.0.0

Flutter で Mapbox の地図を表示する

あとは以下の様にすることで Mapbox の地図を Flutter アプリ内で表示することができます。以下はflutter createを実行して生成されるlib/main.dartに Mapbox 用のウィジェットを追加、編集したものです。以下の 13-14 行目にて地図の日本語表示を指定しています。

import 'package:flutter/material.dart';
import 'package:mapbox_maps_flutter/mapbox_maps_flutter.dart';
 
void main() {
  WidgetsFlutterBinding.ensureInitialized();
  // Mapboxのパブリックトークンを設定する
  // 実際には環境変数やシークレットマネージャーなどを使って設定する
  const mapboxAccessToken = "pk.ey12334678901234567890.....";
 
  // Mapboxのアクセストークンを設定する
  MapboxOptions.setAccessToken(mapboxAccessToken);
 
  // 日本語表示にする
  MapboxMapsOptions.setLanguage("ja");
 
  runApp(const MyApp());
  // runApp(MaterialApp(home: MapWidget()));
}
 
class MyApp extends StatelessWidget {
  const MyApp({super.key});
 
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
          useMaterial3: true,
        ),
        home: FullMap());
  }
}
 
class FullMap extends StatefulWidget {
  const FullMap();
 
  @override
  State createState() => FullMapState();
}
 
class FullMapState extends State<FullMap> {
  MapboxMap? mapboxMap;
 
  // MapboxMapのマップが作成された時に呼び出される関数
  _onMapCreated(MapboxMap mapboxMap) {
    // Mapboxのマップ用のコントローラーを取得する
    this.mapboxMap = mapboxMap;
 
    // マップのカメラを設定する
    // 以下はマップの初期状態として、東京駅周辺を中心に表示する例
    mapboxMap.setCamera(CameraOptions(
        center:
            Point(coordinates: Position(139.7586677640881, 35.67369269880291))
                .toJson(),
        zoom: 14,
        pitch: 0));
  }
 
  @override
  Widget build(BuildContext context) {
    @override
    void initState() {
      super.initState();
    }
 
    @override
    void dispose() {
      super.dispose();
    }
 
    return Scaffold(
        appBar: AppBar(title: Text("Mapbox Maps Example")),
        body: MapWidget(
          key: ValueKey("mapWidget"),
          onMapCreated: _onMapCreated,
        ));
  }
}
 

以上でflutter runを実行してアプリを起動すれば冒頭に載せた日本語地図が表示されるはずです。

まとめ

Flutter で Mapbox を使って日本語地図を表示しました。本記事では表示するところまでですが、よくあるマップの機能としてピンを立てたり、地名検索してマップを移動したりできます。また、地図のスタイルを変更することもできるので、興味があれば公式ドキュメントを参照してみてください。