Multiview Map

In this guide you will learn how to render one or more interactive maps in a grid where each map is independent of the others and can show a different location/view.

Setup

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

Prerequisites

It is required that you complete the Environment Setup - Flutter Examples guide before starting this guide.

Run the example

Start a terminal/command prompt and go to the multiview_map directory, within the flutter examples directory

Build and run the example:

Build and run

Note - the gem_kit directory containing the Maps SDK for Flutter should be in the plugins directory of the example, e.g. multiview_map/plugins/gem_kit - see the environment setup guide above.

Download project dependencies:

flutter upgrade

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

flutter clean

flutter pub get

Run the example:

Web browser

flutter run

If such a question appears, select the chrome browser; in the above example, press 2.

Android

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:

allprojects {
    repositories {
        google()
        mavenCentral()
        maven {
           url "${rootDir}/../plugins/gem_kit/android/build"
        }
    }
}

in android/app/build.gradle within the android {} block, in the defaultConfig {} block, the android SDK version minSdkVersion 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:

android {
    defaultConfig {
        applicationId "com.magiclane.gem_kit.examples.multiview_map"
        minSdkVersion 21
        targetSdkVersion flutter.targetSdkVersion
        versionCode flutterVersionCode.toInteger()
        versionName flutterVersionName
    }
    buildTypes {
        release {
            // TODO: Add your own signing config for the release build.
            // Signing with the debug keys for now, so `flutter run --release` works.
            minifyEnabled false
            shrinkResources false
            signingConfig signingConfigs.debug
        }
    }
}

Then build the apk:

flutter build apk --debug

or

flutter build apk --release

the apk file is located in the build/app/outputs/apk/debug or build/app/outputs/apk/release subdirectory, for debug or release build respectively, within the current project directory, which is multiview_map in this case.

The apk file name is app-release.apk or app-debug.apk

You can copy the apk to an android device using adb, for example:

adb push app-release.apk sdcard

And then click on the apk in the file browser on the device to install and run it.

iOS

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

platform :ios, '13.0'

Run pod install in the [ios folder] ./ios/

Then go back to the repository root folder and type flutter build ios to build a Runner.app.

Type flutter run to build and run on an attached device.

You can open the <path/to>/ios/Runner.xcworkspace project in Xcode and execute and debug from there.

How it works

In the multiview_map project directory, there is a text file named pubspec.yaml which contains project configuration and dependencies. The most important lines from this file are shown here:

name: multiview_map
version: 1.0.0+1

environment:
  sdk: '>=3.0.5 <4.0.0'

dependencies:
  flutter:
    sdk: flutter
  gem_kit:
    path: plugins/gem_kit

  cupertino_icons: ^1.0.2

# The following section is specific to Flutter packages.
flutter:
  uses-material-design: true

The project must have a name and version. The dependencies list the Flutter SDK, and the gem_kit, Maps for Flutter SDK.

The source code is in multiview_map/lib/main.dart

import 'dart:math';

import 'package:flutter/material.dart';
import 'package:gem_kit/api/gem_sdksettings.dart';
import 'package:gem_kit/widget/gem_kit_map.dart';

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

class MultiviewMapApp extends StatelessWidget {
  const MultiviewMapApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Multiview Map',
        debugShowCheckedModeBanner: false,
        theme: ThemeData(
          colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
          useMaterial3: true,
        ),
        home: const MultiviewMapPage());
  }
}

class MultiviewMapPage extends StatefulWidget {
  const MultiviewMapPage({super.key});

  @override
  State<MultiviewMapPage> createState() => _MultiviewMapPageState();
}

The dart material package is imported, as well as the gem_kit packages for the map to draw the maps, and the sdk settings.

The map is in a widget which is the root of the application.

class _MultiviewMapPageState extends State<MultiviewMapPage> {
  int _mapViewsCount = 0;
  final token = 'YOUR_API_KEY_TOKEN';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.deepPurple[900],
          title: const Text('Multiview Map',
              style: TextStyle(color: Colors.white)),
          actions: [
            IconButton(
                onPressed: _onAddViewButtonPressed,
                icon: const Icon(
                  Icons.add,
                  color: Colors.white,
                )),
            IconButton(
                onPressed: _onRemoveViewButtonPressed,
                icon: const Icon(
                  Icons.remove,
                  color: Colors.white,
                ))
          ],
        ),
        // Arrange MapViews in a grid with fixed number on elements on row
        body: GridView.builder(
            physics: const NeverScrollableScrollPhysics(),
            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2),
            itemCount: _mapViewsCount,
            itemBuilder: (context, index) {
              return Container(
                  clipBehavior: Clip.hardEdge,
                  decoration: BoxDecoration(
                      border: Border.all(color: Colors.black, width: 1),
                      borderRadius: BorderRadius.circular(10),
                      boxShadow: const [
                        BoxShadow(
                            color: Colors.grey,
                            offset: Offset(0, -2),
                            spreadRadius: 1,
                            blurRadius: 2)
                      ]),
                  margin: const EdgeInsets.all(5),
                  child: GemMap(
                    onMapCreated: (controller) async {
                      final settings =
                          await SdkSettings.create(controller.mapId);
                      await settings.setAppAuthorization(token);
                    },
                  ));
            }));
  }

  // Add one more view on button press
  _onAddViewButtonPressed() => setState(() {
    if (_mapViewsCount < 4) {
      _mapViewsCount += 1;
    }
  });
  _onRemoveViewButtonPressed() => setState(() {
    if (_mapViewsCount > 0) {
      _mapViewsCount -= 1;
    }
  });
}

An empty grid is initialized, and an interactive map is added each time the _onAddViewButtonPressed() + (plus) button at the top right is pressed, up to 4 maps. The most recently added map can be removed using the _onRemoveViewButtonPressed() - (minus) button at the top right.

Setting the API key

The string "YOUR_API_KEY_TOKEN" should be replaced with your actual API key token string.