Using the Map Layout in Directus

Speaker 0: Hey there. Carmen here from Directus. Let's look at how to use the map layout with geospatial data. Here we are in a brand new Directus project.

Speaker 1: Let's go ahead and create a brand new collection. This is going to be for my road trips I'm gonna go ahead and click on next

Speaker 0: and leave all of these fields blank now the collection is created but I don't have any fields yet This collection is gonna have two fields. One for the date when my journey started and a map field for all of the places I visited. Go ahead and click on create field and then on date time. Now,

Speaker 1: the key for the date time is gonna be just date and the type is gonna be a date.

Speaker 0: Save that. And next, I'm gonna create another field of type map called places.

Speaker 1: Now in another episode of uncharted territory, we explore the different types of map fields. For this one, I'm gonna go ahead and pick line string. That's because I want to save a series of places that I visited during a road trip. I'm gonna go ahead and save that.

Speaker 0: Now my collection is ready to go. Let's add some data. I'm gonna go ahead and click on create item, set my date to be the beginning of this month,

Speaker 1: and my first trip is gonna be along Chile.

Speaker 0: We start at Antofagasta, go down to Atacama, move along down to Valparaiso, that's where I'm from, and next to Santiago, the capital,

Speaker 1: do a stopover at Temuco. And let's go ahead and make our next stop be, How about the aisle of Chile?

Speaker 0: We'll end our road trip over at Puerto Mont. Great. That's done. I'm going to go ahead and save that. Now, by default, when we look at our map data, it looks like a collection of coordinates.

Not ideal. Let's add one more road trip before we do something about it. Gonna click on create item. My next trip is gonna be the previous month, start of February,

Speaker 1: and it's gonna take place in Europe. Let's go ahead and start in Vienna, capital of Austria. That's where I live.

Speaker 0: Let's go over to Graz then to Klagenfurt.

Speaker 1: Then how about Ljubljana in Slovenia, which I'm told is beautiful, down to Zagreb in Croatia, and we'll end

Speaker 0: in Belgrade in Serbia.

Speaker 1: Fantastic. Let's go ahead and save that. And once again, collection of coordinates.

Speaker 0: Now, let's talk about layouts. In Directus, we can use layouts to display our data in different ways. Calendar cards, which look like this. We've got Kanban, which is currently empty. Calendar for our we could use our dates for that.

But

Speaker 1: we're gonna use the map layout. And here, we can see our road trips show up.

Speaker 0: We can see our trip from Chile from March 2. And up here, we can see our road trip from February 2.

Speaker 1: Over here, we can use see our base map, which is set by default to open street map, our geospatial field, which if we have more than one, we can set it accordingly, and our display template. And what's cool about this is we can write it however we like. How about road trip from space and then we can pick it and then we can pick a date and check it out. Now it says road trip from 02/02/2025.

Speaker 0: Furthermore, if

Speaker 1: we go back to our settings and we change our dates display to be relative,

Speaker 0: Check this out.

Speaker 1: Let's set our layout to be the map again, road trip from,

Speaker 0: and now we can see we have

Speaker 1: a road trip from about one month ago. So that's the use of the map layout in Directus.