Jump to content

Positioning geographic coordinates to model


Recommended Posts

Hi, I need help in the following problem:

I am working on a GIS solution and my objective is to create an automation system that accepts an array of coordinates (lat\lng) and outputs a maquette. i.e; I am adding a virtual 3d dimension to the array of points (lat\lng). The problem is when plotting the geographic coordinates array, the result looks like a one point because it's geographic and the distance on earth is very small. What I want is a way to plot the geographic coordinates on the world space but outputs a real corresponding 3d geometry. 



here is the array of lats-lngs:

[50.030462313669034, 26.467167212377877],
[50.03022756277145, 26.467086619328583],
[50.03012167613479, 26.467340955119003],
[50.03035641750763, 26.46742153925565],
[50.030462313669034, 26.467167212377877]



Note that the difference between the first X and the second X is very small that equals => 0.00023 that when plotting it on BABYLON space looks if the first and second point are the same.

I have tried a lot of mathematical normalization ways, to fix this but in vain.

"my only condition is to preserve the ratio of objects positions".

If any mate can help or suggests a solution. I would be very grateful. Thanks in advance.




Link to comment
Share on other sites

hi @m.ali

hi you can try that  : https://www.babylonjs-playground.com/#4E3KJK#2

It comes from BING map API. Works like a charm.


var levelOfDetail = 18 //between 1 and 22 give your lat long in pixel in map tile. You can use that 
//to got some correct 2d value for positionning your object
// 1 is 782715170 meters/pixel
// 22 is 0.0373 meter/pixel
// 18 p1.subtract(p2) give me something like (-15,68) , you can work with that
// 20 more precise give (-60 , 272) .

var a=   LatLongToPixelXY(50.030462313669034, 26.467167212377877,levelOfDetail) ; 
var b =  LatLongToPixelXY(50.03022756277145, 26.467086619328583,levelOfDetail) ; 
console.log(b.subtract(a)) ; 

var  clip = function (n, minValue, maxValue) {
        return Math.min(Math.max(n, minValue), maxValue);

     var  mapSize = function(levelOfDetail) {
        return 256 << levelOfDetail;

var MinLatitude = -85.05112878;
var MaxLatitude = 85.05112878;
var MinLongitude = -180;
var MaxLongitude = 180;

 var LatLongToPixelXY=function(latitude, longitude, levelOfDetail) {

        latitude = clip(latitude, MinLatitude, MaxLatitude);
        longitude = clip(longitude, MinLongitude, MaxLongitude);

        var x = (longitude + 180) / 360;
        var sinLatitude = Math.sin(latitude * Math.PI / 180);
        var y = 0.5 - Math.log((1 + sinLatitude) / (1 - sinLatitude)) / (4 * Math.PI);

        var mapsize = mapSize(levelOfDetail);
        var pixelX = clip(x * mapsize + 0.5, 0, mapsize - 1);
        var pixelY = clip(y * mapsize + 0.5, 0, mapsize - 1);
        console.log("x",pixelX) ;
        console.log("y",pixelY) ;
        console.log("____________") ;
        return new BABYLON.Vector2(pixelX, pixelY);



Link to comment
Share on other sites

Thanks @Samuel Girardin

But it is actually does not work, I tell you why => 
The code you wrote converts geographic coordinates into screen point coordinates 
and this results points that when plotting them they look like if the 4 points are the same point. 
You can examine it yourself. Use this online tool https://technology.cpm.org/general/3dgraph/ to plot the resulted points and watch it yourself. Thanks in advance
Link to comment
Share on other sites


2 hours ago, max123 said:

Just a thought: if coordinates a so close, can't you simply discard integers and a couple of floating values and deal with remaining values?
50.030462313669034 -> 4.6
50.03022756277145 -> 2.3


1 hour ago, m.ali said:


Thanks. But It does not work. I have tried it before, and this actually results distortions.


The idea of looking at what is happening several decimal places in is sound. However just throwing away the leading figures will not work as you could be disregarding different quantities each time. You need to subtract a consistent quantity each time before scaling up.



Link to comment
Share on other sites

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.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...