/ Published in: HTML
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" href="jquery.mobile-1.0a3.min.css" /> <script type="application/javascript"> $(document).ready(function(){ // Add a click listener on the button to get the location data $('#getLocation').click(function(){ if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(onSuccess, onError); } else { // If location is not supported on this platform, disable it $('#getLocation').value = "Geolocation not supported"; $('#getLocation').unbind('click'); } }); }); // create the geonames namespace for calling the API var geonames = {}; geonames.baseURL = "http://ws.geonames.org/"; geonames.method = "findNearbyWikipediaJSON"; geonames.search = function(lat,lng){ // get the data in JSON format from Geonames $.getJSON(geonames.baseURL + geonames.method + '?formatted=true&lat=' + lat + '&lng=' + lng + '&style=full&radius=10&maxRows=25&username=ryanstewart',function(data){ // Loop through each item in the result and add it to the DOM $.each(data.geonames, function() { $('<li></li>') .hide() .append('<a href="http://'+this.wikipediaUrl+'"> <h2>'+this.title+'</h2></a><br /><p>'+ this.summary + '</p><span class="ui-li-aside"> <h5>'+this.distance+' (km)</h5></span>') .appendTo('#wikiList') .show(); }); // Once the data is added to the DOM, make the transition $.mobile.changePage('#dashboard',"slide",false,true); // refresh the list to make sure the theme applies properly $('#wikiList').listview('refresh'); }); }; // Success function for Geolocation call function onSuccess(position) { alert('getting position'); geonames.search(position.coords.latitude,position.coords.longitude); } // Error function for Geolocation call function onError(msg) { geonames.search(47.667622,-122.384946); } </script> </head> <body> <div data-role="page"> <div data-role="header"> </div> <div data-role="content"> your location to bring back a list of Wikipedia articles about features that are near you. To get started, click the button below and allow the application to read your geolocation information.</p> <input type="button" value="Get My Location" id="getLocation" /> </div> <div data-role="footer"> </div> </div> <div data-role="page" id="dashboard"> <div data-role="header"> </div> <div data-role="content"> <ul id="wikiList" data-role="listview" data-theme="c"> </ul> </div> <div data-role="footer"> </div> </div> </body> </html>