Show a POI on the Map

In this guide we will

• listen to the MAP_READY event on the map
• setup a POI to be displayed on the map
• send and show the POI on the Map
• customize some of the properties of the POI
• add a tooltip on POI rollover

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 POI

Let's create a very simple POI with minimal information.

src/index.js

//...
const poi = {
  id: "my-first-poi", // unique id for the POI
  icon: "pin_blue_syd.png", // icon to use for the POI
  pos: { lonLat: [-0.561642, 47.462544] }, // position of the POI
};

Send the POI to the Map

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

src/index.js

//...
ARMessage.on("MAP_READY", (event) => {
  ARMessage.send({
    type: "SET_WEBVIEW_ENTITIES",
    payload: {
      pois: [poi],
    },
  });
});

There should now be a POI on the map. It will be automatically centered and zoomed on the POI. It's because the map always tries to show all the POIs that are sent to it with maximum zoom in (and in our case, only one).

pin_blue_syd.png is an icon already used by default by the map. This is why we only specified the name of the icon.

Customize a POI

We can customize the POI by adding more properties to it.
In our example we can see that the pin is a bit deformed. It's because it's rendered with default values for the width and height properties.
Since default values are 16x16 and this image isn't square shaped, it's deformed. Also, the anchor point is not set, so the POI is centered on the position.

Let's fix that by respecting icon aspect ratio and placing the anchor point at the bottom left of the image (so the pin tip is exactly on the position).

src/index.js

//...
const poi = {
  id: "my-first-poi",
  icon: "pin_blue_syd.png",
  pos: { lonLat: [-0.561642, 47.462544] },
  displayOptions: {
    anchor: [0, 1], //bottom left (0,0 is top left)
    width: 18,
    height: 24,
  },
};

You should now see a nice pin on the map, and its tip should be exactly on the specified position.

Use remote icons

Of course you can use any image you want for your POI. You can either:

• configure the base url for the icons in the SDK and add the relative path to the icon in the POI
• or specify the full url for each icon.

In this example we will use the second option.

src/index.js

//...
const poi = {
  id: "my-first-poi",
  icon: "http://localhost:5174/src/assets/images/pin_yellow_syd.png",
  pos: { lonLat: [-0.561642, 47.462544] },
  displayOptions: {
    anchor: [0, 1], //bottom left (0,0 is top left)
    width: 18,
    height: 24,
  },
};

Make a POI selectable

By default, the POI is not selectable. It means that when the user clicks on it, nothing happens.

Note

In the Map Webview selection is either CTRL + click (CMD on MacOS) or rectangle selection (drag and drop while holding CTRL/CMD).

src/index.js

//...
const poi = {
  id: "my-first-poi",
  icon: "http://localhost:5174/src/assets/images/pin_yellow_syd.png",
  pos: { lonLat: [-0.561642, 47.462544] },
  displayOptions: {
    anchor: [0, 1], //bottom left (0,0 is top left)
    width: 18,
    height: 24,
  },
  isSelectable: true, // Make the POI Selectable
};

With this property added you can now see upon selection the POI icon becoming larger: this is the default selection display.

We can also customize selected display by adding a selectedDisplayOptions property to the POI.

src/index.js

//...
const poi = {
  id: "my-first-poi",
  icon: "http://localhost:5174/src/assets/images/pin_yellow_syd.png",
  pos: { lonLat: [-0.561642, 47.462544] },
  displayOptions: {
    anchor: [0, 1], //bottom left (0,0 is top left)
    width: 18,
    height: 24,
  },
  isSelectable: true, // Make the POI Selectable
  selectedDisplayOptions: {
    color: [255, 0, 0, 1], // adding red tint to the icon when selected
  },
};

Add a tooltip on rollover

We can add a tooltip to the POI that will be displayed when the user hovers the POI with the mouse.

First generate the tooltip content

src/index.js

//...
const tooltip = {
  title: "My first POI",
  body: `This is the tooltip body<div style="color:red">It can be HTML</div`,
};

Then make the POI rolloverable and add the tooltip content

src/index.js

//...
const poi = {
  id: "my-first-poi",
  icon: "http://localhost:5174/src/assets/images/pin_yellow_syd.png",
  pos: { lonLat: [-0.561642, 47.462544] },
  displayOptions: {
    anchor: [0, 1], //bottom left (0,0 is top left)
    width: 18,
    height: 24,
  },
  isSelectable: true, // Make the POI Selectable
  selectedDisplayOptions: {
    color: [255, 0, 0, 1], // adding red tint to the icon when selected
  },
  hasRollover: true, // Make the POI rolloverable
  tooltip: tooltip, // add the tooltip content
};