How to map click event clientX and clientY to gather coordinates

Developers
1

Hello,
I want to know what is the prefered way to know how I can reliably map a click event on the map to its gather coordinates.
I know that it’s possible but I’m having hard time finding how to do it.
The hard part is that depending on where the canva displaying the map is positioned in the window, and maybe on the zoom level, the coordinates change.
I didn’t find a reliable way to know what offset to use.

Thanks in advance :slight_smile:

2

I found a way !

here is my snippet :slight_smile:

function handleTargetTeleport(e) {
  const camera = physics.scene.cameras.main
  const rect = e.target.getBoundingClientRect(); // Get canvas position in the DOM

  const canvasX = e.clientX - rect.left;
  const canvasY = e.clientY - rect.top;

  // Adjust for camera origin (which is centered by default)
  const worldX = camera.scrollX + ((canvasX - camera.width / 2) / camera.zoom);
  const worldY = camera.scrollY + ((canvasY - camera.height / 2) / camera.zoom);

  const correctedWorldX = (worldX + 548) / 32
  const correctedWorldY = (worldY + 463) / 32
  game.teleport(gameSpace.mapId, correctedWorldX, correctedWorldY)
}