GeolocateControl heading does not work outside of mapbox docs example

[douglasg14b]

mapbox-gl-js version: 2.6.1

browser: Chrome

Steps to Trigger Behavior

1. Go to: https://docs.mapbox.com/mapbox-gl-js/example/locate-user/
2. Notice that the heading arrow will show
3. Click on the codepen link
4. Notice how it no longer works

Link to Demonstration

https://codepen.io/douglasg14b/pen/zYEaMqQ

Expected Behavior

The heading arrow shows.

Actual Behavior

It does not.

More Info

I have been largely unable to get the heading to work in mapbox. Even copy/pasting the code directly from the example docs linked above verbatim to my app does not work. Even the codepen link doesn't have a heading arrow. It only seems to exist and work in the example docs, but nowhere else?

I've tried on several phones to no effect.

Going into the dev tools and fiddling around with the sensors doesn't seem to have any effect either:

Why is this? How is this feature supposed to work?

[avpeery]

@douglasg14b Thanks for submitting your issue. While the heading may not display in codepen, I was able to implement the heading working as expected with the these settings locally:

map.addControl(new mapboxgl.GeolocateControl({
     trackUserLocation: true, 
     showUserHeading: true
}));

Can you provide a minimal reproduction of the code you are using to add the Geolocate control to the map?

[douglasg14b]

@avpeery

Thanks for the reply!

I actually went and disabled my code (Which has a lot more configuration...etc) and copy/pasted the code from the example to try the simplest possible thing I could.

And then went to the site on my phone (Chrome), and even tried the sensor emulation in chrome desktop with no success. I was on localhost, with a local cert. So I thought that might be the problem , so I reverse proxied with a valid certificate (So no more insecure errors in chrome, even though localhost is considered a secure context anyways) and had no success there either.

Is there any specific debugging I should do here that might better reveal the problem source?

  mapboxgl.accessToken = 'REDACTED';
    const map = new mapboxgl.Map({
        container: 'map', // container ID
        style: 'mapbox://styles/mapbox/streets-v11', // style URL
        center: [-96, 37.8], // starting position
        zoom: 3 // starting zoom
    });

    // Add geolocate control to the map.
    map.addControl(
        new mapboxgl.GeolocateControl({
            positionOptions: {
                enableHighAccuracy: true
            },
            trackUserLocation: true,
            showUserHeading: true
        })
    );

This might be a red herring, or an actual related thing:

When I was debugging I found that the ondeviceorientationabsolute event doesn't actually seem to fire on those pages? window.addEventListener('deviceorientationabsolute', (x) => console.log(x), false); while deviceorientation does (Though, without the absolute being false), I have not tested that on mobile yet, kind of a PITA to get a console connected).

[avpeery]

The code sample you've shared seems right. Is it only not working in Chrome (and can you provide which version of Chrome you are using)? Have you tried it in Safari or Firefox? Is the heading only not working on mobile? If so, what type of phone did you test on? And to further clarify, the heading is working on desktop on your end? Thanks so much!

[douglasg14b]

I've tried this in Chrome 97 only, Firefox does not have support for ondeviceorientationabsolute.

Heading is not working on mobile, or on desktop (Desktop when emulating sensors in console). I tested on a Google Pixel 6, and a Moto Z2 Force.

For both phones heading works on the docs page, but not on my app, or in the codepen example. Heading shows on Chrome desktop on docs page, but is unresponsive to changes in emulated sensors.

[btoone]

I just ran into this issue trying to enable the heading which is how I found this open issue. 👍 for an update on this issue please.

I can confirm that it's still not working in the Codepen example. In my code base (which I just copy paste the example code into an angular directive) I also confirmed that the heading is not displayed in Chrome and Safari.

The heading does appear in the mapbox "Locate the user" example on chrome, safari and on iphone.

[SnailBones]

I can reproduce this not working in CodePen on both desktop Chrome and mobile (Chrome on Pixel 2). Mapbox example: CodePen:

I also see this warning which looks like it might be the cause:

geolocate_control.js:640 The deviceorientationabsolute events are blocked by permissions policy. See https://github.com/w3c/webappsec-permissions-policy/blob/master/features.md#sensor-features

[Charly67220]

Hi everybody,

Is there any new about this issue ?

In my side, it is still blocked in Safari but "Locate the user" example AND CodePen seems to work as expected asking for exact location.

[pimepan]

Hey! I had the exact same problem, it Seems like you have to call the trigger method in the geolocate control. I found this by copying the code that is on the API reference https://docs.mapbox.com/mapbox-gl-js/api/markers/#geolocatecontrol#trigger

  // Initialize the geolocate control.
    const geolocate = new mapboxgl.GeolocateControl({
      positionOptions: {
        enableHighAccuracy: true
    },
    trackUserLocation: true,
    showUserHeading: true

    });
    map.addControl(geolocate);
    map.on("load", () => {
      geolocate.trigger();
    });