Finding Nearby Places

Contact Us or call 1-877-932-8228
Finding Nearby Places

Finding Nearby Places

In this example, we'll make use of the free GeoNames service - specifically their Find nearby Wikipedia Entries service. We'll find the user's location as we did above, pass the latitude and longitude to GeoNames, and receive back a JSON-formatted list of nearby places' Wikipedia entries, which we use to populate a listview:

places demo

We can imagine that Nan & Bob, being community-minded folks, might want to allow visitors to their new site to find information about nearby places of interest - we'll add a button to the first page of this demo that allows users to find their current location then to see a short list of nearby points of interest. Users can click to read more on Wikipedia. Open up IntegrationPhone/Demos/places.html to test it out and to view the code.

Code Sample:


Code Explanation:

This site comprises two pages: the home page and a page to display the returned results as a listview. Note the empty listview (an unordered list with id placelist) on the #places page.

We add a jQuery event handler to listen for clicks on the "Find Stuff Near Me" button - the button with id findme. When clicked, we call navigator.geolocation.getCurrentPosition that, if successful (the device supports it, user has approved the request to find his/her location, a location was returned), calls function locateSuccess. The locateSuccess function, in turn, calls function

Function, which we define as part of namespace geonames, uses the jQuery function $.getJSON to retrieve a JSON-formatted list of places from GeoNames by passing a correctly formatted URL (with values for lat and lng, as defined by GeoNames, as well as parameters style, radius, and maxrows) - we found all of the details for this from the GeoNames website.

The next block of code iterates over the results returned from $.getJSON: we create an empty list item, append to it the data for each place record, and append the constructed list item to the placelist listview. We refresh the listview and change to the #places page for the user to view the results. Note that we use here the jQuery core iterator $.each - useful for looping over any sort of JavaScript collection, in this case a JSON result set. See the jQuery docs for more information on $.each.

Finding Weather Data

Nan & Bob would like to offer visitors to their website the opportunity to view weather conditions where they are. (We suggested showing the weather at the store, rather than the website-vistor's location - but hey, it's their site.) In the next exercise, you will make use of another GeoNames service (findNearByWeatherJSON) that returns the local weather conditions when supplied a latitude and longitude.

For this exercise, you'll need to use the jQuery iterator each, which you saw in the previous demonstration:

$.each(obj, function(i, val) {
alert(i + ' - ' + val);

If obj were a valid object (like the one that will be returned by the findNearByWeatherJSON service), then the code above would generate an alert for each name/value pair, with i as the field name and val as the field value. Note that this is slightly different from the earlier example: here were are iterating over the fields of the object, whereas before we were iterating over multiple objects.