1 00:00:01,110 --> 00:00:04,170 ‫So now let's set the position of the map 2 00:00:04,170 --> 00:00:06,330 ‫to the currently selected city 3 00:00:06,330 --> 00:00:10,113 ‫and let's also attach an event handler to the map. 4 00:00:11,670 --> 00:00:14,250 ‫Now, thanks to the Query string, 5 00:00:14,250 --> 00:00:16,380 ‫we already have the position 6 00:00:16,380 --> 00:00:19,470 ‫of the current selected city right here. 7 00:00:19,470 --> 00:00:22,170 ‫So remember how previously we did that 8 00:00:22,170 --> 00:00:25,320 ‫where we read the latitude and the longitude 9 00:00:25,320 --> 00:00:28,350 ‫right here from the URL, right? 10 00:00:28,350 --> 00:00:32,730 ‫And so again, we do already have that data right here 11 00:00:32,730 --> 00:00:36,870 ‫so that we can now display the map in that position. 12 00:00:36,870 --> 00:00:41,350 ‫So just to try this out, let's for now, disable disposition 13 00:00:42,390 --> 00:00:46,770 ‫and then simply center on the, 14 00:00:46,770 --> 00:00:49,020 ‫well let's change the names here. 15 00:00:49,020 --> 00:00:51,820 ‫So let's call this one the map latitude 16 00:00:52,830 --> 00:00:56,223 ‫and the map longitude. 17 00:00:57,330 --> 00:00:59,230 ‫And so then let's use them here 18 00:01:03,210 --> 00:01:07,473 ‫Give it a save, and we should probably reload then. 19 00:01:08,340 --> 00:01:12,720 ‫And then indeed our map goes right to Lisbon. 20 00:01:12,720 --> 00:01:16,530 ‫Now, maybe we should have this a bit zoomed out. 21 00:01:16,530 --> 00:01:19,683 ‫So let's try maybe the zoom of six here. 22 00:01:20,910 --> 00:01:21,993 ‫Reload again. 23 00:01:23,370 --> 00:01:25,830 ‫So yeah, that looks a bit nicer. 24 00:01:25,830 --> 00:01:29,040 ‫So indeed this is where Lisbon is. 25 00:01:29,040 --> 00:01:31,290 ‫But watch what happens when we go now back 26 00:01:31,290 --> 00:01:32,913 ‫and select another city. 27 00:01:34,260 --> 00:01:37,950 ‫So you see that a map actually did not move there 28 00:01:37,950 --> 00:01:40,410 ‫and so that's because this center here 29 00:01:40,410 --> 00:01:42,660 ‫is actually not reactive. 30 00:01:42,660 --> 00:01:45,480 ‫So basically when this position here changes 31 00:01:45,480 --> 00:01:47,550 ‫the map will not move there. 32 00:01:47,550 --> 00:01:50,730 ‫And so we need to implement this functionality on our own 33 00:01:50,730 --> 00:01:53,760 ‫within this Leaflet library. 34 00:01:53,760 --> 00:01:57,600 ‫Now in this library, everything works with components. 35 00:01:57,600 --> 00:02:01,110 ‫So whenever we need to implement a functionality like this 36 00:02:01,110 --> 00:02:03,720 ‫we need to create a custom component 37 00:02:03,720 --> 00:02:05,643 ‫and then use that component in here. 38 00:02:07,823 --> 00:02:11,130 ‫So let's create that component right here in this same file 39 00:02:11,130 --> 00:02:13,320 ‫and of course not create a new one 40 00:02:13,320 --> 00:02:18,320 ‫because this will really make part of the map in the end. 41 00:02:18,780 --> 00:02:22,860 ‫So let's call this change center 42 00:02:22,860 --> 00:02:25,680 ‫but it could really be called anything. 43 00:02:25,680 --> 00:02:29,280 ‫So again, this component is our own component. 44 00:02:29,280 --> 00:02:32,760 ‫It's not given to us by Leaflet. 45 00:02:32,760 --> 00:02:37,473 ‫However, what is given to us by Leaflet is the use map hook. 46 00:02:38,550 --> 00:02:41,610 ‫So we need the use map hook 47 00:02:41,610 --> 00:02:43,950 ‫to basically get the current instance 48 00:02:43,950 --> 00:02:46,623 ‫of the map that is currently being displayed. 49 00:02:48,810 --> 00:02:53,280 ‫So we need this map so that now on this map object 50 00:02:53,280 --> 00:02:55,893 ‫we can call the set view. 51 00:02:57,180 --> 00:03:02,180 ‫And so then here, let's receive a position as a prop. 52 00:03:02,790 --> 00:03:06,450 ‫And so then let's set the view to that position 53 00:03:06,450 --> 00:03:09,480 ‫and also to the zoom level of six. 54 00:03:09,480 --> 00:03:12,660 ‫So here we need to place the zoom level 55 00:03:12,660 --> 00:03:16,803 ‫or actually it's apparently optional, so we don't need that. 56 00:03:18,307 --> 00:03:21,090 ‫And then in the end, since this is a component 57 00:03:21,090 --> 00:03:23,313 ‫it needs to return some JSX. 58 00:03:24,690 --> 00:03:28,893 ‫So let's return null, which is completely valid JSX. 59 00:03:30,180 --> 00:03:32,850 ‫So we have our component 60 00:03:32,850 --> 00:03:34,983 ‫and now we can use that right here. 61 00:03:35,850 --> 00:03:40,720 ‫So we just include that here and pass in deposition prop 62 00:03:41,610 --> 00:03:45,990 ‫which is going to be basically this one. 63 00:03:45,990 --> 00:03:50,133 ‫So this array of the current map latitude and longitude. 64 00:03:51,360 --> 00:03:53,550 ‫So this should now fix it. 65 00:03:53,550 --> 00:03:55,833 ‫And you see that it already moved there. 66 00:03:57,090 --> 00:03:58,530 ‫So let's go back. 67 00:03:58,530 --> 00:04:00,460 ‫And now we have a problem 68 00:04:01,320 --> 00:04:04,200 ‫because this map latitude and longitude 69 00:04:04,200 --> 00:04:06,660 ‫now no longer exists, right? 70 00:04:06,660 --> 00:04:08,610 ‫So they are undefined. 71 00:04:08,610 --> 00:04:12,843 ‫And so that's probably what we will read somewhere here. 72 00:04:13,860 --> 00:04:18,573 ‫And yeah, so we cannot read properties of null or, 73 00:04:22,050 --> 00:04:23,610 ‫yeah, so that's what's happening here 74 00:04:23,610 --> 00:04:26,310 ‫in this change center component. 75 00:04:26,310 --> 00:04:27,990 ‫Now, one solution would be 76 00:04:27,990 --> 00:04:30,243 ‫to define some default value here. 77 00:04:31,140 --> 00:04:34,803 ‫So let's say also 40 and zero. 78 00:04:36,390 --> 00:04:39,093 ‫And so let's see what we get then. 79 00:04:39,990 --> 00:04:44,040 ‫Well, now the same problem applies right here. 80 00:04:44,040 --> 00:04:46,590 ‫So let's actually remove this 81 00:04:46,590 --> 00:04:49,473 ‫and get back to the original map position. 82 00:04:50,970 --> 00:04:52,530 ‫So reload that. 83 00:04:52,530 --> 00:04:55,410 ‫And now let's see what happens when I click 84 00:04:55,410 --> 00:04:59,190 ‫and it does move to Lisbon, but now as I click here, 85 00:04:59,190 --> 00:05:00,630 ‫watch what happens. 86 00:05:00,630 --> 00:05:03,510 ‫So it goes back to that original position 87 00:05:03,510 --> 00:05:05,583 ‫and so that's really not what we want. 88 00:05:07,170 --> 00:05:09,360 ‫So now we go to Berlin, and again, 89 00:05:09,360 --> 00:05:12,330 ‫as we go back it will move back here 90 00:05:12,330 --> 00:05:16,410 ‫but in the original application, that's not what happens. 91 00:05:16,410 --> 00:05:18,870 ‫So let's say we move here to Paris, 92 00:05:18,870 --> 00:05:21,570 ‫and then as we go back it stays there, 93 00:05:21,570 --> 00:05:24,720 ‫which is a lot nicer user experience. 94 00:05:24,720 --> 00:05:27,180 ‫So basically we want our map component 95 00:05:27,180 --> 00:05:31,470 ‫to remember this latitude and longitude over time. 96 00:05:31,470 --> 00:05:33,000 ‫And so that's the reason 97 00:05:33,000 --> 00:05:36,960 ‫why we created a state variable here in the very beginning. 98 00:05:36,960 --> 00:05:39,450 ‫So this map position right here. 99 00:05:39,450 --> 00:05:42,120 ‫So this is where we will want to remember 100 00:05:42,120 --> 00:05:44,880 ‫this map longitude and latitude. 101 00:05:44,880 --> 00:05:48,900 ‫And so we now need to synchronize the two of them. 102 00:05:48,900 --> 00:05:51,513 ‫So let's use an effect for that, 103 00:05:55,620 --> 00:05:56,910 ‫just like this. 104 00:05:56,910 --> 00:06:00,960 ‫And this one should then run whenever one of them changes. 105 00:06:00,960 --> 00:06:05,960 ‫So if the map latitude or the map longitude changes 106 00:06:06,810 --> 00:06:11,253 ‫then what we will want to do is to set a new position. 107 00:06:12,480 --> 00:06:17,430 ‫So set map position, and then again an array 108 00:06:17,430 --> 00:06:21,993 ‫with the current map latitude and map longitude. 109 00:06:23,610 --> 00:06:26,220 ‫And this of course can only happen 110 00:06:26,220 --> 00:06:29,100 ‫if these values actually exist. 111 00:06:29,100 --> 00:06:31,060 ‫So let's check that here first 112 00:06:33,660 --> 00:06:38,400 ‫and map longitude now, right? 113 00:06:38,400 --> 00:06:42,450 ‫And so now with this we synced our map position state 114 00:06:42,450 --> 00:06:45,000 ‫with the current latitude and longitude 115 00:06:45,000 --> 00:06:46,950 ‫as it comes from the URL. 116 00:06:46,950 --> 00:06:49,350 ‫And so that value will then be remembered 117 00:06:49,350 --> 00:06:52,140 ‫even as we move back to our lists 118 00:06:52,140 --> 00:06:56,310 ‫when the latitude and longitude then disappear from the URL. 119 00:06:56,310 --> 00:07:00,420 ‫And so with this, the map should then no longer move around. 120 00:07:00,420 --> 00:07:01,503 ‫So let's check that. 121 00:07:02,460 --> 00:07:05,073 ‫So as I go to Lisbon and then go back, 122 00:07:06,300 --> 00:07:08,100 ‫well, that's still jumping, 123 00:07:08,100 --> 00:07:12,750 ‫but it is because we are not using the correct values 124 00:07:12,750 --> 00:07:13,743 ‫down here yet. 125 00:07:15,450 --> 00:07:17,640 ‫So I got scared there for a second 126 00:07:17,640 --> 00:07:21,063 ‫but this should solve it. 127 00:07:22,350 --> 00:07:24,930 ‫So here we also no longer need that 128 00:07:24,930 --> 00:07:26,523 ‫and we also don't need this. 129 00:07:28,560 --> 00:07:30,513 ‫And so let's try again. 130 00:07:31,380 --> 00:07:34,830 ‫So hopefully this time we won't be deceived 131 00:07:34,830 --> 00:07:37,560 ‫and nice so it stays there, 132 00:07:37,560 --> 00:07:40,770 ‫but then as we click it moves to another city. 133 00:07:40,770 --> 00:07:43,860 ‫And so now our component remembers 134 00:07:43,860 --> 00:07:47,130 ‫basically the previous URL that we had. 135 00:07:47,130 --> 00:07:48,030 ‫Nice. 136 00:07:48,030 --> 00:07:51,630 ‫So this really is not only about including the map, 137 00:07:51,630 --> 00:07:55,980 ‫but again, to also learn about this very important hook 138 00:07:55,980 --> 00:07:58,320 ‫which we need from time to time. 139 00:07:58,320 --> 00:08:01,530 ‫So here it is to synchronize again, two systems 140 00:08:01,530 --> 00:08:03,060 ‫which is why I said earlier 141 00:08:03,060 --> 00:08:06,873 ‫that useEffect is mostly a synchronization mechanism. 142 00:08:08,070 --> 00:08:10,770 ‫All right, so that part is done. 143 00:08:10,770 --> 00:08:13,770 ‫And now let's quickly also implement that feature 144 00:08:13,770 --> 00:08:17,883 ‫that opens the form whenever we click somewhere on the map. 145 00:08:19,920 --> 00:08:23,880 ‫So that is not as easy as just handling 146 00:08:23,880 --> 00:08:27,030 ‫or as just adding here the on click prop. 147 00:08:27,030 --> 00:08:29,070 ‫So that doesn't exist here. 148 00:08:29,070 --> 00:08:31,260 ‫So once again this is a feature 149 00:08:31,260 --> 00:08:33,420 ‫that we need to implement on our own. 150 00:08:33,420 --> 00:08:37,143 ‫And so we need to create yet another custom component here. 151 00:08:39,570 --> 00:08:40,970 ‫So let's call this one here. 152 00:08:42,990 --> 00:08:45,513 ‫Detect click for example. 153 00:08:46,650 --> 00:08:49,080 ‫And then here we need to use another one 154 00:08:49,080 --> 00:08:53,160 ‫of the React Leaflet libraries custom hooks. 155 00:08:53,160 --> 00:08:57,063 ‫And this one is called use map events. 156 00:08:58,680 --> 00:09:00,930 ‫And this one we don't save anywhere, 157 00:09:00,930 --> 00:09:03,240 ‫but instead we pass in an object 158 00:09:03,240 --> 00:09:05,490 ‫where we can define a few properties 159 00:09:05,490 --> 00:09:07,620 ‫for different type of events. 160 00:09:07,620 --> 00:09:11,010 ‫And one of them is the click event. 161 00:09:11,010 --> 00:09:13,350 ‫So this is a bit of a weird syntax 162 00:09:13,350 --> 00:09:16,290 ‫or a bit of a weird way of doing things 163 00:09:16,290 --> 00:09:19,650 ‫but this is just how it works in this library. 164 00:09:19,650 --> 00:09:22,410 ‫And so here we specify a callback function 165 00:09:22,410 --> 00:09:26,400 ‫which gets the current event 166 00:09:26,400 --> 00:09:28,740 ‫and then we can do something here. 167 00:09:28,740 --> 00:09:31,440 ‫So what do we want to do actually? 168 00:09:31,440 --> 00:09:35,700 ‫Well, we want to navigate to the form, right? 169 00:09:35,700 --> 00:09:40,700 ‫And so let's actually get this navigate hook from here 170 00:09:41,910 --> 00:09:43,770 ‫and place that here, 171 00:09:43,770 --> 00:09:47,160 ‫because now we want to programmatically navigate 172 00:09:47,160 --> 00:09:52,160 ‫to the form URL, so the form path. 173 00:09:54,420 --> 00:09:56,493 ‫So just like this for now. 174 00:09:57,990 --> 00:10:00,580 ‫And so let's now check this 175 00:10:02,280 --> 00:10:04,653 ‫by also including that component here. 176 00:10:05,610 --> 00:10:10,610 ‫So detect, click, and let's see, nice. 177 00:10:13,800 --> 00:10:16,263 ‫So that's just what we were looking for. 178 00:10:17,310 --> 00:10:19,860 ‫Now when we add this new city 179 00:10:19,860 --> 00:10:22,170 ‫we will then create a new city object 180 00:10:22,170 --> 00:10:25,920 ‫which we want to contain that position, right? 181 00:10:25,920 --> 00:10:28,590 ‫So just like the objects that we already have 182 00:10:28,590 --> 00:10:32,280 ‫the new city object will also need to have the position. 183 00:10:32,280 --> 00:10:34,530 ‫And so this means that we need to give 184 00:10:34,530 --> 00:10:37,230 ‫this form component here, also access 185 00:10:37,230 --> 00:10:40,503 ‫to the position where they click on the form occurred. 186 00:10:41,370 --> 00:10:43,710 ‫So how can we do that? 187 00:10:43,710 --> 00:10:48,120 ‫Well, let's once again leverage the power of the URL here 188 00:10:48,120 --> 00:10:51,930 ‫and basically just store that state in the URL. 189 00:10:51,930 --> 00:10:55,710 ‫So as we click here, we can navigate to the form 190 00:10:55,710 --> 00:10:58,140 ‫with the latitude and longitude 191 00:10:58,140 --> 00:11:00,510 ‫set to wherever the click happened. 192 00:11:00,510 --> 00:11:02,430 ‫And so then inside the form 193 00:11:02,430 --> 00:11:05,610 ‫we can easily read that data from the URL 194 00:11:05,610 --> 00:11:09,390 ‫just like we did also in the map component already. 195 00:11:09,390 --> 00:11:11,430 ‫So exactly the same thing. 196 00:11:11,430 --> 00:11:13,020 ‫So basically using, again, 197 00:11:13,020 --> 00:11:17,760 ‫this kind of global state to pass data between pages. 198 00:11:17,760 --> 00:11:18,840 ‫So without this, 199 00:11:18,840 --> 00:11:22,170 ‫we would have to create some global state variable 200 00:11:22,170 --> 00:11:25,380 ‫where we would temporarily store that position 201 00:11:25,380 --> 00:11:27,570 ‫which would be a lot more work 202 00:11:27,570 --> 00:11:29,883 ‫than simply storing it in the URL. 203 00:11:30,720 --> 00:11:32,490 ‫So let's quickly do that. 204 00:11:32,490 --> 00:11:36,630 ‫And to do that, I will just quickly take a look 205 00:11:36,630 --> 00:11:39,093 ‫at the event object that we get here. 206 00:11:40,830 --> 00:11:43,470 ‫So let's say we click somewhere here. 207 00:11:43,470 --> 00:11:48,470 ‫And so let's see, yeah, here is the special part. 208 00:11:50,490 --> 00:11:53,790 ‫So here we have the LATLNG property 209 00:11:53,790 --> 00:11:57,660 ‫which gives us exactly the position that has been clicked. 210 00:11:57,660 --> 00:11:59,910 ‫So if we click somewhere else 211 00:11:59,910 --> 00:12:02,417 ‫then we will get something different, right? 212 00:12:06,240 --> 00:12:09,480 ‫So this is of course not the native event object 213 00:12:09,480 --> 00:12:12,450 ‫that is created by the dome or by React, 214 00:12:12,450 --> 00:12:14,310 ‫but instead this is really coming 215 00:12:14,310 --> 00:12:15,753 ‫from the Leaflet library. 216 00:12:16,860 --> 00:12:20,910 ‫And so let's now then build again a Query string 217 00:12:20,910 --> 00:12:25,440 ‫so that we can then read that data later in the form. 218 00:12:25,440 --> 00:12:30,440 ‫So here we want event, dot, let's see the name again. 219 00:12:31,560 --> 00:12:34,188 ‫LATLNG all in one. 220 00:12:34,188 --> 00:12:37,803 ‫LATLNG and then dot lat. 221 00:12:39,960 --> 00:12:43,233 ‫Okay, then another one, which is LNG, 222 00:12:44,750 --> 00:12:48,367 ‫and then E dot LATLNG dot LNG. 223 00:12:50,100 --> 00:12:53,310 ‫Okay, looks a bit confusing, 224 00:12:53,310 --> 00:12:58,230 ‫but yeah it actually isn't so confusing. 225 00:12:58,230 --> 00:13:01,533 ‫So let's get rid of these curly braces again. 226 00:13:02,760 --> 00:13:06,210 ‫And so as we click now again here 227 00:13:06,210 --> 00:13:10,800 ‫then we get that data here right into our URL. 228 00:13:10,800 --> 00:13:12,390 ‫Great. 229 00:13:12,390 --> 00:13:15,570 ‫Now we're not going to read that data into the form yet, 230 00:13:15,570 --> 00:13:16,530 ‫but we will do that 231 00:13:16,530 --> 00:13:20,310 ‫once we start actually working with this form. 232 00:13:20,310 --> 00:13:24,450 ‫For now, we just edit these two interactions to our form. 233 00:13:24,450 --> 00:13:28,800 ‫So first, the interaction where we can move the map around 234 00:13:28,800 --> 00:13:31,140 ‫as we click here on different cities. 235 00:13:31,140 --> 00:13:34,320 ‫And then second, we can now interact with the map 236 00:13:34,320 --> 00:13:35,553 ‫by clicking on it.