LoginSignup
8
5

More than 1 year has passed since last update.

@hmatsu47

Flutter で Mapbox の地図を現在位置を中心にして表示してみる

Last updated at Posted at 2021-09-20

こちらの記事を元に、同じこと（＋α）を Mapbox で試してみました。

準備

まず Mapbox のアカウントを登録し、アクセストークンとシークレットトークンを取得したのち、必要に応じて地図の日本語化を行っておきます。

【参考】

flutter create 【アプリケーション名】でアプリケーションを作成し、以下のファイルを編集します。

2021/10/29 追記：

mapbox_gl 0.13.0がリリースされ、Android で日本語の地図が表示できるようになったのと、誤記があったため一部修正しました。

※Flutter SDK 2.5.3 にて実行（macOS 11.6）。

pubspec.yaml（関連部分のみ）

pubspec.yaml
dependencies:
  flutter:
    sdk: flutter
  mapbox_gl: ^0.13.0
  location: ^4.3.0

android/build.gradle（Android の場合・関連部分のみ）

build.gradle
allprojects {
    repositories {
（中略）
        maven {
            url 'https://api.mapbox.com/downloads/v2/releases/maven'
            authentication {
            basic(BasicAuthentication)
        }
        credentials {
            // Do not change the username below.
            // This should always be `mapbox` (not your username). 
            username = 'mapbox'
            // Use the secret token you stored in gradle.properties as the password
            password = project.properties['MAPBOX_DOWNLOADS_TOKEN'] ?: ""
            }
        }
    }
}

android/app/build.gradle（Android の場合・関連部分のみ）

build.gradle
android {
（中略）
    defaultConfig {
（中略）
        minSdkVersion 21
（中略）
    }

    buildTypes {
        release {
            // other configs
            ndk {
                abiFilters 'armeabi-v7a','arm64-v8a','x86_64', 'x86'
            }
        }
    }

android/app/src/AndroidManifest.xml（Android の場合・関連部分のみ）

AndroidManifest.xml
        <meta-data
            android:name="com.mapbox.token"
            android:value="【Mapboxのアクセストークン】"
            />

※<application>〜</application>の間に追記。

android/gradle.properties（Android の場合・関連部分のみ）

gradle.properties
MAPBOX_DOWNLOADS_TOKEN=【Mapboxのシークレットトークン】

Android の場合、環境変数SDK_REGISTRY_TOKENにも Mapbox のシークレットトークンをセットしておきます（flutter runの際に必要なので、面倒なら.zshrcに保存するなどしてください）。

export SDK_REGISTRY_TOKEN="【Mapboxのシークレットトークン】"

ios/Runner/Info.plist（iOS の場合・関連部分のみ）

Info.plist
    <key>NSLocationAlwaysUsageDescription</key>
    <string>Your location is required for this app</string>
    <key>NSLocationWhenInUseUsageDescription</key>
    <string>Your location is required for this app</string>
    <key>MGLMapboxAccessToken</key>
    <string>【Mapboxのアクセストークン】</string>

※<dict>〜</dict>の間に追記。

なお、デバッグ（開発）環境のみ以下の項目も必要になります。デバッグ環境とリリース環境のInfo.plistの切り替え設定を行った後（例：Info-Debug.plistとInfo-Release.plistに分離して使い分ける）、デバッグ環境用のInfo.plistのみに以下を追記します。

Info.plist（デバッグ用）
    <key>NSBonjourServices</key>
    <array>
        <string>_dartobservatory._tcp.</string>
    </array>

※<dict>〜</dict>の間に追記。

.netrc（home ディレクトリへ）

こちらはアプリケーションのディレクトリではなく自分の home ディレクトリ（/Users/【ユーザ名】）直下に配置します。

.netrc
machine api.mapbox.com
login mapbox
password 【Mapboxのシークレットトークン】

ここまで準備できたら、flutter pub getします。

コード例

最初に示した kurararara さんの記事のコードをベースに、mapbox_gl（執筆時点で 0.12.0）に合わせて書き換えてあります。

また、以下の処理を追加実装しました。

  • GPS の位置情報に合わせて地図を移動（地図の中心を常に現在位置に）
  • 地図上のどこかをタップすると GPS への追従を停止
  • 右下の GPS アイコンボタンのクリックで GPS 追従と停止を切り替え

GPS への追従はMyLocationTrackingMode.TrackingGPSを使うと実装できそうな気がしたのですがうまくいかなかったので、locationで取得した緯度経度の変化をmoveCameraを使って反映しています。

なお、できればanimateCameraを使いたかったのですが、私が所有する Android（10）機ではうまく動きませんでした（iOS 14.8 では正しく動きました）。

main.dart
import 'dart:async';
import 'dart:math';

import 'package:flutter/material.dart';
import 'package:location/location.dart';
import 'package:mapbox_gl/mapbox_gl.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Flutter Mapbox',
      home: MapPage(),
    );
  }
}

class MapPage extends StatefulWidget {
  const MapPage({Key? key}) : super(key: key);

  @override
  _MapPageState createState() => _MapPageState();
}

class _MapPageState extends State<MapPage> {
  final Completer<MapboxMapController> _controller = Completer();
  final Location _locationService = Location();
  // 地図スタイル用 Mapbox URL
  final String _style = '【スタイルのURL】'; // 地図を日本語化したときなどに必要
  // Location で緯度経度が取れなかったときのデフォルト値
  final double _initialLat = 35.6895014;
  final double _initialLong = 139.6917337;
  // 現在位置
  LocationData? _yourLocation;
  // GPS 追従？
  bool _gpsTracking = false;

  // 現在位置の監視状況
  StreamSubscription? _locationChangedListen;

  @override
  void initState() {
    super.initState();

    // 現在位置の取得
    _getLocation();

    // 現在位置の変化を監視
    _locationChangedListen =
        _locationService.onLocationChanged.listen((LocationData result) async {
      setState(() {
        _yourLocation = result;
      });
    });
    setState(() {
      _gpsTracking = true;
    });
  }

  @override
  void dispose() {
    super.dispose();

    // 監視を終了
    _locationChangedListen?.cancel();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _makeMapboxMap(),
      floatingActionButton: _makeGpsIcon(),
    );
  }

  Widget _makeMapboxMap() {
    if (_yourLocation == null) {
      // 現在位置が取れるまではロード中画面を表示
      return const Center(
        child: CircularProgressIndicator(),
      );
    }
    // GPS 追従が ON かつ地図がロードされている→地図の中心を移動
    if (_gpsTracking) {
      _controller.future.then((mapboxMap) {
        mapboxMap.moveCamera(CameraUpdate.newLatLng(LatLng(
            _yourLocation!.latitude ?? _initialLat,
            _yourLocation!.longitude ?? _initialLong)));
      });
    }
    // Mapbox ウィジェットを返す
    return MapboxMap(
      // 地図（スタイル）を指定（デフォルト地図の場合は省略可）
      styleString: _style,
      // 初期表示される位置情報を現在位置から設定
      initialCameraPosition: CameraPosition(
        target: LatLng(_yourLocation!.latitude ?? _initialLat,
            _yourLocation!.longitude ?? _initialLong),
        zoom: 13.5,
      ),
      onMapCreated: (MapboxMapController controller) {
        _controller.complete(controller);
      },
      compassEnabled: true,
      // 現在位置を表示する
      myLocationEnabled: true,
      // 地図をタップしたとき
      onMapClick: (Point<double> point, LatLng tapPoint) {
        _controller.future.then((mapboxMap) {
          mapboxMap.moveCamera(CameraUpdate.newLatLng(tapPoint));
        });
        setState(() {
          _gpsTracking = false;
        });
      },
    );
  }

  Widget _makeGpsIcon() {
    return FloatingActionButton(
      backgroundColor: Colors.blue,
      onPressed: () {
        _gpsToggle();
      },
      child: Icon(
        // GPS 追従の ON / OFF に合わせてアイコン表示する
        _gpsTracking ? Icons.gps_fixed : Icons.gps_not_fixed,
      ),
    );
  }

  void _gpsToggle() {
    setState(() {
      _gpsTracking = !_gpsTracking;
    });
    // ここは iOS では不要
    if (_gpsTracking) {
      _controller.future.then((mapboxMap) {
        mapboxMap.moveCamera(CameraUpdate.newLatLng(LatLng(
            _yourLocation!.latitude ?? _initialLat,
            _yourLocation!.longitude ?? _initialLong)));
      });
    }
  }

  void _getLocation() async {
    _yourLocation = await _locationService.getLocation();
  }
}

IMG_0024.PNG
※デバッグ環境なので、自宅がバレないように（？）GPS 追従を停止した状態の画面です。

補足

【参考】の最初の記事にも書かれていますが、mapbox_glのバージョン 0.12.0 では Android で日本語化した地図の日本語部分の表示ができない問題があります。

2021/10/29 追記：

前述のとおり、mapbox_gl 0.13.0がリリースされ Android で日本語の地図が表示できるようになりました。

MyLocationRenderModeのように Android は対応しているのに iOS が未対応の機能もありますが、現状、コード例に示した範囲では iOS のほうが機能の対応が進んでいる印象を受けます。

2021/09/24 追記：
続編を書きました。

8
5
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
8
5