Flutter MapmyIndia GL

This Flutter plugin allows you to show embedded interactive MapmyIndia maps inside a Flutter widget. This guide will help you integrate and use the mapmyindia_gl plugin in your Flutter application.

Getting Started

To work with MapmyIndia Map in Flutter, add this to your package’s pubspec.yaml file:

dependencies:
  mapmyindia_gl: ^0.3.2

Now, in your Dart code, import this package:

import 'package:mapmyindia_gl/mapmyindia_gl.dart';

Adding MapmyIndia Keys

You must provide your keys through the MapmyIndiaAccountManager class:

MapmyIndiaAccountManager.setMapSDKKey(ACCESS_TOKEN); 
MapmyIndiaAccountManager.setRestAPIKey(REST_API_KEY); 
MapmyIndiaAccountManager.setAtlasClientId(ATLAS_CLIENT_ID); 
MapmyIndiaAccountManager.setAtlasClientSecret(ATLAS_CLIENT_SECRET);  

Add MapmyIndia Map to Your Application

Add the MapmyIndiaMap widget to your application:

MapmyIndiaMap(
  initialCameraPosition: CameraPosition(
    target: LatLng(25.321684, 82.987289),
    zoom: 14.0,
  ),
  onMapCreated: (map) => {
    mapController = map,
  },
)

Map Interactions

Zoom Controls

The map supports pinch and double-tap gestures for zooming. You can programmatically adjust the camera using the following methods:

mapController.moveCamera(CameraUpdate.newLatLngZoom(LatLng(22.553147478403194, 77.23388671875), 14));
mapController.easeCamera(CameraUpdate.newLatLngZoom(LatLng(28.704268, 77.103045), 14));
mapController.animateCamera(CameraUpdate.newLatLngZoom(LatLng(28.698791, 77.121243), 14));

Map Events

Map Click/Long Click

Set callbacks for map click and long-click events:

MapmyIndiaMap(
  initialCameraPosition: _kInitialPosition,
  onMapClick: (point, latlng) => {
    print(latlng.toString())
  },
  onMapLongClick: (point, latlng) => {
    print(latlng.toString())
  },
)

Map Overlays

Add a Marker

Add a marker on the map:

Symbol symbol = await controller.addSymbol(SymbolOptions(geometry: LatLng(25.321684, 82.987289)));

Customize a Marker

Customize a marker with an asset image:

Future<void> addImageFromAsset(String name, String assetName) async {
  final ByteData bytes = await rootBundle.load(assetName);
  final Uint8List list = bytes.buffer.asUint8List();
  return controller.addImage(name, list);
}

await addImageFromAsset("icon", "assets/symbols/custom-icon.png");
Symbol symbol = await controller.addSymbol(SymbolOptions(geometry: LatLng(25.321684, 82.987289), iconImage: "icon"));

Remove a Marker

Remove a marker from the map:

controller.removeSymbol(symbol);

Add a Polyline

Draw a polyline on the map:

Line line = await controller.addLine(LineOptions(geometry: latlng, lineColor: "#3bb2d0", lineWidth: 4));

Remove a Polyline

Remove a polyline from the map:

controller.removeLine(line);

Add a Polygon

Draw a polygon on the map:

Fill fill = await controller.addFill(FillOptions(geometry: latlng, fillColor: "#3bb2d0")); 

Remove a Polygon

Remove a polygon from the map:

controller.removeFill(fill);

Show User Location

Show the user’s current location on the map:

MapmyIndiaMap(
  initialCameraPosition: _kInitialPosition,
  myLocationEnabled: true,
  myLocationTrackingMode: MyLocationTrackingMode.NONE_COMPASS,
  onUserLocationUpdated: (location) => {
      print("Position: ${location.position.toString()}, Speed: ${location.speed}, Altitude: ${location.altitude}")  
  },
)

Complete Example Demo

Below is a complete example demonstrating how to set up and use the mapmyindia_gl plugin in a Flutter application:

import 'package:flutter/material.dart';
import 'package:mapmyindia_gl/mapmyindia_gl.dart';

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

class MyApp extends StatelessWidget {
  static const String ACCESS_TOKEN = "YOUR_ACCESS_TOKEN";
  static const String REST_API_KEY = "YOUR_REST_API_KEY";
  static const String ATLAS_CLIENT_ID = "YOUR_ATLAS_CLIENT_ID";
  static const String ATLAS_CLIENT_SECRET = "YOUR_ATLAS_CLIENT_SECRET";

  @override
  Widget build(BuildContext context) {
    // Set MapmyIndia keys
    MapmyIndiaAccountManager.setMapSDKKey(ACCESS_TOKEN);
    MapmyIndiaAccountManager.setRestAPIKey(REST_API_KEY);
    MapmyIndiaAccountManager.setAtlasClientId(ATLAS_CLIENT_ID);
    MapmyIndiaAccountManager.setAtlasClientSecret(ATLAS_CLIENT_SECRET);

    return MaterialApp(
      home: MapScreen(),
    );
  }
}

class MapScreen extends StatefulWidget {
  @override
  _MapScreenState createState() => _MapScreenState();
}

class _MapScreenState extends State<MapScreen> {
  late MapmyIndiaMapController mapController;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('MapmyIndia Map')),
      body: MapmyIndiaMap(
        initialCameraPosition: CameraPosition(
          target: LatLng(25.321684, 82.987289),
          zoom: 14.0,
        ),
        onMapCreated: (controller) {
          mapController = controller;
        },
        onMapClick: (point, latlng) {
          print("Tapped at $latlng");
        },
        onMapLongClick: (point, latlng) {
          print("Long pressed at $latlng");
        },
        myLocationEnabled: true,
        myLocationTrackingMode: MyLocationTrackingMode.TRACK_USER,
        onUserLocationUpdated: (location) {
          print("User Location: ${location.position}");
        },
      ),
    );
  }
}

Replace YOUR_ACCESS_TOKEN, YOUR_REST_API_KEY, YOUR_ATLAS_CLIENT_ID, and YOUR_ATLAS_CLIENT_SECRET with your actual MapmyIndia credentials.

For further support or questions, visit MapmyIndia Support.