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: '' + geo_lat + '&lng=' +
Specifies the URL to be queried. For the findNearByWeather service, the URL is , followed by the lat parameter
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
type: 'GET',
url: '' + geo_lat + '&lng=' +
dataType: 'xml',
success: function (loc_resp, xmlstatus) {
var city_name = $(loc_resp).find("placename").text();
if (city_name != "") {
} else {
Search WWH ::

Custom Search