HTML and CSS Reference
In-Depth Information
The
geolocate_story()
function receives the latitude and longitude data in
position
,
which is passed to it from the Geolocation API, and then we store that data in
geo_lat
and
geo_long
, respectively. To interface with GeoNames, we call jQuery's
$.ajax()
function, which lets us set up an XML query with the following parameters:
type: 'GET'
Specifies that we'll make a
HTTP GET request (as opposed to a POST request)
,
which is compatible with the GeoNames API
url: 'http://ws.geonames.org/findNearByWeatherXML?lat=' + geo_lat + '&lng=' +
geo_long
Specifies the URL to be queried. For the
findNearByWeather
service, the URL is
for latitude and the
lng
parameter for longitude, where we supply the
geo_lat
and
geo_long
values we got from the Geolocation API.
datatype: 'xml'
GeoNames is going to return XML to us, so this tells the
$.ajax()
function to parse
the incoming data accordingly
success: ...
Specifies what to do if our API call is successful; here, we'll call a function to process
the weather data, which performs the following three steps
1. Grabs the value of the
<temperature>
element in the XML returned from Ge-
oNames (
$(weather_resp).find("temperature").text();
)
2. If the temperature value is present, converts it from Celsius to Fahrenheit (
var
temperature_fahrenheit = 9/5*temperature_celsius + 32;
)
3. Updates the
weather_temp
<span>
in the HTML with the Fahrenheit tempera-
ture (
$('#weather_temp').text(temperature_fahrenheit);
), or if no tempera-
ture value was returned, inserts the text “TEMP NOT FOUND”
error: ...
Specifies what to do if our API call fails; here, we'll call a function that updates the
weather_temp
<span>
in the HTML with the text “TEMP NOT FOUND” (
$
('#weather_temp').text("TEMP NOT FOUND");
)
In Step 3 we again query the GeoNames API in similar fashion, but this time we get the
user's location data (street address and city):
// Get full location information
$.ajax({
type: 'GET',
url: 'http://ws.geonames.org/extendedFindNearby?lat=' + geo_lat + '&lng=' +
geo_long,
dataType: 'xml',
success: function (loc_resp, xmlstatus) {
var city_name = $(loc_resp).find("placename").text();
if (city_name != "") {
$('#city').text(city_name);
} else {
