Georeferencing map - best practice

Hi there,
in my project i need to display a map in which insert some mesh according to real coordinates (long and lat). I don’t need to use a really detailed map, i only need to show a generic map (i.e. map of Italy) and the put some meshes rapresenting warehouses. So the map is static: no zoom, no tile map, etc.
To give an idea of what i’m doing, here it is an image:

I’ve “manually” put meshes at the moment, but for the production version, the meshes have to be put on scene according to their coordinates. So the question is: how can i georeferencing the image and then authomatically insert the meshes at the right place? Is there a way to get the coord only of that piece of map and than normalize it to x,z coordinates? In this way i can translate coord to x,z values and then put meshes on the map. Hope to had myself clear.

Thank you in advance.

Hi @Mercurio

You can project 3D coordinate to the browser window.screen 2D coordinate:

E.g. this is the code I used to show health bar of the unit. :slightly_smiling_face: Variable ‘unit’ is the position of the unit. Health bar is above the unit (unit.y + 60). In your case, you need the variable to provide 3D coordinate where you want the labels.

const canvasCoord = BABYLON.Vector3.Project(new BABYLON.Vector3(unit.x, unit.y + 60, unit.z), 
                                    BABYLON.Matrix.Identity(), scene.getTransformMatrix(), 
                                    camera.viewport.toGlobal(window.screen.width, window.screen.height));

hpBar.left = `${canvasCoord.x - window.screen.width / 2}px`; = `${canvasCoord.y - window.screen.height / 2}px`;