Original subtitles

1 1

So now that you have a good understanding 2

2

of how we plan a project 3

3

and build a flow chart using user stories, 4

4

it's time to start working on the project itself. 5

5

So let's now learn how to use the Geolocation API. 6

6

And the Geolocation API is called an API 7

7

because it is in fact, a browser API 8

8

just like for example, internationalization 9

9

or timers, or really anything that the browser gives us. 10

10

And so Geolocation is just another API 11

11

like that, but it's also a very modern one, 12

12

and actually there are many other modern APIs 13

13

like that, for example, to access the user's camera 14

14

or even to make a user's phone vibrate. 15

15

So there's all kinds of crazy stuff that you can do, 16

16

but in this project, let's simply focus on Geolocation. 17

17

And geolocation is actually very, very easy to use. 18

18

All you have to do is navigator.geolocation. 19

19

So VS code is already showing it 20

20

to me and then get 21

21

current position. 22

22

And now this function here takes 23

23

as an input to Callback functions. 24

24

And the first one is to Callback function 25

25

that will be called on success. 26

26

So whenever the browser successfully got the coordinates 27

27

of the current position of the user 28

28

and to second callback is the Error Callback 29

29

which is the one that is gonna 30

30

be called when there happened an error 31

31

while getting the coordinates. 32

32

So let's simply define two functions here. 33

33

So this is the success one, and this is the error one. 34

34

And let's actually simply start with this one. 35

35

And here we will simply do an alert. 36

36

So like this could not get 37

37

your position 38

38

and now about the Success Callback. 39

39

And this callback function here is actually called 40

40

with a parameter, which we call the Position Parameter. 41

41

So we can define it here. 42

42

And as always, we can give it any name that we want. 43

43

It is simply JavaScript who will call this function here 44

44

in case of success. 45

45

And it will pass in an argument 46

46

and we can then use that here. 47

47

And so for now, let's simply log it to the console. 48

48

And that's actually it already. 49

49

Now just to make sure that we don't get any errors 50

50

in an old browser, we can test 51

51

if this navigator.geolocation actually exists. 52

52

So let's just say 53

53

if navigation 54

54

or navigator.geolocation. 55

55

So if that exists, well then basically do all of this. 56

56

So let's check it, 57

57

and actually I already have the page running, 58

58

but it's here on this other side 59

59

because it takes up too much space. 60

60

But anyway, here, you already see dead popup window 61

61

from the browser asking for permission to use your location. 62

62

And so let's actually start 63

63

by clicking on Block just to see what happens then. 64

64

And so, as you see, this is a situation 65

65

in which there is an error getting the coordinates. 66

66

And so therefore we then get this alert 67

67

that we specified down here. 68

68

All right. 69

69

But anyway, let's go back 70

70

and we can then click here on this icon 71

71

on this right side, and then clear these settings. 72

72

So I have blocked tracking the location 73

73

but now I want to actually make it work when I reload, 74

74

and so I need to clear that setting 75

75

so that now it's gonna ask me again 76

76

this time I allow, and now let's take a look at the console. 77

77

And so here, indeed, we get this position object. 78

78

All right, and the thing that we are interested in 79

79

is already here. 80

80

So that's these coordinates 81

81

with this latitude and this longitude. 82

82

Let's see what else we have in there. 83

83

So we also have altitude, 84

84

we have speed, but these are probably only available 85

85

like on mobile phones, because I guess that 86

86

like most computers don't have a way 87

87

of knowing the altitude, 88

88

but anyway let's now get this latitude 89

89

and the longitude from this object. 90

90

So remember they're called latitude 91

91

and longitude and they are inside of this coord's object. 92

92

So this is a child object of this bigger object. 93

93

And so let's not take the positions out of the object. 94

94

So actually the coordinates out of the object. 95

95

And so let's simply do, 96

96

const latitude=position.coords, 97

97

and now we could write .latitude 98

98

like this, but even better, 99

99

we can simply use this structuring. 100

100

And so this will then create 101

101

a variable called latitude based 102

102

out of the latitude property of this object. 103

103

And now the same for the longitude. 104

104

So just to see if this worked, 105

105

let's just reload here again. 106

106

And so indeed, here are the coordinates 107

107

of my current location. 108

108

They are certainly not 100% accurate 109

109

but we should be able to work with them. 110

110

Now, what I want to do with his coordinates 111

111

will be of course to load the map 112

112

and then center that map on this position. 113

113

And so in the next lecture, we're actually gonna do that 114

114

but for now let's simply very quickly create a link 115

115

on Google maps, okay. 116

116

So let me quickly open up Google maps here. 117

117

And so the way the URLs work 118

118

on Google maps is that we have this URL 119

119

and then here we have the latitude and here the longitude. 120

120

And so it's very simple to build a URL like this. 121

121

Let's just copy this very quick. 122

122

Then here creating a template literal. 123

123

This part here is not important. 124

124

And so this here is gonna be the latitude, 125

125

and then here the longitude. 126

126

Give it a safe, 127

127

and now here is that link, 128

128

and I think I need to make it a bit bigger here actually 129

129

for you. 130

130

And now we can right click here and then open a new tab, 131

131

and indeed here is Google maps on my current location. 132

132

All right, and no matter where I go, 133

133

well, actually it changes the URL. 134

134

So nevermind, but yeah, 135

135

you should try to do that on your own, of course, 136

136

and then it will take you to your current location 137

137

where you are right now. 138

138

So of course your numbers here are gonna look different 139

139

than mine. 140

140

But if you create a link like this, 141

141

then that will take you to your current position on the map, 142

142

and I think that's really cool already. 143

143

So this was of course 144

144

just to see how Geolocation actually works in JavaScript. 145

145

And now in the next video, 146

146

we will use a third party script to basically load a map 147

147

and display it here on the right side of our user interface. 148

148

So on this part here, we want a map just like in our demo, 149

149

and so that's gonna be the task in the next video.