Mappls Route Events Summary Plugin¶

Powered with India's most comprehensive and robust mapping functionalities. Now Available for Srilanka, Nepal, Bhutan, Bangladesh and Myanmar.

Copy and paste the JWT API key or generated Auth token from your API keys available in the dashboard (https://apis.mappls.com/console/) in the sample code for interactive map development.
The sample code is provided to help you understand the very basic functionality of MapmyIndia APIs.

Document Version History¶

Version	Remarks	Author
3.0	Document Added	Mappls API Team (MS)
3.0	Document Update	SDK Product Team (PK)

Introduction¶

This plugin, offered by MapmyIndia Places & Directions SDK for Web, with the help MapmyIndia Rest API response dependency, provide the route events for the selected route.

This feature is also available inbuilt with MapmyIndia Direction Plugin. For details, please contact apisupport@mapmyindia.com.

Live Demo¶

Visit the following link for visiting the live demo:

Web sdk implementation : Mappls Live Demo

React JS Implementation Live Video : CodeSandbox

Implementation¶

React JS¶

import { mappls, mappls_plugin } from "mappls-web-maps";
import { useEffect, useRef, useState } from "react";

const mapplsClassObject = new mappls();
const mapplsPluginObject = new mappls_plugin();
const RouteSummaryPlugin = ({ map }) => {
  const routeSummaryRef = useRef(null);

  useEffect(() => {
    if (map && routeSummaryRef.current) {
      mapplsClassObject.removeLayer({ map, layer: routeSummaryRef.current });
    }

    let routeOptions = {
      map: map,
      routeId: "250aa832-9d94-11ee-9424-4515720cabdc", // To get route id you need to call Direction With EventsAlongTheRoute get result in console
      index: 0,
    };

    routeSummaryRef.current = mapplsPluginObject.routeSummary(
      routeOptions,
      callback_method
    );
    function callback_method(data) {
      console.log(data);
    }

    return () => {
      if (map && routeSummaryRef.current) {
        mapplsClassObject.removeLayer({ map, layer: routeSummaryRef.current });
      }
    };
  }, [map]);
};

const App = () => {
  const mapRef = useRef(null);
  const [isMapLoaded, setIsMapLoaded] = useState(false);

  const loadObject = { map: true, plugins: ["routeSummary"] };

  useEffect(() => {
    mapplsClassObject.initialize("<Add your Token>", loadObject, () => {
      const newMap = mapplsClassObject.Map({
        id: "map",
        properties: {
          center: [28.633, 77.2194],
          zoom: 4,
        },
      });

      newMap.on("load", () => {
        setIsMapLoaded(true);
      });

      mapRef.current = newMap;
    });
    return () => {
      if (mapRef.current) {
        mapRef.current.remove();
      }
    };
  }, []);

  return (
    <div
      id="map"
      style={{ width: "100%", height: "99vh", display: "inline-block" }}
    >
      {isMapLoaded && <RouteSummaryPlugin map={mapRef.current} />}
    </div>
  );
};

export default App;

Angular¶

import { Component, OnInit } from '@angular/core';
import { mappls, mappls_plugin } from 'mappls-web-maps';

@Component({
  selector: 'app-root',
  template:'<div  id="map"  style="width: 99%; height: 99vh; background-color: white;"></div>',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  mapObject: any;
  mapplsClassObject = new mappls();
  mapplsPluginObject = new mappls_plugin();

  mapProps = {
    center: [28.633, 77.2194],
    traffic: false,
    zoom: 10,
    geolocation: false,
    clickableIcons: false,
  };

  ngOnInit() {
    const loadObject = {
      map: true,
      plugins: ['routeSummary'],
    };

    this.mapplsClassObject.initialize(
      '<----- Add your token here ------>',
      loadObject,
      () => {
        this.mapObject = this.mapplsClassObject.Map({
          id: 'map',
          properties: this.mapProps,
        });

        this.mapObject.on('load', () => {
          let routeOptions = {
            map: this.mapObject,
            routeId: '967c0820-427d-11ee-b8b7-8f7e8832ea7b', // To get route id you need to call Direction With EventsAlongTheRoute get result in console
            index: 0,
          };
          this.mapplsPluginObject.routeSummary(routeOptions, callback_method);
          function callback_method(data: any) {
            console.log(data);
          }
        });
      }
    );
  }
}

Properties¶

Mandatory Parameters¶

map(object): vector map or raster map object from respective MapmyIndia Map SDKs.
routeId (String) : routeId, Provide routeId if users needs to get all routes reports summary.

Optional Parameters¶

index (String) : routeIdx, Provide routeIdx if user needs routes reports for a selected route only Otherwise returns events for all suggested routes.
nodeId (String) : nodeId, nodeId of the Route.
categories (String) : Optional, categories (comma(,) separated String).
isGroup (Integer) : sGroup, Set to 1, if user needs parentCategory wise grouped data.

That's All !

For any queries and support, please contact:

Email us at apisupport@mappls.com

Support Need support? contact us!