Heads up! To view this whole video, sign in with your Courses Plus account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
In this video we update our form processing logic to get the user's current location by using the HTML5 Geolocation API.
So, now we've updated our form to include this tag with location slider.
0:00
Now, this is good for the front end, but this obviously doesn't actually tag our
0:05
note with any information.
0:09
So, what we have to do now is go into our code and look for this particular
0:12
attribute of the form, and if it's submitted with yes, we need to find the current
0:16
location of the device and attach the information to the note.
0:21
So, we're going to jump into our application.js.
0:26
Now, right now I'm sort of focused in the new form view and in the create note area.
0:29
This is the actual code that handles saving our note into our local storage database.
0:35
When we create the note, first we have the get attributes method, which will actually
0:42
find the information in our form and return it as an object with keys and values.
0:46
Then we'll instantiate a new note model.
0:53
Then we'll set all of the attributes that we want to set based on the form values,
0:56
and then we will save it with note.save.
1:00
The rest of the code with e.preventDeFault, e.stopPropagation
1:05
are all for the user interface to stop the form from actually submitting and
1:08
to close the dialog box.
1:13
So, since we have a new attribute in our form, the first thing we want to do
1:16
is update this get attributes method to now return the locate value if it's turned on.
1:20
So, this is pretty simple to do, all we're going to do is add a new
1:27
property to this object.
1:30
So, we'll call this property "locate" since that's the name we've been using,
1:33
and to get the value we can use this $ and just like we located our other form values,
1:37
we'll just do it by the name, and it's locate.
1:43
And let's put that in quotes.
1:47
Let's go ahead and put the other ones in quotes while we're at it.
1:50
It's not strictly necessary, but it's good practice to do so.
1:53
And then we will use the .val method to get the selected value.
1:57
So, now that our attributes variable should have a locate value,
2:02
now we actually have to figure out how to get the geolocation data,
2:06
and that, of course, is going to be done using HTML5's geolocation API,
2:10
which is built right into these mobile browsers and most new modern browsers.
2:15
So, the way geolocation works is there's going to be a navigator.geolocation
2:22
object, and if that exists, there should be a getCurrentPosition method on it,
2:30
and what this will do is it will take a callback function and that callback function,
2:38
if the user accepts giving away their position, will contain an object
2:43
with latitude and longitude information.
2:48
Now, the challenge we have is the getCurrentPosition is an asynchronous function,
2:51
meaning that after we call it and pass it a callback, all the other code will execute.
2:56
So, we have some data that is going to asynchronously retrieve
3:02
our location data, while the other data is already retrieved from the form.
3:06
So, based on whether or not we want to give data, we have to either handle saving
3:11
the note in a callback, or saving it synchronously like we are now in line.
3:15
Now, let's go ahead and just start trying to figure out how we can do this.
3:24
We want to check if our attributes.locate is equal to the value yes,
3:29
which is what we've defined in our form.
3:37
Then we also want to make sure that this browser is capable
3:40
of using the geolocation API.
3:43
So, we'll use the && to make this condition, and why?
3:47
So both of these conditions have to be true, and to test that
3:51
geolocation is in the browser.
3:54
What we can do is test geolocation, the string, and we can test if geolocation
3:56
is in using the in operator and navigator.
4:02
And this clause will return true if the navigator object has a geolocation property
4:07
which indicates that geolocation is available.
4:13
So, if we have geolocation, we're going to do geolocate and if not, then basically,
4:16
we just want to save using the data we have, plus try to figure out our condition
4:26
where we do our geolocation.
4:31
So, in this if block, we will do navigator.geolocation.getCurrentPosition,
4:35
and this will take a callback function, and that callback function will be
4:45
passed a position object.
4:51
So now in here we handle our geolocation results.
4:59
So now our position object is being passed to us, and this will be different
5:08
based on A, whether the user has accepted the ability for our webpage to see their
5:11
current position, or if their current position is even available from the
5:16
operating system of the device.
5:21
So, there are many different cases where position may not actually
5:23
have what we want.
5:25
So, we have to test for it to make sure that we actually can get a latitude
5:28
and longitude out of it.
5:31
So, what we're going to do is we'll do a test here.
5:33
So we'll test if(position) just to make sure we have the object, and we'll make sure
5:36
that the position has a coords object which will hold the coordinates
5:41
of our geolocation query.
5:47
If it has those, then we can go ahead and assume that we have a latitude
5:50
and longitude that we can put into our note.
5:53
So, in this case, we'll set our attributes latitude value to position.coords.latitude,
6:00
and we'll do longitude = position.coords.longitude.
6:13
So, regardless of whether or not we're actually able to get coordinates out of it,
6:24
we still want to save the object.
6:27
So, what we'll do here is we can take this note.set and note.save call
6:30
and place it in here.
6:38
So first, we checked to see if our locate switch was set to yes and geolocation
6:42
is available, then we do our geolocation query.
6:45
If we have position and coordinates in there, we will set our attributes
6:50
latitude and longitude value to the results of our geolocation query,
6:53
and then we'll call note.set with those attributes that now either contain
6:59
latitude and longitude or don't, and then we call note.save.
7:03
Now, we have to consider this else clause.
7:07
What if the user has said "No, do not tag it with the geolocation information,"
7:09
or the geolocation API is just not available?
7:14
Well, this else clause is what's going to be called, and
7:18
what we're going to need to do is use the same code.
7:23
We'll do note.set attributes and note.save.
7:26
So, let's go ahead and test this out in the browser.
7:30
I'm going to open up Chrome, and one thing I'm going to do is since we've put
7:34
so many test notes in here over the project, I'm going to clear out my local
7:37
storage database so we can sort of start from fresh, and to do that,
7:41
in the console what I'm going to do is type in "local storage,"
7:45
and then call the clear method on it, and what that will do is clear out
7:49
all of the data in local storage for this domain.
7:52
So now, if we refresh we should have no notes at all, and we're starting fresh.
7:56
So, what I'm going to do is, let's test out our new geolocation code.
8:04
So, I'm going to create a location note with something in the body there,
8:09
and I'm going to flip on "Tag With Location" and let's click save and see what happens.
8:17
Now, if you watch very carefully, you see that a yellow bar appeared
8:24
at the top of Chrome and then promptly disappeared.
8:27
What that is, is the browser Chrome is asking for the user's permission
8:31
to share the location data with this webpage.
8:36
Now, the reason it flashed away is because when we closed our dialog box
8:41
for our new form, the URL changed from this hash of UI state dialog to no hash at all,
8:45
and Chrome's behavior when the hash changes apparently is to remove
8:55
that confirmation box.
9:00
Now, in other browsers it might be different, so why don't I close this out
9:02
and refresh and see what happens inside of our simulator.
9:09
So, I'll click "new note."
9:14
Let's create a location note with some text.
9:16
And flip on "tag with location" and click "save."
9:23
Now, the simulator popped up this window, and what this window is doing is
9:27
it's the simulator asking the operating system for the current location data.
9:32
So, the simulator is asking OS X for our current location, and this is not something
9:37
you see on an actual device, but I'm going to allow it, and now what we're going to
9:42
see in the actual device is the webpage is now going to ask the device
9:46
for the current location just like it would have in Chrome.
9:54
So, if we say okay, it's going to be loading, and we're not exactly sure
9:57
what's going to happen here based on the flow of the application.
10:03
But what should happen is our lat and long should be attached to that particular note.
10:09
So, let's figure out what's going on in Chrome.
10:15
So basically, our problem was is when we close our new note form the URL changes,
10:18
and that dismisses the bar asking for your location.
10:24
So what we can do is, if we go back to our code, the actual code that closes the
10:29
dialog box and resets the form is down here.
10:35
Now, we have it down here because we want it to happen regardless of whether or not
10:42
we asked for geolocation data, and we don't want to copy and paste it
10:45
into two places here and here.
10:50
But we don't want to continue duplicating code inside of here, so let's
10:53
refactor this code just a little bit.
10:57
Up here inside of our create note function, what I'm going to do is create a
11:00
function local to this method call, and we'll just call it "create."
11:03
And inside this create function we have scope to reach our attributes
11:11
and our note, and let's encapsulate all of the logic, actually saving out the note.
11:15
So, I'm going to put the note.save and note.set and let's remove this
11:22
right here, and I'm also going to take the dialog closing and the form resetting.
11:27
I'm going to leave the event propagation stopping and preventing default
11:36
where it is, and let's just paste this closing code there.
11:40
And so now, this create function, when it's called, will set the notes attributes
11:48
and save it and close the dialog box.
11:52
And we want this to happen in our geolocation clause, so what we'll do here is
11:57
call the function "create" to actually create the note.
12:00
Now, since we have added the latitude and longitude possibly to the
12:07
attributes object, when we call save up here, the attributes object will have the
12:10
latitude and longitude since this local create is working on the exact same
12:16
attributes object as this outer create note method.
12:20
And, we want to do the same in the else clause.
12:25
So, let's go ahead and put "create," and now we've removed that duplicate code.
12:27
So now, it'll try to get our geolocation data before it tries to close
12:32
the new form of popup.
12:35
So, let's save this out and retry it in Chrome.
12:38
Refresh.
12:41
Let's do another location note.
12:43
Give it some text, turn on "Tag With Location" and if we click "save,"
12:49
now we can actually see our local host wants to track your physical location.
12:56
You see the note form hasn't disappeared because it's actually waiting
13:02
on us to confirm or deny before it executes this in our callback function.
13:05
So right now, when we click "allow or deny," it's going to trigger this
13:12
callback function, either adding the latitude and longitude or not,
13:15
and then calling create.
13:19
So, that's why we haven't closed our form yet.
13:21
So, I do want to allow and that should trigger the callback in just a second
13:23
while it's getting the data, and now our new note should have location data on it,
13:29
and you can also see that Chrome is now indicating that it has the ability
13:34
to get our location data.
13:38
Now, if we go into the form here, we can see that the note was saved, but we don't
13:46
have access right now to its latitude and longitude.
13:49
If we wanted to check it out, what we could do is, we could just sort of
13:53
explore the data from our JavaScript console.
13:57
Everything is stored in this notes app object, and we have collections,
14:00
and one of them is called "all notes," and if we take a look at that all notes collection,
14:07
we can see that there's a models array here, and this is where it actually stores
14:13
each of the instances in the collection.
14:18
So, if we look at instance zero and look at its attributes, we can see the
14:24
actual attributes of that object, see its body, its id, and it has a latitude
14:31
and longitude stored with it.
14:36
So, it looks like it was able to get our latitude and longitude of sunny Orlando, Florida here,
14:39
and our next step will be adding that information into the views of our application.
14:45
You need to sign up for Treehouse in order to download course files.
Sign up