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
$near operator 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
$near operator 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.
MongoDB Atlas can be used for FREE with a M0 sized cluster. Deploy MongoDB in minutes within the MongoDB Cloud.
In addition to Realm being pointed at the Atlas cluster, anonymous authentication for the Realm application should be enabled and an access rule should be defined for the collection. All users should be able to read all documents for this tutorial.
In this example, Mapbox is a third-party service for showing interactive map tiles. An account is necessary and an access token to be used for development should be obtained. You can learn how in the Mapbox documentation.
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
location field makes up a GeoJSON feature, which follows a specific format. The name field, while useful isn't an absolute requirement. Some other optional fields might include an address field, 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
location field is being classified as a 2dsphere for 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
location field 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
map placeholder component which will show our map, and it is lightly styled with CSS.Within the
<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.
The
currentLocationMarker will represent a mock of our location and the placesMarkers will 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
$near operation 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
load event listener and change it to the following:Each marker returned from the
getPointsOfInterest function 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
getPointsOfInterest function a bit further by having a find operation like the following:Notice that in the above code we're saying that the
location has to be near our point and the name has 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
$near operator 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.