[Solved] How do I find/add Map Markers Nearest to the User (Haversine formula)

Questions about Thunkable Maps
1

I am trying to make it so the map in my app only loads markers within a 50 mile radius of the user’s current location. (I am saving the map marker latitudes and longitudes to Airtable.) Is this possible? If so, how would I go about coding this?

2

In the simplest case, you need to calculate the distance between two markers. if it is less than the specified radius, then output the marker.

You can also view the API for working with maps that already have a function for determining the distance between two coordinates on the map

3

Okay, thank you! Could you direct me to a Thunkable app that utilizes a function that determines the distance between two coordinates?

4

See this app! I am working on videos and polishing the app currently but can answer questions via dm

1 Like
5

Here is a general page on the calculations. Then you can use Thunkable’s math functions.

1 Like
6

That is a good suggestion @drted, did you check out the app I linked to above? it demonstrates how to tie into a backend that does the work for you. It does search in radius and loads markers within a set radius of the user. all the phone does is send the query and load the markers!

Haversine is good. but iit only tells you distance. you’d have to do this for each point on the map, right?

function haversineDistance(coords1, coords2, isMiles) {
  function toRad(x) {
    return x * Math.PI / 180;
  }

  var lon1 = coords1[0];
  var lat1 = coords1[1];

  var lon2 = coords2[0];
  var lat2 = coords2[1];

  var R = 6371; // km

  var x1 = lat2 - lat1;
  var dLat = toRad(x1);
  var x2 = lon2 - lon1;
  var dLon = toRad(x2)
  var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
    Math.cos(toRad(lat1)) * Math.cos(toRad(lat2)) *
    Math.sin(dLon / 2) * Math.sin(dLon / 2);
  var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
  var d = R * c;

  if(isMiles) d /= 1.60934;

  return d;
}
1 Like
7

jared, yes the backendless WebAPI is super slick and MUCH easier than “Rolling your own” solution. Sometimes it is nice (and FUN!) to do it yourself. Doing it within thunkable does have the advantage of reducing external dependencies. Thunkable has enough of those that we have all felt the pain of a third party modification changing thunkable behavior breaking our apps. :wink:

2 Likes
8

Thanks @jared and @drted! I’ll play around with these methods.

9

In gratitude to your tip and commitment with the community, following the function ported in to Thunkable blocks:

Captura de tela de 2022-06-17 01-04-36
Captura de tela de 2022-06-17 01-04-36959×540 61.3 KB

Regards,

Paulo Vaz

3 Likes
10

I wanted to share a fun solultion that I created for another project

https://us-central1-scorecard-x.cloudfunctions.net/returnDistance?long1=45&lat1=-83&long2=22&lat2=-40&miles=true

You can feed it the lat and long for both location 1 and 2, true/false for returning miles or KM. this will return an object that has the distance!

Quick and easy. each response takes apx 44 seconds when the function is warm. If you are doing a 1 off calculation, it takes about a second.

i also replicated it in cloudflare for fun. always faster than the one above

2 Likes
11

Jared, it’s been a while. Working under a new account name right now instead of Hhuman. I wonder if you can reshare this app project that ties into a backend since that link has expired already. Thanks beforehand. PEace

1 Like
12

Hey Hey Jared,

Thanks for sending the page. But yes it looks expired.

13

Yooooo @cresto.pgaxq2

What do you mean?

This is working

14

Thanks

Is it the response from the webpage (3013.8516790252716)?

Thanks

Using more backendless, “which used before”

I see code in there from Paulo

15

yessir.

you’d need to swap out the lat longs in the url and decide on km or miles with the true/false flag at the end