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

Why does JavaScript function flawlessly in FireFox, yet fails completely in other web browsers?

Oops! Looks like node.js is throwing an error with the message "connect ECONNREFUSED"

Storing data in a TypeBuffer and then retrieving it from a file can lead to surprising outcomes

Encountering an issue when trying to run npm run dev-server on Windows 10

Include chosen select option in Jquery form submission

Utilizing MEAN.JS in combination with angular-translate for seamless translation

AngularJS's $http.get function has the ability to read text files, but it struggles with reading JSON

Is there a way to verify HTML binding prior to setting up an AngularJS directive?

Controlling the window opener; Inserting text into an element in the parent window

What are some effective ways to slow down the image transitions in a Javascript slideshow?

Check if two PHP arrays are the mirror image of each other

Disabling the submit button after submitting the form results in the page failing to load

How to iterate over the request body in Node.js using Express?

Encountering undefined id in AngularJS service

The function Sync in the cp method of fs.default is not a valid function

Ways to remove specific characters from the escape() function in express-validators

Embracing the power of dynamic imports in Next.js 10 with SDK integration for

What is the process for populating dropdown options from state?

Dynamic Dropdown Menu in Zend Framework with Autofill Feature

Endless cycle in Vue-Router when redirecting routes