Customize NavigationToggle

[lawsonkendall]

The default esri SceneView (3D only) provides the NavigationToggle component which toggles between "Pan" and "Rotate" mode. 

I have a task to update the appearance (using our own custom png images) and tooltip styles for this component.  The core question is, is there a relatively simple way to specify my own buttons/images for the NavigationToggle interface, and also to specify the tooltip styles for the same?  

I have created a CodePen which removes the esri built-in NavigationToggle and makes a naive attempt to implement my own by toggling the value of view.navigation.browserTouchPanEnabled.  https://codepen.io/lawken/pen/RwmLaYV  Of course, it doesn't work, but maybe this is enough of a platform to support discussion of the right way forward.   The production version of this is a bit more complicated, of course, being in an Angular app, using Material for button styles, but if I can figure out how to customize the NavigationToggle in the CodePen, I can transfer the concept to the app.

Thank you.

[lawsonkendall]

2 thoughts:

• Perhaps removing the navigation-toggle is my first mistake.  If I can figure out a way to associate my own button(s) with the built-in NavigationToggle instance, that would probably solve (almost) everything.
• This is lowering the bar a bit, but original task was to change the style the tooltip (to be consistent with other component tooltips on the page).  If it's not possible to specify my own button(s)/images for the component, but I can at least find the class (or id) of the tooltip, that might be "good enough".  That's actually where I started, but from various posts I've read, Esri seems to use js to dynamically create the tooltip element on the fly, based on the title of the containing component element.  I tried all kinds of tricks to trap the NavigationToggle tooltip in Chrome Dev Tools "Element" inspector, but never had any luck -- which ultimately led to me thinking, if I could just provide my own component to do the NavigationToggle  action (as I already do for the Zoom In/Out actions), I would get the consistent tooltip style "for free", and I would have the added bonus of being able to give the NavigationToggle a look and feel consistent with the other components I've provided.

[ReneRubalcava]

You might want to look at building your own custom UI element that covers what you need. You can use the NavigationToggleViewModel to handle the logic and build a custom UI around that. You can do it in your framework of choice or a vanilla HTML/JS element.

[lawsonkendall]

I'll take a look at that, in case hiding the built-in NavigationToggle turns out to be more difficult than expected. 

Thanks for the response.

[lawsonkendall · Accepted solution]

I found the solution.  https://codepen.io/lawken/pen/eYaGVEb?editors=1000

The main thing is to:

1. Retrieve the default constructed NavigationToggle instance from the SceneView.ui. (Don't "remove()" it.)
2. Set "visible = false" on that instance.
3. Call "toggle()" on that instance to switch modes.