Skip to main content

Show existing routes on the Map

In this guide we will

  • listen to the MAP_READY event on the map
  • create a state with sites, operations, trucks and one existing route
  • send and show the route on the Map
  • customize the route default display
  • native interactions
  • generate MCI problem from route
  • send the MCI Problem to the Axioroute API
  • listen to Axioroute API progress
  • display the resulting itinerary on a map

Follow common setup steps​

If not done already, follow common setup and requirements

Wait for the map to be ready​

In our index.js file, we will add a listener to the MAP_READY event on the map.

src/index.js
//...

ARMessage.on("MAP_READY", (event) => {
  console.log(`The MAP is ready`);
});

Create the State​

A Route requires a list of sites, operations and trucks.

src/index.js
//...
const sites = [
  {
    id: "AXIOROUTE",
    coordinates: {
      longitude: -0.561642,
      latitude: 47.462544,
    },
    isDepot: false,
    entityType: "SITE",
  },
  {
    id: "CJM",
    coordinates: {
      longitude: -0.345602,
      latitude: 48.597481,
    },
    isDepot: false,
    entityType: "SITE",
  },
  {
    id: "SINARI",
    coordinates: {
      longitude: -1.604869,
      latitude: 48.113197,
    },
    isDepot: true,
    entityType: "SITE",
  },
];

const operations = {
  operations: [
    {
      id: "OPERATION_01",
      type: "DELIVERY",
      idSiteDestination: "AXIOROUTE",
    },
    {
      id: "OPERATION_02",
      type: "DELIVERY",
      idSiteDestination: "CJM",
    },
  ],
};

const trucks = [
  {
    id: "VEHICLE_01",
    availablePeriods: [
      {
        id: "PERIOD_01",
        timeWindow: {
          start: "2022-11-01T04:30:00.000+01:00",
          end: "2022-11-02T12:00:00.000+01:00",
        },
        departureSite: "SINARI",
        arrivalSite: "SINARI",
      },
    ],
  },
];

Then let's create a Route using all of these.

src/index.js
const vehicleRoutes = [
  {
    truck: "VEHICLE_01",
    period: "PERIOD_01",
    routes: [
      {
        id: "MYROUTE_01",
        activities: [
          {
            activity: "DELIVERY",
            site: "AXIOROUTE",
            operations: [
              {
                id: "OPERATION_01",
                type: "DELIVERY",
              },
            ],
            timeWindow: {
              start: "2023-10-09T07:30:00.000Z",
              end: "2023-10-09T08:30:00.000Z",
            },
          },
          {
            activity: "DELIVERY",
            site: "CJM",
            operations: [
              {
                id: "OPERATION_02",
                type: "DELIVERY",
              },
            ],
            timeWindow: {
              start: "2023-10-09T10:30:00.000Z",
              end: "2023-10-09T11:30:00.000Z",
            },
          },
        ],
      },
    ],
  },
];

let state = {
  sites: sites,
  operations: operations,
  trucks: trucks,
  referencePlanning: {
    vehicleRoutes: vehicleRoutes,
  },
};

For an exhaustive list of Route parameters and their usage, see the Route schema in the MPT API documentation

Send the state to the Map​

Replace our console.log by sending the state to the map.

src/index.js
//...
ARMessage.on("MAP_READY", (event) => {
  ARMessage.send({
    type: "SET_WEBVIEW_ENTITIES",
    payload: state,
  });
});

Customize routes display​

We can customize default route display by sending an updated MapConfig to the Map.
Let's change the default route color to red.

src/index.js
//...
ARMessage.on("MAP_READY", (event) => {
  ARMessage.send({
    type: "SET_CONFIG",
    payload: {
      /**
       * change the route color to green
       */
      itineraryColorDefault: [50, 150, 0, 1],

      /**
       * change color to red for current route
       */
      itineraryCurrentColor: [255, 0, 0, 1],

      /**
       * change color to red for current activity crosshair
       */
      currentActivityMarkerColor: [255, 0, 0, 1],

      /**
       * change the icon for current activity
       */
      activityCurrentIcon: "bullet_ball_red.png",
    },
  });

  ARMessage.send({
    type: "SET_WEBVIEW_ENTITIES",
    payload: {
      sites: sites,
      operations: operations,
      trucks: trucks,
      referencePlanning: {
        vehicleRoutes: vehicleRoutes,
      },
    },
  });
});
Note

Routes and MCI itineraries are sharing display configuration (with some specific parameters for itineraries).

Native interactions​

Routes are one of the webview native entities with native interactions.
Route Activities are also native entities.

Route rollover​

Upon rollover, a tooltip with route id as title is displayed.

Route click​

Upon click, the route is set as current entity, and a ARMapUIEventCurrentFeature event is sent to the app.
They will be rendered with their default "set as current".

Note

If multiple entities are below the click. The priority is computed by SelectInteraction.getCurrentFeatureByPriority

Note

When a Route is set as current, any current Activity not attached to this route will have its current status removed.

Route selection​

Upon selection (either CTRL/CMD + click or rectangle selection), the routes in the selection box (or below the click) will all be selected, and a ARMapUIEventSelectFeatures event is sent to the app.
They will be rendered with their default selected display.

Activity rollover​

Upon rollover, a tooltip with the activity id as title, and operations list and type as body is displayed.

Note

Activity id exists only client side, it does not exist in the Axioroute API.

For an exhaustive list of Activity parameters and their usage, see the Activity schema in the MPT API documentation

Activity click​

Upon click, the route is set as current entity, and a ARMapUIEventCurrentFeature event is sent to the app.
They will be rendered with their default "set as current".

Note

If multiple entities are below the click. The priority is computed by SelectInteraction.getCurrentFeatureByPriority

Note

When an Activity is set as current, the parent route is also set as current.

Activity selection​

Upon selection (either CTRL/CMD + click or rectangle selection), the activities in the selection box (or below the click) will all be selected, and a ARMapUIEventSelectFeatures event is sent to the app.
They will be rendered with their default selected display.

Generate MCI Problem from Route​

/**
 * We can generate a MCI Problem from any route in our state by passing its id and our current state to `MCIJobTools.getProblem`
 */
let myMCIProblem = MCIJobTools.getProblem("MYROUTE_01", state);

Send the Problem​

let job = await apiClient.sendMCIProblem(myMCIProblem);

Update your State​

Also to keep track of links between routes from your Axioroute state and MCI Jobs we need to explicitly link them with:

state = MCIJobTools.addLinkedMCIjob(
  job,
  "MYROUTE_01", //the routeId of the route we want to link with the MCI Problem
  state
);
Note

The SDK never mutate the state itself, it always return a new state.

Get the Solution and display the itinerary​

We will only listen to the RECEIVED event, which is triggered when the solution is ready.

apiClient.subscribe("RECEIVED", (request) => {
  //We update our state (we add the solution to the route)
  state = MCIJobTools.updateLinkedMCIjob(job, state);

  /**
   * We send the new state to the map for display
   */
  ARMessage.send({
    type: "SET_WEBVIEW_ENTITIES",
    payload: state,
  });
});