Geocoding using the Mapbox API and Directus Automate

Speaker 0: Alright. Here we are in a brand new Directus project. Now, in this episode of uncharted territory, I'm gonna show you how to build an application that autocompletes addresses and automatically retrieves GeoJSON data using the Mapbox API. Now, in order to go through this project, you will need to sign up for a free Mapbox account and get an API key. So, let's create our collection for this project.

Now, this application is going to contain a collection of cafes complete with their address, location, and rating. So, finish the setup. And let's build our first field. The first field is going to be an autocomplete input for the address. Now to work with autocomplete inputs in Directus, we need to have a URL to query for the list of results.

This is going to take the shape of our URL. This is going to come directly from the Mapbox API. So we've got our URL, and our first query parameter is the value. You can notice here in the curly brackets, this is going to come from what we type into the autocomplete input field. The next query parameter is our access token.

The results path here is the array or list of results. From the Mapbox API, I know this to be features. Next, we're going to set the text path and the value path. Now the text path is going to be what is displayed for our users. This is properties dot full underscore address.

Again, this comes directly from the Mapbox API. And for the value path, that is what we're going to store in our collection, it's going to be the same thing. Properties. Full address. Wonderful.

Well, guess what? We're ready to save that and try it out. Let's go over to our content and create a new item. We're gonna look up one of my favorite cafes, Cafe Mozart in Vienna. I know that sounds typical.

And I know the address to be Albertina Platz 2 Or 2. So here we go. Perfect. And we can see that it autocompletes, gives us suggestions, and now I can go ahead and save that. But before I do that, I would actually like this to save on a map or retrieve its geolocation data.

So, I'm not actually gonna save this cafe because next, I want to save the location. Let's go over to our collection again and add the remaining two fields. First is the rating, which is a slider. I'm gonna call it rating, minimum value zero, maximum value five, and the step interval is going to be one. Fantastic.

Next, we're going to add a map field. We'll call it location. In another episode of uncharted territory, we covered the different types of geolocation data. Check it out. For this, we're going to save the raw JSON data.

Perfect. Let's go ahead and save that. Now, my aim is to have Directus automatically set the location when I add the address. And, we're going to do this using flows. Flows allow me to automate different aspects of my Directus project.

We don't have any flows in our Directus project yet, so we're gonna add our first one. And this one's going to be called geolocate cafe. We're going to set up a trigger for it, which is an event hook. This is going to be a filter type, which means that it will block, as in the action that we take, in this case, creating a new cafe or editing a cafe, is going to be blocked until this flow completes. We'll choose filter type.

The scope will be for creating an item and updating an item because we want to automatically get that geolocation when we create or edit a cafe. Speaking of which, our collection is going to be cafes. The response body is going to be the data of the last operation. Let's go ahead and save that setup. And now we're ready to work on our flow.

So let's go ahead and add our first operation. In order for this flow to run, we want to make sure that the address has been set. So it's going to be a condition. That is, we're going to make sure that the address was submitted. Let's write in our condition.

We're going to make sure that our flows trigger data, which contains a payload of data. We want to make sure that the payload of data contains an address. Not just contains an address, but we wanna make sure that it has been submitted, that is, that the payload of data we're submitting contains an address. So, we wanna make sure that the address has been submitted here. We'll go ahead and save that.

And now, we have a condition. As you can see, it splits off in two directions. Great. Let's add the operations that take place if the address has been set. This is called the happy path.

Now for this, we're going to make a web request or webhook operation. And it's going to go to the Mapbox API and request the geolocation data of the cafe given an address. So in the URL field, I'm going to paste in my request. So let's have a look here. Using the Mapbox API, we're going to have two query parameters.

First is the address itself. So you can see here, we're retrieving using the curly bracket syntax the trigger's payload's address. So we're using the address that was submitted when we created our cafe item. Next, we're adding as a second query parameter, our access token. And that's it.

Next, we're going to add in an operation for when this web request was successful. And we're going to use the run scripts operation. So we're going to replace the contents of the script with my own one. And what we're doing here is returning an object that is going to be saved to the database. Now you'll see that it contains the payload itself, that is the data of the cafe when we created it, as well as the location, which is now going to be saved into this item, into this cafe, with the data from that web request.

So, data dot dollar sign last, which is the data that came in from that last operation, which was the web request. And then, using our knowledge of the Mapbox API, we go into data, the first feature, that is the first result, dot geometry. And this is GeoJSON data, which Directus understands and recognizes. So we'll go ahead and save that. Great.

So we're almost done. The last thing we need to do is implement the unhappy path of what happens if no address has been set. Because if we create a cafe without an address, this flow will still run. And because it errors out, the cafe will not be created with any data. So we will add an operation here for what happens if the address has not been set.

We don't want our data to be lost. So we're going to add a transform payload operation and leave the data as is. That is, we will return only what has been given to us. That is, the trigger's payload. That is, which data the user has entered when creating a cafe.

So we'll save that operation, and we're done with our flow. So I'm gonna save that flow, and we if I go back, we can see our flow is active and we're ready to take it out for a spin. Great. So we have our cafe here. We'll give it a default rating of five because I love the cafe Mozart.

Now we're going to set the address, Albertina Platz 5 Or 2 for the Cafe Mozart. Now, let's go ahead and save our cafe. Now, we can see a location was indeed saved. Now, wouldn't it be exciting to see what that is? So, let's go ahead and click on our item, our cafe, and we can see look at that.

Look at that. We scroll in. Venus, you know, German for Vienna. Scroll, scroll, scroll. Look at that.

It's the cafe Mozart. How exciting. In another episode of uncharted territory, you can also see how to use different layouts to display your data. Check it out. Now we can always see here our cafe Mozart.

But this isn't very exciting, is it? Let's use the display item for the address. Much better. So that's how you can use geolocation data using the Mapbox API to automate your usage of geolocation data using Directus. See you next time.