Mappls Tracking Advanced Plugin

Easy To Integrate Routing APIs & Map SDKs For Web Applications

Getting Access

Before using the API in the your solution, please ensure that the related access is enabled in the Mappls Console, within your app - be it for Mobile OR Web or Cloud integration.

1. Copy and paste the key from your credentials section from your API keys into the access_token query parameter.
   • Your static key can be secured by whitelisting its usage for particular IPs (in case of cloud app usage) OR a set of domains (in case of a web app)
   • Your static key obtained from your Console is to be passed as a query parameter: access_token.
2. The sample code is provided to help you understand the very basic functionality of MapmyIndia APIs.

Authentication Object - access_token mandatory query parameter.

• access_token: "hklmgbwzrxncdyavtsuojqpiefrbhqplnm".

Document Version History

Version	Last Updated	Team	Author	Remarks
1.0	07 Aug 2025	SDK Product Team	Prabhjot Kaur (PK)	OAuth 2

Introduction

This advanced tracking plugin, offered by Mappls plugins for Web, allows one to track the path traveled with smooth animation along the route. The smooth animation by plugin directly depend upon the frequency of the provided information on the current location, time, and speed of the vehicle being tracked to the plugin. More the Merrier!

Getting Access

Before using the Plugin in the your solution, please ensure that the related access is enabled in the Mappls Console, in the same project you set up for the Maps SDK.

1. Copy and paste the generated access token from your API keys available in the dashboard in the sample code for interactive map development.
   • This APIs follow OAuth2 based security.
   • Access Token can be generated using Mappls Portal
2. The sample codes are provided on our domain to help you understand the very basic functionality of Mappls Tracking Plugin. Javascript Code Example & Working NPM Code

Implementation

Initialize the Plugin

#### Step 1: Initialize plugin SDK and add (& libraries=tracking) in the url

<script src="https://sdk.mappls.com/map/sdk/plugins?access_token=<Static Key>&v=3.0&libraries=tracking"></script> 

#### Step 2 : Add map under div container in your project

   <div id="map"></div>

Step 3 : Initialize Map

map = new mappls.Map('map', {
    center: [28.62988695137534, 77.4224575062193],
                zoom: 12
         })

Step 4 : Add tracking option in mappls.tracking() method

var tracking_option = {
    map: map, // Required mapObject
    start: { geoposition: "28.63124010064198,77.46734619140625" }, // Required
    via:[{geoposition:"28.63124010064198,77.5541"},
           {geoposition:"28.631541442089226,77.4541"}], // optional
    end: { geoposition: "28.631541442089226,77.37808227539064" }, // Required
    resource:"route_eta", // optional
profile: "driving", // optional
    fitBounds: true,  // optional
    connector:true, // default false /* to connect the path to end position */,
connectorRouteColor:"gray",   /* connected path route color for end position */
connectorRouteDash:[2, 2],   /* connected path route in dash array for end position */
    ccpIcon:'location.png',  // optional
    ccpIconWidth:70, // optional
    strokeWidth:7, // optional
    routeColor:"blue", // optional 
dasharray:[2,2], // default None and optional 
sPopup:"start text", // optional (for start icon popup)
cPopup:"<h1>current popup</h1>" // optional you can also set html in current icon popup but only in current Icon not start and end
dPopup:"end text", // optional (for end icon popup)
start_icon: {  // optional
        url: 'location.png',
        width: 40, 
        height: 40,
        popupOptions:{offset: {'bottom': [0, -20]}, openPopup:false },
        offset:[0, -18]
    },
    end_icon: {  // optional
        url: 'location.png',
        width: 40, 
        height: 40,
        popupOptions:{offset: {'bottom': [0, -20]}, openPopup:false },
        offset:[0, -18]
    }
}

Mandatory Parameters

• map(object): vector map or raster map object from respective Mappls Map SDKs.
• start : route start location . For eg - { geoposition: "28.63124010064198,77.46734619140625" }
• end : route end location . For eg - { geoposition: "28.631541442089226,77.37808227539064" }

Optional Parameters

• Via : via locations between the route For eg - [{geoposition:"28.63124010064198,77.5541"},{geoposition:"28.631541442089226,77.4541"}],
• resource :"route_eta", To set the route resource. Default to "route_eta".
• profile: “driving”, To set the profile for the route. Default to "driving".
• fitBounds (boolean): Whether to fit route and destination to map bound or not, default is true, // optional
• ccpIcon (string):'location.png', Allows to set URL of current rider position icon; Supports PNG format as of now.
• ccpIconWidth (integer): 70; signifies CCP icon's width, // optional
• ccpOffset (x,y): [0,20]; //signifies icon's offset in x,y pixels in a div.
• strokeWidth (integer): 7, // signifies width of the route polyline on the map; optional
• strokeOpacity (integer): //signifies opacity of the route polyline. //optional; default is 1. Opacity values from 0 to 1.
• routeColor (string): "blue", signifies polyline's color. // can take in hex codes as well; optional
• dasharray:[2,2], // default: none and optional; used to display route polyline as dashed polyline.
• sPopup :”start text”, // optional (for start icon popup)
• cPopup :”<h1>current popup</h1>”. To set html in current icon popup (parameter available only for current location Icon)
• dPopup :"end text", available for end icon popup
• start_icon : Supports PNG format as of now.

    {   url: 'location.png',
        width: 40, 
        height: 40,
        popupOptions:
            {
                offset: {'bottom': [0, -20]}, 
                openPopup:false 
            },
        offset:[0, -18] 
    }, 

- `start_icon`: `false` // if set as false then marker will not be visible

• end_icon : Supports PNG format as of now.

    {   url: 'location.png',
        width: 40, 
        height: 40 
        popupOptions:
        {
            offset: {'bottom': [0, -20]}, 
            openPopup:false 
        },
        /* offset:[0, -18] */
    },

- `end_icon`: `false` // if set as false then marker will not be visible

• connector : true, from the last navigable point on road to actual input destination coordinate // default false
• connectorRouteColor : "gray", //can take in hex color codes.
• connectorOpacity(integer): //signifies opacity of the connector polyline. //optional; default is 1. Opacity values from 0 to 1.
• connectorWidth(integer): 7, // signifies width of the connector polyline on the map; optional
• connectorRouteDash : [2, 2], //[Length, Space of the dashed segment from route end to destination coordinates]
• connectorVisible (boolean): To show/hide connector; this is only applicable when curveLine is being used. //default is true.
• curveLine (boolean):
• curveLineColor (string): "gray", signifies curve line's color. // can take in hex codes as well; optional
• curveLineOpacity (integer): //signifies opacity of the curve polyline. //optional; default is 1. Opacity values from 0 to 1.
• curveDasharray : [2,2], // default: none and optional; used to display route polyline as dashed polyline.
• curveLineStrokeWeight (integer): 7, // signifies width of the curve polyline on the map; optional
• curveLineFitbounds (boolean): Whether to include curve line in map fit bound or not, default is true, // optional

Step 5: Method call for Tracking Plugin

// With tracking option as a variable

mappls.tracking(tracking_option, function(data) {
                        console.log(data);
                        data1 = data;
});

// Or Without tracking option as a variable
mappls.tracking({
    map: map,
    start: {
        geoposition: "28.63124010064198,77.46734619140625"
    },
    end: {
        geoposition: "28.631541442089226,77.37808227539064"
    },
    fitBounds: true,
    ccpIconWidth: 70,
    strokeWidth: 7,
    routeColor: "blue",
    /*
     cPopup:'<h3>Current Popup</h3>',
     */
}
tracking_plugin = mappls.tracking(tracking_option, function(data) {
    console.log(data);
    trackingCallbackData = data;
});
}
, function(data) {
    console.log(data);
    trackingCallbackData = data;
});

Tracking callbacks

• trackingCallbackData.settrackfit(true/false); (default is true, fitbounds the track)
• trackingCallbackData.setccpContent(“content”); (set popup on start)
• DEPRECATED: trackingCallbackData.setLineHide(true/false); (to make path invisible)
• trackingCallbackData.removeCurveLine(); // to remove curved polylines.
• trackingCallbackData.setLineVisible(true); // to show/hide polyline on map.
• trackingCallbackData.getEta(function(data){console.log(data);}) //to fetch eta & distance from the plugin

Recommendation: When you wish to switch between curved line and route line between source & destination

Before rider picks up:

1. Show the Curved line.
   • curveLine:true
2. Hide the Route line.
   • strokeOpacity:0 and if connector:true, set connectorVisible:false

After rider picks up:

1. Call trackingCallBackData.removeCurveLine(); to remove the curved line.
2. Call trackingCallBackData.setLineVisible(true); to set the route line to visible.

Methods

mappls.tracking()

Step 6: Method to inject User data

     trackingCallbackData.trackingCall({
       location: user, // Required
       reRoute: true, // default true or optional
       heading: true, // default true
       mapCenter: false, // default false
       polylineRefresh: true /* it refreshes the covered route */,
       buffer: 50, // default 25
       etaRefresh: true /* to get distance and duration in callback */,
       latentViz: false /* when clicked on map, icon first goes to clicked path with following route  */,
       delay: 3000, // default 5000
       fitCoverDistance:true, // default is false 
       fitBounds: true, // default true
       smoothFitBounds: false, //default: false; other values: "slow"||"med"||"fast"
       fitboundsOptions: {
         padding: 80,
       },
       callback: function (datap) {
         console.log(datap);
       },
     });

IMPORTANT NOTE: This method should NOT be called in any scenario of less than 3 seconds. For best results, call this method at-least once every 15 seconds. For long duration tracking, it is recommended to call this method more frequently than the period between gethering rider locations - polling frequency of your tracking; keeping above restrictions in mind.

Properties

Mandatory Parameters

• location (array): Coordinate array as [longitude,latitude]

Optional Parameters

• reRoute (boolean): To refresh the route as per the current location. This means the route will change as per the current location. If kept false the same route will be displayed. Default is true.
• heading (boolean): To control the rotation of the marker as per the route direction.For example if you are using a car icon, it would rotate as per the route direction otherwise it would move straight. Default is true.
• buffer (integer):50, The distance defined for call reroute for the provided current location.
• fitBounds (boolean): Allowing this would fit the map in the view bound. Default is true.
• mapCenter (boolean):true, keeps the current on the center of the map.
• fitBoundsOptions: add padding to the fitBounds, if fitBounds is set as true.

    fitBoundsOptions: 
    {
        padding:80
    }, // optional

• fitCoverDistance (boolean): includes the last movement within the fitBounds call. //default is true
• polylineRefresh (boolean): removes the covered route as the rider progresses. // default true
• latentViz (boolean): Smooth visualization when rider suddenly jumps off-route. Incurs an additional routing call.// default false
• etaRefresh (boolean): updates the ETA if the route followed has not changed periodically to reflect the ever changing live traffic.// default false
• delay (integer): miliseconds indicating within how much time each subsequent location movement animation is to be completed. Default is 3000 ms.
• smoothFitBounds (boolean or string): To enable/disable ultra-smooth fitbound automation that the widget performs with each animation - even with interpolated data. // default false with options to set it to "slow" OR "med" OR "fast"; wherein:
• slow - fitbound action every 1 interpolated location.
• med - fitbound action every 3 interpolated location.
• fast - fitbound action every 5 interpolated location.

Multi Stop Routing

This Multi Stop Routing allows users to define and manage via points. Via points represent important locations along a route, such as waypoints, checkpoints, or stops. Each via point is assigned a unique ID, a geographical position (latitude & longitude), and a custom marker icon for easy identification on the map.

via:[{
                            geoposition:"28.42856320576533,77.5266396473998", 
                            id:'via1',
                            icon:{
                                url:'https://apis.mapmyindia.com/map_v3/2.png',
                                popupHtml:'Via 1',
                                width:30,
                                height:45,
                                popupOptions:{offset: {'bottom': [0, -20]}, openPopup:false },
                                /* offset:[0, -18] */
                            }
                        },
                        {
                            geoposition:"28.44275991192795,77.51372861117522",
                            id:'via2',
                            icon:{
                                url:'https://apis.mapmyindia.com/map_v3/1.png',
                                popupHtml:'Via 2',
                                width:30,
                                height:45,
                                popupOptions:{offset: {'bottom': [0, -20]}, openPopup:false },
                                /* offset:[0, -18] */
                            }
                        },
                        {
                            geoposition:"28.452552810748116,77.49571088868709",
                            id:'via3',
                            icon:{
                                url:'https://apis.mapmyindia.com/map_v3/2.png',
                                popupHtml:'Via 3',
                                width:30,
                                height:45,
                                popupOptions:{offset: {'bottom': [0, -20]}, openPopup:false },
                                /* offset:[0, -18] */
                            }
                    }],

Method for removing via using ID

• For removing a single via point

data1.removeVia('via1', function(data){
    console.log(data);
});

• For removing multiple via points

data1.removeVia('via1,via2', function(data){
    console.log(data);
});

Multi Stop Routing Properties :

• via (Array) : Stores a list of via points for a route.

• geoposition (String) : Latitude and longitude of a via point.

• id (String) : Unique identifier for each via point.

• icon (Object) : Defines the marker/icon properties for each via point.

  • url (String) : URL of the marker image.

  • popupHtml (String) : Text that appears when the icon's popup is displayed.

  • width (Number) : Width of the marker icon in pixels.

  • height (Number) : Height of the marker icon in pixels.

  • popupOptions (Object) : Additional settings for the popup.

  • offset (Object) : Defines the offset for the popup position.

  • openPopup (Boolean) : Determines whether the popup should open by default.

Implementation Example

  <html>
  <head>
    <title>Tracking</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Tracking">

        <script src="https://apis.mappls.com/advancedmaps/api/<Token>/map_sdk?layer=vector&v=3.0&callback=initMap1"></script>
          <script src="https://sdk.mappls.com/map/sdk/plugins?access_token=<Static Key>&v=3.0"></script>
          <style>
        body {
            margin: 0;
        }

        #map {
            width: 100%;
            height: 100vh;
            margin: 0;
            padding: 0;
        }
    </style>
    </head>

    <body>
        <div id="map"></div>
                <script>
            /*Map Initialization*/
            var map;

            function initMap1() {
                map = new mappls.Map('map', {
                    center: [28.62988695137534, 77.4224575062193],
                    zoom: 12
                });
                map.addListener('load', function() {
                    /*tracking plugin initialization*/
                    var tracking_option = {
                        map: map,
                        start: {
                            geoposition: "28.63124010064198,77.46734619140625"
                        },
                        end: {
                            geoposition: "28.631541442089226,77.37808227539064"
                        },
                        fitBounds: true,
                        ccpIconWidth: 70,
                        strokeWidth: 7,
                        routeColor: "blue",
                        /* 
                        cPopup:'<h3>Current Popup</h3>',
                         */
                        //For Multi Stop Routing via array of stops
                        via:[{
                            geoposition:"28.42856320576533,77.5266396473998", 
                            id:'via1',
                            icon:{
                                url:'https://apis.mapmyindia.com/map_v3/2.png',
                                popupHtml:'Via 1',
                                width:30,
                                height:45,
                                popupOptions:{offset: {'bottom': [0, -20]}, openPopup:false },
                                /* offset:[0, -18] */
                            }
                        },
                        {
                            geoposition:"28.44275991192795,77.51372861117522",
                            id:'via2',
                            icon:{
                                url:'https://apis.mapmyindia.com/map_v3/1.png',
                                popupHtml:'Via 2',
                                width:30,
                                height:45,
                                popupOptions:{offset: {'bottom': [0, -20]}, openPopup:false },
                                /* offset:[0, -18] */
                            }
                        },
                        {
                            geoposition:"28.452552810748116,77.49571088868709",
                            id:'via3',
                            icon:{
                                url:'https://apis.mapmyindia.com/map_v3/2.png',
                                popupHtml:'Via 3',
                                width:30,
                                height:45,
                                popupOptions:{offset: {'bottom': [0, -20]}, openPopup:false },
                                /* offset:[0, -18] */
                            }
                    }],
                    }
                    tracking_plugin = mappls.tracking(tracking_option, function(data) {
                        console.log(data);
                        data1 = data;
                    });
                });

                map.on('click', function(e) {
                    var user = [e.lngLat.lng, e.lngLat.lat];
                    data1.trackingCall({
                        location: user,
                        reRoute: true,
                        heading: true,
                        mapCenter: false,
                        buffer: 50,
                        delay: 3000,
                        fitBounds: false,
                        fitboundsOptions: {
                            padding: 80
                        },
                        callback: function(data) {
                            console.log(data)
                        }
                    });
                });
            }
        </script>
        </body>
  </html>

That's All !

For any queries and support, please contact:

Email us at apisupport@mappls.com

Support Need support? contact us!

@ Copyright 2024 CE Info Systems Pvt. Ltd. All Rights Reserved.

Terms & Conditions | Privacy Policy | Supplier Sustainability Policy | Health & Safety Policy | Environmental Policy & CSR Report

Customer Care: +91-9999333223