CODEWITHSUNDEEP
javascriptandroidgoogle-chrometypescriptgeolocation
paul23
paul23

Reputation: 9445

Why does heading stay "null" for geolocation on android with chrome

Well I create a small geolocation watch with:

navigator.geolocation.watchPosition(
    this.updateLocation.bind(this),
    this.errorLocation.bind(this),
    {enableHighAccuracy: true}
);

where updateLocation is defined as:

private updateLocation(position: Position) {
    this.myLatitude = position.coords.latitude;
    this.myLongitude = position.coords.longitude;
    this.myAccuracy = position.coords.accuracy;
    if (position.coords.heading != null) {
        this.myHeading = Game.toRad(position.coords.heading);
    }
    this.GPSWorking = true;
}

Now this code is "working", I see it updating gps data and the accuracy is as expected. - There is just one "but": the heading is always "null". I could expect this when on pc, or even when not having enabled high accuracy.

yet in all settings I tried it gives "null".

I know my mobile phone has a working gyroscope: I can actually get the heading in native android apps. - I also notice that google maps (website, through chrome) is capable of determining my heading; so there must be something I did wrong?

A small fiddle so people could test it: https://jsfiddle.net/8p5rngtk/15/ - I'm only interested in the heading (though rest is there to show gps is working on a device).

Edit:

Well, it "just" started working like expected. (perfectly well), the only thing I still notice is that the update frequency is way slower than when I wrote it as native application - so slow that I can't depend on it for my application.

Anyways, if anyone has an idea why this works "sometimes" it might help future problems.

Upvotes: 3

Views: 2194

Answers (2)

Matthias
Matthias

Reputation: 385

I leave this here because I wasted a full day with the same problem. You are looking into the wrong API for getting the Orientation of the phone. The heading attribute in the geolocation is not the compas orientation but a direction calculated based on the movement of the phone. So if you are standing still heading is null. As soon you as you are moving the heading points into the direction of your movement. See this docu: https://developer.mozilla.org/en-US/docs/Web/API/GeolocationCoordinates/heading

What you are looking for is the "deviceorientation" event. For iOS/Safari you have to manually request the feature first. (This is Typescript code)

const isIOS = !(
    navigator.userAgent.match(/(iPod|iPhone|iPad)/) &&
    navigator.userAgent.match(/AppleWebKit/)
);
if (isIOS) {
    (DeviceOrientationEvent as any).requestPermission()
        .then((response: any) => {
            if (response === "granted") {
                window.addEventListener("deviceorientation", this.receivedNewHeading, true);
            } else {
                alert("has to be allowed!");
            }
        })
        .catch(() => alert("not supported"));
} else {
    window.addEventListener("deviceorientationabsolute", this.receivedNewHeading, true);
}

Upvotes: 1

McMurphy
McMurphy

Reputation: 1264

The heading attribute is currently unsupported by all browsers that I am aware of. Just like altitude.

The Generic Sensors API may offer some future help. (NB: They will never implement the proposed Geolocation "sensor")

I'd like to see altitude and heading supported but just think of the increasing flood of events that would need to be filtered :-(

Upvotes: 2

Related Questions