So, now we've updated our form to include this tag with location slider.

Now, this is good for the front end, but this obviously doesn't actually tag our

note with any information.

So, what we have to do now is go into our code and look for this particular

attribute of the form, and if it's submitted with yes, we need to find the current

location of the device and attach the information to the note.

So, we're going to jump into our application.js.

Now, right now I'm sort of focused in the new form view and in the create note area.

This is the actual code that handles saving our note into our local storage database.

When we create the note, first we have the get attributes method, which will actually

find the information in our form and return it as an object with keys and values.

Then we'll instantiate a new note model.

Then we'll set all of the attributes that we want to set based on the form values,

and then we will save it with note.save.

The rest of the code with e.preventDeFault, e.stopPropagation

are all for the user interface to stop the form from actually submitting and

to close the dialog box.

So, since we have a new attribute in our form, the first thing we want to do

is update this get attributes method to now return the locate value if it's turned on.

So, this is pretty simple to do, all we're going to do is add a new

property to this object.

So, we'll call this property "locate" since that's the name we've been using,

and to get the value we can use this $ and just like we located our other form values,

we'll just do it by the name, and it's locate.

And let's put that in quotes.

Let's go ahead and put the other ones in quotes while we're at it.

It's not strictly necessary, but it's good practice to do so.

And then we will use the .val method to get the selected value.

So, now that our attributes variable should have a locate value,

now we actually have to figure out how to get the geolocation data,

and that, of course, is going to be done using HTML5's geolocation API,

which is built right into these mobile browsers and most new modern browsers.

So, the way geolocation works is there's going to be a navigator.geolocation

object, and if that exists, there should be a getCurrentPosition method on it,

and what this will do is it will take a callback function and that callback function,

if the user accepts giving away their position, will contain an object

with latitude and longitude information.

Now, the challenge we have is the getCurrentPosition is an asynchronous function,

meaning that after we call it and pass it a callback, all the other code will execute.

So, we have some data that is going to asynchronously retrieve

our location data, while the other data is already retrieved from the form.

So, based on whether or not we want to give data, we have to either handle saving

the note in a callback, or saving it synchronously like we are now in line.

Now, let's go ahead and just start trying to figure out how we can do this.

We want to check if our attributes.locate is equal to the value yes,

which is what we've defined in our form.

Then we also want to make sure that this browser is capable

of using the geolocation API.

So, we'll use the && to make this condition, and why?

So both of these conditions have to be true, and to test that

geolocation is in the browser.

What we can do is test geolocation, the string, and we can test if geolocation

is in using the in operator and navigator.

And this clause will return true if the navigator object has a geolocation property

which indicates that geolocation is available.

So, if we have geolocation, we're going to do geolocate and if not, then basically,

we just want to save using the data we have, plus try to figure out our condition

where we do our geolocation.

So, in this if block, we will do navigator.geolocation.getCurrentPosition,

and this will take a callback function, and that callback function will be

passed a position object.

So now in here we handle our geolocation results.

So now our position object is being passed to us, and this will be different

based on A, whether the user has accepted the ability for our webpage to see their

current position, or if their current position is even available from the

operating system of the device.

So, there are many different cases where position may not actually

have what we want.

So, we have to test for it to make sure that we actually can get a latitude

and longitude out of it.

So, what we're going to do is we'll do a test here.

So we'll test if(position) just to make sure we have the object, and we'll make sure

that the position has a coords object which will hold the coordinates

of our geolocation query.

If it has those, then we can go ahead and assume that we have a latitude

and longitude that we can put into our note.

So, in this case, we'll set our attributes latitude value to position.coords.latitude,

and we'll do longitude = position.coords.longitude.

So, regardless of whether or not we're actually able to get coordinates out of it,

we still want to save the object.

So, what we'll do here is we can take this note.set and note.save call

and place it in here.

So first, we checked to see if our locate switch was set to yes and geolocation

is available, then we do our geolocation query.

If we have position and coordinates in there, we will set our attributes

latitude and longitude value to the results of our geolocation query,

and then we'll call note.set with those attributes that now either contain

latitude and longitude or don't, and then we call note.save.

Now, we have to consider this else clause.

What if the user has said "No, do not tag it with the geolocation information,"

or the geolocation API is just not available?

Well, this else clause is what's going to be called, and

what we're going to need to do is use the same code.

We'll do note.set attributes and note.save.

So, let's go ahead and test this out in the browser.

I'm going to open up Chrome, and one thing I'm going to do is since we've put

so many test notes in here over the project, I'm going to clear out my local

storage database so we can sort of start from fresh, and to do that,

in the console what I'm going to do is type in "local storage,"

and then call the clear method on it, and what that will do is clear out

all of the data in local storage for this domain.

So now, if we refresh we should have no notes at all, and we're starting fresh.

So, what I'm going to do is, let's test out our new geolocation code.

So, I'm going to create a location note with something in the body there,

and I'm going to flip on "Tag With Location" and let's click save and see what happens.

Now, if you watch very carefully, you see that a yellow bar appeared

at the top of Chrome and then promptly disappeared.

What that is, is the browser Chrome is asking for the user's permission

to share the location data with this webpage.

Now, the reason it flashed away is because when we closed our dialog box

for our new form, the URL changed from this hash of UI state dialog to no hash at all,

and Chrome's behavior when the hash changes apparently is to remove

that confirmation box.

Now, in other browsers it might be different, so why don't I close this out

and refresh and see what happens inside of our simulator.

So, I'll click "new note."

Let's create a location note with some text.

And flip on "tag with location" and click "save."

Now, the simulator popped up this window, and what this window is doing is

it's the simulator asking the operating system for the current location data.

So, the simulator is asking OS X for our current location, and this is not something

you see on an actual device, but I'm going to allow it, and now what we're going to

see in the actual device is the webpage is now going to ask the device

for the current location just like it would have in Chrome.

So, if we say okay, it's going to be loading, and we're not exactly sure

what's going to happen here based on the flow of the application.

But what should happen is our lat and long should be attached to that particular note.

So, let's figure out what's going on in Chrome.

So basically, our problem was is when we close our new note form the URL changes,

and that dismisses the bar asking for your location.

So what we can do is, if we go back to our code, the actual code that closes the

dialog box and resets the form is down here.

Now, we have it down here because we want it to happen regardless of whether or not

we asked for geolocation data, and we don't want to copy and paste it

into two places here and here.

But we don't want to continue duplicating code inside of here, so let's

refactor this code just a little bit.

Up here inside of our create note function, what I'm going to do is create a

function local to this method call, and we'll just call it "create."

And inside this create function we have scope to reach our attributes

and our note, and let's encapsulate all of the logic, actually saving out the note.

So, I'm going to put the note.save and note.set and let's remove this

right here, and I'm also going to take the dialog closing and the form resetting.

I'm going to leave the event propagation stopping and preventing default

where it is, and let's just paste this closing code there.

And so now, this create function, when it's called, will set the notes attributes

and save it and close the dialog box.

And we want this to happen in our geolocation clause, so what we'll do here is

call the function "create" to actually create the note.

Now, since we have added the latitude and longitude possibly to the

attributes object, when we call save up here, the attributes object will have the

latitude and longitude since this local create is working on the exact same

attributes object as this outer create note method.

And, we want to do the same in the else clause.

So, let's go ahead and put "create," and now we've removed that duplicate code.

So now, it'll try to get our geolocation data before it tries to close

the new form of popup.

So, let's save this out and retry it in Chrome.

Refresh.

Let's do another location note.

Give it some text, turn on "Tag With Location" and if we click "save,"

now we can actually see our local host wants to track your physical location.

You see the note form hasn't disappeared because it's actually waiting

on us to confirm or deny before it executes this in our callback function.

So right now, when we click "allow or deny," it's going to trigger this

callback function, either adding the latitude and longitude or not,

and then calling create.

So, that's why we haven't closed our form yet.

So, I do want to allow and that should trigger the callback in just a second

while it's getting the data, and now our new note should have location data on it,

and you can also see that Chrome is now indicating that it has the ability

to get our location data.

Now, if we go into the form here, we can see that the note was saved, but we don't

have access right now to its latitude and longitude.

If we wanted to check it out, what we could do is, we could just sort of

explore the data from our JavaScript console.

Everything is stored in this notes app object, and we have collections,

and one of them is called "all notes," and if we take a look at that all notes collection,

we can see that there's a models array here, and this is where it actually stores

each of the instances in the collection.

So, if we look at instance zero and look at its attributes, we can see the

actual attributes of that object, see its body, its id, and it has a latitude

and longitude stored with it.

So, it looks like it was able to get our latitude and longitude of sunny Orlando, Florida here,

and our next step will be adding that information into the views of our application.