Location awareness
<p>I have this javascript code which takes a list of locations and reorders the list items according to the users location. how can i change the code so that it only displays the locations within a vicinity of 1KM rather than just reordering the whole list. </p>

<pre><code>    &lt;script type="text/javascript"&gt;
$(document).bind("mobileinit", function () {
$.mobile.ajaxEnabled = false;
});
&lt;/script&gt;
&lt;script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"&gt;&lt;/script&gt;
&lt;script&gt;
function findMe() {
if (navigator.geolocation != undefined) {
navigator.geolocation.watchPosition(onFound, onError);
}
}
function onFound(pos) {
var userLat = pos.coords.latitude;
var userLong = pos.coords.longitude;
$('ol li').each(function (index) {
var locationLat = $(this).find('.lat').html();
var locationLong = $(this).find('.long').html();
var distance = getDistance(userLat, locationLat, userLong, locationLong);
$(this).data("distance", distance);
})

reOrder();
}

function onError(pos) {
alert("Something Went wrong");
}

function reOrder() {
$('ol li').sort(sortAlpha).appendTo('ol');
}

function sortAlpha(a, b) {
return $(a).data('distance') &gt; $(b).data('distance') ? 1 : -1;
};

function getDistance(lat1, lat2, lon1, lon2) {
var R = 6371; // km
var d = Math.acos(Math.sin(lat1) * Math.sin(lat2) +
Math.cos(lat1) * Math.cos(lat2) *
Math.cos(lon2 - lon1)) * R;
return d;

}; 
&lt;/script&gt;

&lt;style&gt;
ol .long, ol .lat
{
display: none;
}
&lt;/style&gt;
</code></pre>
