Geolocation help

[maxamillian]

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>

[pritaeas]

In your each function, you can hide/delete the li if it is outside your specified range.

[maxamillian]

what code do i use to hide the li in the each function.
Thank you

[pritaeas]

Since you are using jQuery, you can use: $(this).hide();

[maxamillian]

Thank you, i have looked at that.

How do i use the

    $(this).hide() 

code to hide anything within a vicinty of 1KM.

This is what i am trying to use

   if($(this).val() > 1KM){

[pritaeas]

Shouldn't that be something like:

if (distance > 1) $(this).hide();

[maxamillian]

Can you please put that into the code above, i have been trying to write this last part of the code and have had no luck how to change it. it would be much appreciated and help me greatly. thank you

[pritaeas]

Put it after line 19.

[maxamillian]

<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);
                if (distance > 1220) $(this).hide();
                $(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>

Would this be correct?

[pritaeas]

Think so, you know what the value should be, I don't.