‫So now let's set the position of the map
‫to the currently selected city
‫and let's also attach an event handler to the map.
‫Now, thanks to the Query string,
‫we already have the position
‫of the current selected city right here.
‫So remember how previously we did that
‫where we read the latitude and the longitude
‫right here from the URL, right?
‫And so again, we do already have that data right here
‫so that we can now display the map in that position.
‫So just to try this out, let's for now, disable disposition
‫and then simply center on the,
‫well let's change the names here.
‫So let's call this one the map latitude
‫and the map longitude.
‫And so then let's use them here
‫Give it a save, and we should probably reload then.
‫And then indeed our map goes right to Lisbon.
‫Now, maybe we should have this a bit zoomed out.
‫So let's try maybe the zoom of six here.
‫Reload again.
‫So yeah, that looks a bit nicer.
‫So indeed this is where Lisbon is.
‫But watch what happens when we go now back
‫and select another city.
‫So you see that a map actually did not move there
‫and so that's because this center here
‫is actually not reactive.
‫So basically when this position here changes
‫the map will not move there.
‫And so we need to implement this functionality on our own
‫within this Leaflet library.
‫Now in this library, everything works with components.
‫So whenever we need to implement a functionality like this
‫we need to create a custom component
‫and then use that component in here.
‫So let's create that component right here in this same file
‫and of course not create a new one
‫because this will really make part of the map in the end.
‫So let's call this change center
‫but it could really be called anything.
‫So again, this component is our own component.
‫It's not given to us by Leaflet.
‫However, what is given to us by Leaflet is the use map hook.
‫So we need the use map hook
‫to basically get the current instance
‫of the map that is currently being displayed.
‫So we need this map so that now on this map object
‫we can call the set view.
‫And so then here, let's receive a position as a prop.
‫And so then let's set the view to that position
‫and also to the zoom level of six.
‫So here we need to place the zoom level
‫or actually it's apparently optional, so we don't need that.
‫And then in the end, since this is a component
‫it needs to return some JSX.
‫So let's return null, which is completely valid JSX.
‫So we have our component
‫and now we can use that right here.
‫So we just include that here and pass in deposition prop
‫which is going to be basically this one.
‫So this array of the current map latitude and longitude.
‫So this should now fix it.
‫And you see that it already moved there.
‫So let's go back.
‫And now we have a problem
‫because this map latitude and longitude
‫now no longer exists, right?
‫So they are undefined.
‫And so that's probably what we will read somewhere here.
‫And yeah, so we cannot read properties of null or,
‫yeah, so that's what's happening here
‫in this change center component.
‫Now, one solution would be
‫to define some default value here.
‫So let's say also 40 and zero.
‫And so let's see what we get then.
‫Well, now the same problem applies right here.
‫So let's actually remove this
‫and get back to the original map position.
‫So reload that.
‫And now let's see what happens when I click
‫and it does move to Lisbon, but now as I click here,
‫watch what happens.
‫So it goes back to that original position
‫and so that's really not what we want.
‫So now we go to Berlin, and again,
‫as we go back it will move back here
‫but in the original application, that's not what happens.
‫So let's say we move here to Paris,
‫and then as we go back it stays there,
‫which is a lot nicer user experience.
‫So basically we want our map component
‫to remember this latitude and longitude over time.
‫And so that's the reason
‫why we created a state variable here in the very beginning.
‫So this map position right here.
‫So this is where we will want to remember
‫this map longitude and latitude.
‫And so we now need to synchronize the two of them.
‫So let's use an effect for that,
‫just like this.
‫And this one should then run whenever one of them changes.
‫So if the map latitude or the map longitude changes
‫then what we will want to do is to set a new position.
‫So set map position, and then again an array
‫with the current map latitude and map longitude.
‫And this of course can only happen
‫if these values actually exist.
‫So let's check that here first
‫and map longitude now, right?
‫And so now with this we synced our map position state
‫with the current latitude and longitude
‫as it comes from the URL.
‫And so that value will then be remembered
‫even as we move back to our lists
‫when the latitude and longitude then disappear from the URL.
‫And so with this, the map should then no longer move around.
‫So let's check that.
‫So as I go to Lisbon and then go back,
‫well, that's still jumping,
‫but it is because we are not using the correct values
‫down here yet.
‫So I got scared there for a second
‫but this should solve it.
‫So here we also no longer need that
‫and we also don't need this.
‫And so let's try again.
‫So hopefully this time we won't be deceived
‫and nice so it stays there,
‫but then as we click it moves to another city.
‫And so now our component remembers
‫basically the previous URL that we had.
‫Nice.
‫So this really is not only about including the map,
‫but again, to also learn about this very important hook
‫which we need from time to time.
‫So here it is to synchronize again, two systems
‫which is why I said earlier
‫that useEffect is mostly a synchronization mechanism.
‫All right, so that part is done.
‫And now let's quickly also implement that feature
‫that opens the form whenever we click somewhere on the map.
‫So that is not as easy as just handling
‫or as just adding here the on click prop.
‫So that doesn't exist here.
‫So once again this is a feature
‫that we need to implement on our own.
‫And so we need to create yet another custom component here.
‫So let's call this one here.
‫Detect click for example.
‫And then here we need to use another one
‫of the React Leaflet libraries custom hooks.
‫And this one is called use map events.
‫And this one we don't save anywhere,
‫but instead we pass in an object
‫where we can define a few properties
‫for different type of events.
‫And one of them is the click event.
‫So this is a bit of a weird syntax
‫or a bit of a weird way of doing things
‫but this is just how it works in this library.
‫And so here we specify a callback function
‫which gets the current event
‫and then we can do something here.
‫So what do we want to do actually?
‫Well, we want to navigate to the form, right?
‫And so let's actually get this navigate hook from here
‫and place that here,
‫because now we want to programmatically navigate
‫to the form URL, so the form path.
‫So just like this for now.
‫And so let's now check this
‫by also including that component here.
‫So detect, click, and let's see, nice.
‫So that's just what we were looking for.
‫Now when we add this new city
‫we will then create a new city object
‫which we want to contain that position, right?
‫So just like the objects that we already have
‫the new city object will also need to have the position.
‫And so this means that we need to give
‫this form component here, also access
‫to the position where they click on the form occurred.
‫So how can we do that?
‫Well, let's once again leverage the power of the URL here
‫and basically just store that state in the URL.
‫So as we click here, we can navigate to the form
‫with the latitude and longitude
‫set to wherever the click happened.
‫And so then inside the form
‫we can easily read that data from the URL
‫just like we did also in the map component already.
‫So exactly the same thing.
‫So basically using, again,
‫this kind of global state to pass data between pages.
‫So without this,
‫we would have to create some global state variable
‫where we would temporarily store that position
‫which would be a lot more work
‫than simply storing it in the URL.
‫So let's quickly do that.
‫And to do that, I will just quickly take a look
‫at the event object that we get here.
‫So let's say we click somewhere here.
‫And so let's see, yeah, here is the special part.
‫So here we have the LATLNG property
‫which gives us exactly the position that has been clicked.
‫So if we click somewhere else
‫then we will get something different, right?
‫So this is of course not the native event object
‫that is created by the dome or by React,
‫but instead this is really coming
‫from the Leaflet library.
‫And so let's now then build again a Query string
‫so that we can then read that data later in the form.
‫So here we want event, dot, let's see the name again.
‫LATLNG all in one.
‫LATLNG and then dot lat.
‫Okay, then another one, which is LNG,
‫and then E dot LATLNG dot LNG.
‫Okay, looks a bit confusing,
‫but yeah it actually isn't so confusing.
‫So let's get rid of these curly braces again.
‫And so as we click now again here
‫then we get that data here right into our URL.
‫Great.
‫Now we're not going to read that data into the form yet,
‫but we will do that
‫once we start actually working with this form.
‫For now, we just edit these two interactions to our form.
‫So first, the interaction where we can move the map around
‫as we click here on different cities.
‫And then second, we can now interact with the map
‫by clicking on it.