Original subtitles

1 1

So in this video, 2

2

we gonna learn how to display 3

3

a map using a third party library called Leaflet. 4

4

So to start let's quickly Google Leaflet 5

5

and probably the first result will already 6

6

be for this library. 7

7

So you'll see that Leaflet 8

8

is an open source JavaScript library 9

9

for mobile-friendly interactive maps. 10

10

So essentially this is a library 11

11

that some other developers wrote 12

12

and that we can now include 13

13

for free our own code and use it. 14

14

And in this case, 15

15

we can use it to display in maps 16

16

and whenever we use a third-party library, 17

17

the first thing to do is to basically include it 18

18

in our site. 19

19

And so let's come here to the Downloads Page. 20

20

And so here we can download Leaflet 21

21

to our computer if we wanted 22

22

or we can also use a hosted version of Leaflet. 23

23

And this basically means that we can use 24

24

a version of this library that is already hosted 25

25

by someone else. 26

26

So in this case, 27

27

it is a CDN which is a Content Delivery Network. 28

28

And so it has this URL here. 29

29

So that stands for unpackaged.com. 30

30

And then here we have the Leaflet Library. 31

31

So actually we will need a CSS file 32

32

and we will also need a JavaScript file. 33

33

Now, there are also a bit more elegant ways 34

34

of including JavaScript, 35

35

for example using a package manager like NPM. 36

36

And then all we would have to do 37

37

is NPM install Leaflet into our application. 38

38

And actually this is how we will do it in the future. 39

39

So in one of the next sections, 40

40

we will actually learn how to do this 41

41

using the NPM package manager, 42

42

but for now probably the easiest way 43

43

to get started is to simply include 44

44

a hosted version that is on a CDN. 45

45

And so let's grab this code here 46

46

and paste it in our HTMLs' hat. 47

47

So right here and to before our own script 48

48

and that's very important. 49

49

All right, so this here is our script 50

50

and of course it is in our script 51

51

where we will then use the Leaflet Library. 52

52

And so by the time that our script loads, 53

53

the browser must already have downloaded 54

54

the Leaflet Library because otherwise 55

55

our code will not be able to work without library. 56

56

And that makes sense, right? 57

57

Now here we also want to specify actually 58

58

the Differ Attribute. 59

59

So as we learned previously, 60

60

we should never put any JavaScript 61

61

in the header without any of the Differ or Async Attributes. 62

62

And since the order matters here, 63

63

remember, we must then use the Differ Attribute. 64

64

And so this is actually a perfect example 65

65

for when we need to use Differ because again 66

66

here the order in which the scripts are downloaded 67

67

is actually very important. 68

68

Okay, so give it a safe here 69

69

and then let's go back to the Leaflet site. 70

70

So we already included the Library into our site, 71

71

but of course we need to do something with it. 72

72

So on its own this Leaflet script here doesn't do anything. 73

73

So we now need to use basically 74

74

the functions that are defined 75

75

in this Library to our advantage 76

76

and so to actually use the Library on our own page. 77

77

And so down here, 78

78

there is a very simple example 79

79

of how we could implement a map 80

80

with a certain coordinates here. 81

81

So these coordinates and then also how 82

82

to display a very simple marker like this one. 83

83

So again let's just go to this overview page here. 84

84

So basically the very first page 85

85

and then just copy this very simple code that we have here. 86

86

So copy it and then this is what 87

87

I actually want to happen 88

88

when the browser is successful getting the coordinates. 89

89

So let's paste this here, 90

90

give it a safe and now of course, 91

91

we need to adapt this here to our current situation. 92

92

First that's made as a const and not a var 93

93

then whatever string 94

94

that we pass here into this map function 95

95

must be the ID name of an element in our HTML. 96

96

And it is in that element where the map 97

97

will be displayed. 98

98

And so what that means is that in our HTML 99

99

we need an element with the ID of map 100

100

and that should already be here. 101

101

So that is down here. 102

102

So here I have this empty div and it has the ID of map. 103

103

And so that's exactly this here 104

104

so I could change it here 105

105

and then of course I would also have 106

106

to change it in the HTML. 107

107

Now this L here this is basically 108

108

the main function that Leaflet gives us as an entry point. 109

109

So basically this is kind of 110

110

the namespace a little bit like for example, 111

111

this Intel namespace for the Internationalization API. 112

112

So we talked about namespaces before 113

113

and so Leaflet basically gives us this L namespace here 114

114

and then that L has a couple 115

115

of methods that we can use. 116

116

And one of them is this map method. 117

117

Another one is this tile layer 118

118

where we actually need to define the tiles of our map 119

119

and then we can also display markers like this. 120

120

So this should probably already render a map on our page. 121

121

It will do that on these coordinates 122

122

but for now that's okay for us. 123

123

So let's just see if this actually worked, 124

124

now let's try to reload here, 125

125

but for some reason, 126

126

nothing is happening. 127

127

So let's check if you're in the console, 128

128

we actually have access to that L variable 129

129

and just see that we do. 130

130

So this L here is of course the L 131

131

that we use previously in our code as well. 132

132

So it's this L here and it is available here 133

133

in this script and also here in the browser console 134

134

because it is essentially a global variable 135

135

inside of the script of Leaflet, right? 136

136

So here in this script 137

137

that we include here leaflets.js, 138

138

the L variable is a global variable 139

139

that we then can access from all the other scripts. 140

140

And I think that this is something 141

141

that we never saw happening before, 142

142

because we never worked with multiple scripts. 143

143

So let me show it a little bit better to you 144

144

and include another script here. 145

145

Let's call it just other.js. 146

146

So I'm creating it here, other.js 147

147

and now let's define first name here, 148

148

set it to Jonas and then here in these gripped.js, 149

149

I should be able to access that variable. 150

150

So let's see and here it is. 151

151

And so the reason for that is that 152

152

this first name variable is a global variable here 153

153

in this script. 154

154

And so again, 155

155

any variable that is global in any script 156

156

will be available to all the other scripts 157

157

while as long as they appear after that script 158

158

here included in the HTML. 159

159

So script.js has access to all the global variables 160

160

in othe.js when other.js and leaflet.js 161

161

but for example, other.js does not have access 162

162

to anything from script.js 163

163

because it appears afterwards, all right? 164

164

So in other, let's see any variable here. 165

165

So for example the month, 166

166

so here we will not have access to month. 167

167

All right, so month is not defined. 168

168

And so the reason for that again, 169

169

is that by the time that this script here is executed, 170

170

this other.js, script.js has not yet been loaded. 171

171

And so therefore it doesn't find 172

172

this month variable anywhere in global scope. 173

173

All right but this was just an example. 174

174

Let's get rid of this. 175

175

Well, not get rid, let's just comment it out here maybe. 176

176

And anyway, maybe you noticed that already 177

177

the map here has appeared this time. 178

178

And so what that means is that our code is working. 179

179

Now, this one here is simply appearing in London 180

180

and that is because we still have the default code, 181

181

but now you can probably see that 182

182

what we want to do here is to use our own latitude 183

183

and longitude here, right? 184

184

So let's create an array called coards like this 185

185

and it will contain first the latidude 186

186

so that's the standard first latitude 187

187

and then the longitude. 188

188

And now let's use that array here, 189

189

because as you see this set view method expects 190

190

this array of coordinates, 191

191

then it also expects this second parameter, 192

192

but let's talk about that one later. 193

193

So here it's coards and then let's also use 194

194

the same coordinates here for the marker. 195

195

All right. Let's check again 196

196

and all right, that works. 197

197

Now here we just have this error 198

198

from the first variable that we created 199

199

in the other script but what matters here 200

200

is that now we have this beautiful map here, 201

201

right at my, well approximate location right now. 202

202

Now that other number that we saw in the function 203

203

is basically the zoom level of the map. 204

204

So we can zoom in and zoom out here on this. 205

205

And so now let's try it with some other values here, 206

206

for example 10 207

207

then you'll see that it's a lot more zoomed out, 208

208

but let's say we use 17. 209

209

Then that's probably going to be pretty close, 210

210

that's probably as close as it gets. 211

211

And actually 13 is a pretty a reasonable number. 212

212

So let's keep it at 13. 213

213

And now let's talk about this tile layer here. 214

214

So the map that we see on the page 215

215

is basically made up of small tiles 216

216

and these tiles they come from this URL here, 217

217

which basically is from open street map. 218

218

And maybe you have heard of open street map 219

219

and it's basically an open source map 220

220

that everyone can use for free. 221

221

And so open street map is actually 222

222

the one that we gonna use, 223

223

but Leaflet works with all other kinds of maps as well, 224

224

for example with Google maps 225

225

if that's the one that you prefer. 226

226

Now, we can also use this URL here to change 227

227

the appearance of our map. 228

228

So what we see here right now 229

229

or hopefully soon is basically 230

230

the default map of open street maps. 231

231

Now, however, when you Google around a little bit, 232

232

you can find different styles. 233

233

And so what I want to do now 234

234

is to change this style to another one that I've found. 235

235

And so to do that, 236

236

you can simply change this one here to fr 237

237

and then here it is /hot/ and that's actually it. 238

238

So that's simply another theme of these tiles. 239

239

And so if you give it a safe 240

240

then now you see that it looks different 241

241

and in my opinion that actually looks a lot better. 242

242

So when you refresh, 243

243

maybe you see that it builds up basically in this tiles. 244

244

So did you see that? 245

245

So basically these maps squares, 246

246

they appear one by one. 247

247

And so that's what I mean by tiles. 248

248

So those are the tiles that the map is made out of. 249

249

Just get rid of this error here 250

250

and then I think that for now, 251

251

this is actually enough. 252

252

So we also have this marker down here. 253

253

And so that's for this marker plus this pop-up, 254

254

but let's talk about in the next lecture, 255

255

how we can actually create our own ones 256

256

and then also display a pop-up and a marker 257

257

wherever we click on the map. 258

258

So if I clicked here, 259

259

then I wanted a popup here in the marker 260

260

or if I clicked over here, 261

261

then I wanted the marker to be here. 262

262

And so that gonna require a little bit more work. 263

263

And so let's leave that for the next video.