Skip to main content

Show sites on the Map

In this guide we will

  • listen to the MAP_READY event on the map
  • create a list of sites
  • send and show the sites on the Map
  • customize the sites 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 sites​

Here is a minimal list of sites:

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

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

Send the 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,
    },
  });
});

Customize sites display​

We can customize default site display by sending an updated MapConfig to the Map.
Let's change the default site icon.

src/index.js
//...
ARMessage.on("MAP_READY", (event) => {
  ARMessage.send({
    type: "SET_CONFIG",
    payload: {
      siteIcon: "pin_yellow_syd.png",
    },
  });

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

Native interactions​

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

Site rollover​

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