Skip to content

Multiview map

In this guide you will learn how to display multiple interactive maps in one viewport.

multiview_map - example flutter screenshot

Setup

First, get an API key token, see the Getting Started guide.

Prerequisites

Make sure you completed the Environment Setup - Flutter Examples guide before starting this guide.

Build and run

Go to the multiview_map directory, within the flutter examples directory - that is the name of this example project.

Note - the gem_kit directory containing the Maps SDK for Flutter should be in the plugins directory of the example, e.g. example_pathname/plugins/gem_kit - see the environment setup guide above. Replace example_pathname with the actual example path name, such as address_search

Download project dependencies:

example flutter upgrade screenshot

flutter upgrade

example flutter clean screenshot

run the following terminal commands in the project directory, where the pubspec.yaml file is located:

flutter clean

example flutter pub get screenshot

flutter pub get

Run the example:

First, verify that the ANDROID_SDK_ROOT environment variable is set to the root path of your android SDK.

In android/build.gradle add the maven {} block as shown, within the allprojects {} block, for both debug and release builds, without the line numbers, those are for reference:

1allprojects {
2    repositories {
3        google()
4        mavenCentral()
5        maven {
6           url "${rootDir}/../plugins/gem_kit/android/build"
7        }
8    }
9}

in android/app/build.gradle within the android {} block, in the defaultConfig {} block, the android SDK version minSdk must be set as shown below.

Additionally, for release builds, in android/app/build.gradle, within the android {} block, add the buildTypes {} block as shown:

Replace example_pathname with the actual example pathname, such as center_coordinates

 1android {
 2    defaultConfig {
 3        applicationId "com.magiclane.gem_kit.examples.example_pathname"
 4        minSdk 21
 5        targetSdk flutter.targetSdk
 6        versionCode flutterVersionCode.toInteger()
 7        versionName flutterVersionName
 8    }
 9    buildTypes {
10        release {
11            minifyEnabled false
12            shrinkResources false
13
14            // TODO: Add your own signing config for the release build.
15            // Signing with the debug keys for now, so `flutter run --release` works.
16            signingConfig signingConfigs.debug
17        }
18    }
19}

Then run the project:

flutter run --debug
or
flutter run --release

In the ios/Podfile configuration text file, at the top, set the minimum ios platform to 13 like this:

platform :ios, '13.0'

Then run the project:

flutter run --debug
or
flutter run --release

How it works

multiview_map - example flutter screenshot

1import 'package:gem_kit/core.dart';
2import 'package:gem_kit/map.dart';
3import 'package:flutter/material.dart' hide Route;

The dart material package is imported, as well as the required gem_kit packages.

multiview_map - example flutter screenshot

 1// Arrange MapViews in a grid with fixed number on elements on row
 2body: GridView.builder(
 3    physics: const NeverScrollableScrollPhysics(),
 4    gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
 5    itemCount: _mapViewsCount,
 6    itemBuilder: (context, index) {
 7      return Container(
 8          clipBehavior: Clip.hardEdge,
 9          decoration: BoxDecoration(
10              border: Border.all(color: Colors.black, width: 1),
11              borderRadius: BorderRadius.circular(10),
12              boxShadow: const [
13                BoxShadow(color: Colors.grey, offset: Offset(0, -2), spreadRadius: 1, blurRadius: 2)
14              ]),
15          margin: const EdgeInsets.all(5),
16          child: const GemMap());
17    }));

A GridView is used to create a grid with maximum 2 map views per row. Each map view is created by GemMap() and enclosed in a Container as a grid element.

 1void _addViewButtonPressed() => setState(() {
 2    if (_mapViewsCount < 4) {
 3      _mapViewsCount += 1;
 4    }
 5  });
 6void _removeViewButtonPressed() => setState(() {
 7    if (_mapViewsCount > 0) {
 8      _mapViewsCount -= 1;
 9    }
10  });

The number of interactive map views (initially zero), to display, are stored in _mapViewsCount and are increased/decreased interactively by the user using the functions shown above.

Each map is a separate view and can be panned/zoomed independently of the others.

Flutter Examples

Maps SDK for Flutter Examples can be downloaded or cloned with Git