Skip to main content

Show operations on the Map

In this guide we will

  • listen to the MAP_READY event on the map
  • create a list of operations
  • send and show the operations on the Map
  • customize the operations default display
  • native interactions

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 a list of operations​

Since operations are always related to a site, we will create a list of sites first.

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

Then we can add some operations on these sites.

src/index.js
const operations = {
  operations: [
    {
      id: "OPERATION_01",
      type: "DELIVERY",
      idSiteDestination: "AXIOROUTE",
    },
    {
      id: "OPERATION_02",
      type: "DELIVERY",
      idSiteDestination: "CJM",
    },
  ],
};

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

Send the operations and sites to the Map​

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

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

Customize operations display​

We can customize default operation display by sending an updated MapConfig to the Map.
Let's change the default icon for unaffected operations, and also the crosshair color for current operation.

src/index.js
//...
ARMessage.on("MAP_READY", (event) => {
  ARMessage.send({
    type: "SET_CONFIG",
    payload: {
      /**
       * change the default icon for unaffected operations
       */
      operationUnaffectedIcon: "bullet_square_grey.png",

      /**
       * change the crosshair color for current operation
       */
      currentOperationMarkerColor: [0, 0, 255, 1],
    },
  });

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

Native interactions​

Operations are one of the webview native entities with native interactions.

Operation rollover​

Upon rollover, a tooltip with operation id as title, and operation type as body is displayed.

Operation click​

Upon click, the operation 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

Operation selection​

Upon selection (either CTRL/CMD + click or rectangle selection), the operations 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.