Well done!

You have completed HTML5 Mobile Web Applications!

Preview

Geolocation: Adding a New List

11:34 with Jim Hoskins

In this video we create a new List View that will display our notes sorted by the distance from our current location.

This video doesn't have any notes.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

[Jim Hoskins] So we've added the ability to tag notes with our location 0:00

and we've figured out how to add a map to the show view. 0:03

Another cool feature of our app might be to not only sort all notes-- 0:07

for instance, by name--but to also be able to see the Notes nearest to you, 0:12

and that is what this second menu item is going to be reserved for. 0:18

So what's involved with actually being able to sort the Nearest Notes to you? 0:22

Well, one, we need to have Notes that have location, which we have. 0:27

We need to get the current location of the user, which is something that we know how to do 0:31

but we're going to have to come up with the idea of the current location in the application. 0:35

And then, we need a way to compare the distance between each Note 0:42

and the current location in the world. 0:46

So those are the steps we need to go through. 0:49

Let's go ahead and start with creating the list for the Nearest Notes. 0:51

So basically, we need to create another list view here, 0:55

just like we did for All Notes. 0:59

In fact, it's going to be very, very similar. 1:01

So I'm going to go into index.html 1:04

and if we take a look at our List of Notes, we're pretty much going to do the same thing 1:07

but with a little bit of a different twist. 1:11

So let's go ahead and just change this to (Alphabetical) 1:13

and basically, I'm going to take the structure of the list of Notes 1:20

and I'm going to create a new view, which we'll call the Nearest, 1:25

and I've pasted it in here. 1:28

So I've given it an id="nearest" so that's the URL we're going to access it from, 1:31

and pretty much all of it's the same. 1:35

It has a header with a back button 1:37

and header of Nearest Notes, and the only thing that I've really added to this view 1:39

that wasn't in our original list view is this extra button in the header, 1:44

which I've created using jQuery Mobile. 1:49

It's called the Locate button, and this will be what actually triggers 1:52

finding out the user's current location. 1:57

We could also have a function so it locates the user when they first load the page, 2:00

but right now, I'm going to wire it up specifically to this button. 2:05

Then I have our content, which just has a list view with the id=nearest_notes 2:09

which is where the actual list of Notes will go. 2:14

So now that we've added the new view into our HTML, 2:17

let's check it out in the browser and see where we get. 2:20

If I refresh and we click on Nearest Notes, 2:25

now that we have a Nearest Page, we have our Nearest Notes here 2:27

and a Locate button that does nothing, and our Back button. 2:30

So we now have sort of a skeleton for the place where our list of Nearest Notes will go. 2:35

So now that we have our jQuery Mobile page set up, 2:43

let's go ahead and create a Backbone view 2:45

so we can handle the clicking of the Locate button appropriately. 2:48

So let's hop into our application.js 2:53

and let's see where we're going to put this. 2:56

I'm just going to place it right here, 3:04

and we're going to call this for our page--this is going to be the view for the entire page, 3:06

not the actual list itself. 3:11

We're going to call this class var NearestPageView = 3:15

and this will be a Backbone.View.extend({. 3:19

Let's go ahead and define the events that will be defined for this view. 3:29

Basically, we just want to handle the clicking of the Locate button. 3:33

So to define our events like we did before, we'll just do events: { here 3:37

and create an object 3:42

and the key is going to be a string that describes the action, 3:44

which would be "click" and the selector for the element that we're going to be listening to, 3:47

which is the button with the class .locate. 3:53

And when this happens, I want to "updateLocation". 3:57

So let's create our initliazer for this page view. 4:04

So we'll create initialize: function(options){ 4:08

and there's going to be a subview, which is going to be our list view 4:14

that we want to keep track of, and that's going to be passed into the initializer, 4:18

so let's store it as a property, so we'll say this.listView = options.listView. 4:22

So we always want a list view to be passed in so that our page 4:33

can manage sorting and updating that list whenever we click the Update Location button. 4:37

So we defined that clicking the .locate should call the updateLocation method, 4:44

so let's go ahead and write that method out, too. 4:49

So we'll do updateLocation: function 4:52

and it's an event handler, so it will be passed an event object(e){ 4:57

and basically, in this view, we're going to take a couple steps. 5:01

First, we're going to check if Geolocation is available. 5:04

If it is, we're going to do our normal Geolocation query 5:07

and if we get a result from that, what we're going to do is store the results of that query 5:11

in a property of our application object. 5:15

After we do that, we're going to want to sort our list view, 5:19

and we do that because now our location is potentially changed 5:24

so we need to re-sort since the sort will take into account this newly updated location. 5:28

Let's start off with a check to make sure we have Geolocation available, 5:33

so let's check if("geolocation" in navigator){ object, 5:37

so if we have Geolocation capabilities, we want to do a Geolocation query. 5:47

So we'll do navigator.geolocation.getCurrentPosition 5:52

which take a callback (function) which will be passed a (position). 6:00

And now, inside of this callback function is where we will handle storing our information. 6:06

So if we have the position object and the position object has a .coordinates property on it, 6:12

what we want to do is // Set Current Location 6:22

and for our application, what I'm going to do is define that App.currentlocation 6:30

will be where we store the current location of the user and we will set it to position.coords. 6:37

Now, this is just a normal JavaScript variable; if you refresh the page, 6:45

the current location will be lost. 6:49

It is not stored in a database, and I think that's fine 6:51

because it's something that's going to be updated a lot. 6:54

Now, the last thing we want to do is to update the list view 6:58

and tell its collection to sort itself. 7:01

Now, one way we could do this is to call the list views collections sort method directly 7:06

and I think that's what we'll go ahead and do. 7:12

Now, in order to get to the list view for this view, 7:15

we need to access this.listView, but since we're in a callback function for getCurrentPosition, 7:18

the value of this has been changed since we're now in a new function. 7:24

So what we have to do is somewhere outside of the function, 7:28

we will assign the value of this to a variable and we'll give it the name pageView, 7:31

so pageView = this;. 7:38

So after we set the current location, we can grab pageView, 7:41

which is this, and grab the listView, 7:47

and on its collection, we will call .sort();. 7:50

So now we've generated a pageView for our nearest list, 7:59

let's go ahead and instantiate it in our page to handle our actual view in the HTML. 8:03

So down at the bottom is where we're actually instantiating our views, 8:10

and we'll just scroll down to where we instantiated our other views, 8:15

and I'm just going to place it right down here. 8:22

So we're going to assign it into app.views and we'll call this view the nearest_page 8:27

and we'll instantiate a new NearestPageView with the element of the id "#nearest" 8:33

and we're going to pass in a listView, which we'll call App.views.list_distance. 8:39

Now, we haven't created that yet, so let's go ahead and instantiate 8:45

the actual list view that will be inside of this page view. 8:50

Now we're going to just reuse the Note list view that we used for our other Notes list 8:55

and we're just going to pass it a different element. 9:00

So right here, this is the view for our actual list within our nearest page, 9:03

so the list will be based on nearest_notes 9:12

and the collection is based on app.collections.notes_distance. 9:15

Now, we haven't created that collection, so let's go ahead and create that collection. 9:22

The reason we're creating a new collection for our Nearest Notes 9:31

is because we're going to be using a different comparator 9:35

where our all_notes is using a comparator that checks based on the title of the Note 9:38

and its alphabetical value. 9:44

In our collection here, we will be actually comparing 9:46

based on the distance of the Notes coordinates from the current coordinates, 9:50

and that's a comparator that we're going to have to write in a moment. 9:54

So let's just call this notes_distance, 9:59

and we'll create a new NoteList 10:03

with null initial values (null, { 10:07

and for our options, we're going to create a comparator: 10:10

which is a function that takes a (note) 10:15

and it will return some value, and right now we'll just say 0 and it will not be allowed to sort. 10:19

So let's see if all of our code actually fits together 10:25

because it's a good time for a sanity check to make sure we're not going to get any errors 10:28

with all of the code that we just added in. 10:32

So let's refresh--all right, no errors so far. 10:38

if we click on Nearest Notes, we get a list of all of our Notes. 10:42

Now, right now the sorting is not working, 10:46

but at least we do have our Notes. 10:49

Let's see if the view will handle our click here on the Locate button. 10:51

It doesn't look like anything's happening, but it may have, 10:56

because we may have already authorized the browser to share our current location, 10:59

so it's not going to ask us every time. 11:04

One way we can debug to see if the current location is set 11:07

is in the JavaScript console, we'll check the Notes app, 11:10

which is our application instance, and see if the current location has been set. 11:16

If we do that, we can see that there's a coordinates object assigned to it. 11:23

So next, we need to create the comparator function that will compare the current location 11:27

to each of the Notes' locations. 11:31

You need to sign up for Treehouse in order to download course files.

You need to sign up for Treehouse in order to set up Workspace