Mappls Tracking Widget React Native

Getting started

Easy To Integrate Routing APIs & Map SDKs Powered with India's most comprehensive and robust mapping functionalities. Now Available for Srilanka, Nepal, Bhutan, Bangladesh and Myanmar.

1. Copy and paste the JWT API key or generated Auth token from your API keys available in the Dashboard in the sample code for interactive map development.
2. The sample code is provided to help you understand the very basic functionality of MapmyIndia APIs.

Document Version History

| Version | Last Updated | Author |Remarks | ------- | ------------- | ------------------------------------------------------------- |-------------- | | 1.1 | 30 Sep 2024 | MapmyIndia API Team (PK) | Initial Commit

Introduction

This advanced tracking plugin, offered by Mappls plugins for react native, 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 Started

• Install Mappls Tracking Widget

npm i mappls-tracking-react-native

• Install peerDependencies

npm i mappls-map-react-native

• If using React-native<0.60

react-native link mappls-tracking-react-native

Installation

Android

• Add followling line in android/build.gradle file:-

allprojects {
   repositories {
            mavenLocal()
            maven {
// All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
           url("$rootDir/../node_modules/react-native/android")
            }
           maven {
 // Android JSC is installed from npm
    url("$rootDir/../node_modules/jsc-android/dist")
          }

  
+       maven { url 'https://maven.mappls.com/repository/mappls/'}

           google()
           jcenter()
           maven { url 'https://www.jitpack.io' }

         }

}

• Add followling line in android/app/build.gradle file:-

defaultConfig {

applicationId "com.example"

minSdkVersion rootProject.ext.minSdkVersion

targetSdkVersion rootProject.ext.targetSdkVersion

versionCode 1

versionName "1.0"

+ multiDexEnabled true

}
+ dataBinding {
+    enabled true
+   }

ios

• run pod install from ios folder

Usage

Step 1: Import

import MapplsTracking from "mappls-tracking-react-native";
import  MapplsGL  from  'mappls-map-react-native';

Step 2. Initialization

Initialize the SDK with your keys.

// for map sdk
MapplsGL.setMapSDKKey(mapSDKKey);//place your mapsdkKey
MapplsGL.setRestAPIKey(restAPIKey);//your restApiKey
MapplsGL.setAtlasClientId(atlasClientId);//your atlasClientId key
MapplsGL.setAtlasClientSecret(atlasClientSecret); //your atlasClientSecret key

Step 3: Open MapplsTrackingWidget

        <MapplsTracking.MapplsTrackingWidget
          ref={trackingWidgetRef}
          originPoint='77.26890561043258,28.550947419414012'
          destinationPoint='77.25988209737588,28.55373960502866'
          speedInMillis={3000}
          resource='route_eta'
          profile='driving'
          routeChangeBuffer={50}
          trackingIcon={carIcon}
          latentViz={false}
          polylineRefresh={false}
          cameraZoomLevel={14}
          routePolylineStyle={layerStyle.routePolylineStyle}
          destinationIconStyle={layerStyle.destinationIconStyle}
          dashRoutePolylineStyle={layerStyle.dashRoutePolylineStyle}
          OriginIconStyle={layerStyle.OriginOutletIconStyle}
          destinationRouteConnectorStyle={layerStyle.connectorPolylineStyle}
          enableDestinationRouteConnector={true}
          fitBoundsPadding={80}
          fitBoundsDuration={1000}
          latentVizRadius={100}
          trackingSegmentCompleteCallback={(event:any) => {
            console.log("response", JSON.stringify(event))
          }}
        />

Mandatory Request Properties

• originPoint : route start location . For eg - { geoposition: "28.63124010064198,77.46734619140625" }
• destinationPoint : route end location . For eg - { geoposition: "28.631541442089226,77.37808227539064" }
• routePolylineStyle : To set a style for route draw.

    const layerStyle = {
        routePolylineStyle: {
        lineColor: '#314ccd',
        lineWidth: 6,
        lineOpacity: 0.75,
        lineCap: 'round',
        lineJoin: 'round',
    },
    }

• destinationIconStyle : To set a style for destination icon set.

  const layerStyle = {
    destinationIconStyle: {
    iconImage: marker,
    iconAllowOverlap: true,
    iconAnchor: 'bottom',
    iconSize: 0.2,

  },
}

• dashRoutePolylineStyle : To set a style for an initial route showcase.

  const layerStyle = {
        dashRoutePolylineStyle: {
        lineColor: '#314ccd',  // Set polyline color
        lineWidth: 4,  // Set polyline width
        lineOpacity: 0.75,  // Set polyline opacity
        lineCap: 'round',
        lineJoin: 'round',
        lineDasharray: [2, 4],  // Dash pattern: [Dash length, Gap length]
        }
    }

• OriginIconStyle : To set a style for start point showcase

    const layerStyle = {
        OriginIconStyle: {
        iconImage: marker,
        iconAllowOverlap: true,
        iconAnchor: 'bottom',
        iconSize: 0.2,

    },
  }

• destinationRouteConnectorStyle : To set a style for draw a connector line from the last point of a route on the road to the actual input destination coordinate.

const layerStyle = {
destinationRouteConnectorStyle: {
 lineColor: '#787878',
 lineWidth: 4,
 lineOpacity: 0.75,
 lineCap: 'round',
 lineJoin: 'round',
 lineDasharray: [2, 4],
},
}

Optional Parameters

1. speedInMillis(number): To set the animation speed in milliseconds.

2. resource(string): To set the route resource. Default to "route_eta".

3. profile(string): To set the profile for the route. Default to "driving".

4. trackingIcon(string): To set the tracking icon (like a RiderIcon) in the north-up direction on a map.

5. trackingIconSize(number): To set the tracking icon size.

6. routeChangeBuffer(number): The distance defined for call reroute for the provided current location.

7. polylineRefresh(boolean): To remove the route at the same time as the rider progresses along the route.

8. latentViz(boolean): To set the boolean value for smooth visualization when rider suddenly jumps off-route. Incurs an additional routing call.// default false

9. latentVizRadius(number):

10. cameraZoomLevel(number): To set the camera zoom level.

11. fitBoundsPadding (number): To set the padding for the fitbound.// default 80

12. fitBoundsDuration(number): To set the duration for the fitbound.// default 1000 millis

13. enableDestinationRouteConnector (boolean): To set boolean value for hide/show connector line from the last route point on road to actual input destination coordinate // default false

14. trackingSegmentCompleteCallback(trackingData: TrackingData) : retrieve the remaining distance, you can access the relevant data within the trackingData object that the callback provides. For example...

 trackingSegmentCompleteCallback={(event:any) => {
            console.log("remainingDistance", JSON.stringify(event))
          }}

Method calls :-

• For Start Tracking

  const newSourcePoint:MapplsTracking.MapplsTrackingWidget.TrackingRequestData = {
        currentLocation: [77.26757150555511, 28.551569415823124]
        }
    trackingWidgetRef.current.startTracking(newSourcePoint); 

• For Removing Curved Line

 if (trackingWidgetRef.current) {
    trackingWidgetRef.current.removeCurveLine(true);
 }

• For Hide/Show Polyline

 if (trackingWidgetRef.current) {
   trackingWidgetRef.current.isVisibleRoutePolyline(true);
 }

• For Enable/Disable DestinationConnectorLine

 if (trackingWidgetRef.current) {
  trackingWidgetRef.current.enableDestinationConnectorLine(true)
 }

• For Enable/Disable FitBound Route

 if (trackingWidgetRef.current) {
    trackingWidgetRef.current.enableFitBounds(true);
 }

For any queries and support, please contact:

Email us at [email protected]

Support Need support? contact us!