mappls-tracking-react-native
v0.4.5
Published
This is for Tracking
Downloads
1,680
Readme
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.
- 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.
- 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='jump'
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) => {
}}
trackingEventCallback={(eventName:any,eventValue:any) =>{
}}
/>
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',
} as StyleProp<SymbolLayerStyle>,
}
destinationIconStyle
: To set a style for destination icon set.
const layerStyle = {
destinationIconStyle: {
iconImage: marker,
iconAllowOverlap: true,
iconAnchor: 'bottom',
iconSize: 0.2,
} as StyleProp<SymbolLayerStyle>,
}
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]
} as StyleProp<SymbolLayerStyle>
}
OriginIconStyle
: To set a style for start point showcase
const layerStyle = {
OriginIconStyle: {
iconImage: marker,
iconAllowOverlap: true,
iconAnchor: 'bottom',
iconSize: 0.2,
} as StyleProp<SymbolLayerStyle>,
}
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],
} as StyleProp<SymbolLayerStyle>,
}
Optional Parameters
speedInMillis(number)
: To set the animation speed in milliseconds.resource(string)
: To set the route resource. Default to "route_eta".profile(string)
: To set the profile for the route. Default to "driving".trackingIcon(string)
: To set the tracking icon (like a RiderIcon) in the north-up direction on a map.trackingIconSize(number)
: To set the tracking icon size.routeChangeBuffer(number)
: The distance defined for call reroute for the provided current location.polylineRefresh(boolean)
: To remove the route at the same time as the rider progresses along the route.latentViz(string)
: To set the string value for smooth visualization when rider suddenly jumps off-route. Incurs an additional routing call.// [Acceptable values for this is : jump,fly & route]latentVizRadius(number)
:cameraZoomLevel(number)
: To set the camera zoom level.fitBoundsPadding (number)
: To set the padding for the fitbound.// default 80fitBoundsDuration(number)
: To set the duration for the fitbound.// default 1000 millisenableDestinationRouteConnector (boolean)
: To set boolean value for hide/show connector line from the last route point on road to actual input destination coordinate // default falsetrackingSegmentCompleteCallback(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)) }}
enableSim
(boolean): enable or disable rider simulation when rider location is inconsistent.maxSimDis
(number): maximum distance till which simulation will be active after the last location injected into the widget.simSpeed
(number): This value is speed in metres/sec at which the rider simulation will be started at. The ride simulation will be slowed at a defined rate below this speed after every few metres to enable a very smooth and slow animation till the time a fresh active location is injected tot the widget or max simulation distance is reached.lastRiderLocation
(number[array]): This parameter is used to pass the last known location (long,lat) coordinates of the rider.orderId
(string): This parameter is used to add some unique id related to trackingtrackingEventCallback (eventName:string,eventValue:string)
: attributes to be returned for each event in real-time on occurrence of each event.aerialDistance
: displacement from last location to new locationroadDistance
: from last location to new location (if and only if new location is within routeChangeBuffer distance of route polyline)latentViz
: A boolean flag indicating if crow-fly/jump happened from old location to new location. When crowFly is false, it indicates that the new location is route adherent.routeRecompute
: A flag in string that indicates success/failure of route-recompute when tracking SDK internally calculates new route. This will happen when crowFly is true, and new location's distance from route polyline is greater than buffer distance.
trackingEventCallback={(eventName:any,eventValue:any) =>{ console.log("trackingEventCallback",eventName + ":::::::" + eventValue) }}
Note : Event names & its important values:
- updateWithinBuffer :
{
"activity_name": "updateWithinBuffer",
//& other key-val pairs
},
"url": {
"roadDistanceInMeter": 128.9532915267954,
"aerial": 128.86231315761427
}
}
- updateOutsideBuffer :
{ "activity_name": "updateOutsideBuffer", // & other key-val pairs }, "url": { "latentViz": "jump", "aerialDistance": 288.5067313683827, "routeRecompute": "Route calculated successfully" } }
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 Enable/Disable Logo Click
<MapplsGL.MapView style={{ flex: 1 }}
ref={mapRef}
logoClickEnabled={false} // disable logo click
renderToHardwareTextureAndroid={true}
mapplsStyle="sublime_grey_tracking"
onMapError={error => console.log(error)}/>
For any queries and support, please contact:
Email us at [email protected]
Support Need support? contact us!