Sorting an array based on shortest distance in Javascript - A step-by-step guide

Question

Sorting an array based on shortest distance in Javascript - A step-by-step guide

I need to organize an array so that each element is in the closest proximity to its previous location.

The array looks like this:

locations=[{"loc1",lat,long},{"loc2",lat,long},{"loc3",lat,long},{"loc4",lat,long},{"loc5",lat,long}]

Here's the function for calculating the distance:

var distance = function(lat1, lon1, lat2, lon2)
{
  var radlat1 = Math.PI * lat1/180;
  var radlat2 = Math.PI * lat2/180;
  var theta = lon1-lon2;
  var radtheta = Math.PI * theta/180;
  var dist = Math.sin(radlat1) * Math.sin(radlat2) + Math.cos(radlat1) * Math.cos(radlat2) * Math.cos(radtheta);
  dist = Math.acos(dist);
  dist = dist * 180/Math.PI;
  dist = dist * 60 * 1.1515;
  dist = dist * 1.609344 ;

  return dist;
}

When you input values into this function, it provides the distance between two locations.

The starting point is the first element of the locations array. Now, I am looking for a function that can take an array and return the sorted array based on proximity.

javascript arrays angularjs sorting

Answer 1

Answer №1

If you want to customize the sorting behavior of an array, you can pass a custom function to the sort method in the Array prototype. Here is an example:

locations = [
  ["loc1", 1, 1],
  ["loc2", 3, 3],
  ["loc3", 2, 2],
  ["loc4", 5, 4],
  ["loc5", 3, 5]
];

var distance = function(lat1, lon1, lat2, lon2) {
  var radlat1 = Math.PI * lat1 / 180;
  var radlat2 = Math.PI * lat2 / 180;
  var theta = lon1 - lon2;
  var radtheta = Math.PI * theta / 180;
  var dist = Math.sin(radlat1) * Math.sin(radlat2) + Math.cos(radlat1) * Math.cos(radlat2) * Math.cos(radtheta);
  dist = Math.acos(dist);
  dist = dist * 180 / Math.PI;
  dist = dist * 60 * 1.1515;
  dist = dist * 1.609344;

  return dist;
};

locations.sort(function(a, b) {
  var origLat = 0,
    origLong = 0;

  return distance(origLat, origLong, a[1], a[2]) - distance(origLat, origLong, b[1], b[2]);
});

console.log(locations)

Answer 2

If you want to customize the sorting behavior of an array, you can pass a custom function to the sort method in the Array prototype. Here is an example:

locations = [
  ["loc1", 1, 1],
  ["loc2", 3, 3],
  ["loc3", 2, 2],
  ["loc4", 5, 4],
  ["loc5", 3, 5]
];

var distance = function(lat1, lon1, lat2, lon2) {
  var radlat1 = Math.PI * lat1 / 180;
  var radlat2 = Math.PI * lat2 / 180;
  var theta = lon1 - lon2;
  var radtheta = Math.PI * theta / 180;
  var dist = Math.sin(radlat1) * Math.sin(radlat2) + Math.cos(radlat1) * Math.cos(radlat2) * Math.cos(radtheta);
  dist = Math.acos(dist);
  dist = dist * 180 / Math.PI;
  dist = dist * 60 * 1.1515;
  dist = dist * 1.609344;

  return dist;
};

locations.sort(function(a, b) {
  var origLat = 0,
    origLong = 0;

  return distance(origLat, origLong, a[1], a[2]) - distance(origLat, origLong, b[1], b[2]);
});

console.log(locations)

Answer 3

Answer №2

To simulate real locations, a hypothetical scenario can be created with the following script:

(I am not familiar with Google Map API, so there might be a more efficient method for this...)

var locations = [{
name : "loc1",
lat : 1001,
long : 2001
}, {
name : "loc2",
lat : 150,
long : 630
}, {
name : "loc3",
lat : 151,
long : 631
}, {
name : "loc4",
lat : 850,
long : 56
}, {
name : "loc5",
lat : 960,
long : 698
}
];

var distance = function (lat1, lon1, lat2, lon2) {
var radlat1 = Math.PI * lat1 / 180;
var radlat2 = Math.PI * lat2 / 180;
var theta = lon1 - lon2;
var radtheta = Math.PI * theta / 180;
var dist = Math.sin(radlat1) * Math.sin(radlat2) + Math.cos(radlat1) * Math.cos(radlat2) * Math.cos(radtheta);
dist = Math.acos(dist);
dist = dist * 180 / Math.PI;
dist = dist * 60 * 1.1515;
dist = dist * 1.609344;

return dist;
}

var locationWithDistFromPrevious = locations.map(function (l, i) {
if (i === 0) {
l.dist = 0;
} else {
l.dist = distance(l.lat, l.long, locations[i - 1].lat, locations[i - 1].long)
}
return l;
}).sort(function (a, b) {
return a.dist - b.dist
});

var locationWithDistFromFirst = locations.map(function (l, i) {
if (i === 0) {
l.dist = 0;
} else {          
l.dist = distance(l.lat, l.long, locations[0].lat, locations[0].long)
}
return l;
}).sort(function (a, b) {
return a.dist - b.dist
});


document.getElementById("resultFromPrev").textContent = JSON.stringify(locationWithDistFromPrevious, null, 4);
document.getElementById("resultFromFirst").textContent = JSON.stringify(locationWithDistFromFirst, null, 4);

<body>
  Sort by previous item<br/>
  <pre id="resultFromPrev"></pre><br/>
  Sort by first item dist <br/>
  <pre id="resultFromFirst"></pre><br/>
</body>

Answer 4

To simulate real locations, a hypothetical scenario can be created with the following script:

(I am not familiar with Google Map API, so there might be a more efficient method for this...)

var locations = [{
name : "loc1",
lat : 1001,
long : 2001
}, {
name : "loc2",
lat : 150,
long : 630
}, {
name : "loc3",
lat : 151,
long : 631
}, {
name : "loc4",
lat : 850,
long : 56
}, {
name : "loc5",
lat : 960,
long : 698
}
];

var distance = function (lat1, lon1, lat2, lon2) {
var radlat1 = Math.PI * lat1 / 180;
var radlat2 = Math.PI * lat2 / 180;
var theta = lon1 - lon2;
var radtheta = Math.PI * theta / 180;
var dist = Math.sin(radlat1) * Math.sin(radlat2) + Math.cos(radlat1) * Math.cos(radlat2) * Math.cos(radtheta);
dist = Math.acos(dist);
dist = dist * 180 / Math.PI;
dist = dist * 60 * 1.1515;
dist = dist * 1.609344;

return dist;
}

var locationWithDistFromPrevious = locations.map(function (l, i) {
if (i === 0) {
l.dist = 0;
} else {
l.dist = distance(l.lat, l.long, locations[i - 1].lat, locations[i - 1].long)
}
return l;
}).sort(function (a, b) {
return a.dist - b.dist
});

var locationWithDistFromFirst = locations.map(function (l, i) {
if (i === 0) {
l.dist = 0;
} else {          
l.dist = distance(l.lat, l.long, locations[0].lat, locations[0].long)
}
return l;
}).sort(function (a, b) {
return a.dist - b.dist
});


document.getElementById("resultFromPrev").textContent = JSON.stringify(locationWithDistFromPrevious, null, 4);
document.getElementById("resultFromFirst").textContent = JSON.stringify(locationWithDistFromFirst, null, 4);

<body>
  Sort by previous item<br/>
  <pre id="resultFromPrev"></pre><br/>
  Sort by first item dist <br/>
  <pre id="resultFromFirst"></pre><br/>
</body>

Answer 5

Answer №3

It seems like you're about to embark on a complex journey with multiple twists and turns. Before diving in, I recommend exploring the possibilities of using the Maps API to optimize your driving route for multiple destinations. You can find some guidance on this topic at Google Map V3, how to get list of best driving route for multiple destinations?. By leveraging the optimizeWaypoints setting, you can obtain a list of locations arranged in the most efficient driving order.

While this approach may not provide a direct distance comparison, it could still meet your requirements effectively.

Answer 6

It seems like you're about to embark on a complex journey with multiple twists and turns. Before diving in, I recommend exploring the possibilities of using the Maps API to optimize your driving route for multiple destinations. You can find some guidance on this topic at Google Map V3, how to get list of best driving route for multiple destinations?. By leveraging the optimizeWaypoints setting, you can obtain a list of locations arranged in the most efficient driving order.

While this approach may not provide a direct distance comparison, it could still meet your requirements effectively.

Answer 7

Answer №4

To optimize the sorting process based on distance, it is recommended to include the distance calculation within the sort function:

Considering that distance calculation can be resource-intensive, storing calculated distances in an object can significantly improve performance by preventing redundant calculations during the sorting process:

var startingLoc = {lat:0.000,lng:0.000};//coordinates of the starting location;
var distanceCache = {}; //an object to cache distance calculations

//sort locations - assuming loc1 is {lat:some number, lng: some number}
locations.sort(function(loc1,loc2) {
    var loc1Key = loc1.lat+'-'+loc1.lng;
    var loc2Key = loc2.lat+'-'+loc2.lng;

    if(!distanceCache.hasOwnProperty(loc1Key)) {
      distanceCache[loc1Key] = distance(startingLoc.lat,startingLoc.lng,loc1.lat,loc1.lng);
    }

    if(!distanceCache.hasOwnProperty(loc2Key)) {
      distanceCache[loc2Key] = distance(startingLoc.lat,startingLoc.lng,loc2.lat,loc2.lng);
    }

    return distanceCache[loc1Key] - distanceCache[loc2Key];

 });

distanceCache = null; //clearing distanceCache after use

Answer 8

To optimize the sorting process based on distance, it is recommended to include the distance calculation within the sort function:

Considering that distance calculation can be resource-intensive, storing calculated distances in an object can significantly improve performance by preventing redundant calculations during the sorting process:

var startingLoc = {lat:0.000,lng:0.000};//coordinates of the starting location;
var distanceCache = {}; //an object to cache distance calculations

//sort locations - assuming loc1 is {lat:some number, lng: some number}
locations.sort(function(loc1,loc2) {
    var loc1Key = loc1.lat+'-'+loc1.lng;
    var loc2Key = loc2.lat+'-'+loc2.lng;

    if(!distanceCache.hasOwnProperty(loc1Key)) {
      distanceCache[loc1Key] = distance(startingLoc.lat,startingLoc.lng,loc1.lat,loc1.lng);
    }

    if(!distanceCache.hasOwnProperty(loc2Key)) {
      distanceCache[loc2Key] = distance(startingLoc.lat,startingLoc.lng,loc2.lat,loc2.lng);
    }

    return distanceCache[loc1Key] - distanceCache[loc2Key];

 });

distanceCache = null; //clearing distanceCache after use

Sorting an array based on shortest distance in Javascript - A step-by-step guide

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Navigate to a particular section in the webpage

Deciphering a hierarchical JSON array without identifiers in C#

The internet explorer browser does not support the keypress event

Is the term 'Literal' in Javascript Arrays simply referring to its dynamic nature, allowing it to be modified at any time?

Show AngularJS ListTreeView condensed

Can you explain the concept of a selenium server?

What is the correct way to dynamically switch between RTL and LTR in React with Material UI?

Extract the content inside an HTML <a> tag with a specified class and auto-populate it into a different text area

Using AJAX to upload jQuery file - sharing PHP variables

When using `parseInt` on the string "802.11 auth", the result did not match my expectations

React Native: How come my text is breaking like this and failing to adhere to the container's margin settings?

Transforming PHP Variable Using Ajax

What strategies should be considered for styling AngularJS components?

Incorporating a loading animation with an AJAX call

The for each loop fails to return the value

Animate the div only when the button is clicked

Utilizing regular expressions in Javascript to retrieve multiple instances

ajax is triggering the error handler

Binding data to an MVC grid component

Creating a collaborative storage space within a MERN project folder