Original subtitles

1 1

So in this video we're gonna display a marker 2

2

wherever we click on the map. 3

3

And for that we are gonna use one more time, 4

4

the leaflet library. 5

5

And just to make sure that we're following the right path 6

6

according to our flow chart here, let's take a look at it. 7

7

And so indeed when the page loads, 8

8

then we get to current location. 9

9

So the coordinates of that, and then after that is done 10

10

the map is rendered in the current location. 11

11

And so now what we're gonna do next 12

12

is to bind an event handler, 13

13

so that whenever the user clicks on the map, 14

14

we can then display a marker on the map. 15

15

So for now we're gonna jump this one and this one, 16

16

and continue working with the map. 17

17

And so we're gonna basically render a workout on the map, 18

18

which is not yet a workout, 19

19

but we're simply gonna put a pin or a marker on the map 20

20

and then later we can replace that 21

21

with the data coming from the workout. 22

22

All right? 23

23

So let's go do that. 24

24

And the first thing that we need to do 25

25

is to actually add the event handler to the map 26

26

so that we can then handle any incoming clicks. 27

27

Now, how are we gonna do that? 28

28

I mean, should we simply attach an event listener 29

29

to this whole map element here? 30

30

That wouldn't really work because then we would have no way 31

31

of knowing where exactly the user clicked here on the map. 32

32

So basically we would have no way of knowing 33

33

the GPS coordinates of whatever location 34

34

the user clicked here on the map. 35

35

Because that is data that only the map knows, right? 36

36

So when I click, let's say here where I am right now, 37

37

then I want to handle that click exactly at that position. 38

38

And so therefore we need access to the coordinates 39

39

of the point that was just clicked. 40

40

So in summary, what I'm trying to say 41

41

is that we cannot simply use the add event listener method 42

42

that we have been using all the time. 43

43

Instead, we can use something similar 44

44

that is actually available on Leaflet. 45

45

So in the leaflet library. 46

46

And so this is where now this map variable here 47

47

comes into play for the first time. 48

48

So when we first wrote this coord here 49

49

or actually pasted it from the leaflet documentation, 50

50

I didn't really explain why we were doing this. 51

51

So why we were storing the result 52

52

of creating the map into a variable, 53

53

but now this is gonna be important 54

54

because it's onto this map object here 55

55

where we can now basically add an event listener. 56

56

So the idea is similar to what we do 57

57

using add event listener but on the map, 58

58

we can simply do this. 59

59

So map.on, 60

60

and so again this on method here 61

61

is not coming from JavaScript itself. 62

62

It is instead of coming from the leaflet library. 63

63

So this map object here is in fact an object 64

64

that was generated by a leaflet. 65

65

So we can see that because of this L here 66

66

and so therefore this is gonna be a special object 67

67

with a couple of methods and properties on it. 68

68

And in fact let's actually start 69

69

by taking a look at it in the console. 70

70

So map, and let's see what we get here. 71

71

So down here it is, let's get some more space here. 72

72

And so here you see, there's a lot of stuff in here. 73

73

Also, you see that the developers of this library 74

74

also use this underscore convention here 75

75

basically to make these methods and properties protected. 76

76

And so simply by taking a look at this coord here, 77

77

we already know that we should not 78

78

basically manipulate this here manually. 79

79

So let's just look at the ones that don't have this. 80

80

So there should be this on method that I'm using, 81

81

but maybe it's simply inheriting that. 82

82

So let's see. 83

83

It's also not here. 84

84

It doesn't really matter anyway. 85

85

So I was just trying to show you what happens here, 86

86

but here it actually is. 87

87

So here is the on method 88

88

that we are now using basically as an event listener. 89

89

So here is the on method that we're now basically gonna use 90

90

instead of the standard built-in that event listener method. 91

91

Now, right? So, yeah. 92

92

This was really just to show you a little bit 93

93

the internals of the leaflet library, 94

94

because I think that it's important that 95

95

you can also take a look at coord written by other people. 96

96

And so you saw that they also use the prototype chain 97

97

and very heavily in fact, 98

98

you saw that they also use the underscore convention. 99

99

And if you wanna dig really deep into that coord, 100

100

I'm sure there's gonna be a lot 101

101

of interesting stuff in there. 102

102

But anyway, let's not add here the event listener basically. 103

103

And here we can also specify the type of event 104

104

and then here or call back function. 105

105

So again, the idea here is indeed very similar. 106

106

Now when leaflet calls this function here, 107

107

it will do so with a special map event. Okay? 108

108

So again, just like in standard JavaScript, 109

109

we get access to an event, 110

110

but this one is an event created by leaflet. 111

111

So let's just call it mapEvent. 112

112

And then let's actually simply take a look 113

113

at this event for now. 114

114

And so this console.log here should now happen 115

115

whenever we click on the map. 116

116

And so again, map is that variable here, 117

117

which is the result of calling leaflet, So L.map. 118

118

So let's see, and it always takes 119

119

a little bit of time to loading this map. 120

120

So let's just click here somewhere, 121

121

and you'll see that immediately we got this event down here. 122

122

Right? And then actually right here in lat lng, 123

123

we then get the coordinates of the point that was clicked. 124

124

Great. Let's try another one just to see 125

125

if the coordinates are different. 126

126

And you see, they are a little bit different indeed. 127

127

And so now we can take this event object, 128

128

take the coordinates of latitude and longitude, 129

129

and then add a marker at exactly that point. 130

130

So we already know how to create a marker, 131

131

even though this is a very simplistic one. 132

132

And so we're gonna improve it a little bit. 133

133

But for now let's just take this coord 134

134

and then here let's take the latitude 135

135

and longitude from this object. 136

136

So we can destructure it because remember there was 137

137

a lat and a lng variable inside of mapEvent.lat, 138

138

I think lng like this, 139

139

but let's check again just to make sure 140

140

because I don't really remember it. 141

141

So the pin from the beginning here is now gone indeed. 142

142

Let's now click somewhere here. 143

143

And now we got this pin right here in the center 144

144

and that's because we didn't fix our coord yet, 145

145

but for now I just wanted to take a look. 146

146

So that's the lat lng object right there. 147

147

And then in there, there is an object with lat lng. 148

148

So these are the two values 149

149

that we just took out of this object. 150

150

Okay. But now let's actually then put this pin exactly 151

151

where we click instead of putting it in the center, 152

152

like we are doing it right now. 153

153

So this coords here is of course the center of the map 154

154

that we specified before. 155

155

So that is coming from geolocation. 156

156

And now we want to use this lat and lng. 157

157

So let's specify in URL, lat lng, 158

158

and therefore now let's just write like Workout. 159

159

And again, we're gonna change this in a minute 160

160

to make it a bit better. 161

161

But now I'm just interested in seeing 162

162

if the popup is appearing in the right place 163

163

and let's wait for it. 164

164

And there you go. 165

165

Now I click this one then to here and indeed it works. 166

166

So great, that's beautiful already, 167

167

but now watch what happens whenever I click. 168

168

So whenever I add a new marker, 169

169

you see that this popup here always closes, right? 170

170

But in our demo, I actually have it so 171

171

that they always keep open. 172

172

So if I click here and add another one, 173

173

and the data doesn't matter here now. 174

174

Then you see that all the others remain open. 175

175

And I think that that is actually a better option. 176

176

And all right, now you also see 177

177

that I added some custom formatting to these popups. 178

178

So for example the running one always has this green border 179

179

while the cycling one has this orange border. 180

180

And that's because in leaflet, 181

181

we are able to add our own class names to the popup. 182

182

So there's a lot of stuff 183

183

that we can do with popups in leaflet. 184

184

And so let's now try to experiment with a couple of them. 185

185

So it starts here with L.marker. 186

186

And so this is basically the coord 187

187

that adds the marker to the map. 188

188

And this one is all still correct. 189

189

There's nothing to change here. 190

190

Then here we add .marker to the map. 191

191

So essentially .marker creates the marker 192

192

and then .addTo adds it to the map. 193

193

And so that's similar to here, 194

194

where we first select a title layer 195

195

and then we add that tile layer 196

196

to the map again, using .addTo. 197

197

And all of these methods, 198

198

they are in the documentation of leaflet 199

199

and we're actually gonna go there in a minute, okay? 200

200

Next we then have bindPopup, 201

201

which will basically create a popup 202

202

and bind it to the marker. 203

203

And so here, we simply pass in this string. 204

204

Now, so that's why we get to work out in all of the markers. 205

205

But here, instead of specifying a string, 206

206

we can also create a brand new popup object, 207

207

which will then contain a couple of options. 208

208

And so that is what I'm gonna do here now. 209

209

So instead of this, I will do L.pop up 210

210

and then here I can pass in a couple of options, 211

211

but now let's actually go to the leaflet documentation 212

212

because otherwise all of this 213

213

will simply appear like magic to you. 214

214

So I don't want to just write the coord here 215

215

and you copying it, instead I want to show you 216

216

where I'm getting it from in the documentation 217

217

because reading documentation will be something 218

218

really really important in your job as a developer. 219

219

Because as I just mentioned previously 220

220

every library that you're gonna use 221

221

will have some documentation, 222

222

so that you can actually know how to use it. 223

223

Cause otherwise you would have no idea, right? 224

224

And so reading documentation 225

225

will certainly become part of the job. 226

226

So let's just go here to leaflet. 227

227

And then basically on every page of every library, 228

228

you will always find something called 229

229

like docs or documentation. 230

230

And so here is a bunch of stuff that you can take a look at. 231

231

Now here, I will just take a look at the UI layers, 232

232

which are the markers, popup and tool tip. 233

233

So as for the marker, this is basically what we did before. 234

234

So L.marker then add to map. 235

235

And so this is exactly what we already have. 236

236

So this is an example, as we can see here, 237

237

but down here is how we should actually do it. 238

238

So how exactly this marker function should be called. 239

239

So we can pass in or have to pass in the latitude longitude. 240

240

And we can also pass in an object of options. 241

241

And so here are then all the options 242

242

that are available for the marker, 243

243

but in this case we don't have any. 244

244

So I'm keeping it fairly simple here, 245

245

but even on a marker, we can change all kinds of stuff. 246

246

For example, we could change opacity, as you see here 247

247

we could also like riseOnHover. 248

248

So then the marker will get on top of others 249

249

when you hover the mouse over it. 250

250

And so now you see there's all kinds of stuff 251

251

that we can do here, 252

252

But let's not go actually to the popup. 253

253

So you see there's a lot of stuff here. 254

254

And as always, I encourage you to take a look at it. 255

255

But now again, let's talk about the popup itself. 256

256

And so again, here you see that L.popup 257

257

can take in an object of options. 258

258

And so this is what we will do now. 259

259

And that's the popup that we will then use on the marker 260

260

to create a popup that is attached to the marker. 261

261

So the first two that I want to specify 262

262

is the maxWidth and the minWidth, 263

263

so that the popup always has a nice size. 264

264

And so basically we will now create an object 265

265

with these two properties. 266

266

So let's set this one to 250 267

267

and the minWidth to let's say just 100 pixels, all right. 268

268

Now, next up, I want to change that behavior 269

269

where the popup of one macro closes 270

270

when we create a new one. 271

271

And so that's this autoClose here. 272

272

So we use this one when we want to override 273

273

the default behavior of the popup closing 274

274

when another popup is opened. 275

275

And so this is exactly the one we are looking for. 276

276

And so by default, it is true. 277

277

And so let's set that to false. 278

278

So autoClose set it to false. 279

279

And then finally, there's also closeOnClick, 280

280

which again will prevent popups from closing 281

281

but this time, whenever the user clicks on the map. 282

282

So as we see here, that's the default behavior. 283

283

And so let's put this one here, to false as well. 284

284

And again, I'm doing all this 285

285

so that I can show you a little bit 286

286

how we work with documentation. 287

287

So finally we have also the className. 288

288

And so, as I mentioned before, 289

289

we can use this one to assign any CSS class name 290

290

that we want to the popup. 291

291

And so this is gonna be useful 292

292

to style it according to our needs. 293

293

And so in our CSS, I already have a class for popups, 294

294

so let's just search for popup. 295

295

So here is a lot of stuff, 296

296

but the ones that we are interested in 297

297

is running-popup and cycling-popup. 298

298

So these here are basically styles 299

299

that I assigned automatically to all the popups in leaflet. 300

300

So that's why they have this dark background color 301

301

and why they have the font size that they have. 302

302

So all of that, I actually already styled here using CSS. 303

303

But now I want to be able to add a custom class as well 304

304

so that I can style the running activities, with this green 305

305

and the cycling ones, with this orange. 306

306

So later we will identify in this class here dynamically, 307

307

but for now let's put all of them to running pop up. 308

308

And so that's actually already it. 309

309

Now, finally, we also need to set then the text back 310

310

because right now we don't have any texts 311

311

here in our markers. 312

312

So if I click here, can you see, we indeed get a marker 313

313

and it even has this class here. 314

314

And let's just see what happens when I click another one. 315

315

And yeah, that works. 316

316

So all of them stay open just as we wanted. 317

317

But as I was saying before, they don't have any content yet. 318

318

And so we need to set that. 319

319

And that is actually again on the marker, I believe. 320

320

So it's a method that's on the marker. 321

321

So let's see where it is. 322

322

Maybe it's one of these ones inherited from layer. 323

323

So you see that these are basically classes 324

324

that leaflet uses 325

325

and so then the marker can inherit methods 326

326

from other classes, essentially. 327

327

And so here is the method that I was actually looking for 328

328

and so setPopupContent is the one that we're looking for 329

329

because here we can then specify a string 330

330

or even an HTMLElement 331

331

in order to give the popup some content. 332

332

Now, another thing that's interesting 333

333

to see here in the documentation 334

334

is that all these methods always returned this. 335

335

So basically the current object 336

336

which then makes all of these methods chainable. 337

337

So remember how we did exactly that 338

338

by the end of the previous section 339

339

to also make methods in our own classes chainable. 340

340

And so you'll see that the leaflet developers 341

341

are here indeed using the exact same technique. 342

342

So again, I think that's pretty interesting to see. 343

343

But now let's copy this method here and add a tier. 344

344

So before we actually open the popup here in the next line, 345

345

and for now, let's just set it back to work out 346

346

and then let's go back and see. 347

347

So for some reason, this always takes some time. 348

348

Now, here we are. 349

349

And yeah, now it says workout. 350

350

They all stay opened and you see that when we click here, 351

351

then the map even pans so that it can fit the new popup. 352

352

Great, So this works really fine, 353

353

but in the final application, 354

354

obviously the marker is not put on the map immediately 355

355

because the popup itself, 356

356

will contain data about the workout. 357

357

And so we first needed that data. 358

358

And so here in the real application, when we click, 359

359

what happens is that this form here opens,right? 360

360

And so if we take a look at our flow chart 361

361

that's also then gonna be the next step. 362

362

So basically we have the render workout form 363

363

whenever the user clicks on a map. 364

364

And so in the next lecture, 365

365

this year is what we're gonna implement.