Create, optimize and display a Route

In this guide we will

• listen to the MAP_READY event on the map
• create a state with sites, operations, trucks
• create MPT problem to generate an optimized route
• send the MPT Problem to the Axioroute API
• display the resulting route on a map
• change MPT problem to get a sorted route

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

We need an initial state to optimize:

src/index.js

//...
const sites = [
  {
    id: "AXIOROUTE",
    coordinates: {
      longitude: -0.561642,
      latitude: 47.462544,
    },
    isDepot: false,
  },
  {
    id: "CJM",
    coordinates: {
      longitude: -0.345602,
      latitude: 48.597481,
    },
    isDepot: false,
  },
  {
    id: "COFISOFT",
    coordinates: {
      longitude: 1.697037,
      latitude: 46.816713,
    },
    isDepot: false,
  },
  {
    id: "GPI",
    coordinates: {
      longitude: 4.740329,
      latitude: 45.752201,
    },
    isDepot: false,
  },
  {
    id: "SINARI",
    coordinates: {
      longitude: -1.604869,
      latitude: 48.113197,
    },
    isDepot: true,
  },
  {
    id: "XYRIC",
    coordinates: {
      longitude: 5.09304,
      latitude: 47.310967,
    },
    isDepot: false,
  },
];

const operations = {
  operations: [
    {
      id: "OPERATION_01",
      type: "DELIVERY",
      idSiteDestination: "AXIOROUTE",
    },
    {
      id: "OPERATION_02",
      type: "DELIVERY",
      idSiteDestination: "COFISOFT",
    },
    {
      id: "OPERATION_03",
      type: "DELIVERY",
      idSiteDestination: "CJM",
    },
    {
      id: "OPERATION_04",
      type: "DELIVERY",
      idSiteDestination: "GPI",
    },
    {
      id: "OPERATION_05",
      type: "DELIVERY",
      idSiteDestination: "XYRIC",
    },
  ],
};

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",
      },
    ],
  },
];

Let's replace the console.log with the state creation:

src/index.js

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

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

Create the MPT Problem

We will create a MPT Problem with the state we just created and an optimization objective (action):

src/index.js

const action = {
  type: "CREATE_ROUTE_OPTIMIZED",
  operations: [
    {
      id: "OPERATION_01",
      type: "DELIVERY",
    },
    {
      id: "OPERATION_02",
      type: "DELIVERY",
    },
    {
      id: "OPERATION_03",
      type: "DELIVERY",
    },
    {
      id: "OPERATION_04",
      type: "DELIVERY",
    },
    {
      id: "OPERATION_05",
      type: "DELIVERY",
    },
  ],
  to: {
    idTruck: "VEHICLE_01",
    idPeriod: "PERIOD_01",
  },
};

const myMPTProblem = MPTJobTools.getProblem(state, action);
const job = await apiClient.sendMPTProblem(myMPTProblem);

Display the resulting route on a map

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 = MPTJobTools.updateState(state, request.job.solution);

  ARMessage.send({
    type: "SET_WEBVIEW_ENTITIES",
    payload: state,
  });
});

Update the MPT Problem to get a sorted route

Sometime you just want a Route with operations sorted in specific order.
You can achieve that just by changing the action definition:

src/index.js

const action = {
  //...
  type: "CREATE_ROUTE_SORTED",
  operations: [
    {
      id: "OPERATION_01",
      type: "DELIVERY",
    },

    {
      id: "OPERATION_03",
      type: "DELIVERY",
    },
    {
      id: "OPERATION_02",
      type: "DELIVERY",
    },

    {
      id: "OPERATION_05",
      type: "DELIVERY",
    },
    {
      id: "OPERATION_04",
      type: "DELIVERY",
    },
  ],
  to: {
    idTruck: "VEHICLE_01",
    idPeriod: "PERIOD_01",
  },
};
//...

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