WEBVTT 1 00:00:01.460 --> 00:00:04.500 So in this video we're gonna display a marker 2 00:00:04.500 --> 00:00:07.240 wherever we click on the map. 3 00:00:07.240 --> 00:00:09.940 And for that we are gonna use one more time, 4 00:00:09.940 --> 00:00:11.653 the leaflet library. 5 00:00:13.380 --> 00:00:17.060 And just to make sure that we're following the right path 6 00:00:17.060 --> 00:00:21.840 according to our flow chart here, let's take a look at it. 7 00:00:21.840 --> 00:00:24.770 And so indeed when the page loads, 8 00:00:24.770 --> 00:00:26.970 then we get to current location. 9 00:00:26.970 --> 00:00:30.750 So the coordinates of that, and then after that is done 10 00:00:30.750 --> 00:00:34.170 the map is rendered in the current location. 11 00:00:34.170 --> 00:00:36.220 And so now what we're gonna do next 12 00:00:36.220 --> 00:00:38.320 is to bind an event handler, 13 00:00:38.320 --> 00:00:41.100 so that whenever the user clicks on the map, 14 00:00:41.100 --> 00:00:44.340 we can then display a marker on the map. 15 00:00:44.340 --> 00:00:47.400 So for now we're gonna jump this one and this one, 16 00:00:47.400 --> 00:00:49.670 and continue working with the map. 17 00:00:49.670 --> 00:00:53.060 And so we're gonna basically render a workout on the map, 18 00:00:53.060 --> 00:00:54.870 which is not yet a workout, 19 00:00:54.870 --> 00:00:59.140 but we're simply gonna put a pin or a marker on the map 20 00:00:59.140 --> 00:01:00.870 and then later we can replace that 21 00:01:00.870 --> 00:01:03.543 with the data coming from the workout. 22 00:01:04.920 --> 00:01:06.360 All right? 23 00:01:06.360 --> 00:01:07.723 So let's go do that. 24 00:01:08.570 --> 00:01:10.840 And the first thing that we need to do 25 00:01:10.840 --> 00:01:13.860 is to actually add the event handler to the map 26 00:01:13.860 --> 00:01:17.170 so that we can then handle any incoming clicks. 27 00:01:17.170 --> 00:01:19.163 Now, how are we gonna do that? 28 00:01:20.210 --> 00:01:23.460 I mean, should we simply attach an event listener 29 00:01:23.460 --> 00:01:26.160 to this whole map element here? 30 00:01:26.160 --> 00:01:29.450 That wouldn't really work because then we would have no way 31 00:01:29.450 --> 00:01:34.060 of knowing where exactly the user clicked here on the map. 32 00:01:34.060 --> 00:01:36.820 So basically we would have no way of knowing 33 00:01:36.820 --> 00:01:39.799 the GPS coordinates of whatever location 34 00:01:39.799 --> 00:01:42.660 the user clicked here on the map. 35 00:01:42.660 --> 00:01:47.290 Because that is data that only the map knows, right? 36 00:01:47.290 --> 00:01:50.860 So when I click, let's say here where I am right now, 37 00:01:50.860 --> 00:01:54.680 then I want to handle that click exactly at that position. 38 00:01:54.680 --> 00:01:58.000 And so therefore we need access to the coordinates 39 00:01:58.000 --> 00:02:00.780 of the point that was just clicked. 40 00:02:00.780 --> 00:02:03.180 So in summary, what I'm trying to say 41 00:02:03.180 --> 00:02:07.230 is that we cannot simply use the add event listener method 42 00:02:07.230 --> 00:02:09.360 that we have been using all the time. 43 00:02:09.360 --> 00:02:11.670 Instead, we can use something similar 44 00:02:11.670 --> 00:02:14.390 that is actually available on Leaflet. 45 00:02:14.390 --> 00:02:16.730 So in the leaflet library. 46 00:02:16.730 --> 00:02:19.460 And so this is where now this map variable here 47 00:02:19.460 --> 00:02:22.120 comes into play for the first time. 48 00:02:22.120 --> 00:02:25.430 So when we first wrote this coord here 49 00:02:25.430 --> 00:02:29.830 or actually pasted it from the leaflet documentation, 50 00:02:29.830 --> 00:02:33.030 I didn't really explain why we were doing this. 51 00:02:33.030 --> 00:02:35.490 So why we were storing the result 52 00:02:35.490 --> 00:02:38.970 of creating the map into a variable, 53 00:02:38.970 --> 00:02:40.940 but now this is gonna be important 54 00:02:40.940 --> 00:02:43.580 because it's onto this map object here 55 00:02:43.580 --> 00:02:47.540 where we can now basically add an event listener. 56 00:02:47.540 --> 00:02:50.100 So the idea is similar to what we do 57 00:02:50.100 --> 00:02:53.200 using add event listener but on the map, 58 00:02:53.200 --> 00:02:55.430 we can simply do this. 59 00:02:55.430 --> 00:02:58.170 So map.on, 60 00:02:58.170 --> 00:03:00.550 and so again this on method here 61 00:03:00.550 --> 00:03:03.300 is not coming from JavaScript itself. 62 00:03:03.300 --> 00:03:06.820 It is instead of coming from the leaflet library. 63 00:03:06.820 --> 00:03:09.803 So this map object here is in fact an object 64 00:03:09.803 --> 00:03:11.903 that was generated by a leaflet. 65 00:03:13.110 --> 00:03:16.150 So we can see that because of this L here 66 00:03:16.150 --> 00:03:18.950 and so therefore this is gonna be a special object 67 00:03:18.950 --> 00:03:22.580 with a couple of methods and properties on it. 68 00:03:22.580 --> 00:03:24.330 And in fact let's actually start 69 00:03:24.330 --> 00:03:26.623 by taking a look at it in the console. 70 00:03:29.120 --> 00:03:32.983 So map, and let's see what we get here. 71 00:03:36.870 --> 00:03:41.870 So down here it is, let's get some more space here. 72 00:03:42.090 --> 00:03:45.193 And so here you see, there's a lot of stuff in here. 73 00:03:46.650 --> 00:03:50.480 Also, you see that the developers of this library 74 00:03:50.480 --> 00:03:53.930 also use this underscore convention here 75 00:03:53.930 --> 00:03:58.140 basically to make these methods and properties protected. 76 00:03:58.140 --> 00:04:01.290 And so simply by taking a look at this coord here, 77 00:04:01.290 --> 00:04:03.730 we already know that we should not 78 00:04:03.730 --> 00:04:06.453 basically manipulate this here manually. 79 00:04:07.510 --> 00:04:10.980 So let's just look at the ones that don't have this. 80 00:04:10.980 --> 00:04:14.570 So there should be this on method that I'm using, 81 00:04:14.570 --> 00:04:16.643 but maybe it's simply inheriting that. 82 00:04:18.870 --> 00:04:20.223 So let's see. 83 00:04:22.850 --> 00:04:24.480 It's also not here. 84 00:04:24.480 --> 00:04:26.360 It doesn't really matter anyway. 85 00:04:26.360 --> 00:04:30.560 So I was just trying to show you what happens here, 86 00:04:30.560 --> 00:04:32.440 but here it actually is. 87 00:04:32.440 --> 00:04:34.410 So here is the on method 88 00:04:34.410 --> 00:04:37.910 that we are now using basically as an event listener. 89 00:04:37.910 --> 00:04:41.090 So here is the on method that we're now basically gonna use 90 00:04:41.090 --> 00:04:45.133 instead of the standard built-in that event listener method. 91 00:04:45.990 --> 00:04:48.880 Now, right? So, yeah. 92 00:04:48.880 --> 00:04:50.700 This was really just to show you a little bit 93 00:04:50.700 --> 00:04:53.570 the internals of the leaflet library, 94 00:04:53.570 --> 00:04:55.840 because I think that it's important that 95 00:04:55.840 --> 00:04:59.440 you can also take a look at coord written by other people. 96 00:04:59.440 --> 00:05:02.600 And so you saw that they also use the prototype chain 97 00:05:02.600 --> 00:05:04.720 and very heavily in fact, 98 00:05:04.720 --> 00:05:07.860 you saw that they also use the underscore convention. 99 00:05:07.860 --> 00:05:10.310 And if you wanna dig really deep into that coord, 100 00:05:11.200 --> 00:05:12.640 I'm sure there's gonna be a lot 101 00:05:12.640 --> 00:05:14.173 of interesting stuff in there. 102 00:05:15.030 --> 00:05:19.740 But anyway, let's not add here the event listener basically. 103 00:05:19.740 --> 00:05:23.260 And here we can also specify the type of event 104 00:05:23.260 --> 00:05:25.113 and then here or call back function. 105 00:05:27.360 --> 00:05:31.410 So again, the idea here is indeed very similar. 106 00:05:31.410 --> 00:05:34.810 Now when leaflet calls this function here, 107 00:05:34.810 --> 00:05:38.633 it will do so with a special map event. Okay? 108 00:05:39.650 --> 00:05:42.120 So again, just like in standard JavaScript, 109 00:05:42.120 --> 00:05:43.920 we get access to an event, 110 00:05:43.920 --> 00:05:47.180 but this one is an event created by leaflet. 111 00:05:47.180 --> 00:05:49.003 So let's just call it mapEvent. 112 00:05:52.820 --> 00:05:55.610 And then let's actually simply take a look 113 00:05:55.610 --> 00:05:56.923 at this event for now. 114 00:05:58.320 --> 00:06:01.090 And so this console.log here should now happen 115 00:06:01.090 --> 00:06:04.020 whenever we click on the map. 116 00:06:04.020 --> 00:06:06.400 And so again, map is that variable here, 117 00:06:06.400 --> 00:06:11.233 which is the result of calling leaflet, So L.map. 118 00:06:12.810 --> 00:06:15.454 So let's see, and it always takes 119 00:06:15.454 --> 00:06:18.013 a little bit of time to loading this map. 120 00:06:19.500 --> 00:06:21.130 So let's just click here somewhere, 121 00:06:21.130 --> 00:06:26.130 and you'll see that immediately we got this event down here. 122 00:06:26.800 --> 00:06:31.490 Right? And then actually right here in lat lng, 123 00:06:31.490 --> 00:06:35.660 we then get the coordinates of the point that was clicked. 124 00:06:35.660 --> 00:06:38.660 Great. Let's try another one just to see 125 00:06:38.660 --> 00:06:40.593 if the coordinates are different. 126 00:06:43.050 --> 00:06:46.343 And you see, they are a little bit different indeed. 127 00:06:47.710 --> 00:06:50.500 And so now we can take this event object, 128 00:06:50.500 --> 00:06:53.520 take the coordinates of latitude and longitude, 129 00:06:53.520 --> 00:06:56.623 and then add a marker at exactly that point. 130 00:06:59.040 --> 00:07:02.010 So we already know how to create a marker, 131 00:07:02.010 --> 00:07:04.470 even though this is a very simplistic one. 132 00:07:04.470 --> 00:07:06.800 And so we're gonna improve it a little bit. 133 00:07:06.800 --> 00:07:08.700 But for now let's just take this coord 134 00:07:10.380 --> 00:07:12.980 and then here let's take the latitude 135 00:07:12.980 --> 00:07:14.943 and longitude from this object. 136 00:07:16.150 --> 00:07:19.430 So we can destructure it because remember there was 137 00:07:19.430 --> 00:07:24.430 a lat and a lng variable inside of mapEvent.lat, 138 00:07:28.315 --> 00:07:30.393 I think lng like this, 139 00:07:31.510 --> 00:07:33.920 but let's check again just to make sure 140 00:07:33.920 --> 00:07:35.670 because I don't really remember it. 141 00:07:37.040 --> 00:07:40.320 So the pin from the beginning here is now gone indeed. 142 00:07:40.320 --> 00:07:42.580 Let's now click somewhere here. 143 00:07:42.580 --> 00:07:45.890 And now we got this pin right here in the center 144 00:07:45.890 --> 00:07:48.243 and that's because we didn't fix our coord yet, 145 00:07:50.130 --> 00:07:52.330 but for now I just wanted to take a look. 146 00:07:52.330 --> 00:07:55.640 So that's the lat lng object right there. 147 00:07:55.640 --> 00:07:59.460 And then in there, there is an object with lat lng. 148 00:07:59.460 --> 00:08:01.010 So these are the two values 149 00:08:01.010 --> 00:08:03.663 that we just took out of this object. 150 00:08:05.750 --> 00:08:09.130 Okay. But now let's actually then put this pin exactly 151 00:08:09.130 --> 00:08:12.170 where we click instead of putting it in the center, 152 00:08:12.170 --> 00:08:14.223 like we are doing it right now. 153 00:08:15.390 --> 00:08:18.483 So this coords here is of course the center of the map 154 00:08:18.483 --> 00:08:20.760 that we specified before. 155 00:08:20.760 --> 00:08:23.180 So that is coming from geolocation. 156 00:08:23.180 --> 00:08:26.063 And now we want to use this lat and lng. 157 00:08:26.920 --> 00:08:31.660 So let's specify in URL, lat lng, 158 00:08:31.660 --> 00:08:36.383 and therefore now let's just write like Workout. 159 00:08:38.010 --> 00:08:39.610 And again, we're gonna change this in a minute 160 00:08:39.610 --> 00:08:40.933 to make it a bit better. 161 00:08:42.500 --> 00:08:44.830 But now I'm just interested in seeing 162 00:08:44.830 --> 00:08:48.590 if the popup is appearing in the right place 163 00:08:48.590 --> 00:08:50.600 and let's wait for it. 164 00:08:50.600 --> 00:08:51.673 And there you go. 165 00:08:52.600 --> 00:08:57.450 Now I click this one then to here and indeed it works. 166 00:08:57.450 --> 00:08:59.930 So great, that's beautiful already, 167 00:08:59.930 --> 00:09:04.470 but now watch what happens whenever I click. 168 00:09:04.470 --> 00:09:06.930 So whenever I add a new marker, 169 00:09:06.930 --> 00:09:11.930 you see that this popup here always closes, right? 170 00:09:12.010 --> 00:09:14.550 But in our demo, I actually have it so 171 00:09:14.550 --> 00:09:16.870 that they always keep open. 172 00:09:16.870 --> 00:09:19.230 So if I click here and add another one, 173 00:09:19.230 --> 00:09:21.273 and the data doesn't matter here now. 174 00:09:22.210 --> 00:09:24.910 Then you see that all the others remain open. 175 00:09:24.910 --> 00:09:28.303 And I think that that is actually a better option. 176 00:09:29.620 --> 00:09:31.820 And all right, now you also see 177 00:09:31.820 --> 00:09:35.480 that I added some custom formatting to these popups. 178 00:09:35.480 --> 00:09:39.510 So for example the running one always has this green border 179 00:09:39.510 --> 00:09:43.590 while the cycling one has this orange border. 180 00:09:43.590 --> 00:09:45.160 And that's because in leaflet, 181 00:09:45.160 --> 00:09:49.860 we are able to add our own class names to the popup. 182 00:09:49.860 --> 00:09:51.260 So there's a lot of stuff 183 00:09:51.260 --> 00:09:54.410 that we can do with popups in leaflet. 184 00:09:54.410 --> 00:09:58.463 And so let's now try to experiment with a couple of them. 185 00:09:59.420 --> 00:10:02.263 So it starts here with L.marker. 186 00:10:03.210 --> 00:10:05.430 And so this is basically the coord 187 00:10:05.430 --> 00:10:07.640 that adds the marker to the map. 188 00:10:07.640 --> 00:10:10.150 And this one is all still correct. 189 00:10:10.150 --> 00:10:11.950 There's nothing to change here. 190 00:10:11.950 --> 00:10:15.320 Then here we add .marker to the map. 191 00:10:15.320 --> 00:10:17.890 So essentially .marker creates the marker 192 00:10:17.890 --> 00:10:20.860 and then .addTo adds it to the map. 193 00:10:20.860 --> 00:10:23.460 And so that's similar to here, 194 00:10:23.460 --> 00:10:25.820 where we first select a title layer 195 00:10:25.820 --> 00:10:28.540 and then we add that tile layer 196 00:10:28.540 --> 00:10:30.993 to the map again, using .addTo. 197 00:10:31.900 --> 00:10:33.030 And all of these methods, 198 00:10:33.030 --> 00:10:35.530 they are in the documentation of leaflet 199 00:10:35.530 --> 00:10:39.003 and we're actually gonna go there in a minute, okay? 200 00:10:40.100 --> 00:10:42.920 Next we then have bindPopup, 201 00:10:42.920 --> 00:10:45.250 which will basically create a popup 202 00:10:45.250 --> 00:10:47.500 and bind it to the marker. 203 00:10:47.500 --> 00:10:50.430 And so here, we simply pass in this string. 204 00:10:50.430 --> 00:10:54.070 Now, so that's why we get to work out in all of the markers. 205 00:10:54.070 --> 00:10:56.740 But here, instead of specifying a string, 206 00:10:56.740 --> 00:11:00.170 we can also create a brand new popup object, 207 00:11:00.170 --> 00:11:03.010 which will then contain a couple of options. 208 00:11:03.010 --> 00:11:06.000 And so that is what I'm gonna do here now. 209 00:11:06.000 --> 00:11:10.380 So instead of this, I will do L.pop up 210 00:11:11.850 --> 00:11:14.543 and then here I can pass in a couple of options, 211 00:11:15.440 --> 00:11:19.210 but now let's actually go to the leaflet documentation 212 00:11:19.210 --> 00:11:20.860 because otherwise all of this 213 00:11:20.860 --> 00:11:24.580 will simply appear like magic to you. 214 00:11:24.580 --> 00:11:27.040 So I don't want to just write the coord here 215 00:11:27.040 --> 00:11:29.730 and you copying it, instead I want to show you 216 00:11:29.730 --> 00:11:33.250 where I'm getting it from in the documentation 217 00:11:33.250 --> 00:11:35.620 because reading documentation will be something 218 00:11:35.620 --> 00:11:39.430 really really important in your job as a developer. 219 00:11:39.430 --> 00:11:42.000 Because as I just mentioned previously 220 00:11:42.000 --> 00:11:43.990 every library that you're gonna use 221 00:11:43.990 --> 00:11:45.710 will have some documentation, 222 00:11:45.710 --> 00:11:48.180 so that you can actually know how to use it. 223 00:11:48.180 --> 00:11:52.560 Cause otherwise you would have no idea, right? 224 00:11:52.560 --> 00:11:54.160 And so reading documentation 225 00:11:54.160 --> 00:11:57.433 will certainly become part of the job. 226 00:11:58.690 --> 00:12:01.640 So let's just go here to leaflet. 227 00:12:01.640 --> 00:12:04.850 And then basically on every page of every library, 228 00:12:04.850 --> 00:12:06.620 you will always find something called 229 00:12:06.620 --> 00:12:08.793 like docs or documentation. 230 00:12:09.820 --> 00:12:13.463 And so here is a bunch of stuff that you can take a look at. 231 00:12:14.440 --> 00:12:18.010 Now here, I will just take a look at the UI layers, 232 00:12:18.010 --> 00:12:20.803 which are the markers, popup and tool tip. 233 00:12:21.920 --> 00:12:26.090 So as for the marker, this is basically what we did before. 234 00:12:26.090 --> 00:12:29.480 So L.marker then add to map. 235 00:12:29.480 --> 00:12:32.400 And so this is exactly what we already have. 236 00:12:32.400 --> 00:12:35.300 So this is an example, as we can see here, 237 00:12:35.300 --> 00:12:38.130 but down here is how we should actually do it. 238 00:12:38.130 --> 00:12:41.820 So how exactly this marker function should be called. 239 00:12:41.820 --> 00:12:46.820 So we can pass in or have to pass in the latitude longitude. 240 00:12:47.050 --> 00:12:51.600 And we can also pass in an object of options. 241 00:12:51.600 --> 00:12:53.600 And so here are then all the options 242 00:12:53.600 --> 00:12:56.240 that are available for the marker, 243 00:12:56.240 --> 00:12:58.690 but in this case we don't have any. 244 00:12:58.690 --> 00:13:01.090 So I'm keeping it fairly simple here, 245 00:13:01.090 --> 00:13:04.690 but even on a marker, we can change all kinds of stuff. 246 00:13:04.690 --> 00:13:08.520 For example, we could change opacity, as you see here 247 00:13:08.520 --> 00:13:12.220 we could also like riseOnHover. 248 00:13:12.220 --> 00:13:14.960 So then the marker will get on top of others 249 00:13:14.960 --> 00:13:17.770 when you hover the mouse over it. 250 00:13:17.770 --> 00:13:20.820 And so now you see there's all kinds of stuff 251 00:13:20.820 --> 00:13:21.913 that we can do here, 252 00:13:22.750 --> 00:13:24.583 But let's not go actually to the popup. 253 00:13:25.460 --> 00:13:27.700 So you see there's a lot of stuff here. 254 00:13:27.700 --> 00:13:30.563 And as always, I encourage you to take a look at it. 255 00:13:32.010 --> 00:13:36.340 But now again, let's talk about the popup itself. 256 00:13:36.340 --> 00:13:38.290 And so again, here you see that L.popup 257 00:13:39.410 --> 00:13:42.570 can take in an object of options. 258 00:13:42.570 --> 00:13:44.920 And so this is what we will do now. 259 00:13:44.920 --> 00:13:48.870 And that's the popup that we will then use on the marker 260 00:13:50.735 --> 00:13:53.433 to create a popup that is attached to the marker. 261 00:13:54.300 --> 00:13:56.460 So the first two that I want to specify 262 00:13:56.460 --> 00:13:59.330 is the maxWidth and the minWidth, 263 00:13:59.330 --> 00:14:02.410 so that the popup always has a nice size. 264 00:14:02.410 --> 00:14:05.180 And so basically we will now create an object 265 00:14:05.180 --> 00:14:07.323 with these two properties. 266 00:14:10.930 --> 00:14:13.540 So let's set this one to 250 267 00:14:16.060 --> 00:14:21.060 and the minWidth to let's say just 100 pixels, all right. 268 00:14:23.990 --> 00:14:26.720 Now, next up, I want to change that behavior 269 00:14:26.720 --> 00:14:29.260 where the popup of one macro closes 270 00:14:29.260 --> 00:14:31.120 when we create a new one. 271 00:14:31.120 --> 00:14:33.403 And so that's this autoClose here. 272 00:14:34.980 --> 00:14:37.260 So we use this one when we want to override 273 00:14:37.260 --> 00:14:39.970 the default behavior of the popup closing 274 00:14:39.970 --> 00:14:42.123 when another popup is opened. 275 00:14:43.020 --> 00:14:45.770 And so this is exactly the one we are looking for. 276 00:14:45.770 --> 00:14:47.550 And so by default, it is true. 277 00:14:47.550 --> 00:14:49.453 And so let's set that to false. 278 00:14:51.250 --> 00:14:56.250 So autoClose set it to false. 279 00:15:00.310 --> 00:15:03.400 And then finally, there's also closeOnClick, 280 00:15:03.400 --> 00:15:06.990 which again will prevent popups from closing 281 00:15:06.990 --> 00:15:10.910 but this time, whenever the user clicks on the map. 282 00:15:10.910 --> 00:15:13.450 So as we see here, that's the default behavior. 283 00:15:13.450 --> 00:15:16.653 And so let's put this one here, to false as well. 284 00:15:20.343 --> 00:15:22.200 And again, I'm doing all this 285 00:15:22.200 --> 00:15:23.800 so that I can show you a little bit 286 00:15:23.800 --> 00:15:26.033 how we work with documentation. 287 00:15:27.460 --> 00:15:30.605 So finally we have also the className. 288 00:15:30.605 --> 00:15:32.195 And so, as I mentioned before, 289 00:15:32.195 --> 00:15:36.096 we can use this one to assign any CSS class name 290 00:15:36.096 --> 00:15:38.366 that we want to the popup. 291 00:15:38.366 --> 00:15:39.970 And so this is gonna be useful 292 00:15:39.970 --> 00:15:43.150 to style it according to our needs. 293 00:15:43.150 --> 00:15:48.124 And so in our CSS, I already have a class for popups, 294 00:15:48.124 --> 00:15:50.153 so let's just search for popup. 295 00:15:51.430 --> 00:15:53.363 So here is a lot of stuff, 296 00:15:55.120 --> 00:15:56.960 but the ones that we are interested in 297 00:15:56.960 --> 00:15:59.693 is running-popup and cycling-popup. 298 00:16:00.660 --> 00:16:03.520 So these here are basically styles 299 00:16:03.520 --> 00:16:07.930 that I assigned automatically to all the popups in leaflet. 300 00:16:07.930 --> 00:16:11.630 So that's why they have this dark background color 301 00:16:11.630 --> 00:16:13.890 and why they have the font size that they have. 302 00:16:13.890 --> 00:16:18.720 So all of that, I actually already styled here using CSS. 303 00:16:18.720 --> 00:16:22.900 But now I want to be able to add a custom class as well 304 00:16:22.900 --> 00:16:26.380 so that I can style the running activities, with this green 305 00:16:26.380 --> 00:16:28.763 and the cycling ones, with this orange. 306 00:16:30.890 --> 00:16:34.020 So later we will identify in this class here dynamically, 307 00:16:34.020 --> 00:16:38.473 but for now let's put all of them to running pop up. 308 00:16:40.400 --> 00:16:43.870 And so that's actually already it. 309 00:16:43.870 --> 00:16:47.940 Now, finally, we also need to set then the text back 310 00:16:47.940 --> 00:16:50.030 because right now we don't have any texts 311 00:16:52.760 --> 00:16:54.443 here in our markers. 312 00:16:55.360 --> 00:16:58.950 So if I click here, can you see, we indeed get a marker 313 00:16:58.950 --> 00:17:00.683 and it even has this class here. 314 00:17:01.720 --> 00:17:05.380 And let's just see what happens when I click another one. 315 00:17:05.380 --> 00:17:07.770 And yeah, that works. 316 00:17:07.770 --> 00:17:12.360 So all of them stay open just as we wanted. 317 00:17:12.360 --> 00:17:16.280 But as I was saying before, they don't have any content yet. 318 00:17:16.280 --> 00:17:17.893 And so we need to set that. 319 00:17:19.080 --> 00:17:22.773 And that is actually again on the marker, I believe. 320 00:17:24.820 --> 00:17:27.103 So it's a method that's on the marker. 321 00:17:29.980 --> 00:17:31.763 So let's see where it is. 322 00:17:36.910 --> 00:17:39.800 Maybe it's one of these ones inherited from layer. 323 00:17:39.800 --> 00:17:41.730 So you see that these are basically classes 324 00:17:41.730 --> 00:17:43.670 that leaflet uses 325 00:17:43.670 --> 00:17:46.050 and so then the marker can inherit methods 326 00:17:47.110 --> 00:17:49.253 from other classes, essentially. 327 00:17:50.990 --> 00:17:54.290 And so here is the method that I was actually looking for 328 00:17:54.290 --> 00:17:58.580 and so setPopupContent is the one that we're looking for 329 00:17:58.580 --> 00:18:01.200 because here we can then specify a string 330 00:18:01.200 --> 00:18:03.110 or even an HTMLElement 331 00:18:03.110 --> 00:18:06.870 in order to give the popup some content. 332 00:18:06.870 --> 00:18:08.440 Now, another thing that's interesting 333 00:18:08.440 --> 00:18:10.620 to see here in the documentation 334 00:18:10.620 --> 00:18:14.470 is that all these methods always returned this. 335 00:18:14.470 --> 00:18:16.330 So basically the current object 336 00:18:16.330 --> 00:18:19.270 which then makes all of these methods chainable. 337 00:18:19.270 --> 00:18:21.760 So remember how we did exactly that 338 00:18:21.760 --> 00:18:23.580 by the end of the previous section 339 00:18:23.580 --> 00:18:26.770 to also make methods in our own classes chainable. 340 00:18:26.770 --> 00:18:29.500 And so you'll see that the leaflet developers 341 00:18:29.500 --> 00:18:32.533 are here indeed using the exact same technique. 342 00:18:33.540 --> 00:18:36.440 So again, I think that's pretty interesting to see. 343 00:18:36.440 --> 00:18:41.440 But now let's copy this method here and add a tier. 344 00:18:42.820 --> 00:18:47.020 So before we actually open the popup here in the next line, 345 00:18:47.020 --> 00:18:50.630 and for now, let's just set it back to work out 346 00:18:52.460 --> 00:18:55.053 and then let's go back and see. 347 00:18:56.820 --> 00:18:59.170 So for some reason, this always takes some time. 348 00:18:59.170 --> 00:19:00.233 Now, here we are. 349 00:19:01.150 --> 00:19:03.680 And yeah, now it says workout. 350 00:19:03.680 --> 00:19:07.960 They all stay opened and you see that when we click here, 351 00:19:07.960 --> 00:19:12.960 then the map even pans so that it can fit the new popup. 352 00:19:13.530 --> 00:19:16.199 Great, So this works really fine, 353 00:19:16.199 --> 00:19:18.707 but in the final application, 354 00:19:18.707 --> 00:19:22.230 obviously the marker is not put on the map immediately 355 00:19:22.230 --> 00:19:23.760 because the popup itself, 356 00:19:23.760 --> 00:19:26.060 will contain data about the workout. 357 00:19:26.060 --> 00:19:28.170 And so we first needed that data. 358 00:19:28.170 --> 00:19:31.370 And so here in the real application, when we click, 359 00:19:31.370 --> 00:19:35.390 what happens is that this form here opens,right? 360 00:19:35.390 --> 00:19:38.570 And so if we take a look at our flow chart 361 00:19:38.570 --> 00:19:42.090 that's also then gonna be the next step. 362 00:19:42.090 --> 00:19:45.010 So basically we have the render workout form 363 00:19:45.010 --> 00:19:47.640 whenever the user clicks on a map. 364 00:19:47.640 --> 00:19:49.420 And so in the next lecture, 365 00:19:49.420 --> 00:19:51.963 this year is what we're gonna implement.