I have some JavaScript code, currently it takes a users location and reorders a HTML ordered list to dosplay a list of items which are closest to the user's location.
Can anyone help so that the items in the HTML list, which are in for instance a vicinity of 1KM to the users location are displayed rather than the whole HTML list being simply re ordered.
<script type="text/javascript">
$(document).bind("mobileinit", function () {
$.mobile.ajaxEnabled = false;
});
</script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script>
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') > $(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;
};
</script>
<style>
ol .long, ol .lat
{
display: none;
}
</style>