Representation UTM coordinates in canvas

[juanmajr93]

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.

[jerome]

please have a look at this old topic : 

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

[juanmajr93]

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.

[JohnK]

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.

[juanmajr93]

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.

 

[JohnK]

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.

[JohnK]

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

[juanmajr93]

Thanks JohnK by your fast answers. This link is the access to my project. http://217.217.131.1:8081/ 

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

 

 

[JohnK]

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.

[juanmajr93]

Thanks, I got it.