Is there a way to determine the distance in miles and feet between various sets of latitude and longitude coordinates?

I am working with an array of latitude and longitude coordinates and I am looking to use JavaScript or Typescript to calculate the distance in miles and feet between these points.

 const latsLngs = [
  {
    lat: 40.78340415946297,
    lng: -73.9714273888736,
  },
  {
    lat: 40.778399767985704,
    lng: -73.97915215083648,
  },
  {
    lat: 40.7722899997727,
    lng: -73.96842331477691,
  },
  {
    lat: 40.76617966968189,
    lng: -73.97769302913238,
  },
  {
    lat: 40.76838985393672,
    lng: -73.96147102901031,
  },
  {
    lat: 40.781909380720485,
    lng: -73.96636337825348,
  },
];
javascriptangulartypescript

Answer №1

If you're looking to calculate distance, I recommend utilizing the geolib.getDistance function, which will provide the distance in meters.

You can easily convert meters to miles and feet by considering that there are 0.3048 meters in a foot and 5280 feet in a mile.

const latsLngs = [ { lat: 40.78340415946297, lng: -73.9714273888736, }, { lat: 40.778399767985704, lng: -73.97915215083648, }, { lat: 40.7722899997727, lng: -73.96842331477691, }, { lat: 40.76617966968189, lng: -73.97769302913238, }, { lat: 40.76838985393672, lng: -73.96147102901031, }, { lat: 40.781909380720485, lng: -73.96636337825348, }, ]; 

function getDistanceInMilesAndFeet(a, b) {
    const distanceMeters = geolib.getDistance(a, b, 0.01);
    return metersToMilesAndFeet(distanceMeters);
}

function metersToMilesAndFeet(meters) {
    const totalFeet = meters / 0.3048;
    const miles = Math.floor(totalFeet / 5280);
    const feet = Math.round(totalFeet % 5280);
   return `${miles} miles, ${feet} feet`;
}

// Show distance from point 1 to the other points...
const a = latsLngs[0]; 
latsLngs.forEach((b, idx) => { 
    if (idx > 0) console.log(`Distance from point 1 to point ${idx + 1}:`, getDistanceInMilesAndFeet(a, b));
})
.as-console-wrapper { max-height: 100% !important; top: 0; }
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ddbab8b2b1b4bf9deef3eef3ec">[email protected]</a>/lib/index.js"></script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exploring Express.js: Implementing multithreading and asynchronous techniques for handling simultaneous HTTP requests

Recently, I find myself exploring ways to manage large-scale HTTP requests using Express.js. While I'm aware that Node.js has introduced 'workers' from version 13 onwards for multithreading capabilities, I am curious about how to effectively ...

javascriptmultithreadingexpresshttp

Running the command npm show --outdated triggers an E404 error stating that the package is not found in this registry

I am currently working on a confidential project that I prefer not to make public. Despite using node v17.3.0 and npm 8.3.0, I am facing difficulties in displaying the outdated dependencies: $ npm show --outdated npm ERR! code E404 npm ERR! 404 Not Found - ...

javascriptnode.jsnpmdependencies

Construct a div element using JSON information

I am retrieving information from a database and organizing it into a JSON array. Here is the data that I have: [{"id":"0","name":"red","percentage":"60"},{"id":"1","name":"blue","percentage":"58"},{"id":"4","name":"green","percentage":"12"}] The structu ...

javascriptjqueryarraysjson

Display a toolbar underneath text that has been selected using jQuery

I am attempting to display a toolbar underneath selected text once the user has made a selection. After exploring various Stack Overflow responses, I have devised the following code. My goal is for the toolbar to activate when a user selects text not only ...

javascriptjqueryselecttexttoolbar

Linking the location of the pop-up to the currently selected text box

I am currently experimenting with setting the top and left values relative to the selected_element (which is active at the time of triggering the popup) in a manner similar to a tooltip. I attempted to use $().position() in combination with jQuery, but it ...

javascriptjquerycssposition

What could be causing my Bootstrap modal to fail to load dynamically?

I'm currently immersed in a fun side project, where data is fetched from a MySQL database and dynamically displayed. Everything seems to be running smoothly except for the modal display issue. The ID always matches, but the modal just won't open. ...

javascriptphpjquerymysqlajax

Strikeout list on click of a mouse

Is there a way to apply strikethrough formatting to text with just a mouse click? The CSS for lists is beyond the form field margin. I've tried multiple methods without success. No matter how many times I change the code, I can't seem to get it r ...

javascripthtmljquerycss

The 'this' variable is malfunctioning when trying to assign a JSONP array to an AngularJS controller

I'm working with a REST service in my angular controller and using JSONP to make the call. I need to store the array that is returned from the service into a variable. This is what I currently have: this.testTheRest = function() { $http.jsonp(&a ...

javascriptarraysangularjsjsonp

Error Encountered - Configuring Node.js Deployment on the Heroku Platform

"APPLICATION ERROR - Oops! Looks like something went wrong with the application and we couldn't load your page. Please give it another shot in a little while. If you are the app owner, make sure to review your logs for more information." Hey there - ...

javascriptnode.jsheroku

React/Ionic: Avoiding SVG rendering using <img/> elements

I seem to be encountering an issue when trying to load SVG's in my React/Ionic App. I am fetching weather data from OpenWeatherMap and using the weather?.weather[0].icon property to determine which icon to display. I am utilizing icons from the follow ...

javascriptreactjstypescriptionic-frameworksvg

Mastering Data Labels in ng2-chart: A step-by-step guide

Once again, I find myself battling my Angular and JavaScript challenges, each question making me feel a little less intelligent. Let me walk you through how I got here. In my most recent project, I wanted to enhance the user experience by incorporating sl ...

javascriptangularng2-charts

Populate modal form with database information without using Bootstrap

As I work on populating a form with data from an sqlite database, I've come across a stumbling block. My code is available for reference on JSFiddle: https://jsfiddle.net/daikini/e71mvg7n/ One important note: Bootstrap isn't being utilized in t ...

javascriptjqueryhtmlcsssqlite

Click on the print icon in the modal window

I have been working on a receipt generator for a client. The client can add payment receipts using the "Add" button, and upon submission, they have the option to convert it to PDF or print it. However, there seems to be an issue with printing as the text f ...

javascriptphpjquerycss

Getting started with Angular2 ngrx storemodule reducer - Understanding the process of injecting services into the initialState

const startingState = { // service.fetch(); } How can we inject a service into a reducer? Is it possible to utilize a service within a reducer without a constructor or class? export function personnelHandler(state = startingState, action: PersonnelAction ...

angularangular2-servicesngrx-storeangularjs-injector

Filtering Array Values within an Object using JavaScript

I need help filtering an object based on array values. For example: { "sun":["sleep","walk"], "mon":["read","dance","ride"], "tue":["work",&q ...

javascriptobjectlodash

`The flaw in filtering logic - an analysis`

Looking to find matching records within two Lists. We have a List called allAnimals with attributes like animalId, and another List named domesticAnimals also containing animalId. The goal is to compare the two lists and create a new list where the anima ...

angulartypescript

Obtain image file paths dynamically in a folder using Nuxt

Incorporating nuxt with vuetify, I have successfully implemented a carousel component. Now, my goal is to generate a list of the .png files located in the static folder. By referencing a tutorial on dynamically importing images from a directory using webpa ...

javascriptvue.jswebpacknuxt.js

Tips for maintaining an updated array's consistency on page refresh in Vue.js?

HelloWorld.vue Dynamic routing in Vuejs: <template> <div> <b>Vuejs dynamic routing</b> <div v-for="item in items" :key="item.id"> <b>{{ item.id }}.</b> &nbsp;&nbsp;&nbsp; <rou ...

javascriptvue.jsvuex

Go through each item in the array and change its properties

When retrieving data from the database, I receive the following information: "Data": [{ "mainData": [{ "_id": ObjectId("5ab63b22d012ea2bc0bb7e9b"), "date": "2018-03-24" }], "files": [ { "_id": ObjectId("5ab63b22d012ea2bc0bb7e9d"), ...

javascriptdatabaseangular

Hover to stop menu movement

Can someone help me achieve a similar menu hover effect like this one? I'm trying to create a menu with a hold/pause effect on hover, specifically in the section titled "A programme for every vision". The goal is to navigate through the sub menus smo ...

javascriptjquerycss