Plotting a point of interest using latitude and longitude

[edwardcrompton]

I've been trying to work out how to plot a 'point of interest' at a real world geolocation using awe.js. A code example of how this is done would be very useful and greatly appreciated.

[awe-media]

Hi @edwardcrompton you simply need to have the device/camera location and the 'point of interest' locations in the same format (e.g. GPS style WGS84 using latitude, longitude, altitude).

Then you set the awe.pov() position to the device location mapping latitude to x, longitude to y and altitude to z.

If you're not too concerned about accurate scale and just want an AR style experience then you can simply multiply the latitude and longitude values by a large multiplier (e.g. 10,000) to scale up the effective distance between the points of interest and the camera. This should also be related to your near and far settings too.

Alternatively you can calculate the distances between them using a Haversine calculation, and may even want to use this to create your spatial grid.

Of course there's a wide range of other strategies for projecting points like this - it all really depends on your goals and the type of data and locations you're visualising.

Hope that helps.

BTW: We're releasing a new geolocation based app type on https://awe.media next month so you might be interested in checking that out then.

[edwardcrompton]

Thanks for this explanation. That is very useful. I look forward to checking out the geolocation based app when that's up.

[shaneparsons]

@awe-media can you please share a more detailed example of how to add a POI to a set of coordinates, and how to set the POV? I can't find anything useful in the docs.

[awe-media]

Hi @shaneparsons - the comment above is a pretty clear explanation of how to use GPS style coordinates with POIs.

If you just want basic examples of how to set the POI's position then just look at the docs on the repos home page (https://github.com/awe-media/awe.js#example-poisadd-data-structure) or see the position block in any of the example files (see https://github.com/awe-media/awe.js/blob/master/examples/basic/vr.html or any of the other demos in the examples/ directory).

[shaneparsons]

@awe-media All the examples I've seen use simple numbers:

position: { x:0, y:0, z:200 }

I want to do something like:

position: { x:45.348639, y:-80.031394, z:193 }

When trying the above, with multiple locations in relatively close proximity (one to the left of me, one to the right), not only do the projections appear in the wrong place but they are on top of each other. I assumed this is because the POV wasn't set correctly, so I tried something like:

awe.povs.add({ id:'pov', position: { x:this.location.lat, y:this.location.lng, z:193 } });

but that didn't work either.

Can you please point out what's wrong with the example below

awe.pois.add({ id:'beer_store', position: { x:45.348639, y:-80.031394, z:193 } });

awe.projections.add({
  id:'beer_store',
  geometry: { shape:'sphere', radius:10 },
  material: { type:'phong', color:0x387ef5 },
}, { poi_id: 'beer_store'});

// my location
awe.povs.add({ id:'pov', position: { x:45.34909, y:-80.03166, z:193 } });

Also, is there a way to omit the altitude? My current geolocation plugin doesn't return altitude.

[awe-media]

Hi @shaneparsons this is a geometric projection task. The GPS coordinates represent a 2D plane mapped onto a sphere (the earth) with points above it represented as altitude. So really you're talking about a sphere here.

The webgl scene on the other hand is a cartesian grid space with an arbitrary scale - we like to use 1 unit = 1m for awe.media.

Lets walk through the answer we provided above and hopefully that will make things a little clearer for you.

The device/camera location and the 'point of interest' locations [are] in the same format 
(e.g. GPS style WGS84 using latitude, longitude, altitude).

So this gives us an x,y point on a 2D plane that's mapped onto a sphere, and then altitude gives us a point above that along the normal to the surface. If your plugin doesn't provide an altitude then you can simply make sure your pov()'s position.y and your poi's position.y are roughly the same (e.g. 0) and you should be fine.

Then you set the awe.pov() position to the device location mapping latitude to x, 
longitude to y and altitude to z.

In your example above it looks like you're doing this correctly, except you're not scaling the lat/lon. See the next point.

If you're not too concerned about accurate scale and just want an AR style experience 
then you can simply multiply the latitude and longitude values by a large multiplier 
(e.g. 10,000) to scale up the effective distance between the points of interest and 
the camera. This should also be related to your near and far settings too.

The units are arbitrary but the geometry is fixed around the pinhole camera model that almost all 3D engines use. The field of view and the near and far definitions in the scene give the overall scale. If you set the pov and poi to x distances < the near value (e.g. the close clipping plane of the camera or pov) then the poi will either be invisible or right in your face. In your example both x and y are far less than 1 unit apart. Try scaling for a simple AR effect.

Alternatively you can calculate the distances between them using a Haversine calculation, 
and may even want to use this to create your spatial grid.

Of course there's a wide range of other strategies for projecting points like this - it all really 
depends on your goals and the type of data and locations you're visualising.

You might like to look into some of the other projection strategies but each of them is their own discussion and beyond the scope of a bug 8)

[shaneparsons]

Thanks for the detail @awe-media, I appreciate your time.

Just to clarify:

• am I multiplying the POI xy values or the POV xy values?
• what are the near / far values and where are they set?

[awe-media]

Hi @shaneparsons glad to help.

You are basically creating a new "scaled up" coordinate system, so you need to multiply all values if you want them to maintain their general relationship to each other (e.g. both the POI and the POV's x and y values).

For the near and far values - you can access the current values through the pov or camera object.

console.log("NEAR:"+awe.pov().near);
console.log("FAR:"+awe.pov().far);

These define the z axis boundaries for the cameras view frustum. Anything outside that range will be clipped.

You can also set the default values for these when you init your app.

  window.addEventListener('load', function() {
    ...
    window.awe.init({
      ...
      settings: {
        near:1, // put whatever value you need here to make the scale of your scene work for you
        far:10000, // put whatever value you need here to make the scale of your scene work for you
        ...
      },
      ...
    });
  });

[Alan01252]

Hi all.

We had a crack at getting this working today but our understanding of how to do it was still off.

I assumed we'd be able to do this:

Create a pois at a lang/long/z
Create a projection
Set the default camera position to the same lat,long
See the projection.

Then we could move around the scene by just updating the x,y of the default camera but this doesn't display anything.

I feel like I've gone horribly wrong with my understanding somewhere.

Should setting the default camera position x,y,z to 10,10,0 and pois poison to 10,10,-300 achieve the same result as setting the camera position to 0,0,0 and pois to 0,0,-300?

Thanks in advance!

[awe-media]

Hi @Alan01252 - if you try the examples described above for a simple VR or AR demo in the github repos you'll see they do exactly what you describe in your second to last paragraph. These work out of the box https://github.com/awe-media/awe.js/blob/master/examples/basic

Then the rest of the descriptions above should give you everything you need to get this working as the other users here have. But if you need more detailed support please email us at support AT awe.media with some code samples or a link to your project and we'll be happy to help.

[gpanneti]

I'm currently trying to work with latitude / longitude and pois.
@Alan01252 I think you first have to transform you coordinates from GPS (WGS-84) to XYZ (ECEF ?).
It will give you XYZ values.

But be carreful, Y on ECEF is an horizontal axis while Y on AWE seems to be the vertical axis. I think you need to use the ECEF's Y value as the Z coordinate of your poi.

@awe-media Could do confirm that ?

[Dhamu143]

hello @shaneparsons ,

right now i am facing the same problem that you mentioned in your first comment. have you solved this issue?

my current latitude: 20.9667, longitude: 72.9
and with the help of this equation

x=R * Math.cos(lat)*Math.cos(lon);
y=R * Math.cos(lat)*Math.sin(lon);
z=R * Math.sin(lat);
where R=1000

i got X:415.6972852321125 ,Y: 311.68714304769253 , Z:854.4278155054523
so i added these to awe.pov();

awe.povs.add({ id:'pov', position: { x:415.6972852321125, y:311.68714304769253, z:854.4278155054523 } });

my poi is located on latitude:21.188602 and longitude:72.829761 and from that above equation i got
X:583.8416386261581 Y:376.80749852395235 Z:719.1279789178309
then i plot this poi as below

awe.pois.add({ id:'talav', position: { x:58.38416386261581, y:0, z:71.91279789178309} });
awe.projections.add({
id:'train',
geometry: {shape: 'plane', height: 30, width: 50},
rotation: { x:0, y:0, z:0 },
material:{ type: 'phong', color: 0xFFFFFF },
texture: { path: 'ferry.png' },
}, { poi_id: 'talav' });

this POI is currently in left hand side (North East) location but it display in my right hand side(East South) location.

@awe-media is there anything that i am missing here ?
@shaneparsons my equation of calculation of X,Y,Z is correct? if no then correct me.

[shaneparsons]

Hey @Dhamu143 ,

Rather than doing things with sin / cos, I just simply multiplied all values by 10,000. I also had to put the lng value on the z coordinate for the pois to appear in front of me... you may or may not have to do the same.

var scale = 10000;

awe.pois.add({ id:'poi', position: { x: lat * scale, y: 0, z: lng * scale } });

As far as the pov, it seems to use the default pov unless you specify otherwise... Since I didn't know how to do that, I just update the default pov instead of creating a new one.

awe.povs.update({ data: { position: { x: current_lat * scale, y: 0, z: current_lng * scale } }, where: { id: 'default' } });

In the end I still had problems with accuracy / consistancy of the pois, but @awe-media informed me that they have an upcoming update to the gyro / compass functionality that should fix it.

@awe-media any update on when the update's being released?

[gpanneti]

@Dhamu143

I think you should use an ECEF converter as ecef-projector for example instead of:

x=R * Math.cos(lat)*Math.cos(lon);
y=R * Math.cos(lat)*Math.sin(lon);
z=R * Math.sin(lat);
where R=1000

Because the earth is not a perfect sphere.

Once you have it, you can convert a Lat/Lng to better XYZ coords.

I did this and it works like a charm. I'm now navigating through my POI :)

[Dhamu143]

hello @gpanneti with the help of ecef-projector i got X=1752005.5925738232 Y=5694983.182822637 Z=2267952.6459292946 of my current latitude: 20.9667, longitude: 72.9, the x,y,z are in meter
i am not getting my desired resule even i tried all combination with this X,Y,Z

awe.povs.update({ data: { position: { x:17520.055925738232 , y:0, z:56949.83182822637 } }, where: { id: 'default' } });

awe.pois.add({ id:'dk', position: { x:17563.773750123205, y:0, z:56843.89251789216 }, visible: true });

      awe.projections.add({ 
            id:'da', 
            geometry: {shape: 'plane', height: 30, width: 50},
            material:{ type: 'phong', color: 0xFFFFFF }, 
            texture: { path: 'bus.png' },
          }, { poi_id: 'dk' });

do i need convert these XYZ in km ? i do have so much confusion can i have your email id so we can discuss over there please?

[gpanneti]

Hello !
Actually the scene and the ECEF axis are differents.
For example, Y:

• means altitude in the scene
• means an horizontal axis in ECEF

After several research, I finally found how to convert from ECEF coords to scene coords:

scenePosition = {
 x: ecefPosition[0],
 y: 0,
 z: -1 * ecefPosition[1]
}

Enjoy :)

[Dhamu143]

it doesn't work for me. thank you so much for your time. :)

[jacksolutions]

we are trying to do something like this http://www.wikitude.com/external/doc/documentation/4.0/ios/poi.html

we want to show POI in 3d on top of the camera, at a direction/location where it is, not at just any random location in sphere in awe.

all the example that awe is showing have random projections of POI, even if you check the AR demo, in that you have divided the screen with compass points of

north X=0 Z= positive value
south X=0 Z= - negative value
west X= - value Z=0
east Z= + value Z=0
north east X= positive value and Z= positive value
north west X= negative value and Z= positive value
sourt east X= positive value and Z= negative value
sount west X= negative value and Z= negative value

and all the GPS cordinates that we are getting, are all positive, latitude positive and longitude positive,

So all the GPS cordinates that we are putting as POI are all showing in north east direction or you can say in one direction.

so the question is, how we can show POI on specific location of a GPS coordinates so that i can show that POI on exact position on camera of its respective direction.???

we also even tried ECEF projector things but didnt work cause it was also giving us all the positive values, Positive X and positive Y that is equal to Z

Cause Y, we dont need to use, according to AR example as it is 0

this problem is frustrating now and there is no clue, how it will work? what we are missing here?

[awe-media]

Hi all, we have another awe.js release with more examples coming up soon. But in the meantime you can see how the Locative AR and 360°/VR patterns work by setting up a free trial at https://try.awe.media. You'll see that the geolocation and positioning of POIs works fine.

[ScottBeeson]

This is all very confusing to me. Can someone answer some simple questions?

1. Does the ar.html demo use the device GPS?
2. Given awe.pois.add({id: 'north', position: {x: 0, y: 0, z: 200}});, if I kept walking north, would I pass this object and eventually have to turn around and look south to see it?

[awe-media]

Hi @ScottBeeson here's the answers to your question.

1. The examples/basic/ar.html file does NOT use GPS. It's just showing the combination of a "video-see-thru" camera background with the 3D scene overlaid. As mentioned above, if you want to see a full working version that places objects at specified locations that you can walk around then setup a free demo at https://try.awe.media.

2. If you also continually update the virtual camera's position awe.pov().update({ position:{ CONVERTED_CURRENT_LAT_LON_ALT_GOES_HERE }) then yes you can walk around your poi. However, if you never update your pov from it's initial position then no.

[ScottBeeson]

I'd rather not sign up for yet another thing but thanks for the answers. They're perfect.

[ezartech]

I've been following this and similar discussion. Here's an early version of a utility that I created to assist with positioning awe.js pois using gps(lat,lng) or relative polar coords in hybrid-mobile cordova apps: https://github.com/ezartech/AwePoiPositionHelper

[awe-media]

Hi @ezartech thanks for the contribution. I'm sure some people on this thread will use this.

[PraveenAsh]

Hi @awe-media , I've tried the example you liked up in earlier comments.But they seemed to be not working!
Browser go blank and not even camera opens.Is there a prerequisite for this application?please provide demo video of this working example.
Using Google Chrome browser latest on Android.

[ramakrishna-y]

Hi awe-media, I am trying your library to do a proof of concept. Just want to understand that in your basic ar.html example, the y coordinate is always 0. Why is this?
As gpanneti suggested, can I go with
scenePosition = {
x: ecefPosition[0],
y: 0,
z: -1 * ecefPosition[1] which is nothing but y
}

[smth]

Hey. Sorry to slightly repeat the request of others, but does anyone have an example of code to fix a point of interest / projection to a real world location, and allow the user to walk towards, away, around it?

In case that's not clear, for example:
Create a plane on the face of a building. Each corner of the plane matches each corner of the face of the building. If you are standing near the building, you're near the plane; if far away, you're far away.

[jucall]

Has anyone succeeded in putting a point of interest using latitude and longitude? Someone who has been able to resolve this issue, please shares your code. Greetings.

[Dhamu143]

@jucall you can use Angle , from latitude and longitude
check this https://github.com/ezartech/AwePoiPositionHelper

there is also an option for angle.

[awe-media]

This github repos is now focused on supporting the development of apps using awe.js on the awe.media platform. You can still access our older awe.js library as the deprecated branch, however we no longer support that code.