By Devisetty Charmi, Katta Lasya, Veeramaneni Sruthi, Yasa Sowmya
During the creation of GiveBridge, a platform for local donations whereby donors list particular items for receivers to get, we ran into a fundamental question: how can a receiver find donations nearby?
City name search is effective but not enough. Someone in a big city can see an item listed in his “city” which is located 30 km from him. Therefore, we positioned ourselves to create a location-based search functionality. The following is our approach to create it using MERN stack.
Step 1: Storing the geographical position in the GeoJSON format.
In this case, we've created a property in the Mongoose schema that represents the geographical position of the donation. However, the usual blunder here is mixing up the order of coordinates; in GeoJSON, the latitude must be indicated after the longitude.
Step 2: Create a 2d sphere index
Simply storing coordinates is insufficient. To ensure efficient distance queries, you would need to have a geospatial index created.
donationSchema.index({ location: "2dsphere" });
If there is no geospatial index created, MongoDB will not allow you to run $near queries.
Step 3: Distance Search
When a user chooses 5, 10, 25, or 50 km for assistance, frontend will send user’s coordinates and selected radius. Backend performs the following query:
Step 4: The Process of Getting User Location in React Development.
The geolocation API supported by your browser makes it possible for you to know the exact location coordinates of the user. We only request this when the user clicks the button to get his location. This approach adheres to the user’s privacy requirements since such situation does not require an unanticipated prompt.
Step 5: Presenting on a Map
We used Leaflet together with React Leaflet and OpenStreetMap. Every donated item represented on the map serves as a marker displaying a short description and a request button for the item. The visual representation of donations on the map provides a feeling of legitimacy to the service which a regular list could not provide.
The bug that educated me the most:
In the beginning, donations were recorded with empty coordinate data, landing them automatically at [zero, zero] in the ocean near West Africa. They were considered validated but were never displayed properly on the map and could not be found using distance searching.
The solution was put in place on the donor side: a “use my location” button in the charity’s donation form, which allows the site to record actual coordinates at the time of creating a listing. Old records, in contrast, with the coordinates of [0, 0] still cannot be accurately represented, so one of the future improvements will involve geocoding the city and area to fill the gap.
Tips for Other Programmers
- Keep in mind that longitude should be specified before latitude. It is a bug that can cost an hour of yours.
- Make the sphere index at an earlier stage; there is no point in waiting till your queries fail.
- Do not count on silent defaults. For instance, the default [0,0] could be hiding the bad data for a lengthy period of time.
- Use different approaches in combination; we utilized both city and area text filters in addition to the distance search as not all users want to reveal their real location.
To sum up, location-aware search enhanced GiveBridge’s functionality, transforming it from a basic provider of information into a platform that enables the interaction of users in proximity to one another. The use of MongoDB makes all this possible: a combination of a GeoJSON field, an index and a query operator is enough for conducting proximity searches making no use of other solutions.
If the type of application you’re developing requires matching users using their place of residence, location-based approach should be considered.
