topic Customize NavigationToggle in ArcGIS JavaScript Maps SDK Questions

Customize NavigationToggle

lawsonkendall — Tue, 11 Jun 2024 14:36:40 GMT

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.

Re: Customize NavigationToggle

lawsonkendall — Tue, 11 Jun 2024 14:53:24 GMT

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.

Re: Customize NavigationToggle

ReneRubalcava — Tue, 11 Jun 2024 16:45:36 GMT

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.

Re: Customize NavigationToggle

lawsonkendall — Tue, 11 Jun 2024 21:04:15 GMT

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

The main thing is to:

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

Re: Customize NavigationToggle

lawsonkendall — Tue, 11 Jun 2024 17:13:13 GMT

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.