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>

Recommended Answers

All 9 Replies

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

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

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){

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

<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?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, learning, and sharing knowledge.