javascript - Representing Points on a Circular Radar Math approach -

javascript - Representing Points on a Circular Radar Math approach -

i coding simple app can show friends around you, not in normal map on circular radar ui:

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

like this, have every users latitude, longitude, , of course of study own beingness center.

i measure distance of every user position them info know lat, longitude , distance me.

for mathematical reasons let's radar 100 pixels radius, can distance them distance me using left or right positioning, in terms of top or bottom gets litte trickier, since seek convert latitude - latitude percentual result , set them on radar... think there maybe improve ways polar cartesian coordinates, im kinda clueless.

is there best approach these types of interfaces or implemented around there?

convert long,lat of points cartesian 3d space coordinates

it conversion spherical -> cartesian 3d space. math behind here. after points (long,lat,alt) became (x,y,z) (0,0,0) center of earth

x axis lat=0,long=0 [rad] y axis lat=0,long=+pi/2 [rad] z axis north xy plane equator

if want more precision handle earth ellipsoid instead of sphere

long = < 0 , +2*pi > [rad] lat = < -pi/2 , +pi/2 > [rad] alt = height 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)

create radar local cartesian coordinate system

basically need obtain 3d vectors x,y,z axises. must perpendicular each other , pointing right direction radar origin point (p0).

you can utilize vector multiplication because creates perpendicular vector multiplicants. direction dependent on order of multiplicants experiment little.

//altitude 1 easy z = p0 //north (chose 1 non zero, resp. bigger avoid accuracy problems) x = (1,0,0) x z // old x axis * height x = (0,1,0) x z // old y axis * height //east easy y = x x z // normalize of them unit vectors x = x / |x| y = y / |y| z = z / |z| // , check if not negative (x,y) // if swap multiplicants or multiply -1 // not forget x computed 2 methods swap right 1 here math behind constructing 4x4 transform matrix here can see on image difference between homogenous 4x4 , direct 3x3 3d transform matrices , math

convert points radar coordinate system

just multiply points radar transform matrix m

q(i) = p(i)*m

so points q(i) local radar

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

so multiply cordinates radar scale

scale = radar_radius/radar_range; radar_radius size of radar on screen in pixels or units of coordinates radar_range max distance radar biggest circle represents [m]

after draw dot radar (swap x,y because utilize x north not y) , can discard points more distant range. can add together 3d radar in old elite adding z coordinate vertical axis (or draw l line)

hope helps little , not much confusing...

javascript google-maps math maps