javascript - Representing Points on a Circular Radar Math approach

Question

I am coding a simple app that can show you what friends are around you, but not in the normal map but on a really circular radar like UI:

(http://i.imgur.com/9Epw0Xh.png)

Like this, where i have every users latitude, longitude, and of course my own being the center.

I also measure the distance of every user to position them so the data I know is their lat, longitude and distance to me.

For mathematical reasons let's say the radar is 100 pixels radius, I can distance them by the distance from me using the left or right positioning, but in terms of top or bottom it gets a litte trickier, since i try to convert their latitude - my latitude into a percentual result and then put them on the radar... but I think there are maybe better ways with polar to cartesian coordinates, but im really kinda clueless.

Is there a best approach with these types of interfaces or anything implemented around there?

Answer 1

1. convert long,lat of all points to cartesian 3D space coordinates

   it is conversion spherical -> cartesian 3D space. Math behind is here. After this all points (long,lat,alt) will became (x,y,z) where (0,0,0) is center of the Earth

   • X axis is lat=0,long=0 [rad]
   • Y axis is lat=0,long=+PI/2 [rad]
   • Z axis is North
   • XY plane is equator

   

   If you want more precision handle Earth as ellipsoid instead of sphere

   long = <     0 , +2*PI > [rad]
   lat  = < -PI/2 , +PI/2 > [rad]
   alt  = altitude above sea level [m]
   Re =6378141.4; [m]
   Rp =6356755.0; [m]
   
   R=alt+sqrt( (Re*cos(lat))^2 + (Rp*sin(lat))^2 )
   x=R*cos(lat)*cos(long)
   y=R*cos(lat)*sin(long)
   z=R*sin(lat)
   

2. create RADAR local cartesian coordinate system

   

   Basically you need to obtain 3D vectors for X,Y,Z axises. They must be perpendicular to each other and pointing to the right direction from RADAR origin point (P0).

   You can use vector multiplication for that because it creates perpendicular vector to its multiplicants. Direction is dependent on the order of multiplicants so experiment a little.

   //altitude this one is easy
   Z = P0
   //north (chose one that is non zero, resp. bigger to avoid accuracy problems)
   X = (1,0,0) x Z // old X axis * Altitude
   X = (0,1,0) x Z // old Y axis * Altitude
   //east is now also easy
   Y = X x Z 
   // now normalize all of them to unit vectors
   X = X / |X|
   Y = Y / |Y|
   Z = Z / |Z|
   // and check if they are not negative (X,Y)
   // if they are then swap multiplicants or multiply by -1
   // do not forget that X is computed by two methods so swap the correct one
   

   • here is math behind constructing an 4x4 transform matrix
   • here you can see on an image difference between homogenous 4x4 and direct 3x3 3D transform matrices and math

3. convert all points to RADAR coordinate system

   just multiply all points by RADAR transform matrix M

   Q(i) = P(i)*M
   

   so the points Q(i) are now local to RADAR

   • (0,0,0) means radar origin (center)
   • (1,0,0) points to north
   • (0,1,0) points to east
   • (0,0,1) points up

   so now just multiply all cordinates by RADAR scale

   scale = RADAR_radius/RADAR_range;
   

   • RADAR_radius is size of you RADAR on screen in pixels or units of coordinates
   • RADAR_range is the max distance the RADAR biggest circle represents [m]

   after this just draw the dot to RADAR (swap x,y because I use X as North not Y) and also you can discard all points that are more distant then range. Also you can add 3D RADAR like in old Elite by adding Z coordinate to vertical axis (or draw an L line)

   

Hope it helps a little and was not too much confusing...