# Real-Time Location Updates with MongoDB Stitch, Change Streams, and Mapbox

>
>
>Please note: This article discusses Stitch. Stitch is now MongoDB Realm. All the same features and functionality, now with a new name. Learn more here. We will be updating this article in due course.

When it comes to modern web applications, interactions often need to be done in real-time. This means that instead of periodically checking in for changes, watching or listening for changes often makes more sense.

Take the example of tracking something on a map. When it comes to package shipments, device tracking, or anything else where you need to know the real-time location, watching for those changes in location is great. Imagine needing to know where your fleet is so that you can dispatch them to a nearby incident?

When it comes to MongoDB, watching for changes can be done through change streams. These change streams can be used in any of the drivers, including front-end applications with MongoDB Stitch.

In this tutorial, we're going to leverage MongoDB Stitch change streams. When the location data in our NoSQL documents change, we're going to update the information on an interactive map powered by Mapbox.

Take the following animated image for example:

Rather than building an Internet of Things (IoT) device to track and submit GPS data, we're going to simulate the experience by directly changing our documents in MongoDB. When the update operations are complete, the front-end application with the interactive map is watching for those changes and responding appropriately.

## The Requirements

To be successful with this example, you'll need to have a few things ready to go prior:

-   A MongoDB Atlas cluster
-   A MongoDB Stitch application
-   A Mapbox account

For this example, the data will exist in MongoDB Atlas. Since we're planning on interacting with our data using a front-end application, we'll be using MongoDB Stitch. A Stitch application should be created within the MongoDB Cloud and connected to the MongoDB Atlas cluster prior to exploring this tutorial.

>Get started with MongoDB Atlas and Stitch for FREE in the MongoDB Cloud.

Mapbox will be used as our interactive map. Since Mapbox is a service, you'll need to have created an account and have access to your access token.

In the animated image, I'm using the MongoDB Visual Studio Code plugin for interacting with the documents in my collection. You can do the same or use another tool such as Compass, the CLI, or the data explorer within Atlas to get the job done.

## Understanding the Document Model for the Location Tracking Example

Because we're only planning on moving a marker around on a map, the data model that we use doesn't need to be extravagant. For this example, the following is more than acceptable:

``` json
{
    "_id": "5ec44f70fa59d66ba0dd93ae",
    "coordinates": [
        -121.4252,
        37.7397
    ],
    "username": "nraboy"
}
```

In the above example, the coordinates array has the first item representing the longitude and the second item representing the latitude. We're including a username to show that we are going to watch for changes based on a particular document field. In a polished application, all users probably wouldn't be watching for changes for all documents. Instead they'd probably be watching for changes of documents that belong to them.

While we could put authorization rules in place for users to access certain documents, it is out of the scope of this example. Instead, we're going to mock it.

## Building a Real-Time Location Tracking Application with Mapbox and the Stitch SDK

Now we're going to build our client-facing application which consists of Mapbox, some basic HTML and JavaScript, and MongoDB Stitch.

Let's start by adding the following boilerplate code:

``` xml

    
    
    

    
        
        
    

```

The above code sets us up by including the Mapbox and MongoDB Stitch SDKs. When it comes to querying MongoDB and interacting with the map, we're going to be doing that from within the `