Searching for Nearby Points of Interest with MongoDB and Mapbox
Rate this tutorial
When it comes to location data, MongoDB's ability to work with GeoJSON through geospatial queries is often under-appreciated. Being able to query for intersecting or nearby coordinates while maintaining performance is functionality a lot of organizations are looking for.
Take the example of maintaining a list of business locations or even a fleet of vehicles. Knowing where these locations are, relative to a particular position isn't an easy task when doing it manually.
In this tutorial we're going to explore the
$nearoperator within a MongoDB Realm application to find stored points of interest within a particular proximity to a position. These points of interest will be rendered on a map using the Mapbox service.
To get a better idea of what we're going to accomplish, take the following animated image for example:
We're going to pre-load our MongoDB database with a few points of interest that are formatted using the GeoJSON specification. When clicking around on the map, we're going to use the
$nearoperator to find new points of interest that are within range of the marker.
There are numerous components that must be accounted for to be successful with this tutorial:
- A MongoDB Atlas free tier cluster or better to store the data.
- A MongoDB Realm application to access the data from a client-facing application.
- A Mapbox free tier account or better to render the data on a map.
The assumption is that MongoDB Atlas has been properly configured and that MongoDB Realm is using the MongoDB Atlas cluster.
Before diving into geospatial queries and creating an interactive client-facing application, a moment should be taken to understand the data and indexes that must be created within MongoDB.
Take the following example document:
Let's assume that documents that follow the above data model exist in a location_services database and a points_of_interest collection.
To be successful with our queries, we only need to store the location type and the coordinates. This
locationfield makes up a feature, which follows a specific format. The
namefield, while useful isn't an absolute requirement. Some other optional fields might include an
hours_of_operation, or similar.
Before being able to execute the geospatial queries that we want, we need to create a special index.
The following index should be created:
The above index can be created numerous ways, for example, you can create it using the MongoDB shell, Atlas, Compass, and a few other ways. Just note that the
locationfield is being classified as a
2dspherefor the index.
With the index created, we can execute a query like the following:
Notice in the above example, we're looking for documents that have a
locationfield within 2,500 meters of the point provided in the filter.
With an idea of how the data looks and how the data can be accessed, let's work towards creating a functional application.
Like previously mentioned, you should already have a Mapbox account and MongoDB Realm should already be configured.
On your computer, create an index.html file with the following boilerplate code:
In the above code, we're including both the Mapbox library as well as the MongoDB Realm SDK. We're creating a
mapplaceholder component which will show our map, and it is lightly styled with CSS.
<script>tags, we can initialize a few things with the following lines of code:
In the above code we're telling both MongoDB Realm and Mapbox which tokens to use. We're also defining some basic configuration information for our map and which database to use for Realm.
currentLocationMarkerwill represent a mock of our location and the
placesMarkerswill represent any nearby points of interest.
It should be noted, that we haven't yet connected to MongoDB in our code. We want to wait until the map is ready, so we have to make use of event listeners.
Take the following code for example:
When the map is considered ready, we do anonymous authentication to MongoDB Realm and we add our current location to the map as a marker. When the map is loaded, we're also going to want to find any points of interest near our marker. This is where our geospatial query comes into play.
Outside of the event listener, create the following function:
Most of the function should look familiar. We're accepting a position array and using it within the
$nearoperation of the query. The results of the query are loaded into an array and the results are then transformed into map markers that include a popup. The popup will show the name information for the point of interest.
With the above function in place, we can go back into the
loadevent listener and change it to the following:
Each marker returned from the
getPointsOfInterestfunction will be added to the map.
This is great, but we can take it a step further by interacting with the map and continuously doing queries based on our new location. Let's add another event listener:
When the map is double clicked, the marker location is updated, all previous markers are removed, and new points of interest are queried for.
Want to search for specific points of interest that might be nearby? You can take your
getPointsOfInterestfunction a bit further by having a
findoperation like the following:
Notice that in the above code we're saying that the
locationhas to be near our point and the
namehas to be Target. The odds of having multiple Target stores within our range is slim, but imagine if Starbucks was used, or if your example included different kinds of data.
You just saw how to use the
$nearoperator to potentially find points of interest with geospatial queries in MongoDB. To make this example more exciting, we rendered our results on a map using Mapbox, and linked the client-facing Mapbox application to our database with MongoDB Realm.