search

domoritz / leaflet-locatecontrol

A leaflet control to geolocate the user.
https://domoritz.github.io/leaflet-locatecontrol/demo/
MIT License
801 stars 261 forks source link

Direction not updated on screen rotation #262

Open lmdc45 opened 4 years ago

lmdc45 commented 4 years ago

Hi, Seems when rotating screen on ios the direction still follow the top of the phone. When the screen rotate I would expect the direction arrow to change accordingly.

domoritz commented 4 years ago

Can you provide some more details?

lmdc45 commented 4 years ago

Is there a way I can see the console on iphone? its on iphone 7, using the demo, with default browser safari, location and motion permission allowed while using the app pictures below while only rotating the phone, I would expect the arrow to keep pointing below left when rotating

IMG_1263 IMG_1262

domoritz commented 4 years ago

Yes, I can confirm that this is a bug. Can you help fix it?

lmdc45 commented 4 years ago

I am not a developer and have limited knowledge however will give it a try

domoritz commented 4 years ago

Hmm, somehow I cannot get the direction indicator to work right now. It looks like what we need to do is to correct the heading when the device orientation changes to landscape.

domoritz commented 4 years ago

Does https://labs.easyblog.it/maps/leaflet-compass/examples/simple.html works correctly for you?

lmdc45 commented 4 years ago

No this above is not working on my phone

8volution23 commented 3 years ago

Not sure if this has something to do with this, but looks like since iOS 13 Apple now requires using their permissions API: https://medium.com/flawless-app-stories/how-to-request-device-motion-and-orientation-permission-in-ios-13-74fc9d6cd140

criativocyber commented 3 years ago

As I saw the picture above, How can I decrease the radius on current location and How can I implement that angle on circle.

Here is my code.

    var lc = L.control.locate({
        locateOptions: {
            enableHighAccuracy: true
        },
        strings: {
            title: "Some Text",
            popup: 'Some text 2'
        }
    }).addTo(map);
domoritz commented 3 years ago

The arrow appears automatically when there is a compass location.

criativocyber commented 3 years ago

Can you give to me a code examples? That answer doesnt help to much

lmdc45 commented 1 year ago

Issue doesn't appears when on windows chrome dev tool, the heading is displayed properly. Tried to fix it on ios but could not really so far, not sure if issue is ios only or android as well

this seems to solve it in my particular case: in _onDeviceOrientation, add after active check:

        let oriAbs = "ondeviceorientationabsolute" in window;

        if (!oriAbs && e.webkitCompassHeading &&  window.orientation !== null) {
            this._setCompassHeading(e.webkitCompassHeading + window.orientation);
            return;
        }
jedfrechette commented 1 month ago

I believe this is an issue on both Android and iOS as I'm observing it on the demo Leaflet site with the following devices:

I'm more than happy to help debug, but am not accustomed to working with javascript on these mobile browsers so will need a little guidance on how to collect and provide more useful data.