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