Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 1 00:00:01,460 --> 00:00:04,500 So in this video we're gonna display a marker 2 2 00:00:04,500 --> 00:00:07,240 wherever we click on the map. 3 3 00:00:07,240 --> 00:00:09,940 And for that we are gonna use one more time, 4 4 00:00:09,940 --> 00:00:11,653 the leaflet library. 5 5 00:00:13,380 --> 00:00:17,060 And just to make sure that we're following the right path 6 6 00:00:17,060 --> 00:00:21,840 according to our flow chart here, let's take a look at it. 7 7 00:00:21,840 --> 00:00:24,770 And so indeed when the page loads, 8 8 00:00:24,770 --> 00:00:26,970 then we get to current location. 9 9 00:00:26,970 --> 00:00:30,750 So the coordinates of that, and then after that is done 10 10 00:00:30,750 --> 00:00:34,170 the map is rendered in the current location. 11 11 00:00:34,170 --> 00:00:36,220 And so now what we're gonna do next 12 12 00:00:36,220 --> 00:00:38,320 is to bind an event handler, 13 13 00:00:38,320 --> 00:00:41,100 so that whenever the user clicks on the map, 14 14 00:00:41,100 --> 00:00:44,340 we can then display a marker on the map. 15 15 00:00:44,340 --> 00:00:47,400 So for now we're gonna jump this one and this one, 16 16 00:00:47,400 --> 00:00:49,670 and continue working with the map. 17 17 00:00:49,670 --> 00:00:53,060 And so we're gonna basically render a workout on the map, 18 18 00:00:53,060 --> 00:00:54,870 which is not yet a workout, 19 19 00:00:54,870 --> 00:00:59,140 but we're simply gonna put a pin or a marker on the map 20 20 00:00:59,140 --> 00:01:00,870 and then later we can replace that 21 21 00:01:00,870 --> 00:01:03,543 with the data coming from the workout. 22 22 00:01:04,920 --> 00:01:06,360 All right? 23 23 00:01:06,360 --> 00:01:07,723 So let's go do that. 24 24 00:01:08,570 --> 00:01:10,840 And the first thing that we need to do 25 25 00:01:10,840 --> 00:01:13,860 is to actually add the event handler to the map 26 26 00:01:13,860 --> 00:01:17,170 so that we can then handle any incoming clicks. 27 27 00:01:17,170 --> 00:01:19,163 Now, how are we gonna do that? 28 28 00:01:20,210 --> 00:01:23,460 I mean, should we simply attach an event listener 29 29 00:01:23,460 --> 00:01:26,160 to this whole map element here? 30 30 00:01:26,160 --> 00:01:29,450 That wouldn't really work because then we would have no way 31 31 00:01:29,450 --> 00:01:34,060 of knowing where exactly the user clicked here on the map. 32 32 00:01:34,060 --> 00:01:36,820 So basically we would have no way of knowing 33 33 00:01:36,820 --> 00:01:39,799 the GPS coordinates of whatever location 34 34 00:01:39,799 --> 00:01:42,660 the user clicked here on the map. 35 35 00:01:42,660 --> 00:01:47,290 Because that is data that only the map knows, right? 36 36 00:01:47,290 --> 00:01:50,860 So when I click, let's say here where I am right now, 37 37 00:01:50,860 --> 00:01:54,680 then I want to handle that click exactly at that position. 38 38 00:01:54,680 --> 00:01:58,000 And so therefore we need access to the coordinates 39 39 00:01:58,000 --> 00:02:00,780 of the point that was just clicked. 40 40 00:02:00,780 --> 00:02:03,180 So in summary, what I'm trying to say 41 41 00:02:03,180 --> 00:02:07,230 is that we cannot simply use the add event listener method 42 42 00:02:07,230 --> 00:02:09,360 that we have been using all the time. 43 43 00:02:09,360 --> 00:02:11,670 Instead, we can use something similar 44 44 00:02:11,670 --> 00:02:14,390 that is actually available on Leaflet. 45 45 00:02:14,390 --> 00:02:16,730 So in the leaflet library. 46 46 00:02:16,730 --> 00:02:19,460 And so this is where now this map variable here 47 47 00:02:19,460 --> 00:02:22,120 comes into play for the first time. 48 48 00:02:22,120 --> 00:02:25,430 So when we first wrote this coord here 49 49 00:02:25,430 --> 00:02:29,830 or actually pasted it from the leaflet documentation, 50 50 00:02:29,830 --> 00:02:33,030 I didn't really explain why we were doing this. 51 51 00:02:33,030 --> 00:02:35,490 So why we were storing the result 52 52 00:02:35,490 --> 00:02:38,970 of creating the map into a variable, 53 53 00:02:38,970 --> 00:02:40,940 but now this is gonna be important 54 54 00:02:40,940 --> 00:02:43,580 because it's onto this map object here 55 55 00:02:43,580 --> 00:02:47,540 where we can now basically add an event listener. 56 56 00:02:47,540 --> 00:02:50,100 So the idea is similar to what we do 57 57 00:02:50,100 --> 00:02:53,200 using add event listener but on the map, 58 58 00:02:53,200 --> 00:02:55,430 we can simply do this. 59 59 00:02:55,430 --> 00:02:58,170 So map.on, 60 60 00:02:58,170 --> 00:03:00,550 and so again this on method here 61 61 00:03:00,550 --> 00:03:03,300 is not coming from JavaScript itself. 62 62 00:03:03,300 --> 00:03:06,820 It is instead of coming from the leaflet library. 63 63 00:03:06,820 --> 00:03:09,803 So this map object here is in fact an object 64 64 00:03:09,803 --> 00:03:11,903 that was generated by a leaflet. 65 65 00:03:13,110 --> 00:03:16,150 So we can see that because of this L here 66 66 00:03:16,150 --> 00:03:18,950 and so therefore this is gonna be a special object 67 67 00:03:18,950 --> 00:03:22,580 with a couple of methods and properties on it. 68 68 00:03:22,580 --> 00:03:24,330 And in fact let's actually start 69 69 00:03:24,330 --> 00:03:26,623 by taking a look at it in the console. 70 70 00:03:29,120 --> 00:03:32,983 So map, and let's see what we get here. 71 71 00:03:36,870 --> 00:03:41,870 So down here it is, let's get some more space here. 72 72 00:03:42,090 --> 00:03:45,193 And so here you see, there's a lot of stuff in here. 73 73 00:03:46,650 --> 00:03:50,480 Also, you see that the developers of this library 74 74 00:03:50,480 --> 00:03:53,930 also use this underscore convention here 75 75 00:03:53,930 --> 00:03:58,140 basically to make these methods and properties protected. 76 76 00:03:58,140 --> 00:04:01,290 And so simply by taking a look at this coord here, 77 77 00:04:01,290 --> 00:04:03,730 we already know that we should not 78 78 00:04:03,730 --> 00:04:06,453 basically manipulate this here manually. 79 79 00:04:07,510 --> 00:04:10,980 So let's just look at the ones that don't have this. 80 80 00:04:10,980 --> 00:04:14,570 So there should be this on method that I'm using, 81 81 00:04:14,570 --> 00:04:16,643 but maybe it's simply inheriting that. 82 82 00:04:18,870 --> 00:04:20,223 So let's see. 83 83 00:04:22,850 --> 00:04:24,480 It's also not here. 84 84 00:04:24,480 --> 00:04:26,360 It doesn't really matter anyway. 85 85 00:04:26,360 --> 00:04:30,560 So I was just trying to show you what happens here, 86 86 00:04:30,560 --> 00:04:32,440 but here it actually is. 87 87 00:04:32,440 --> 00:04:34,410 So here is the on method 88 88 00:04:34,410 --> 00:04:37,910 that we are now using basically as an event listener. 89 89 00:04:37,910 --> 00:04:41,090 So here is the on method that we're now basically gonna use 90 90 00:04:41,090 --> 00:04:45,133 instead of the standard built-in that event listener method. 91 91 00:04:45,990 --> 00:04:48,880 Now, right? So, yeah. 92 92 00:04:48,880 --> 00:04:50,700 This was really just to show you a little bit 93 93 00:04:50,700 --> 00:04:53,570 the internals of the leaflet library, 94 94 00:04:53,570 --> 00:04:55,840 because I think that it's important that 95 95 00:04:55,840 --> 00:04:59,440 you can also take a look at coord written by other people. 96 96 00:04:59,440 --> 00:05:02,600 And so you saw that they also use the prototype chain 97 97 00:05:02,600 --> 00:05:04,720 and very heavily in fact, 98 98 00:05:04,720 --> 00:05:07,860 you saw that they also use the underscore convention. 99 99 00:05:07,860 --> 00:05:10,310 And if you wanna dig really deep into that coord, 100 100 00:05:11,200 --> 00:05:12,640 I'm sure there's gonna be a lot 101 101 00:05:12,640 --> 00:05:14,173 of interesting stuff in there. 102 102 00:05:15,030 --> 00:05:19,740 But anyway, let's not add here the event listener basically. 103 103 00:05:19,740 --> 00:05:23,260 And here we can also specify the type of event 104 104 00:05:23,260 --> 00:05:25,113 and then here or call back function. 105 105 00:05:27,360 --> 00:05:31,410 So again, the idea here is indeed very similar. 106 106 00:05:31,410 --> 00:05:34,810 Now when leaflet calls this function here, 107 107 00:05:34,810 --> 00:05:38,633 it will do so with a special map event. Okay? 108 108 00:05:39,650 --> 00:05:42,120 So again, just like in standard JavaScript, 109 109 00:05:42,120 --> 00:05:43,920 we get access to an event, 110 110 00:05:43,920 --> 00:05:47,180 but this one is an event created by leaflet. 111 111 00:05:47,180 --> 00:05:49,003 So let's just call it mapEvent. 112 112 00:05:52,820 --> 00:05:55,610 And then let's actually simply take a look 113 113 00:05:55,610 --> 00:05:56,923 at this event for now. 114 114 00:05:58,320 --> 00:06:01,090 And so this console.log here should now happen 115 115 00:06:01,090 --> 00:06:04,020 whenever we click on the map. 116 116 00:06:04,020 --> 00:06:06,400 And so again, map is that variable here, 117 117 00:06:06,400 --> 00:06:11,233 which is the result of calling leaflet, So L.map. 118 118 00:06:12,810 --> 00:06:15,454 So let's see, and it always takes 119 119 00:06:15,454 --> 00:06:18,013 a little bit of time to loading this map. 120 120 00:06:19,500 --> 00:06:21,130 So let's just click here somewhere, 121 121 00:06:21,130 --> 00:06:26,130 and you'll see that immediately we got this event down here. 122 122 00:06:26,800 --> 00:06:31,490 Right? And then actually right here in lat lng, 123 123 00:06:31,490 --> 00:06:35,660 we then get the coordinates of the point that was clicked. 124 124 00:06:35,660 --> 00:06:38,660 Great. Let's try another one just to see 125 125 00:06:38,660 --> 00:06:40,593 if the coordinates are different. 126 126 00:06:43,050 --> 00:06:46,343 And you see, they are a little bit different indeed. 127 127 00:06:47,710 --> 00:06:50,500 And so now we can take this event object, 128 128 00:06:50,500 --> 00:06:53,520 take the coordinates of latitude and longitude, 129 129 00:06:53,520 --> 00:06:56,623 and then add a marker at exactly that point. 130 130 00:06:59,040 --> 00:07:02,010 So we already know how to create a marker, 131 131 00:07:02,010 --> 00:07:04,470 even though this is a very simplistic one. 132 132 00:07:04,470 --> 00:07:06,800 And so we're gonna improve it a little bit. 133 133 00:07:06,800 --> 00:07:08,700 But for now let's just take this coord 134 134 00:07:10,380 --> 00:07:12,980 and then here let's take the latitude 135 135 00:07:12,980 --> 00:07:14,943 and longitude from this object. 136 136 00:07:16,150 --> 00:07:19,430 So we can destructure it because remember there was 137 137 00:07:19,430 --> 00:07:24,430 a lat and a lng variable inside of mapEvent.lat, 138 138 00:07:28,315 --> 00:07:30,393 I think lng like this, 139 139 00:07:31,510 --> 00:07:33,920 but let's check again just to make sure 140 140 00:07:33,920 --> 00:07:35,670 because I don't really remember it. 141 141 00:07:37,040 --> 00:07:40,320 So the pin from the beginning here is now gone indeed. 142 142 00:07:40,320 --> 00:07:42,580 Let's now click somewhere here. 143 143 00:07:42,580 --> 00:07:45,890 And now we got this pin right here in the center 144 144 00:07:45,890 --> 00:07:48,243 and that's because we didn't fix our coord yet, 145 145 00:07:50,130 --> 00:07:52,330 but for now I just wanted to take a look. 146 146 00:07:52,330 --> 00:07:55,640 So that's the lat lng object right there. 147 147 00:07:55,640 --> 00:07:59,460 And then in there, there is an object with lat lng. 148 148 00:07:59,460 --> 00:08:01,010 So these are the two values 149 149 00:08:01,010 --> 00:08:03,663 that we just took out of this object. 150 150 00:08:05,750 --> 00:08:09,130 Okay. But now let's actually then put this pin exactly 151 151 00:08:09,130 --> 00:08:12,170 where we click instead of putting it in the center, 152 152 00:08:12,170 --> 00:08:14,223 like we are doing it right now. 153 153 00:08:15,390 --> 00:08:18,483 So this coords here is of course the center of the map 154 154 00:08:18,483 --> 00:08:20,760 that we specified before. 155 155 00:08:20,760 --> 00:08:23,180 So that is coming from geolocation. 156 156 00:08:23,180 --> 00:08:26,063 And now we want to use this lat and lng. 157 157 00:08:26,920 --> 00:08:31,660 So let's specify in URL, lat lng, 158 158 00:08:31,660 --> 00:08:36,383 and therefore now let's just write like Workout. 159 159 00:08:38,010 --> 00:08:39,610 And again, we're gonna change this in a minute 160 160 00:08:39,610 --> 00:08:40,933 to make it a bit better. 161 161 00:08:42,500 --> 00:08:44,830 But now I'm just interested in seeing 162 162 00:08:44,830 --> 00:08:48,590 if the popup is appearing in the right place 163 163 00:08:48,590 --> 00:08:50,600 and let's wait for it. 164 164 00:08:50,600 --> 00:08:51,673 And there you go. 165 165 00:08:52,600 --> 00:08:57,450 Now I click this one then to here and indeed it works. 166 166 00:08:57,450 --> 00:08:59,930 So great, that's beautiful already, 167 167 00:08:59,930 --> 00:09:04,470 but now watch what happens whenever I click. 168 168 00:09:04,470 --> 00:09:06,930 So whenever I add a new marker, 169 169 00:09:06,930 --> 00:09:11,930 you see that this popup here always closes, right? 170 170 00:09:12,010 --> 00:09:14,550 But in our demo, I actually have it so 171 171 00:09:14,550 --> 00:09:16,870 that they always keep open. 172 172 00:09:16,870 --> 00:09:19,230 So if I click here and add another one, 173 173 00:09:19,230 --> 00:09:21,273 and the data doesn't matter here now. 174 174 00:09:22,210 --> 00:09:24,910 Then you see that all the others remain open. 175 175 00:09:24,910 --> 00:09:28,303 And I think that that is actually a better option. 176 176 00:09:29,620 --> 00:09:31,820 And all right, now you also see 177 177 00:09:31,820 --> 00:09:35,480 that I added some custom formatting to these popups. 178 178 00:09:35,480 --> 00:09:39,510 So for example the running one always has this green border 179 179 00:09:39,510 --> 00:09:43,590 while the cycling one has this orange border. 180 180 00:09:43,590 --> 00:09:45,160 And that's because in leaflet, 181 181 00:09:45,160 --> 00:09:49,860 we are able to add our own class names to the popup. 182 182 00:09:49,860 --> 00:09:51,260 So there's a lot of stuff 183 183 00:09:51,260 --> 00:09:54,410 that we can do with popups in leaflet. 184 184 00:09:54,410 --> 00:09:58,463 And so let's now try to experiment with a couple of them. 185 185 00:09:59,420 --> 00:10:02,263 So it starts here with L.marker. 186 186 00:10:03,210 --> 00:10:05,430 And so this is basically the coord 187 187 00:10:05,430 --> 00:10:07,640 that adds the marker to the map. 188 188 00:10:07,640 --> 00:10:10,150 And this one is all still correct. 189 189 00:10:10,150 --> 00:10:11,950 There's nothing to change here. 190 190 00:10:11,950 --> 00:10:15,320 Then here we add .marker to the map. 191 191 00:10:15,320 --> 00:10:17,890 So essentially .marker creates the marker 192 192 00:10:17,890 --> 00:10:20,860 and then .addTo adds it to the map. 193 193 00:10:20,860 --> 00:10:23,460 And so that's similar to here, 194 194 00:10:23,460 --> 00:10:25,820 where we first select a title layer 195 195 00:10:25,820 --> 00:10:28,540 and then we add that tile layer 196 196 00:10:28,540 --> 00:10:30,993 to the map again, using .addTo. 197 197 00:10:31,900 --> 00:10:33,030 And all of these methods, 198 198 00:10:33,030 --> 00:10:35,530 they are in the documentation of leaflet 199 199 00:10:35,530 --> 00:10:39,003 and we're actually gonna go there in a minute, okay? 200 200 00:10:40,100 --> 00:10:42,920 Next we then have bindPopup, 201 201 00:10:42,920 --> 00:10:45,250 which will basically create a popup 202 202 00:10:45,250 --> 00:10:47,500 and bind it to the marker. 203 203 00:10:47,500 --> 00:10:50,430 And so here, we simply pass in this string. 204 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 205 00:10:54,070 --> 00:10:56,740 But here, instead of specifying a string, 206 206 00:10:56,740 --> 00:11:00,170 we can also create a brand new popup object, 207 207 00:11:00,170 --> 00:11:03,010 which will then contain a couple of options. 208 208 00:11:03,010 --> 00:11:06,000 And so that is what I'm gonna do here now. 209 209 00:11:06,000 --> 00:11:10,380 So instead of this, I will do L.pop up 210 210 00:11:11,850 --> 00:11:14,543 and then here I can pass in a couple of options, 211 211 00:11:15,440 --> 00:11:19,210 but now let's actually go to the leaflet documentation 212 212 00:11:19,210 --> 00:11:20,860 because otherwise all of this 213 213 00:11:20,860 --> 00:11:24,580 will simply appear like magic to you. 214 214 00:11:24,580 --> 00:11:27,040 So I don't want to just write the coord here 215 215 00:11:27,040 --> 00:11:29,730 and you copying it, instead I want to show you 216 216 00:11:29,730 --> 00:11:33,250 where I'm getting it from in the documentation 217 217 00:11:33,250 --> 00:11:35,620 because reading documentation will be something 218 218 00:11:35,620 --> 00:11:39,430 really really important in your job as a developer. 219 219 00:11:39,430 --> 00:11:42,000 Because as I just mentioned previously 220 220 00:11:42,000 --> 00:11:43,990 every library that you're gonna use 221 221 00:11:43,990 --> 00:11:45,710 will have some documentation, 222 222 00:11:45,710 --> 00:11:48,180 so that you can actually know how to use it. 223 223 00:11:48,180 --> 00:11:52,560 Cause otherwise you would have no idea, right? 224 224 00:11:52,560 --> 00:11:54,160 And so reading documentation 225 225 00:11:54,160 --> 00:11:57,433 will certainly become part of the job. 226 226 00:11:58,690 --> 00:12:01,640 So let's just go here to leaflet. 227 227 00:12:01,640 --> 00:12:04,850 And then basically on every page of every library, 228 228 00:12:04,850 --> 00:12:06,620 you will always find something called 229 229 00:12:06,620 --> 00:12:08,793 like docs or documentation. 230 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 231 00:12:14,440 --> 00:12:18,010 Now here, I will just take a look at the UI layers, 232 232 00:12:18,010 --> 00:12:20,803 which are the markers, popup and tool tip. 233 233 00:12:21,920 --> 00:12:26,090 So as for the marker, this is basically what we did before. 234 234 00:12:26,090 --> 00:12:29,480 So L.marker then add to map. 235 235 00:12:29,480 --> 00:12:32,400 And so this is exactly what we already have. 236 236 00:12:32,400 --> 00:12:35,300 So this is an example, as we can see here, 237 237 00:12:35,300 --> 00:12:38,130 but down here is how we should actually do it. 238 238 00:12:38,130 --> 00:12:41,820 So how exactly this marker function should be called. 239 239 00:12:41,820 --> 00:12:46,820 So we can pass in or have to pass in the latitude longitude. 240 240 00:12:47,050 --> 00:12:51,600 And we can also pass in an object of options. 241 241 00:12:51,600 --> 00:12:53,600 And so here are then all the options 242 242 00:12:53,600 --> 00:12:56,240 that are available for the marker, 243 243 00:12:56,240 --> 00:12:58,690 but in this case we don't have any. 244 244 00:12:58,690 --> 00:13:01,090 So I'm keeping it fairly simple here, 245 245 00:13:01,090 --> 00:13:04,690 but even on a marker, we can change all kinds of stuff. 246 246 00:13:04,690 --> 00:13:08,520 For example, we could change opacity, as you see here 247 247 00:13:08,520 --> 00:13:12,220 we could also like riseOnHover. 248 248 00:13:12,220 --> 00:13:14,960 So then the marker will get on top of others 249 249 00:13:14,960 --> 00:13:17,770 when you hover the mouse over it. 250 250 00:13:17,770 --> 00:13:20,820 And so now you see there's all kinds of stuff 251 251 00:13:20,820 --> 00:13:21,913 that we can do here, 252 252 00:13:22,750 --> 00:13:24,583 But let's not go actually to the popup. 253 253 00:13:25,460 --> 00:13:27,700 So you see there's a lot of stuff here. 254 254 00:13:27,700 --> 00:13:30,563 And as always, I encourage you to take a look at it. 255 255 00:13:32,010 --> 00:13:36,340 But now again, let's talk about the popup itself. 256 256 00:13:36,340 --> 00:13:38,290 And so again, here you see that L.popup 257 257 00:13:39,410 --> 00:13:42,570 can take in an object of options. 258 258 00:13:42,570 --> 00:13:44,920 And so this is what we will do now. 259 259 00:13:44,920 --> 00:13:48,870 And that's the popup that we will then use on the marker 260 260 00:13:50,735 --> 00:13:53,433 to create a popup that is attached to the marker. 261 261 00:13:54,300 --> 00:13:56,460 So the first two that I want to specify 262 262 00:13:56,460 --> 00:13:59,330 is the maxWidth and the minWidth, 263 263 00:13:59,330 --> 00:14:02,410 so that the popup always has a nice size. 264 264 00:14:02,410 --> 00:14:05,180 And so basically we will now create an object 265 265 00:14:05,180 --> 00:14:07,323 with these two properties. 266 266 00:14:10,930 --> 00:14:13,540 So let's set this one to 250 267 267 00:14:16,060 --> 00:14:21,060 and the minWidth to let's say just 100 pixels, all right. 268 268 00:14:23,990 --> 00:14:26,720 Now, next up, I want to change that behavior 269 269 00:14:26,720 --> 00:14:29,260 where the popup of one macro closes 270 270 00:14:29,260 --> 00:14:31,120 when we create a new one. 271 271 00:14:31,120 --> 00:14:33,403 And so that's this autoClose here. 272 272 00:14:34,980 --> 00:14:37,260 So we use this one when we want to override 273 273 00:14:37,260 --> 00:14:39,970 the default behavior of the popup closing 274 274 00:14:39,970 --> 00:14:42,123 when another popup is opened. 275 275 00:14:43,020 --> 00:14:45,770 And so this is exactly the one we are looking for. 276 276 00:14:45,770 --> 00:14:47,550 And so by default, it is true. 277 277 00:14:47,550 --> 00:14:49,453 And so let's set that to false. 278 278 00:14:51,250 --> 00:14:56,250 So autoClose set it to false. 279 279 00:15:00,310 --> 00:15:03,400 And then finally, there's also closeOnClick, 280 280 00:15:03,400 --> 00:15:06,990 which again will prevent popups from closing 281 281 00:15:06,990 --> 00:15:10,910 but this time, whenever the user clicks on the map. 282 282 00:15:10,910 --> 00:15:13,450 So as we see here, that's the default behavior. 283 283 00:15:13,450 --> 00:15:16,653 And so let's put this one here, to false as well. 284 284 00:15:20,343 --> 00:15:22,200 And again, I'm doing all this 285 285 00:15:22,200 --> 00:15:23,800 so that I can show you a little bit 286 286 00:15:23,800 --> 00:15:26,033 how we work with documentation. 287 287 00:15:27,460 --> 00:15:30,605 So finally we have also the className. 288 288 00:15:30,605 --> 00:15:32,195 And so, as I mentioned before, 289 289 00:15:32,195 --> 00:15:36,096 we can use this one to assign any CSS class name 290 290 00:15:36,096 --> 00:15:38,366 that we want to the popup. 291 291 00:15:38,366 --> 00:15:39,970 And so this is gonna be useful 292 292 00:15:39,970 --> 00:15:43,150 to style it according to our needs. 293 293 00:15:43,150 --> 00:15:48,124 And so in our CSS, I already have a class for popups, 294 294 00:15:48,124 --> 00:15:50,153 so let's just search for popup. 295 295 00:15:51,430 --> 00:15:53,363 So here is a lot of stuff, 296 296 00:15:55,120 --> 00:15:56,960 but the ones that we are interested in 297 297 00:15:56,960 --> 00:15:59,693 is running-popup and cycling-popup. 298 298 00:16:00,660 --> 00:16:03,520 So these here are basically styles 299 299 00:16:03,520 --> 00:16:07,930 that I assigned automatically to all the popups in leaflet. 300 300 00:16:07,930 --> 00:16:11,630 So that's why they have this dark background color 301 301 00:16:11,630 --> 00:16:13,890 and why they have the font size that they have. 302 302 00:16:13,890 --> 00:16:18,720 So all of that, I actually already styled here using CSS. 303 303 00:16:18,720 --> 00:16:22,900 But now I want to be able to add a custom class as well 304 304 00:16:22,900 --> 00:16:26,380 so that I can style the running activities, with this green 305 305 00:16:26,380 --> 00:16:28,763 and the cycling ones, with this orange. 306 306 00:16:30,890 --> 00:16:34,020 So later we will identify in this class here dynamically, 307 307 00:16:34,020 --> 00:16:38,473 but for now let's put all of them to running pop up. 308 308 00:16:40,400 --> 00:16:43,870 And so that's actually already it. 309 309 00:16:43,870 --> 00:16:47,940 Now, finally, we also need to set then the text back 310 310 00:16:47,940 --> 00:16:50,030 because right now we don't have any texts 311 311 00:16:52,760 --> 00:16:54,443 here in our markers. 312 312 00:16:55,360 --> 00:16:58,950 So if I click here, can you see, we indeed get a marker 313 313 00:16:58,950 --> 00:17:00,683 and it even has this class here. 314 314 00:17:01,720 --> 00:17:05,380 And let's just see what happens when I click another one. 315 315 00:17:05,380 --> 00:17:07,770 And yeah, that works. 316 316 00:17:07,770 --> 00:17:12,360 So all of them stay open just as we wanted. 317 317 00:17:12,360 --> 00:17:16,280 But as I was saying before, they don't have any content yet. 318 318 00:17:16,280 --> 00:17:17,893 And so we need to set that. 319 319 00:17:19,080 --> 00:17:22,773 And that is actually again on the marker, I believe. 320 320 00:17:24,820 --> 00:17:27,103 So it's a method that's on the marker. 321 321 00:17:29,980 --> 00:17:31,763 So let's see where it is. 322 322 00:17:36,910 --> 00:17:39,800 Maybe it's one of these ones inherited from layer. 323 323 00:17:39,800 --> 00:17:41,730 So you see that these are basically classes 324 324 00:17:41,730 --> 00:17:43,670 that leaflet uses 325 325 00:17:43,670 --> 00:17:46,050 and so then the marker can inherit methods 326 326 00:17:47,110 --> 00:17:49,253 from other classes, essentially. 327 327 00:17:50,990 --> 00:17:54,290 And so here is the method that I was actually looking for 328 328 00:17:54,290 --> 00:17:58,580 and so setPopupContent is the one that we're looking for 329 329 00:17:58,580 --> 00:18:01,200 because here we can then specify a string 330 330 00:18:01,200 --> 00:18:03,110 or even an HTMLElement 331 331 00:18:03,110 --> 00:18:06,870 in order to give the popup some content. 332 332 00:18:06,870 --> 00:18:08,440 Now, another thing that's interesting 333 333 00:18:08,440 --> 00:18:10,620 to see here in the documentation 334 334 00:18:10,620 --> 00:18:14,470 is that all these methods always returned this. 335 335 00:18:14,470 --> 00:18:16,330 So basically the current object 336 336 00:18:16,330 --> 00:18:19,270 which then makes all of these methods chainable. 337 337 00:18:19,270 --> 00:18:21,760 So remember how we did exactly that 338 338 00:18:21,760 --> 00:18:23,580 by the end of the previous section 339 339 00:18:23,580 --> 00:18:26,770 to also make methods in our own classes chainable. 340 340 00:18:26,770 --> 00:18:29,500 And so you'll see that the leaflet developers 341 341 00:18:29,500 --> 00:18:32,533 are here indeed using the exact same technique. 342 342 00:18:33,540 --> 00:18:36,440 So again, I think that's pretty interesting to see. 343 343 00:18:36,440 --> 00:18:41,440 But now let's copy this method here and add a tier. 344 344 00:18:42,820 --> 00:18:47,020 So before we actually open the popup here in the next line, 345 345 00:18:47,020 --> 00:18:50,630 and for now, let's just set it back to work out 346 346 00:18:52,460 --> 00:18:55,053 and then let's go back and see. 347 347 00:18:56,820 --> 00:18:59,170 So for some reason, this always takes some time. 348 348 00:18:59,170 --> 00:19:00,233 Now, here we are. 349 349 00:19:01,150 --> 00:19:03,680 And yeah, now it says workout. 350 350 00:19:03,680 --> 00:19:07,960 They all stay opened and you see that when we click here, 351 351 00:19:07,960 --> 00:19:12,960 then the map even pans so that it can fit the new popup. 352 352 00:19:13,530 --> 00:19:16,199 Great, So this works really fine, 353 353 00:19:16,199 --> 00:19:18,707 but in the final application, 354 354 00:19:18,707 --> 00:19:22,230 obviously the marker is not put on the map immediately 355 355 00:19:22,230 --> 00:19:23,760 because the popup itself, 356 356 00:19:23,760 --> 00:19:26,060 will contain data about the workout. 357 357 00:19:26,060 --> 00:19:28,170 And so we first needed that data. 358 358 00:19:28,170 --> 00:19:31,370 And so here in the real application, when we click, 359 359 00:19:31,370 --> 00:19:35,390 what happens is that this form here opens,right? 360 360 00:19:35,390 --> 00:19:38,570 And so if we take a look at our flow chart 361 361 00:19:38,570 --> 00:19:42,090 that's also then gonna be the next step. 362 362 00:19:42,090 --> 00:19:45,010 So basically we have the render workout form 363 363 00:19:45,010 --> 00:19:47,640 whenever the user clicks on a map. 364 364 00:19:47,640 --> 00:19:49,420 And so in the next lecture, 365 365 00:19:49,420 --> 00:19:51,963 this year is what we're gonna implement. 32460