maplibre-gl-js
maplibre-gl-js copied to clipboard
maplibre
add support for “direction arrow” feature. i.e. add support for showUserHeading in GeolocateControl
User Story
This section should have a one-sentence sentence user story, such as:
As a developer I can show end user Heading direction , so that end user can navigate properly.
See also: https://docs.mapbox.com/mapbox-gl-js/example/locate-user/
Rationale
- Why is this feature needed? - to show direction user heading to
- What are some example use cases? Position in respect to pinned location.
- Can it be done today? Is there a workaround? No
Impact
- Multiple developer has asked for the “direction arrow” feature. This is very important for developer who is using JS (or react JS) for their app.
From my experience, in the web browser, especially iOS, this functionality is almost impossible to get right. I have that in an app I'm maintaining, and I needed to use the native compass heading (that is not available in the browser) due to all kinds of permission requests on iOS. So generally speaking, this would make sense, but in practice I'm not sure how doable it is... Feel free to open a PR.
If using The Geolocation API is enough for you guys, I am willing to work on this.
From my experience, in the web browser, especially iOS, this functionality is almost impossible to get right.
@HarelM it's interesting to know that on iOS it's almost impossible to do, but what about Android ? For my use case, supporting this feature on Android would enable the feature for 75 % of my users (France).
Interesting : the compass works perfectly for me in both Chrome and Firefox on my Android device https://idzgd.csb.app. (It appears blocked on Bromite though).
Here is the corresponding sandbox https://codesandbox.io/s/idzgd.
It has an active isIOS branch.
If this is working as expected for you and you would like to open a PR to add this functionality, feel free to do so. It might be that browser nowadays are supporting this better than before...
My tests on social media tell me it's working for 90% of users :)
Edit : I had more than 20 answers, not working for only 1 user.
Checkout this react implementation cartes.app/nord.
Not sure how to implement this in maplibre, should it be a plugin or an extension of GeolocateController triggered by a param ?
I think a property in the options and some rendering on the map would be sufficient. I still hope to split the geolocation control into a state management, HW related code and UI related code, if you are up to it that would be amazing.
May be useful to integrate magnetic declination. Declination can be significant, e.g., 23 degrees for NZ. This might help? https://www.npmjs.com/package/geomag
Sorry, I don't have time to contribute to MapLibre, but you can try my integration on https://cartes.app. The code is here.
Summary : it's just a marker rotated by the degree value returned by the useCompass react hook. Works well for me (except for a bug on subsequent clics on the geoloc button).