FlutterのFlutter Mapパッケージでマップアプリケーションを構築してみた

![sample201122_02.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60444/b2a3cb75-06f7-603d-7597-4e34ced21a95.gif)

<br>

![try-048_00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60444/1fca7c65-ca3f-9dea-38cd-478e908677aa.png)

<br>

この記事は、「[MIERUNE Advent Calendar 2020](https://qiita.com/advent-calendar/2020/mierune)」の4日目の記事です。

### FlutterのFlutter Mapパッケージでマップアプリケーションを構築してみました :tada:

<br>

事前準備

- Flutterの環境準備
  - [Flutterインストール](https://flutter.dev/docs/get-started/install)

- 各バージョン
  - Flutter v1.20.4
  - Dart v2.9.2
  - Xcode v12.0
  - Android SDK v30.0.1
  - Android Studio v4.0
  - Visual Studio Code v1.51.1
  - Flutter extension v3.16.0

<br>

Flutterの環境確認

```bash
flutter doctor -v
```

![try-048_02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60444/dd869e57-61a0-6572-27f1-dd8bb19cb7f0.png)

<br>

はじめに、Flutterのプロジェクトを新規作成します。

```bash
flutter create map_app
```

![try-048_03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60444/be19ebf1-af0b-4d52-9f36-d37a75abbce3.png)

<br>

今回は「lib/main.dart」を修正します。

全体構成
![try-048_04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60444/4fc6e5e9-fe49-063b-25be-c66ffd6ecac4.png)

<br>

<br>

Visual Studio Codeで「実行とデバッグ」を実行し、一度動作確認をします。
![try-048_05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60444/98c4f753-415f-254f-7a2b-7b5a48120367.png)

<br>

実行するとデフォルトのアプリケーションが表示されます。ここまで表示されるとプロジェクトの新規作成はOKです :thumbsup:
![try-048_06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60444/d41c52af-88ce-c0cf-10f2-e24b397b0f05.png)

<br>

プロジェクト作成後、パッケージの設定をしていきます。

- flutter_mapパッケージのインストール

<br>

##### flutter_mapパッケージのインストール

[flutter_map](https://pub.dev/packages/flutter_map)をインストールします。

#### pubspec.yaml

```yaml
name: map_app
description: A new Flutter project.
publish_to: 'none'
version: 1.0.0+1

environment:
    sdk: '>=2.7.0 <3.0.0'

dependencies:
    flutter:
        sdk: flutter

    cupertino_icons: ^0.1.3

    # flutter_mapパッケージ追加
    flutter_map: ^0.10.1

dev_dependencies:
    flutter_test:
        sdk: flutter

flutter:
    uses-material-design: true
```

<br>

パッケージのインストールは、Visual Studio Codeで拡張機能をいれると自動インストールされますが、下記コマンドで手動インストールも可能です。

```bash
flutter pub get
```

![try-048_07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60444/b0ecede9-4649-3cc5-4d99-3cb797bd4f09.png)

<br>

最後に、メインコードを書いていきます。

/lib
#### main.dart

```dart
import 'package:flutter/material.dart';
// flutter_mapパッケージ追加
import 'package:flutter_map/flutter_map.dart';
import 'package:latlong/latlong.dart';

void main() {
  runApp(MapApp());
}

class MapApp extends StatefulWidget {
  @override
  _MapAppState createState() => new _MapAppState();
}

class _MapAppState extends State<MapApp> {
  String _title = 'map_app';
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'map_app',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text(_title),
        ),
        // flutter_map設定
        body: FlutterMap(
          // マップ表示設定
          options: MapOptions(
            center: LatLng(35.681, 139.767),
            zoom: 14.0,
          ),
          layers: [
            //背景地図読み込み (Maptiler)
            TileLayerOptions(
              urlTemplate:
                  'https://api.maptiler.com/maps/jp-mierune-streets/256/{z}/{x}/{y}.png?key=[APIキー]',
            ),
            // サークルマーカー設定
            CircleLayerOptions(
              circles: [
                // サークルマーカー1設定
                CircleMarker(
                  color: Colors.indigo.withOpacity(0.9),
                  radius: 10,
                  borderColor: Colors.white.withOpacity(0.9),
                  borderStrokeWidth: 3,
                  point: LatLng(35.681, 139.760),
                ),
                // サークルマーカー2設定
                CircleMarker(
                  color: Colors.teal.withOpacity(0.5),
                  radius: 15,
                  borderColor: Colors.white.withOpacity(0.5),
                  borderStrokeWidth: 5,
                  point: LatLng(35.675, 139.770),
                ),
                // サークルマーカー3設定
                CircleMarker(
                  color: Colors.yellow.withOpacity(0.7),
                  radius: 20,
                  borderColor: Colors.white.withOpacity(0.7),
                  borderStrokeWidth: 6,
                  point: LatLng(35.687, 139.775),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}
```

<br>

flutter_mapパッケージを読み込みます。

```dart
// flutter_mapパッケージ追加
import 'package:flutter_map/flutter_map.dart';
import 'package:latlong/latlong.dart';
```

<br>

マップの表示設定をします。

```dart
// マップ表示設定
options: MapOptions(
    center: LatLng(35.681, 139.767),
    zoom: 14.0,
),
```

<br>

背景地図を読み込みます。今回は[Maptiler](https://maptiler.jp)を指定します :thumbsup: 
 
```dart
//背景地図読み込み (Maptiler)
TileLayerOptions(
    urlTemplate:
    'https://api.maptiler.com/maps/jp-mierune-streets/256/{z}/{x}/{y}.png?key=[APIキー]',
),
```

<br>

サークルマーカーを設定します。

```dart
// サークルマーカー設定
CircleLayerOptions(
    circles: [
        // サークルマーカー1設定
        CircleMarker(
            color: Colors.indigo.withOpacity(0.9),
            radius: 10,
            borderColor: Colors.white.withOpacity(0.9),
            borderStrokeWidth: 3,
            point: LatLng(35.681, 139.760),
        ),
        // サークルマーカー2設定
        CircleMarker(
            color: Colors.teal.withOpacity(0.5),
            radius: 15,
            borderColor: Colors.white.withOpacity(0.5),
            borderStrokeWidth: 5,
            point: LatLng(35.675, 139.770),
        ),
        // サークルマーカー3設定
        CircleMarker(
            color: Colors.yellow.withOpacity(0.7),
            radius: 20,
            borderColor: Colors.white.withOpacity(0.7),
            borderStrokeWidth: 6,
            point: LatLng(35.687, 139.775),
        ),
    ],
),
```

<br>

再度、Visual Studio Codeで「実行とデバッグ」を実行し、動作確認をします。
![try-048_05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60444/c3d344bc-86b0-efd2-6826-c95fd78f1c4e.png)

<br>

実行するとマップアプリケーションが表示されます。今回はiOSの実機で表示してみました :iphone:
![try-048_01_3.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60444/829995c9-f2ad-ff87-af11-932e41a6b6ae.gif)

<br>

### FlutterのFlutter Mapパッケージでマップアプリケーションを構築できました :tada:

<br>

Flutterでマップアプリケーションを構築するには、複数のパッケージがありますが今回はLeafletライクなFlutter Mapを利用しました :grinning: もちろん[Maptiler](https://maptiler.jp)も背景地図として読み込みできました :thumbsup: 
以前、WebViewでもマップアプリケーションを構築した記事を書いたのですが、動作がいまいちあやしい部分もあったので、Flutter Mapのようなパッケージを利用したほうが良さそうです :bulb: 

<br>
<br>

Flutterについて、他にも記事を書いています。よろしければぜひ :bow:
<a href="https://qiita.com/dayjournal/items/044ac00459bdbf0f74f2" target="_blank">FlutterのWebViewでマップアプリケーションを表示してみた</a>
<a href="https://qiita.com/dayjournal/items/28adab778631bf5d76ca" target="_blank">Adobe XDとFlutterを組み合わせてUIをつくってみた</a>

やってみたシリーズ :grinning:
<a href="https://memo.dayjournal.dev/tags/try" target="_blank">tags - Try</a>

<br>
<br>

<a href="https://dayjournal.booth.pm" target="_blank"><img src="https://memo.dayjournal.dev/images/etc/book.png" alt="book"></a>