Use Geolocation API to Calculate Distance Between Users (Rails/React JS)

For my final project at Flatiron school I decided to create a basic dating application similar to Tinder or Hinge. I wanted the app’s location feature to operate in a similar way to Tinder’s location feature. After scouring the internet for ways to accomplish this, I discovered that using MDN’s Geolocation combined with a formula to calculate distance was the simplest way.

It’s easy to get overwhelmed when presented with so many Geolocation APIs/services. One major factor that should influence your decision is the type of device you’re developing your application for. If you’re creating an application for IOS or Android devices, Google Maps could be a great option for you. As for web applications, the MDN Geolocation API seems to be the easiest option with decent accuracy when retrieving location data. My dating app is a web app, so I opted for this API.

The way that the Geolocation API works is that it asks the client for permission to access their location, and if they approve, the API retrieves the client’s GPS coordinates for you. We can access the API through its navigator.geolocation object.

We use a conditional statement to check if 'geolocation' is in navigator. This sends a prompt to the client, asking them for permission to access their location. If it returns true (they grant permission), then we call the getCurrentPosition() method, which sends a request to detect their location. We pass the argument of position, and log the properties of coords.latitude and coords.longitude to the console. Great!

In my case, I needed to persist these coordinates to the my Rails backend, so I could save them to my database for later comparison between two User objects. To do this I implemented useState , setting the position.coords.latitude and position.coords.longitude to 2 seperate pieces of state. Be sure to first place import {useState} from 'react'; at the top of your component where your other imports are.

Now let’s make a POST request to our Rails backend, sending our latitude and longitude values in the body of the request. Be sure to add columns for latitude and longitude to your Users table in Rails. Make sure to set the datatype to float when adding these columns. The integer datatype will shorten the number you send, thus it won’t store the actual coordinates.

I made the fetch request to my users/:id path, and sent a PATCH method to update the user that I pass in. The user in this path is the user that’s currently logged in. This user in state is then passed down as prop to my Browse component. From Browse.js, I use useEffect to retrieve all other users stored in my database, and set them to the allUsers state.

Then in your return, you simply display the users with {displayUsers}.

Now that I have the other users along with the current user, I can pass them along to my BrowseCard.js, where I can access each of their latitude and longitude values to compare.

To calculate the distance with a ‘as the crow flies’ mentality, versus driving distance, I used the Haversine formula. This is a simple way of getting the distance between two points, and satisfied my need for getting an approximate distance between two users of a dating app. I didn’t want either of them to know the other’s exact location, so it worked for this purpose. However if you intend to calculate a more precise distance for your application, when integrating a map in your app for example; using something like Google Maps might work better for you.

I’ve added a showDistance piece of state, which is initially set to false. Within my getDistance() function, I set setShowDistance to true. This will determine when the distance is displayed in my return statement.

Now all that’s left is to call our getDistance() function, passing in the logged in user’s lat and lon attributes with the otherUser's lat and lon attributes. I implemented a button to call getDistance() on its click.

We then ask if showDistance is present with this ternary statement, and if it is, we display the distance, else we show nothing (null). And there you have it! We can now calculate the distance between two users, and display that distance with a button click.