# Representation UTM coordinates in canvas

## Recommended Posts

Hi, it is my first post in this forum because I have a question with no answer. I have to draw differents spheres which represent the location of some cities (coordinates UTM). Firstly I have done the conversion to x,y pixels on screen. However after apply the ecuations the sphere doesnt appear, so the question is: which is the reference system that BabylonJS uses?

If I define the positon of sphere for example position.x=8, it appear in the limit of screen.What is the meaning of the value 8?

Thanks,

JuanMa.

##### Share on other sites

please have a look at this old topic :

then everything depends on the distance between your spheres and the camera

##### Share on other sites

ok, but how can I draw this image where each city has a spatial relation with others? I have theirs UTM coordinates and i have to draw this map in canvas using Babylonjs. For me, the real position on screen is very important so if i consider that my canvas is 800*800, this image must be scaled to this size and the cities(black point) should be represented in their good place.

Thanks.

##### Share on other sites

Some initial thoughts.

1. The map is not square so scaling to fit 800 x 800 is going to distort the map.
2. Set a ground that has the same proportions of the map.
3. Use the map as a texture for the ground.
4. Knowing the UTM coordinates for the west and east edges of the map and the north and south edges of the map scale the coordinates to fit width and height of map.
5. Knowing origin of ground is at its centre translate scaled coordinates as appropriate.
6. Create spheres and position as wanted using calculated coordinates.
7. Set camera in a good position to view map and spheres.

Try out in a playground and if still having difficulties ask again. Forum members are always happy to edit a playground to help.

##### Share on other sites

Hi, I have tried to do the steps that you said and i have found the next problems:

1. This image has this size: (764*739 pixels) How can I set a ground with the same proportion if his width and height are units(no pixels).

2. When I converse the UTM coordinates to the screen, I have a random position. Cities that I have to draw in map are:

London,England: latitude->-01257;Longitude->51.508

London,Ontario: latitude->-81.233;Longitude->42.983

East London, SA: latitude->27.91162491;Longitude->-33.01529

This is the operation:

var X = 5; //This value must be 764 pixels
var Y = 3; //This value must be 739 pixels

var x1 = X + (("<?php echo \$puntos[0]->x;?>" * X) / 180)
var y1 = Y - (("<?php echo \$puntos[0]->y;?>" * Y) / 180)

To sum up, my problem is to translate the UTM coordinates to the correct positon over the ground. Their properties are:

//Ground (764*739)
var ground = BABYLON.Mesh.CreateGround("ground", 7.5, 7, 1, scene);
var material = new BABYLON.StandardMaterial("mapa", scene);
material.diffuseTexture = new BABYLON.Texture("textures/mapa.png", scene);
material.backFaceCulling = false;
ground.material = material;
ground.rotation.x = -Math.PI/2;

Thanks.

JuanMa J.R.

##### Share on other sites

Have you created a playground? If you have can you add a link it makes it a lot easier to help you. Even if the ground is blank we could work with the figures you have included. Well done on what you have done so far.

You can make the width of the ground 764 and its height 739 and put the camera further away.

Still need UTM coordinates for edges of the map.

##### Share on other sites

Perhaps this will help get you started http://www.babylonjs-playground.com/#SQIFZ#1

##### Share on other sites

I can`t create playground because I have a connection with postgres database where I have the UTM coordinates. As you can see, the relation spatial of spheres which represent Ontario(Canada), London(England) and East London(South America) are correct. However, the position are not good because the coordinates are not scaled to the size of ground. I have seen your playground and I dont understand the value of  theese variables:

var utmTop = 1787;
var utmBottom = 309;
var utmLeft = 562;
var utmRight = 2090;

JuanMa J.R

##### Share on other sites

The numbers were just ones I made up

utmTop should be the latitude of all the places at the top of the map. utmBottom the latitude of those at the bottom.

utmLeft should be the longitude of all the places on the left of the map, utmRight the longitude of all places on the right of the map.

##### Share on other sites

Thanks, I got it.

## Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

×   Pasted as rich text.   Paste as plain text instead

Only 75 emoji are allowed.