‫Next up, let's display one marker and pop up
‫for each of our cities.
‫So, that means that we now need to get access
‫to the cities, here in this map component, right?
‫Well, for that, we thankfully have now our global state.
‫So, the state that is living inside our context
‫which is easily made available
‫to every single component that we wanted.
‫And so, now we want it here.
‫So, we want to read cities out of the city's context
‫And so, we use our custom hook called useCities.
‫Alright, and so this is the power of having global state.
‫Whenever you need a piece of state, you just grab it,
‫and there it is.
‫You don't have to pass any props.
‫And yeah, it's really easy like this and really helpful.
‫And so, now, of course, we don't want a marker here,
‫just in this fixed position,
‫but, instead, we want one marker for each city object.
‫So, we're, basically, just going to loop over
‫that cities array and display one of these for each.
‫Now, before we can do that,
‫we should go, first, to our data and clean it up a bit,
‫'cause remember how we copied two of them,
‫so, these last two here,
‫and so, they have exactly the same coordinates
‫as the other ones, so that we don't want.
‫So, only these three.
‫Now, notice, again,
‫that each of them has the position property,
‫and then, in there, we have lat and lng.
‫And so, now, we are going to use this position, here,
‫to display one marker for each of them.
‫So, let's, actually, leave this code here,
‫so we don't have to write it again.
‫But, of course, we now need to enter JavaScript mode
‫so that we can loop over this array.
‫And then we want exactly to render a marker
‫for the city object.
‫So, where does this end?
‫Right here?
‫But, of course, now, we need to change the position, here.
‫So, right now, it seems like we got multiple at this point,
‫so we have all that shadow,
‫but, of course, now, we need to change this.
‫And so, just like the center prop,
‫here, in the map container,
‫this position prop expects an array.
‫So, an array of the latitude first and then the longitude.
‫And so, that is at city position.
‫So, just as we saw, earlier, .let,
‫and then the longitude is similar at position .lng.
‫Now, here, we will also need a key.
‫A key, and so, let's just use city.id.
‫Now, okay, now that marker is gone from there
‫but hopefully it is close by, in Madrid.
‫So, and yes, nice.
‫There it is.
‫So, it corresponds to this city, right here.
‫Let's just reload to get rid of those other cities.
‫And...
‫yeah, so we have one marker, here, in Madrid
‫another one in Lisbon for this.
‫And then, finally, of course, there will be one in Berlin.
‫Nice, so that worked.
‫Now, if we zoom in and then click,
‫we, of course, get this pop-up
‫but it still has this generic text.
‫And so, now, we're going to do something
‫a bit more customizable.
‫Now, notice how this pop-up, here,
‫has some styles applied to it.
‫And so, that's because, when we inspect here,
‫we can see that this pop-up, actually, gets a few classes
‫that leaflet puts there.
‫And so, I'm using those classes, here, in the CSS module,
‫to style some things about the pop-up.
‫So, all of this, right here.
‫And so, if you build your own application with a map,
‫you can just grab these styles if you want.
‫So, we're styling the wrapper here,
‫then the content itself, and then, also, the tip.
‫So, that triangle, there.
‫And so, there's a lot of different things to style.
‫And notice how, here, again, we need to use this trick
‫of making this global so that CSS modules
‫then doesn't attach any of these random strings
‫to our classes because then they would not map
‫to the classes that leaflet exports.
‫Now, right?
‫But anyway, let's now customize, or text, in here.
‫And here, really, we can have any content that we want.
‫So, let's place the emoji in a span
‫and then the city in a span.
‫So, city.emoji
‫and then another span element with city.cityName.
‫And yeah, nice.
‫So, we're making great progress here.
‫And yeah, the next thing that we want to do
‫is that when we click, here, on one of these cities,
‫then it should not only open the city component, here,
‫but it should also move to that position on the map.
‫So, basically, we will want
‫to update our map position state, here.
‫And so, again, let's leave that for the next lecture.