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
Well done!
You have completed HTML5 Mobile Web Applications!
You have completed HTML5 Mobile Web Applications!
Preview
In this video we add code to manipulate the Geolocation information so we can test notes from multiple locations while staying in the same location.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[Jim Hoskins] So now we've updated our code so the calculation of distances
0:00
probably works; however, we don't know for sure
0:04
because all of our Notes have the same latitude and longitude
0:07
which is the same as our current location.
0:10
All of our Notes showing here with 0 would appear to have 0 distance
0:13
between them and the note, and this Note up here with -1
0:17
would indicate that we don't actually have a distance on that Note
0:20
and -1 is sort of our escape value.
0:24
So let's write some code to change the latitude and longitude
0:27
if we're in a debug mode.
0:30
So what I'm going to do is I'm going to add some code at the top of our NotesApp here.
0:33
Now, this is all contained in a self-executing function
0:37
so we can easily create a function and a variable without clouding up
0:41
the global scope of our browser.
0:44
So one thing I'm going to do is I'm going to create a variable
0:47
called debug, and we'll set it to false; at least for now.
0:50
So now we need to actually create a function that will change our coordinates
0:57
ever so slightly every time we call this function.
1:02
So let's call this function fuzzCoords
1:06
and we'll take a (coordinates){ object.
1:11
All we need to do is call coords.latitude
1:17
and we'll do += to add to it and we'll get a random value
1:24
by doing (Math.random()
1:28
and (Math.random) returns a value between 0 and 1.
1:31
And I want them to be equally weighted between adding and subtracting,
1:34
so I'll subtract 0.5
1:39
and I want to scale that degree down by one-tenth so we don't move too far
1:42
in latitude and longitude from our location, so I'll multiply that by 0.1.
1:48
You can change this factor right here
1:53
if you want to make your coordinates really, really spread out.
1:56
The larger this number, the larger the actual spread can be
2:01
and the smaller the number, the closer to the true distance
2:06
it will be after your fuzz these coordinates.
2:10
We'll do the same for longitude.
2:13
coords.longitude += (Math.random() = 0.5) * 0.1;
2:16
Cool. So whenever we call fuzzCoords and pass it an object,
2:28
it's going to actively modify that object so that we don't have to worry about returning it,
2:31
although we could.
2:36
So there's a couple of places that we want to potentially
2:38
fuzz the coordinates when we get them, and that's everywhere we do a query
2:41
for Geolocation data.
2:46
So now, let's add the fuzzCoords to the code where we assign the coordinates
2:49
to each of our Notes,
2:54
and that's done in the new form view here in our Geolocation call
2:55
where we get our attributes, latitude, and longitude from the coordinates object here.
2:59
So what I'll do is add if(debug)[
3:05
we will fuzzCoords(attrs); so this will change the latitude and longitude value
3:10
by a small, random value.
3:17
So to actually get this to work, we need to actually turn on debug
3:21
and change this to true,
3:24
and let's try it out in the browser.
3:28
Let's refresh, go create a New Note,
3:31
create a Fuzzed Note with some text
3:35
and we will tag it with our location and save.
3:42
And if we go to Nearest Notes and look at our Fuzzed Notes here,
3:45
I can assure you this is not our current location.
3:51
It is in a suburb slightly outside of downtown Orlando,
3:55
so it will work perfectly.
3:59
And let's go back to our Nearest Notes here
4:01
and see if we click Locate if that Fuzzed Note shows a different value.
4:04
Cool. So it's showing about 4.8 kilometers outside of our current location.
4:08
If we were to go back and change all of these Notes' values,
4:14
we should get a slightly different value for each one
4:18
and now it looks like our location will work, so it's going by distance.
4:21
I can create another Note and we'll do our Next Fuzzed Note
4:25
and we will give it some text.
4:31
We'll make sure it's Yes, save it out.
4:36
If we go to Nearest Notes again, Locate to update our position
4:41
and our sort, this Note is a little bit further away.
4:45
If we take a look at it, it is quite a bit south of Orlando--
4:49
a little bit even further than the previous note,
4:53
and I would venture to guess that that is probably roughly 6.2 kilometers
4:56
outside of where our current location is, based on my knowledge of Orlando.
5:00
So it looks like our Location works.
5:04
If we were to take this out and test it around town,
5:07
we'd obviously want to turn off the debug since we would actually be moving throughout space
5:10
and we'd want our latitude and longitude to be accurate,
5:14
but for testing, this debug system works pretty darn well.
5:17
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up