0

I am creating an Ionic 4 app with angular and I want to create a compass which would direct towards specific direction. That direction will be presented by an arrow above the compass. So far I have created the compass and compass is working fine and placed an arrow above it. Screen shot of app.enter image description here

What I know is that i have to calculate an angle from current position to target position.I have used some stack overflow solutions to find angle and use that angle to point arrow to desired location. But unfortunately I can't get my desired angle.

This is the code to determine the angle.

  angleFromCoordinate() {
    let lat1 = this.latCoords
    let lon1 = this.lngCoords
    let lat2 = this.destLat;
    let lon2 = this.destLong;
    var p1 = {
      x: lat1,
      y: lon1
    };

    var p2 = {
      x: lat2,
      y: lon2
    };
    var angleDeg = Math.atan2(p2.y - p1.y, p2.x - p1.x) * 180 / Math.PI;
    console.log(angleDeg);
    return angleDeg;
  }

I also want the arrow to move along if the device is rotated. I am rotating my compass with ionic 4's plugin deviceOrientation

  this.deviceSubscription = this.deviceOrientation.watchHeading().subscribe(
      (data: DeviceOrientationCompassHeading) => {
        //to torate compass
        this.rotateCompass(data.magneticHeading);
        //to rotate the arrow
        this.rotateArrow(data.magneticHeading);
      }
    );
muntazir abbas
  • 57
  • 9
  • Does this answer your question? [Access device compass from webb app with Javascript](https://stackoverflow.com/questions/5918982/access-device-compass-from-webb-app-with-javascript) – Dan O Apr 01 '20 at 14:22
  • this might also be useful: https://stackoverflow.com/questions/4378435/how-to-access-accelerometer-gyroscope-data-from-javascript – Dan O Apr 01 '20 at 14:22
  • users/635678/dan-o, this link https://stackoverflow.com/questions/5918982/access-device-compass-from-webb-app-with-javascript express about device orientation, but i want to get an angle between my location to target location. this is missing – muntazir abbas Apr 01 '20 at 14:31
  • I have managed to find out the angle between to points using above code in the question, now arrow above the compass is pointing towards desired direction but it is sticky and not moving if the device is rotated . can anyone help me to make the arrow along the device , if device is rotated, the arrow should also rotate – muntazir abbas Apr 01 '20 at 17:58
  • Hi, I want to implement a compass in my ionic app. Could you please kindly guide me through it? – Prabhashi Buddhima Dec 30 '20 at 05:45

1 Answers1

0

I got it working alright. I just want to make it clear if anyone is in search of the solution to this problem that the above mention code for getting the angle from one point to an other point is working fine. Code to get angle.

angleFromCoordinate() {
    let lat1 = this.latCoords
    let lon1 = this.lngCoords
    let lat2 = this.destLat;
    let lon2 = this.destLong;
    var p1 = {
      x: lat1,
      y: lon1
    };

    var p2 = {
      x: lat2,
      y: lon2
    };
    var angleDeg = Math.atan2(p2.y - p1.y, p2.x - p1.x) * 180 / Math.PI;
    console.log(angleDeg);
    return angleDeg;
  }

This method returns the angle and you can use this angle to point your compass to your desired location.

muntazir abbas
  • 57
  • 9