[Map] Modify rotate button to allow switching between North and orientation defined by user

[rudokemper]

Currently, clicking the standard map rotate button brings the user to North exclusively. We should make this button more useful for local communities by using it to switch back and forth between a user-defined orientation and north.

• [X] Create custom compass icon
• [X] Change onClick behavior to switch between user-defined orientation and north
• [X] Add rotation behavior to custom compass icon
• [ ] Add "click and hold" behavior to custom compass icon (@newguyen)
• [ ] Add CMS integration (@rudokemper)

[tomekr]

Hello! Is the idea here that any registered user will have an extra button of some kind here:

Where they can set a default orientation and then this setting is saved to their profile?

[tomekr]

Here's a little spike I came up with showing my interpretation of it:

Unfortunately, the NavigationControl API is pretty limited and there doesn't appear to be much in the way of customization options (but today is the first time I've used the Mapbox API so maybe there is another way outside of just the API).

As a result, I added a separate button that at the moment keeps you where you're looking but just switches to the default bearing and pitch parameters.

[rudokemper]

Hi @tomekr! Thanks for looking into this issue! Sorry if the explanation wasn't clear.

The idea was that that the fourth button () could toggle between two different settings: a user-defined orientation, and North. Currently it only switches back to North.

Let's assume you've moved around on the map and adjusted the orientation. Upon the first click of the button, the orientation should switch to the user-defined orientation. Upon the second click, it should switch to North. Third click, back to user-defined, and so on.

If there is no user-defined orientation, then it can be set to North as default. So clicking the button will only bring the user to North.

[tomekr]

@rudokemper got it, yea that component on the map is defined by the NavigationControl API (used here in the code. Unfortunately, the API doesn't expose custom behavior for the alternate click.

Could copy it and create a custom component? https://github.com/mapbox/mapbox-gl-js/blob/dd317abdb5c4238fd4149d59431fcf545edfd60d/src/ui/control/navigation_control.js#L35-L145

[rudokemper]

That makes sense to me. @kalimar, any insight?

[kalimar]

@tomekr that's correct the NavigationControl API is very limited. I think we will need a custom button to control the camera for custom orientations. The easiest thing would be too hide the default NavigationControl and replace it with the custom one.

@rudokemper Where would you like the user to select this? Should it be an option every user has or an admin? Once we decide that, the button is pretty easy to implement.

@tomekr pretty much has it done with the custom button. Happy to clarify what I'm saying if necessary (sorry a little rushed here today).

[rudokemper]

@kalimar @tomekr I think that we can have the custom button replacing the default NavigationControl, and having it reset to North only as a standard. Then, somewhere in the code**, there can be a parameter where the administrator can insert a custom orientation. This value is set to blank on a default Terrastories build and therefore ignored by the custom button. Once the administrator defines an orientation using that parameter, the custom button will then use that orientation along with North. I hope that makes sense.

** eventually we will want to build the ability to set the orientation into a UI field in the Terrastories back-end, but this will do for now.

[rudokemper]

Hi @tomekr! Were you still interested in working on this, or maybe sharing a WIP of what you did so somebody else could finish it (and also give you credit as co-author)?

[rudokemper]

@tomekr just following up on the awesome work you did already :)

[newguyen]

Hello! I started to look into incorporating Kalimar's suggestion to address this issue and create the functionality. With some of the refactoring going on, would it be possible for me to work on this issue?