0

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>
2
Contributors
9
Replies
12
Views
5 Years
Discussion Span
Last Post by pritaeas
0

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

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

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

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.