Question

I have a list in jquery mobile. I have added code to resort the list based on the nearest state I am in. For some reason, my logic does not work. Any ideas why? Also the list is very sluggish when scrolling.

Check this link out and click Find Nearest Location Button on Top Left

http://www.jm.bugs3.com/gl/state.html

<script>
function findMe(){

    if (navigator.geolocation !=undefined){
        navigator.geolocation.watchPosition(onFound, handleError);
    }
}
function onFound(position){
    var userLat = position.coords.latitude;
    var userLong = position.coords.longitude;
    $('ul 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 handleError(error){
    alert ("Could not find location");
}

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

function sortAlpha(a, b){
    return $(a).data('distance') > $(b).data('distance') ? 1 : -1;  //if True or false 1 or -1
};
//Calculate the shortest distance based on lat and long
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    
};

// Here is the code for the list with lat and long coordinates

<div data-role="content">   
        <ul data-role="listview" data-inset="true">
            <li>
                <a href="#page2" data-transition="slide" >Alabama</a>
                <div class="lat" style="visibility:hidden">31.375626</div>
                <div class="long" style="visibility:hidden">-86.299592</div>
            </li>
            <li>
                <a href="#page3" data-transition="slide">Alaska</a>
                <div class="lat" style="visibility:hidden">60.216736</div>
                <div class="long" style="visibility:hidden">-149.882995</div>
            </li>
            <li>
                <a href="#page4" data-transition="slide">Arizona</a>
                <div class="lat" style="visibility:hidden">32.447659</div>
                <div class="long" style="visibility:hidden">-112.134568</div>
            </li>
            <li>
                <a href="#page5" data-transition="slide" >Arkansas</a>
                <div class="lat" style="visibility:hidden">33.678252</div>
                <div class="long" style="visibility:hidden">-92.340846</div>
            </li>
            <li>
                <a href="#page6" data-transition="slide" >Boston</a>
                <div class="lat" style="visibility:hidden">41.358431</div>
                <div class="long" style="visibility:hidden">-71.059773</div>
            </li>

Answer 1

Hershey,

“… based on the nearest state I am in” is a tad difficult to interpret for the following reasons :

• At its simplest, “the nearest state I am in” is “the state I am in”
• “The nearest geographic centre of a state” may not be that of “the state I am in” (eg. if I am at the western end of the Florida Pan Handle, then the “nearest state” is Alabama, not Florida)
• I might not be in a state (eg. I am at sea).

Notwithstanding this difficulty and trusting that your own code correctly reflects the proper meaning, and working from @ddotsenko’s answer as a startpoint, then the following improvements might be made :

• A true sort operation can be avoided by loading <li> references into an array, rather than an object, indexed by distance (rounded). This will give a sparse array in the correct order.
• The <li> elements can be reordered within their original <ul> avoiding the need for a new <ul> element at each sort.

Taking these points onboard, a modified version of ddotsenko’s code would be as follows:

function onFound(position) {
    var userLat = position.coords.latitude,
        userLong = position.coords.longitude,
        arr = [],
        $ul = $("ul");//a more specific selector would be good
    $ul.find('li').each(function (index) {
        var $this = $(this),
            lat = Number($this.data("latitude")),
            lng = Number($this.data('longitude')),
            dist = Math.round(getDistance(userLat, lat, userLong, lng));
        arr[dist] = this;
    });
    //At this point, arr is a sparse array of li elements indexed by distance, hence in distance order.
    for(var item in arr) {
        //Ref: "Iterating over sparse arrays", //http://hexmen.com/blog/2006/12/iterating-over-sparse-arrays/
        if (String(item >>> 0) == item && item >>> 0 != 0xffffffff) {
            $ul.append(item);
        }
    };
}

This should be appreciably faster.

Regarding, sluggish scrolling, you may be better off with less elements in the DOM. The javasctipt in ddotsenko’s code indicates <li>s of the following format :

<li data-latitude="31.375626" data-longitude="-86.299592">
    <a href="#page2" data-transition="slide" >Alabama</a>
</li>

which should be better than hidden divs to hold the data.

Even better would be to have all the lat/long pairs hard-coded in javascript, thus avoiding slower retreival from the DOM, eg.:

var stateLocations = {
    "Alabama":  {lat: 31.375626, lng: -86.299592},
    "Alaska":   {lat: 60.216736, lng: -149.882995},
    "Arizona":  {lat: 32.447659, lng: -112.134568},
    "Arkansas": {lat: 33.678252, lng: -92.340846},
    ...
};

Then look up accordingly.

By the way, Boston is a city, not a state. None of the United States begins with “B”