Help with a code to calculate distance between 2 coordinates using Latitude and Longitude.

Ask the community
,
1

Using the getGeoLocation() I am able to get the coordinates and have them saved on the data collection to tie it in with a users profile. I am currently working on a code to calculate the distance between the logged din user and the profile they are viewing. I am able to display their coordinates and I am having trouble with displaying the distance. I am using the following code right now but it give me an “NaN” value (Not a Number); can someone help me out to understand what I am missing. Thank you. I am thinking that maybe the Input element does not display Numbers since it displays Strings, but how would I got about converting the results of the distance function calculation to a string?

$w . onReady (() => {
let lat1 = $w ( “#userLat” );
let lat2 = $w ( “#profileLat” );
let lon1 = $w ( “#userLong” );
let lon2 = $w ( “#profilelong” );
$w ( “#distanceMiles” ). value = ( distance ( lat1 , lon1 , lat2 , lon2 ) + " Miles" )
});

function distance ( lat1 ,
lat2 , lon1 , lon2 )
{
// degrees to radians.
lon1 = lon1 * Math . PI / 180 ;
lon2 = lon2 * Math . PI / 180 ;
lat1 = lat1 * Math . PI / 180 ;
lat2 = lat2 * Math . PI / 180 ;

    // Haversine formula 
    let  dlon  =  lon2  -  lon1 ; 
    let  dlat  =  lat2  -  lat1 ; 
    let  a  =  Math . pow ( Math . sin ( dlat  /  2 ),  2 ) 
             +  Math . cos ( lat1 ) *  Math . cos ( lat2 ) 
             *  Math . pow ( Math . sin ( dlon  /  2 ), 2 ); 
           
    let  c  =  2  *  Math . asin ( Math . sqrt ( a )); 

    // Radius of earth in miles 
    let  r  =  3956 ; 

    // calculate the result 
    **return** ( c  *  r ); 
}

979×407 12.5 KB

2

The text fields are just that - text , which means that they are NaN . You need to convert them to numbers. Something like this:

let lat1 = Number($w("#userLat"));
3

Hello Yisrael,
Thank you for your response. I tried converting them to Numbers, and I still get the NaN. I played around with also converting the numbers to a String and it didn’t help. Could the Problem actually be in the function distance itself?
just so you can see what I tried; and still not working. Thanks for your patience and your help.

$w . onReady (() => {
let lat1 = Number ( $w ( “#userLat” ))
let lat2 = Number ( $w ( “#profileLat” ))
let lon1 = Number ( $w ( “#userLong” ))
let lon2 = Number ( $w ( “#profilelong” ))
$w ( “#distanceMiles” ). value = distance ( lat1 , lon1 , lat2 , lon2 ).toString()
});

4

@omarnationalfleet assuming they these are input elements, you have to use its value property:

Number($w("#userLat").value)

etc…

5
  • don’t do it when the $w is ready, but when the values are filled out.
    (I don’t know your use case. Maybe on dataset.onReady, maybe onInput).

And if it’s not an input element but a text element, do:
$w.onReady(() => {
$w(‘#dataset1’).onReady(() => {
const lat1 = Number($w(“#userLat”). text )
})
})

6

@jonatandor35 This worked!!! thank you for your help, both you and Yisrael.

7

Here is the Finished code that worked, thanks to the help from @J. D. and @yisrael-wix

function distance ( lat1 , lat2 , lon1 , lon2 )
{
lon1 = lon1 * Math . PI / 180 ;
lon2 = lon2 * Math . PI / 180 ;
lat1 = lat1 * Math . PI / 180 ;
lat2 = lat2 * Math . PI / 180 ;

    **let**  dlon  =  lon2  -  lon1 ; 
    **let**  dlat  =  lat2  -  lat1 ; 
    **let**  a  =  Math . pow ( Math . sin ( dlat  /  2 ),  2 )  
            +  Math . cos ( lat1 ) *  Math . cos ( lat2 )  
            *  Math . pow ( Math . sin ( dlon / 2 ), 2 ); 
           
    **let**  c  =  2  *  Math . asin ( Math . sqrt ( a )); 

    **let**  r  =  3956 ; 

    **return** ( c  *  r ); 

}

$w ( ‘#userDataset’ ). onReady (() => {
const lat1 = Number ( $w ( “#userLat” ). text )
const lat2 = Number ( $w ( “#profileLat” ). text )
const lon1 = Number ( $w ( “#userLong” ). text )
const lon2 = Number ( $w ( “#profilelong” ). text )
$w ( “#distanceMiles” ). text = Math.round ( distance ( lat1 , lat2 , lon1 , lon2 )) + " Miles"
})

8

Still few comments:

  1. the dataset.onReady should be inside: $w.onReady(() => {/here/})
  2. When you pasted it, you missed the final }) . 3. (btw, no need to put the distance function call in parenthesis)