Using the Javascript API in IONIC 2, determine the distance between two points

Looking to determine the current position of a user and calculate the distance between their location and others? Utilizing a helpful tutorial for this task, available at: Create a Nearby Places List with Google Maps in Ionic 2. Here's some code excerpt from the tutorial:

let usersLocation;
Geolocation.getCurrentPosition().then((position) => {

   usersLocation = { lat :position.coords.latitude ,  lng : position.coords.longitude }
   locations.map((location) => {

    let placeLocation = {
      lat: location.latitude,
      lng: location.longitude
    };

    location.distance = this.getDistanceBetweenPoints(
        usersLocation,
        placeLocation,
        'miles'
    ).toFixed(2);
  });

});

Encountering an issue where the usersLocation variable is not being properly set with the latitude and longitude coordinates of the current user's postion. Seeking assistance to resolve this problem!

Answer №1

findDistance(latitude1:number,latitude2:number,longitude1:number,longitude2:number){
    let x = 0.017453292519943295;    // Math.PI / 180
    let y = Math.cos;
    let z = 0.5 - y((latitude1-latitude2) * x) / 2 + y(latitude2 * x) *y((latitude1) * x) * (1 - y(((longitude1- longitude2) * x))) / 2;
    let distance = (12742 * Math.asin(Math.sqrt(z))); // 2 * R; R = 6371 km
    return distance;
  }

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

Updating the status of various sections with Redux toolkit

Is it possible to update the state of a store, which consists of multiple slices, with a new state in React using Redux Toolkit? While you can revert the entire store to its initial state using extraReducers, is it also possible to change the state to som ...

Can you identify the specific error type that occurs in the onError function of react-query's MutationCache when using Typescript

Can someone help me with identifying the type of error in react-query MutationCache onError function when using Typescript? I also need guidance on how to override the type so that I can access and use the fullMessage from the data. const queryClient = new ...

Steps for reinstalling TypeScript

I had installed TypeScript through npm a while back Initially, it was working fine but turned out to be outdated Trying to upgrade it with npm ended up breaking everything. Is there any way to do a fresh installation? Here are the steps I took: Philip Sm ...

Issue with sending props to TypeScript React component

Having a challenge with styling a simple button component using styled components. When trying to send a prop to the component, TypeScript throws an error saying "No overload matches this call". App.tsx import React from 'react'; import Button ...

The term 'BackgroundGeolocationPlugin' is being used as a value in this context, even though it typically represents a type

I am currently working on an application in Ionic and my goal is to incorporate a background-geolocation plugin using npm. In the past, I had no issues with version 2 of the plugin as it allowed me to import it into NgModule seamlessly. However, due to cer ...

Is it possible in Angular Typescript to map the attributes of an array to a class object or generate a new object using the elements of the array?

Here are the specifications of the tools I am currently using: Angular CLI: 10.0.6 Node: 12.18.2 Operating System: win32 x6 Angular Version: 10.0.10 My goal is to retrieve selected rows from ag-grid using a specific method. When I retrieve the row, i ...

What is the reason that specifying the type of function parameters does not result in conversion being

Seeking clarity here. I have a TypeScript function (using version 1.7) that is linked to the change event of a select dropdown in HTML: toggleWorker(stsID: number): void { // get status object by selected status ID let cStatus: Status = this.s ...

Exploring the concept of type inheritance in TypeScript

I am working on developing various components for an app, each with its own specific structure. The general structure is defined as COMPONENT. Within this framework, there are two distinct components: HEADING and TEXT. These components should be subclasses ...

Determine if a specific route path exists within the URL in Angular

http://localhost:4200/dsc-ui/#message but if I change the URL to (remove #message and type application-management) http://localhost:4200/dsc-ui/application-management (/application-management), it should automatically redirect me to http://localhost:4200/d ...

Identify the category of the component

Using a Link component from version 4.0.0-beta.2, I am exploring its capability to override the root element with a field called component. My goal is to wrap the Link component in a new component called MyLink and pass a custom component through props: ...

Angular2 app fails to update after emitting an event

I need help with a child component responsible for updating phone numbers on a webpage. The goal is for the application to automatically display the changed phone number once the user hits the 'save' button. Here's a visual of how the appli ...

What is the best way to create an "ArraySimilar" class using TypeScript?

Can someone guide me on creating an ArrayLike class in TypeScript? Edit: Got the solution from @jcalz, it's working perfectly for me. class CustomArray<T> implements ArrayLike<T> { length: number [index: number]: T } ...

Each styled component will yield the respective type definitions using (@types/styled-components)

Encountering a strange problem with styled-components in VSCode. Every component from styled-components is returning 'any'. https://i.sstatic.net/0kFJw.png https://i.sstatic.net/S20cS.png I had it working previously, but unsure when it stopped ...

How to pass parameters between pages in Ionic 2 using navParams when the return nav button is clicked

Is there anyone familiar with how to return a simple value (or JSON) by clicking on the return button in Ionic 2's navigation bar? I understand that navParam can be used to send a value when pushing a page, but I am unsure how to implement the same fu ...

Is it necessary for me to set up @types/node? It appears that VSCode comes with it pre-installed

Many individuals have been adding @types/node to their development dependencies. Yet, if you were to open a blank folder in VSCode and create an empty JavaScript file, then input: const fs = require('fs'); // <= hover it and the type display ...

Utilizing stored data to display multiple markers on Google Maps with Node, MongoDB, Express, and EJS

I've been working on a project that involves passing values from mongodb to the google maps script in order to display multiple markers. While I've been able to load the map successfully, I'm facing difficulties defining my customers and loo ...

Using IONIC to extract data from a $http JSON call

I've been struggling for more than 3 hours attempting to extract a value from an object returned by $http.get(), but unfortunately, I haven't been successful. Below is the JSON output that I'm trying to work with: {"ValidateUserResult":t ...

What is the best way to inject the Service into the Controller constructor using TypeScript?

I am developing a straightforward REST API using TypeScript that interacts with your classes to query a database in the following sequence: Controller > Service > Repository. While working on this, I experimented with the following code snippets: Co ...

Should the input field only contain spaces, a validation error will be triggered by the user

I am currently working on an Angular form implementation that allows users to enter their phone numbers. I have integrated a custom directive called appPhoneExtMask for formatting the phone numbers and have also implemented Angular form validation for both ...

Can the getState() method be utilized within a reducer function?

I have encountered an issue with my reducers. The login reducer is functioning properly, but when I added a logout reducer, it stopped working. export const rootReducer = combineReducers({ login: loginReducer, logout: logoutReducer }); export c ...