Show position tooltip on click

In this guide we will

• listen to the CLICK event on the map
• get the position of the click
• use the CARTO API to get the position information
• show a tooltip with the position information

Follow common setup steps

If not done already, follow common setup and requirements

Listen to the click event

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

src/index.js

//...

ARMessage.on("CLICK", (event) => {
  const { pos } = event.payload;
  console.log(
    `click at longitude: ${pos.lonLat[0]} and latitude: ${pos.lonLat[1]}`
  );
});

You can test this is working by clicking on the map and check the console.
You should see the position of the click.

Use the Carto API

Now let's use the CARTO API to get the position information.

src/index.js

//...

/**
 * We will pass click event position to this function
 */
const showPosInfoTooltip = async (pos) => {
  /**
   * We get the coordinates info from the Axioroute API
   */
  const response = await apiClient.getCoordinatesInfo(
    //API expect coordinates in the format {longitude: number, latitude: number}
    Coords.posToCoordinates(pos)
  );
  /**
   * there is not always something at the position, we show an alert if there is nothing
   */
  if (response.sites_point.length === 0 || !response.sites_point[0].address) {
    alert("No site found at this position");
    return;
  }

  /**
   * We get the first site found at the position and address info
   */
  const site = response.sites_point[0];
  const { number, streetname, zipcode, cityname } = site.address;

  /**
   * display the adress in the console
   */
  console.log(
    `You clicked on: ${number ?? ""} ${streetname} ${zipcode} ${cityname}`
  );
};

Also remember to replace our previous console.log with a call to our new function.

src/index.js

//...
ARMessage.on("CLICK", (event) => {
  const { pos } = event.payload;
  showPosInfoTooltip(pos);
});
//...

Now a click on the map should display the address in the console.
If there is nothing at the position, an alert will be displayed.

Show the tooltip

In our showPosInfoTooltip function, we will replace the console.log and send a ARMapEventShowTooltip Message.

src/index.js

//...

/**
 * We will pass click event position to this function
 */
const showPosInfoTooltip = async (pos) => {
  /**
   * We get the coordinates info from the Axioroute API
   */
  const response = await apiClient.getCoordinatesInfo(
    //API expect coordinates in the format {longitude: number, latitude: number}
    Coords.posToCoordinates(pos)
  );

  /**
   * there is not always something at the position, we show an alert if there is nothing
   */
  if (response.sites_point.length === 0 || !response.sites_point[0].address) {
    alert("No site found at this position");
    return;
  }

  /**
   * We get the first site found at the position and address info
   */
  const site = response.sites_point[0];
  const { number, streetname, zipcode, cityname } = site.address;

  /**
   * Finaly, we send a message to the map to show a tooltip at the given position
   */
  ARMessage.send({
    type: "SHOW_TOOLTIP",
    payload: {
      content: {
        title: "Click Position Info",
        body: `${number ?? ""} ${streetname} ${zipcode} ${cityname}`,
      },
      coords: {
        longitude: site.longitude,
        latitude: site.latitude,
      },
    },
  });
};

And we're done! Now a click on the map should display a tooltip with the address information (or an alert if there is nothing at the position)