Skip to content

Direction Plugin for Mappls Web Maps

Easy To Integrate Routing APIs & Map SDKs For Web Applications

Powered with India's most comprehensive and robust mapping functionalities. Now Available for 200+ nations and territories accross the world.

Document Version History

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

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 Token Generation API.
    • To know more on how to create your access tokens, please use our authorization API URL. More details available here
    • The access token is a valid by default for 24 hours from the time of generation. This can be configured by you in the API console.
  2. The sample codes are provided on our domain to help you understand the very basic functionality of Mappls Direction Plugin. See Sample Codes here

Introduction

This plugin, offered by Mappls Places & Directions SDK for Web, uses integrated places searches for directions for several modes of transportation, including driving, biking and walking.

The plugin offers the following basic functionalities:

  1. Integrated support of Mappls(MapmyIndia) Place search for searching locations of origin, destinations and via points.
  2. It allows to use origin and destinations in Mappls's digital address (semicolon separated) eLoc or WGS 84 geographical coordinates both.
  3. The ability to set the vehicle profile like driving, biking,trucking and walking.
  4. Easily set the resource for traffic and ETA information.

For details, please contact apisupport@mappls.com.

Live Demo

Visit the following link for visiting the live demo:

Web sdk implementationMappls Live Demo

React JS Implementation Live Video : CodeSandbox

Add the Direction plugin

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 DirectionPlugin = ({ map }) => {
  const directionRef = useRef(null);

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

    directionRef.current = mapplsPluginObject.direction(
      {
        Resource: "route_eta",
        annotations: "nodes,congestion",
        map: map,
        start: "28.545,77.545",
        end: { label: "India Gate, Delhi", geoposition: "1T182A" },
      },
      (e) => {
        console.log(e);
      }
    );
    return () => {
      if (map && directionRef.current) {
        mapplsClassObject.removeLayer({ map, layer: directionRef.current });
      }
    };
  }, [map]);
};

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

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

  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 && <DirectionPlugin 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: 4,
    geolocation: false,
    clickableIcons: false,
  };

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

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

        this.mapObject.on('load', () => {
          var direction_option = {
            Resource: 'route_eta',
            annotations: 'nodes,congestion',
            map: this.mapObject,
            start: '28.545,77.545',
            end: { label: 'India Gate, Delhi', geoposition: '1T182A' },
          };
          this.mapplsPluginObject.direction(direction_option, (e: any) => {
            console.log(e);
          });
        });
      }
      );
    }
  }

Properties

Mandatory

  1. map(object): vector map or raster map object from respective Mappls Map SDKs.

Example

mappls.direction({map:map,start:"28.545,77.545",end:{label:'India Gate, Delhi',geoposition:"1T182A"}});

Optional Parameters

  1. start (string): Mappls Pin(Eloc) or lat,long.
  2. end (string): Mappls Pin(Eloc) or lat,long.
  3. resource (string): Default is route_adv and can be changed to route_eta or route_traffic as per requirement.
  4. profile (string): Default driving for four wheelers and can be changed to biking and trucking for two wheelers and heavy vehicles respectively.
  5. rtype (boolean): type of route required for navigation, where values mean:
  6. 0: optimal (default)
  7. 1: shortest (it will calculate route by excluding access penalties like private roads, etc.)
  8. bearings(integer): Limits the search to segments with given bearing in degrees. The referencing will be to the true north and in clockwise direction. (shall be part of premium offering)
  9. alternatives: Search for alternative routes. Passing a number: e.g. alternatives=n searches for up to n alternative routes. Please note that even if alternative routes are requested, a result cannot be guaranteed.
  10. radiuses: Limits the search to given radius in meters. For all way-points including start and end points. {radius};{radius}[;{radius} ...]. (shall be part of premium offering).
  11. steps(boolean): Return route steps for each route leg. Possible values are true/false. By default it will be used as true.
  12. stepPopup: Possible values are true/false //By default false. If set true, steps written in popups will be shown.
  13. stepIcon: Possible values are true/false //By default true. If set true, step icon will be visible.
  14. exclude(string): Additive list of road classes to avoid, order does not matter. Possible values are toll, motorway & ferry. Multiple values can be selected.
  15. start_icon (string): To set the icon for start point.
    • Example: 
        start_icon: {
            url: '2.png',
            width: 30, //optional
            height: 40 //optional
        }

    OR

         start_icon: {
            html: " < div > < img src = 'pin.png' > < /div>",
            width: 30, //optional
            height: 40, //optional
            offset:[20,40] //optional

        }
  1. end icon (string) : To set the icon for end point.
  2. iconPopup : Possible values are true/false. Sets popup for start, via and end icons. //By default true.
  3. via: (object) : To add a geo positions between start and end points.
    • Example: For single via Point
        via: {
            label: 'mathura', //optional
            geoposition: "28.544, 77.4541"
        }

- Example: For multiple via Points, user must pass the via points as array

        via:
        [
            {
                label:'mathura',
                geoposition:"28.544,77.4541"
            },
            {
                label:'Koshi',
                geoposition:"28.144,77.4541"}],
  1. via_icon (object): To set the icon for via points,
    • Example: 
        via_icon:
        {
            url:'1.png',
            width:20,
            height:40
        }

    OR

        via_icon:
        {
            html: <div> <img src = 'pin.png' > 1</div>, 
            width: 20,
            height: 40
        }
  1. fitbounds: (boolean). Used to fit the route to in map view bound. Default is true.
  2. search : Referred to the intergarated Mappls Search. Default remains true.
  3. divId: The HTML where developer wishes results to be displayed.
  4. divWidth: (in pixels) For customizing or improving results display UI.
  5. autoSubmit : Property that will be called when user directly want to display the results. Default remains true.
  6. geolocation: boolean value used to enable or disable current location selection . Default is true.
  7. maxVia: Property that helps to limit the number of viapoints in any route. maximum Value up to 98.
  8. searchChars : number of characters required to start search. ie searchChars:2
  9. pod: Place type which you want to restrict the results by. e.g. pod:'city'. Valid values are:
    • SLC (sub locality)
    • LC (locality)
    • CITY
    • VLG (village)
    • SDIST (sub district)
    • DIST (district)
    • STATE
    • SSLC (sub sub locality)
    • POI (place of interest)
  10. distance: boolean value used to show aerial distance from location passed in location. of the searched place in results listing e.g. distance:true
  11. hyperLocal: This parameter lets the search give results that are hyper-localized to the reference location passed in the location parameter. This means that nearby results are given higher ranking than results far from the reference location. Highly prominent results will still appear in the search results, however they will be lower in the list of results. This parameter will work ONLY in conjunction with the location parameter.
  12. location: location coordinates which will be used as radial bias search (not restriction; only BIAS). e.g. location:[28.61, 77.23]
  13. routeColor : To configure the route colors displayed on the map. The colors will be applied in order of the route suggested. Will accept rgb, Hex code as well as color names.For Eg: If only one color is suggested then the most prior route color would be changed and rest routes will be shown in default colors. User can configure as many colors as per suggestions.
  14. strokeWidth : To assign width of the route.The width will be applied in order of the route suggested. Default value is 4.For Eg: If only one width is suggested then the most prior route width would be changed and rest routes will be shown in default width. User can configure as many widths as per suggestions.
  15. borderColor : To assign color to the outline of the route.The colors will be applied in order of the route suggested. Will accept rgb, Hex code as well as color names.For Eg: If only one color is suggested then the most prior route color would be changed and rest routes will be shown in default color. User can configure as many colors as per suggestions.
  16. activeColor : To configure the color of Active Route. Please note If routeColor is assigned then activeColor will hide the first suggested route.Will accept rgb, Hex code as well as color names.
  17. activeStrokeWidth : To assign width of the route. Default value is 7.
  18. callback: (function). To get callback data after route plotted.
  19. routeIndex: (function) - To get the route index number and route name(if present).
  20. collapse : To minimise the entire direction plugin in left direction. Available only for Top left position. Default is false. This parameter is also available in form of method in callback function. Refer below to use the function
       collapse:function(data){console.log(data);},
  1. connector : To show the connecting line with start and end location with the route. Default is false.

Additional Parameter - alongTheRoute

  1. alongTheRoute : true/false. Default is false.

    To access this parameter , please contact API Support This parameter takes the encoded route along which POIs will be searched.

    This parameter is further having many configurable options listed below.

    • buffer: 200, // Buffer of the road. Minimum value is 25m, maximum is 1000m and default is 25m
    • sort: false, //default is true

    • category:

      • catCode: 'FINATM', //The POI category code to be searched. Only one category input supported by default
      • icon: "icon image path " //absolute path of the desired image
      • width: '30px' //width of the icon image
      • height: '30px' //height of the icon image
      • label: 'Restaurants' the name user puts to show the category. For Eg: "Restaurants"

    • page: 1, // Used for pagination, Default is 1

    • poicallback: to get data of alongtheroute pois.

Refer to the Code Snippet if the you need to configure the default options.

    alongTheRoute: 
        {
            options: 
                {
                    "page": 1,
                    "buffer": 1000,
                    "sort": false
                },
            category: 
                [
                    { 
                        catCode: 'FINATM', 
                        icon: "custom icon url", 
                        width: '30px', 
                        height: '30px',
                        label:'ATM'
                    },
                    { 
                        catCode: 'HOTALL', 
                        icon: "custom icon url", 
                        width: '30px', 
                        height: '30px',
                        label:'Hotels'
                    }
                ],
            poicallback: function(data)
                { 
                    console.log(data);
                }
        }

*Advisory - Route length should not be more than 30 kms long for optimal behaviour

Additional Parameter - routeSummary

  1. routeSummary : true/false. Default is false. This feature allows to show the events reports along the route like road and safety, traffic conditions etc.
    To access this parameter , please contact API Support.

Refer to the Code Snippet if the you need to get the callback.

    routeSummary:
        {
            summarycallback: function(data)
                {
                    console.log(data);
                }
        },

That's All !

For any queries and support, please contact:

Email us at apisupport@mappls.com

Support Need support? contact us!



© Copyright 2023 CE Info Systems Ltd. All Rights Reserved.