Geolocation: HTML5 Geolocation

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