# Convert Lat Long to UTM

I created Plane geometry with earth map texture.
And i want to pin a maker on location with lat, lon.

Any example or code for convert lat lon to xy.

Thank you.

Lat to X:
((90 - lat) / 180) * width

Long to Y:
((180 - lng) / 180) * height

My PlaneGeometry( 400, 200, 32,32 );

And lat lon is, 26.6955048, 100.0288113 Lijiang

When i use your code a marker is wrong position.

You can use UTM-WGS84 converter here.

It works well if youâ€™re not looking for precision (<10m). The closer you are to the edge of any zones, the less accurate it becomes.

If you can share a jsfiddle/codepen snippet I could check whatâ€™s wrong.

What youâ€™re looking for is the specific projection of the map. There are a lot of these,

But Iâ€™d put my guess on Equirectangular, right at the top of the list. Which means youâ€™re probably looking for the reverse transformations, found here,

Of course, there are a lot of constants in there that require some special map skills. Perhaps Mercator is a bit more optimized for your needs, even if it does have some pretty bad deformations. The other question is your x and y coordinates which will need to be scaled between both maps. Make sure youâ€™re not grabbing x, y, z coordinates, you need the x-y coordinates of the map itself in two dimensions and scaled the same as the projection demands.

I think this should do the trick - tried it out on a number of locations and found that because we are centered around a latitude and longitude of 0, 0, we should be able to to just use a linear transformation between the coordinates. Everything else was just a matter of testing where the x and y locations were on that map. Admittedly, if you perform any transformations on the map, you will also need to do transformations on the position of the point as well. Iâ€™ve included a few comments that might help, though. You can probably also clean up a few of those equations by simplifying them.

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

var axesHelper = new THREE.AxesHelper(50);

var material = new THREE.MeshBasicMaterial( {map: texture, side: THREE.DoubleSide} );

var geometry = new THREE.PlaneGeometry( 400, 200, 32,32 );
var map = new THREE.Mesh( geometry, material );

var geometry = new THREE.SphereGeometry( 1, 10, 10 );
var material = new THREE.MeshBasicMaterial( {color: 0xffff00} );
var sphere_marker = new THREE.Mesh( geometry, material );

//Let's try Sydney Australia
let latitude = -33.8688; //North-South
let longitude = 151.2093; //East-West

//Remember that latitude goes between -90 degrees and +90 degrees
let normalizedLatitude = 2.0 * (((latitude + 90.0) / 180.0) - 0.5);
//Longitude goes between -180 and +180 on the other hand
let normalizedLongitude = 2.0 * (((longitude + 180.0) / 360.0) - 0.5);

//Our bounds along the x-axis are -200, to 200
//and along the x-axis are -100 to 100.
let x_location = normalizedLongitude * 200.0;
let y_location = normalizedLatitude * 100.0;
sphere_marker.position.set(x_location, y_location, 0.0);

camera.position.z = 200;

var animate = function () {
requestAnimationFrame( animate );
renderer.render( scene, camera );
};

animate();
5 Likes

Thank you !

Welcome