1

[Link],430 --> [Link],830

2
[Link],830 --> [Link],500
Part 1 of a two part series on geo location.

3
[Link],500 --> [Link],110
Instead of just sending text back and forth we're also going to set it up so I can
beam my actual coordinates

4
[Link],110 --> [Link],760
my long tuning latitude to everyone else connected to the chat app.

5
[Link],860 --> [Link],570
Then we can render a link and that link could go wherever we like in our case.

6
[Link],610 --> [Link],890
We're going to set it up to pull up a Google Maps page where the actual location of
the user who set

7
[Link],890 --> [Link],120
their location is marked.

8
[Link],170 --> [Link],150
Now to actually fetch a user's location or we're going to use the geo location API
which is available

9
[Link],150 --> [Link],780
in your client side javascript and it's actually a pretty well supported API.

10
[Link],830 --> [Link],810
It's available on all modern browsers whether that's mobile or desktop.

11
[Link],910 --> [Link],780
And the documentation can be found by googling geo location API and looking for the
NTN documentation

12
[Link],780 --> [Link],680
page the MDA docs or the Mozilla Developer Network.

13
[Link],710 --> [Link],630
They are my favorite docs for clients that technologies things like your web API is
your CSSA and your

14
[Link],960 --> [Link],670
HMO guidelines.

15
[Link],720 --> [Link],450
And as I mentioned this is a well-supported feature.

16
[Link],540 --> [Link],390
You can pretty much use it everywhere except for older versions of Internet
Explorer and the Opera Mini

17
[Link],390 --> [Link],580
browser but all your major desktop and mobile browsers are going to support this.

18
[Link],650 --> [Link],600
And if the browser is old we will set up a little message to let them know their
browser does not support

19
[Link],810 --> [Link],160
geo location.

20
[Link],160 --> [Link],510
If you ever want to learn more about geolocation or explore features that we do not
cover in the next

21
[Link],510 --> [Link],850
two videos you can refer to this page though we will be using most of the features
geo location has

22
[Link],850 --> [Link],790
to offer to get started.

23
[Link],800 --> [Link],690
What we're going to do is add a new button to our application.

24
[Link],710 --> [Link],840
It's going to sit alongside of sand and it's going to say something like send
location when the user

25
[Link],840 --> [Link],860
clicks that send location button.

26
[Link],920 --> [Link],310
We're going to use the geolocation API and usually this is going to require the
user to confirm they

27
[Link],310 --> [Link],400
want to share their location with this tab in the browser that pop up box is going
to happen.

28
[Link],410 --> [Link],370
It's going to be triggered by the browser there's no way around that you're going
to need to make sure

29
[Link],370 --> [Link],260
the user actually wants to share their location.

30
[Link],280 --> [Link],180
Once you have the coordinates you're going to an event that's going to go to the
server the server is

31
[Link],180 --> [Link],520
going to send it to all the other connected users.

32
[Link],610 --> [Link],610
And we're going to be able to render that information in a nice link.

33
[Link],610 --> [Link],760
Now we're going to get started in this video and we'll wrap up the feature in the
next one.

34
[Link],900 --> [Link],720
To kick things off.

35
[Link],800 --> [Link],840
We're going to add that button.

36
[Link],880 --> [Link],070
This is going to be the button that starts the entire process over inside of atom
inside of index.

37
[Link],240 --> [Link],910
AML.

38
[Link],020 --> [Link],900
We're going to add a button just below our form tag.

39
[Link],900 --> [Link],370
It's going to be outside of our existing form right here.

40
[Link],390 --> [Link],440
We're going to add the button tag and we're going to go ahead and give this an I.D.
of send location.
41
[Link],440 --> [Link],100
Now as for the visible button text we can go ahead and use send location as our
string saved the file.

42
[Link],100 --> [Link],020
And if we go ahead and refresh our app in the browser we should now see we have our
second location

43
[Link],020 --> [Link],480
button showing up just below.

44
[Link],480 --> [Link],020
We're going to fix all this later when we add the default styles.

45
[Link],030 --> [Link],320
But for now this does get the job done.

46
[Link],340 --> [Link],980
Now clicking this button currently is not going to do anything.

47
[Link],010 --> [Link],570
It's not tied to a form so it's not going to do any weird form submissions or page
reloads.

48
[Link],570 --> [Link],470
All we need to do is add a click listener to this button and we'll be able to run
whatever code we like.

49
[Link],470 --> [Link],490
In our case we're going to run that geolocation code.

50
[Link],510 --> [Link],740
This is going to happen over inside of atom inside of index dot J.S..

51
[Link],860 --> [Link],960
We're going to add some code down near the bottom.

52
[Link],980 --> [Link],280
Now the first thing I want to do is create a variable and I'm going to call this
variable location button.

53
[Link],230 --> [Link],220
And this is going to store our selector.

54
[Link],220 --> [Link],780
This is the J query selector that targets the button we just created because we're
going to need to

55
[Link],780 --> [Link],140
reference it multiple times and storing it in a variable.

56
[Link],140 --> [Link],300
Saves the need to make those calls again right here we're going to call a query
like we've done for

57
[Link],330 --> [Link],670
other selectors passing in one argument a string and we're selecting something by
ID which means we

58
[Link],670 --> [Link],190
got to start with that pound sign.

59
[Link],290 --> [Link],380
And the actual ID is send hyphen location send hyphen location right here.

60
[Link],380 --> [Link],640
Now that we have this in place we can go ahead and do whatever we like in our case
what we're going

61
[Link],640 --> [Link],610
to be doing is adding a click event.

62
[Link],740 --> [Link],930
We want to do something when someone clicks that button to get that done.

63
[Link],970 --> [Link],900
We're going to go to location button dot on now this is identical to doing the
following.

64
[Link],180 --> [Link],600
Jay query selecting the ID central location both of these are going to do the same
thing.

65
[Link],620 --> [Link],640
The benefit of the first solution is that we have a reusable variable which we are
going to reference

66
[Link],640 --> [Link],660
later on making to Jay query calls to the same selector.

67
[Link],660 --> [Link],210
It wastes time because it is going to require J query to manipulate the DOM
fetching that information

68
[Link],210 --> [Link],270
and that's expensive.

69
[Link],500 --> [Link],780
Location button on is going to be our event listener.

70
[Link],910 --> [Link],380
We're listening for the Click event inside of quotes for the first argument and the
second argument

71
[Link],410 --> [Link],560
as always is going to be our function.

72
[Link],560 --> [Link],080
This function is going to get called when someone clicks the button.

73
[Link],370 --> [Link],220
For now all we're going to do is check if the user has access to that geolocation
API.

74
[Link],350 --> [Link],230
If they don't we want to go ahead and print a message.

75
[Link],230 --> [Link],050
We're going to create an if statement.

76
[Link],360 --> [Link],370
The geolocation API exists on Navigator dot geolocation and we want to run some
code if it doesn't exist.

77
[Link],370 --> [Link],410
So we're going to flip it if there is no geo location object on a navigator.

78
[Link],410 --> [Link],120
We want to do something we're going to use return to prevent the rest of the
function from executing

79
[Link],120 --> [Link],160
and we're going to call the alert function available in all browsers that pops up
one of those default

80
[Link],190 --> [Link],600
alert boxes that makes you click OK.
81
[Link],710 --> [Link],240
We're going to use this as opposed to a fancy or motile if you are using something
like bootstrap or

82
[Link],240 --> [Link],080
foundation.

83
[Link],080 --> [Link],240
You can implement one of their built in tools.

84
[Link],240 --> [Link],720
For now though we're going to use alert which takes just one argument a string.

85
[Link],720 --> [Link],300
Your message geolocation not supported by your browser.

86
[Link],310 --> [Link],000
Awesome.

87
[Link],010 --> [Link],530
And now users who don't have support for this are gonna see a little message as
opposed to wondering

88
[Link],530 --> [Link],930
whether or not anything actually happened to actually fetcher users position.

89
[Link],000 --> [Link],880
We're going to use a function available on geolocation to access it.

90
[Link],890 --> [Link],390
It's navigator dot geo location dot get current position.

91
[Link],540 --> [Link],770
You get current position is a function that starts the process.

92
[Link],810 --> [Link],090
It's going to actively get the coordinates for the user.

93
[Link],170 --> [Link],260
In this case it's going to find the coordinates based off of the browser.

94
[Link],350 --> [Link],460
And this takes two functions.
95
[Link],510 --> [Link],510
The first one is your success function.

96
[Link],640 --> [Link],700
Right here we can at our first callback.

97
[Link],740 --> [Link],750
This is going to get called within the location information.

98
[Link],860 --> [Link],770
We're going to name this argument position.

99
[Link],900 --> [Link],120
The second argument to get current position is going to be our air handler if
something goes wrong.

100
[Link],030 --> [Link],420
We're going to create a function right here and we'll be learning a message to the
user when we're not

101
[Link],420 --> [Link],770
able to fetch the location using alert.

102
[Link],880 --> [Link],940
Let's go ahead and call alert a second time.

103
[Link],010 --> [Link],590
Printing a message like unable to fetch location.

104
[Link],600 --> [Link],370
This is going to print.

105
[Link],380 --> [Link],700
If someone gets prompted to share their location with the browser but they click
deny we're going to

106
[Link],700 --> [Link],560
say hey we can't fetch the location if you don't give us that permission.

107
[Link],560 --> [Link],300
Now the only case left is the success case.

108
[Link],350 --> [Link],080
This is where we're going to admit the event.
109
[Link],090 --> [Link],580
But before we do let's go ahead and simply logon to the screen so we can take a
peek at what is happening

110
[Link],640 --> [Link],430
inside of the position argument.

111
[Link],430 --> [Link],990
I'm going to log this to the screen.

112
[Link],990 --> [Link],110
Our server is going to restart and over inside of Google Chrome we can open up the
developer tools refresh

113
[Link],110 --> [Link],350
the page and we can click that send location button.

114
[Link],350 --> [Link],900
Now this is going to work on desktop and mobile.

115
[Link],960 --> [Link],780
Some mobile browsers are going to require you to be on HTP ass which is something
that we're going to

116
[Link],780 --> [Link],300
have set up for Heroku as you know the Heroku you are out is secure which means
it's not going to work

117
[Link],330 --> [Link],520
on localhost.

118
[Link],530 --> [Link],080
You can always test your mobile browsers by deploying the app to Heroku and running
there.

119
[Link],090 --> [Link],750
For now though I will be able to click send a location.

120
[Link],750 --> [Link],000
This is going to go ahead and start that process.

121
[Link],000 --> [Link],180
The process can take up to a second.

122
[Link],260 --> [Link],650
Now as you can see I did get my geo location position but I was ever prompted as to
whether or not I

123
[Link],650 --> [Link],210
wanted to share my location.

124
[Link],210 --> [Link],460
That's because I've already given it permission over here I can go ahead and click
click these settings

125
[Link],520 --> [Link],170
for future visits.

126
[Link],170 --> [Link],970
This means that I'm going to need to reauthorize if I refreshed the page and click
send location again.

127
[Link],020 --> [Link],270
You're going to see this little box which is probably going to show up for you.

128
[Link],290 --> [Link],490
You can either block it.

129
[Link],580 --> [Link],440
If I block it it's going to print unable to fetch location.

130
[Link],460 --> [Link],960
Or you can accept it.

131
[Link],170 --> [Link],710
I'm going to clear those settings one more time give the page a refresh.

132
[Link],830 --> [Link],740
And this time I am going to accept the location sharing and we're going to get the
geo location printing

133
[Link],770 --> [Link],440
out in the con..

134
[Link],450 --> [Link],250
Now once we get it we can go ahead and dive in the object itself is pretty simple.

135
[Link],320 --> [Link],280
We have a time stamp of exactly when we fetch the data.

136
[Link],290 --> [Link],040
This is useful if you're tracking a user over time which we're not doing.

137
[Link],040 --> [Link],570
We also have our coordinates.

138
[Link],720 --> [Link],040
We have all sorts of properties we're not going to use like accuracy altitude which
doesn't exist.

139
[Link],040 --> [Link],540
And other related ones we also have speed which is knowl.

140
[Link],610 --> [Link],640
The only tool we're ever going to use off this object is latitude and longitude
which do indeed exist.

141
[Link],660 --> [Link],030
This is the information we want to pass to the server to the server can send it to
everybody else.

142
[Link],030 --> [Link],140
This means we're going to go into the position object go into the records object
and grab those two.

143
[Link],480 --> [Link],740
Let's go ahead and do that over inside of Adam.

144
[Link],760 --> [Link],630
We are going to call socket dot emit and we're going to emit a brand new event.

145
[Link],650 --> [Link],060
One we do not have registered yet.

146
[Link],160 --> [Link],300
We're going to call this one create a location message create a location message is
not going to take

147
[Link],300 --> [Link],560
the standard text.

148
[Link],560 --> [Link],790
Instead it's going to take those long tattoo'd and latitude coordinates.

149
[Link],790 --> [Link],620
We're going to specify both of them starting with latitude.
150
[Link],740 --> [Link],910
We want to set latitude equal to position dot cords dot latitude.

151
[Link],930 --> [Link],070
This is the variable that we explored over inside of the council and we're going to
do the same thing

152
[Link],070 --> [Link],240
for a long itude study an equal to position dot cord's dot latitude awesome now
that we have this in

153
[Link],240 --> [Link],280
place we can actually go ahead and listen for this event over in the server and
when we get it all we're

154
[Link],280 --> [Link],410
going to do is pass this data along to all the connected users.

155
[Link],420 --> [Link],080
Let's go ahead and do just that.

156
[Link],100 --> [Link],310
Over inside of server J s registering a new event listener I'm going to remove the
old commented out

157
[Link],310 --> [Link],590
broadcast call that's no longer needed in create message and just below create
message.

158
[Link],590 --> [Link],210
We're going to call socket dot on again specifying a listener for this event.

159
[Link],210 --> [Link],710
Create a location message just as we defined it over inside of index.

160
[Link],750 --> [Link],550
J.S. now we are using iOS 6 since we're in node which means we can go ahead and set
up our arrow function.

161
[Link],720 --> [Link],730
We're going to have one argument this is going to be chord's and we can go ahead
and finish off the

162
[Link],730 --> [Link],150
arrow function in here.
163
[Link],140 --> [Link],580
We're going to be able to run whatever code we like for the moment.

164
[Link],590 --> [Link],640
All we're going to do is emit a new message event passing along the coordinates.

165
[Link],640 --> [Link],980
Although in part two we'll be making this a lot nicer setting up that you are out
for Google Maps.

166
[Link],120 --> [Link],530
Right now though we're going to call Oakshott emit.

167
[Link],670 --> [Link],070
We're going to emit a new message event and we're going to go ahead and provide the
necessary data by

168
[Link],070 --> [Link],690
calling generate message.

169
[Link],920 --> [Link],620
For the moment generate message is going to take some bogus user name.

170
[Link],700 --> [Link],190
I'm going to go ahead and type in admin and we are going to set the text for now
we're simply going

171
[Link],190 --> [Link],290
to set it equal to the coordinates.

172
[Link],290 --> [Link],790
Let's go ahead and use a template string to set that up.

173
[Link],840 --> [Link],260
We're going to first inject the latitude which is available on cord's dot latitude
then we're going

174
[Link],260 --> [Link],930
to go ahead and add a comma a space and we'll inject the long itude chords dot long
into.

175
[Link],360 --> [Link],190
Excellent.

176
[Link],230 --> [Link],750
Now that we have this call in place the location information is going to get passed
back and forth between

177
[Link],840 --> [Link],500
the users and we can go ahead and actually prove this over inside of the browser.

178
[Link],560 --> [Link],010
I'm going to give this page a refresh and I'm also going to open up a second tab.

179
[Link],330 --> [Link],120
In the second tab I'm going to click send location.

180
[Link],120 --> [Link],270
It's not going to prompt me if I want to share my location since I've already told
it.

181
[Link],380 --> [Link],450
I do want to share my location with this tab and right here you can see we have our
admen message and

182
[Link],450 --> [Link],790
we have our latitude.

183
[Link],890 --> [Link],110
But unfortunately the long itude is undefined most likely because we typed it
incorrectly somewhere

184
[Link],110 --> [Link],950
along the way.

185
[Link],140 --> [Link],000
I'm going to head back into Adam real quick and take a peek.

186
[Link],520 --> [Link],250
And right here you can see I forgot the end in long itude.

187
[Link],310 --> [Link],920
If I go ahead and add that and save the file and go back into the browser we should
be able to do this

188
[Link],920 --> [Link],680
once again getting both pieces of information.

189
[Link],680 --> [Link],450
I'm going to refresh both tabs to load the latest version of our index file over
inside of the first

190
[Link],450 --> [Link],950
one we're going to send the location and the second one is going to be responsible
for receiving it.

191
[Link],190 --> [Link],570
Let's send the location off.

192
[Link],600 --> [Link],920
Remember this takes about a second for your browser to get the coordinates and then
it emits the message

193
[Link],920 --> [Link],470
and right here you see we have the coordinates both the long itude and the
latitude.

194
[Link],480 --> [Link],670
We also have it over inside of the second tab.

195
[Link],670 --> [Link],970
If I take this information we can actually Google it and prove that it is working
as expected.

196
[Link],010 --> [Link],260
Now in the next video part two we're going to be setting up a nice link so this
information isn't visible.

197
[Link],270 --> [Link],340
It'll be there but the user doesn't really need to know the coordinates what they
really want is a link

198
[Link],490 --> [Link],650
to a map.

199
[Link],660 --> [Link],780
That's what we're going to set up.

200
[Link],860 --> [Link],880
But for now we can put this in Google.

201
[Link],970 --> [Link],750
Google is going to show us exactly where it is and the coordinates are indeed
correct.

202
[Link],870 --> [Link],850
I am in Philadelphia filming this video which means the location was correctly
fetched for these local

203
[Link],850 --> [Link],220
host tabs.

204
[Link],320 --> [Link],650
With this in place we are now done Part 1.

205
[Link],650 --> [Link],000
We're not going to go ahead and actually make a commit since we're not done with
the feature.

206
[Link],060 --> [Link],460
We're simply going to leave things as they are and move on to part two.

207
[Link],600 --> [Link],400
Let's take just a quick moment to recap what we did because we covered quite a bit
of new information

208
[Link],400 --> [Link],240
here.

209
[Link],270 --> [Link],880
Now the first thing we did is we gave a new button to the user this new button is
going to allow them

210
[Link],880 --> [Link],090
to click it to send the location.

211
[Link],180 --> [Link],110
All of the heavy lifting happened over inside of index.

212
[Link],130 --> [Link],750
J.S. in here.

213
[Link],750 --> [Link],000
We set up a click listener for that send location button which means every time a
user clicks it we

214
[Link],060 --> [Link],050
do something.

215
[Link],050 --> [Link],790
Now what do we do.
216
[Link],890 --> [Link],180
Well first we make sure they have access to the geolocation API.

217
[Link],310 --> [Link],990
If they do that's great.

218
[Link],990 --> [Link],200
If not we simply print a message.

219
[Link],330 --> [Link],510
If they do have access we go ahead and try to fetch the location.

220
[Link],510 --> [Link],760
This can either succeed or fail if it fails.

221
[Link],760 --> [Link],550
Once again we just give them a little message.

222
[Link],560 --> [Link],700
If it succeeds we actually emit an event with the long tattoo'd and latitude to the
server the server

223
[Link],700 --> [Link],550
gets that information and it emits a new message of that to all clients and that
renders it to the screen.

224
[Link],870 --> [Link],400
It is as good of a place as any to stop.

225
[Link],400 --> [Link],550
We are going to continue on in the next video.

226
[Link],580 --> [Link],100
Wrapping up the geo location API in part to stay tuned I'll see you then.