Georeferencing map - best practice

Questions
1

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:

image
image1908×869 198 KB

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.

2

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`;
hpBar.top = `${canvasCoord.y - window.screen.height / 2}px`;
2 Likes