Table of Contents

1. About The Project
2. Getting Started
   • Installation
3. Location features
   • Android
   • iOS
4. Basic map usage
   • Using map events
   • Uploading markers on map
   • Add markers clustering layer
   • Camera moves
5. Contact

About The Project

This Flutter 2Gis map plugin allows you to add a 2GIS map to your Flutter application, and one of its important features is the ability to work cross-platform. This provides universality and accessibility of your mapping functionality on various devices, making it more convenient for developers and users.

Packages using on platform-side:

• IOS: 2Gis iOS SDK
• Android: 2Gis Android SDK

(back to top)

Getting Started

These are instructions for integrating the package into your application.

Installation

Get it by running the following command:

• With Flutter

   $ flutter pub add dgis_map_kit

(back to top)

Location features

Android

Add the ACCESS_COARSE_LOCATION or ACCESS_FINE_LOCATION permission in the application manifest android/app/src/main/AndroidManifest.xml to enable location features in an Android application:

<manifest ...
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />

Starting from Android API level 23 you also need to request it at runtime. This plugin does not handle this for you. The example app uses the flutter 'location' plugin for this.

iOS

To enable location features in an iOS application:

If you access your users' location, you should also add the following key to ios/Runner/Info.plist to explain why you need access to their location data:

xml ...
    <key>NSLocationWhenInUseUsageDescription</key>
    <string>[Your explanation here]</string>

(back to top)

Basic map usage

Here are examples of map usage during development.

To obtain the key file, please fill out the form on dev.2gis.ru

import "package:dgis_map_kit/dgis_map_kit.dart";

// Simple 2Gis map instantiating

return DGisMap(
  token: token,
  initialCameraPosition: CameraPosition(
    position: Position(
      lat: lat,
      long: long,
    ),
    zoom: 17.0,
  ),
  // ...
),

Using map events

import 'dart:developer' as log;

// Simple map events usage

return DGisMap(
  // ...
  onUserLocationChanged: (position) => log.log(
    "User location changed: ${position.lat} ${position.long}",
  ),
  markerOnTap: (marker, layerId) => log.log(
    "Marker on tapped event: ${marker.position.lat} ${marker.position.long}",
  ),
  // ...
),

(back to top)

Uploading markers on map

late MapController controller;
return DGisMap(
  // ...
  mapOnCreated: (controller) => this.controller = controller,
  mapOnReady: () => controller.addMarkers([ 
    // Uploading list of markers to the map.
    Marker(
      icon: icon,
      position: Position(
        lat: lat,
        long: long,
      ),
    ),
    Marker(
      icon: icon,
      position: Position(
        lat: lat,
        long: long,
      ),
    ),
  ]),
  // ...
),

 

(back to top)

Add markers clustering layer

return DGisMap(
  // ...
  layers: [
    // Declaring map layer with clustering
    MapLayer.withClustering(
      builder: (markers) => MapClusterer(
        icon: iconAsset,
        iconOptions: MapIconOptions(
          text: markers.length.toString() 
        ),
      ),
      maxZoom: 20.0,
      minDistance: 100.0,
    ),
  ],
  // ...
),

 

(back to top)

Camera moves

late MapController controller;
return DGisMap(
  // ...
  mapOnCreated: (controller) => this.controller = controller,
  // Simple camera movement to a marker on tap:
  markerOnTap: (marker) {
    controller.moveCamera(
      controller.currentCameraPosition.copyWith(
        position: marker.position,
      ),
      duration: const Duration(milliseconds: 300),
      animationType: CameraAnimationType.DEFAULT,
    );
  },
  // ...
),

 

(back to top)

Contact

jyahann - @jyahann - [email protected]

Project Link: https://github.com/jyahann/dgis_map_kit.git