Document Version History¶

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

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.

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

Introduction¶

The mappls.intouchTracking is part of the Mappls SDK (formerly MapmyIndia) and is designed to provide real-time tracking and display of routes and activities on a map. This method supports job tracking functionality to visualize movement and journey progress on a map. This document provides an overview of how to use the mappls.intouchTracking function, including configuration options and code examples.

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.

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
The sample codes are provided on our domain to help you understand the very basic functionality of Mappls Tracking Plugin. Javascript Code Example - WIP & Working NPM Code - WIP

Table of Contents¶

Intouch Historical Trail Widget
Document Version History
Getting Access
Introduction
Getting Access
Table of Contents
Implementation
Mandatory Parameters of intouchTracking() Options
Optional Parameters of intouchTracking() Options
- Important Entities
- Other Optional Configuration of intouchTracking() Options
Callback Function of intouchTracking() method
- Re-centering the Map Based Current Tracking Data
- Error Handling

Implementation¶

Step 1: Initialize plugins Map SDK and add (& libraries=intouchTracking) in the url¶

<script src="https://sdk.mappls.com/map/sdk/web?v=3.0&access_token=<Static key>&layer=vector&callback=initMap1"></script>
<script src="https://apis.mappls.com/advancedmaps/api/<Token>/map_sdk_plugins?v=3.0&libraries=intouchTracking"></script>

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

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

Step 3 : Initialize Map & declare variables¶

var map;
function initMap1() {
    map = new mappls.Map('map', {
    center: [28.58089892895083, 77.25187057891208],
    zoom: 12
    });

Step 4 : Add tracking options in mappls.intouchTracking() method¶


    map.addListener('load', function () { 
                var tracking_option = {
                    map: map, // required
                    deviceId:'10647019', // required
                    type:'Trail', // required
                    startTime:'1737963660', // required
                    endTime: '1737991197', // required
                    /* skipPeriod: 1, */
                    fitBounds:true, 
                    strokeWidth: 4,
                    routeColor: "blue",
                    pointType:'arrow' // default 'circle' / arrow'
                }
    });

Step 5: Method call for Initialising the Tracking Plugin with options¶

tracking_plugin = mappls.intouchTracking(tracking_option, function (data) {
    console.log(data); 
    });

Mandatory Parameters of intouchTracking() Options¶

map(object): vector map or raster map object from respective Mappls Map SDKs. This is the map on which the tracking will be displayed. It must be a valid instance of the map object.
type (String) : Defines the type of tracking. Possible values are:
Trail: For Historical Trail visualization.
deviceId (String or Number) : The unique identifier for the historical trail visualization.

Example: 12345

Optional Parameters of intouchTracking() Options¶

Important Entities¶

trackingOptions (Object): This request object contains various configuration settings that define how the tracking plugin initialises & behaves on the map. It allows developers to customize the tracking experience.
callback (Function): A callback function that is invoked when tracking data is updated or received. The of intouchTracking() provides a callback that will transmit object containing the important tracking data.

Other Optional Configuration of intouchTracking() Options¶

The trackingOptions object provides various properties for customizing the tracking behavior. Below is a description of each property:

startTime : Starting time of the trail visualization
endTime : End time of the trail visualization
fitBounds (Boolean): If true, the map will automatically adjust its view to fit the route. If false, the map will not adjust its bounds automatically.
fitboundsOptions (Object): This option allows you to specify additional parameters when adjusting the map’s bounds. Common parameter is padding, which defines the padding (in pixels) to be applied to the map's edges when fitting bounds. Example:

    fitboundsOptions: {
         padding: 80,
       }

strokeWidth (Number): Specifies the width (in pixels) of the route line displayed on the map.
pointType: type of visualization preffered as historical trail. // default 'circle'/'arrow'
strokeOpacity (integer): //signifies opacity of the route polyline. //optional; default is 1. Opacity values from 0 to 1.
routeColor (String): Defines the color of the route line. You can provide a CSS color value (e.g., 'blue', '#FF5733').

Callback Function of intouchTracking() method¶

The callback function is triggered when tracking plugin is initialised. This means the first values within this callback indicate the original duration and distance estimates for this tracking trail. This function receives a data object containing the initial route information. The callback function signature is as follows: - function callback(data);

The data object may contain the following properties: - dur (String): The duration of the journey, formatted as "hh:mm:ss". - dis (String): The total distance to be traveled in the journey, usually in kilometers or miles. Default is kms.

Re-centering the Map Based Current Tracking Data¶

    if (trackingCallBackData) {
        trackingCallBackData.settrackfit(true);  // Auto-fit map to the route
        document.getElementById('recenter').style.display = "none";  // Hide recenter button
    }

You may do a periodic fitbound few seconds after the last user interaction with the map.

Error Handling¶

It is important to handle errors effectively when using mappls.intouchTracking: - Map not loading: Ensure the map object is initialized and correctly passed to the tracking function. - Invalid device ID: Ensure the deviceId is valid and corresponds to an historical trail. - Tracking data is unavailable: Always check the data object in the callback to ensure it contains the expected information (e.g., data.dur, data.dis).

For any queries and support, please contact:

Email us at apisupport@mappls.com

Support Need support? contact us!