Use a Cabeça! HTML5 Programming   Ingles
610 pág.

Use a Cabeça! HTML5 Programming Ingles

DisciplinaDesenvolvimento de Software2.062 materiais17.814 seguidores
Pré-visualização50 páginas
users is going to have 
an issue and you\u2019re going to want to know how to handle that in your code. So, add the code 
below, and if you\u2019re having issues, kindly fill out the diagnostic form at the end once you\u2019ve 
diagnosed the problem:
To create the diagnostic test we\u2019re going to add an error handler to the getCurrentPosition 
method call. This handler is going to get called anytime the Geolocation API encounters a 
problem in determining your location. Here\u2019s how we add it:
Test Drive Diagnostics
navigator.geolocation.getCurrentPosition(displayLocation, displayError);
Add a second argument to your getCurrentPosition call 
named displayError. This is a function that is going to be 
called when geolocation fails to find a location.
Now we need to write the error handler. To do that you need to know that geolocation passes 
an error object to your handler that contains a numeric code describing the reason it couldn\u2019t 
determine the location of your browser. Depending on the code, it might also provide a 
message giving further information about the error. Here\u2019s how we can use the error object in 
the handler:
function displayError(error) {
 var errorTypes = {
 0: "Unknown error",
 1: "Permission denied by user",
 2: "Position is not available",
 3: "Request timed out"
 var errorMessage = errorTypes[error.code];
 if (error.code == 0 || error.code == 2) {
 errorMessage = errorMessage + " " + error.message;
 var div = document.getElementById("location");
 div.innerHTML = errorMessage;
Here\u2019s our new handler, which is passed 
an error by the Geolocation API.
The error object contains a code property that has a 
number from 0 to 3. Here\u2019s a nice way to associate an 
error message with each code in JavaScript:
We create an object with three properties 
named zero to three. These properties are 
strings with an error message we want to 
associate with each code.
And using the error.code property, 
we assign one of those strings to a 
new variable, errorMessage.
In the case of errors zero and 
two, there is sometimes additional 
information in the error.message 
property, so we add that to our 
errorMessage string.And then we add the message to the page to let the user know.
178 Chapter 5
I did not give permission for my location to be used.
My position wasn\u2019t available.
After a few seconds, I got a message indicating there was a request timeout.
Nothing happened at all, no location and no error alert.
Your Diagnostic Results Here
Something else _____________________________________
When you\u2019ve got the diagnostic test typed in, go 
ahead and give it a try. Obviously if you receive a 
location then everything is working and you won\u2019t 
see any of the errors. You can force an error by 
denying the browser\u2019s request to use your location. 
Or you might get creative and, say, move indoors 
with your GPS phone while turning off your network. 
In the worst case, if you wait for a long time without 
getting a location or an error message, most likely 
you\u2019re waiting on a long timeout value to, well, time 
out. We\u2019ll see how to shorten that timeout duration a 
little later in the chapter.
Unknown error
Timed out
Permission denied by user
 var errorTypes = {
 0: "Unknown error",
 1: "Permission denied by user",
 2: "Position is not available",
 3: "Request timed out"
Before we run the test, let\u2019s take a closer look at the types of errors we can get.
This is the catchall error that is used when none of 
the others make sense. Look to the error.message 
property for more information.
This means the user denied the request to make use of location information.
This means the browser tried, but failed to 
get your location. Again, look to error.message 
for more information.
Finally, geolocation has an internal timeout 
setting, which, if exceeded before a location 
is determined, causes this error.
We\u2019ll see how to change geolocation\u2019s default 
timeout a little later in the chapter.
you are here 4 179
making your html location aware
 <div id=&quot;location&quot;>
 Your location will go here.
 <div id=&quot;distance&quot;>
 Distance from WickedlySmart HQ will go here.
Revealing our secret location...
Now that you\u2019ve got the basics out of the way, let\u2019s do something 
more interesting with location. How about we see how far you are 
from our secret writing location at Wickedly Smart HQ? To do that 
we need the HQ coordinates and we need to know how to calculate 
distance between two coordinates. First, let\u2019s add another <div> to 
use in the HTML:
Wickedly Smart Head Quarters is 
at 47.62485, -122.52099.
Add this new <div> to your HTML.
To test your geolocation code on 
a mobile device, you\u2019re going to 
want a server.
Unless you have a means of loading your 
HTML, JavaScript and CSS files directly 
onto your mobile device, the easiest way to test them is to 
place them on a server (take a peek at the next chapter to 
see how to set up your own server if you want) and access 
them there. If you\u2019ve got a server and you want to do that, we 
encourage you to do so. On the other hand, if that doesn\u2019t 
work for you, we\u2019ve made sure the code is available on the 
Wickedly Smart servers so that you can test on your mobile 
devices. That said, we encourage you to follow along with the 
code on your desktop, and once you have it working there, 
then test on your mobile device using the server (your own or 
Wickedly Smart).
For the first Test Drive (including the error diagnostic), point 
your device to
Q: The latitude and longitude returned 
by the app for my location aren\u2019t quite 
right, why is that?
A: There are a variety of ways that your 
device and the location service provider 
calculate your position, and some are more 
accurate than others. GPS is often the most 
accurate. We\u2019re going to look at a way to 
determine the accuracy estimate that the 
location service gives back as part of the 
position object so you can see how accurate 
to expect the location data to be.
180 Chapter 5
ready bake code to compute distance
function degreesToRadians(degrees) {
 var radians = (degrees * Math.PI)/180;
 return radians;
We\u2019ll see more of this function in 
the Canvas chapter.
Ever wanted to know how to compute the distance between two points on 
a sphere? You\u2019ll find the details fascinating, but they\u2019re a little outside 
the scope of this chapter. So, we\u2019re going to give you some Ready Bake Code 
that does just that. To compute the distance between two coordinates 
most everyone uses the Haversine equation; you\u2019ll find it implemented 
below. Feel free to use it anywhere you need to know the distance 
between two coordinates:
Some Ready Bake Code: computing distance
function computeDistance(startCoords, destCoords) {
 var startLatRads = degreesToRadians(startCoords.latitude);
 var startLongRads = degreesToRadians(startCoords.longitude);
 var destLatRads = degreesToRadians(destCoords.latitude);
 var destLongRads = degreesToRadians(destCoords.longitude);
 var Radius = 6371; // radius of the Earth in km
 var distance = Math.acos(Math.sin(startLatRads) * Math.sin(destLatRads) +
 Math.cos(startLatRads) * Math.cos(destLatRads) *
 Math.cos(startLongRads - destLongRads)) * Radius;
 return distance;
This function takes two coordinates, a start 
coodinate and a destination coordinate, and 
returns the distance in kilometers between them.