Search code examples
reactjsgpsmapboxmapbox-gl

Calculate user proximity to map marker

What is an easy way to calculate a user's proximity to map marker, I tried using the following functions, but I don't think this is optimal.

  const userLatitudeIsWithinRadious = (collectible: any, userCords: any) =>
    collectible.latitude + 0.01 > userCords.latitude &&
    collectible.latitude - 0.01 < userCords.latitude;

  const userLongitudeIsWithinRadious = (collectible: any, userCords: any) =>
    collectible.longitude - 0.001 <=
    userCords.longitude >=
    collectible.longitude + 0.001

I'm using react-map-gl as a React wrapper for mapbox, so I'm not sure if there's a specific solution somewhere in the documentations (haven't found it yet.).

Solution

  • I think you can use this npm package to get your answer

    https://www.npmjs.com/package/geolocation-utils

    get the user and map marker coordinates and pass them to "distanceTo()" method in "geolocation-utils" npm package and get the distance

    distanceTo({lat: 51, lon: 4}, {lat: 51.0006, lon: 4.001}) // 96.7928594737802 meters

    There are more methods that you can look into in this package