Select to view content in your preferred language

Customize NavigationToggle

265
4
Jump to solution
06-11-2024 06:58 AM
lawsonkendall
New Contributor III

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

lawsonkendall_0-1718113323724.png

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.

0 Kudos
1 Solution

Accepted Solutions
lawsonkendall
New Contributor III

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.

View solution in original post

0 Kudos
4 Replies
lawsonkendall
New Contributor III

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.
0 Kudos
ReneRubalcava
Frequent Contributor II

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.

0 Kudos
lawsonkendall
New Contributor III

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.

0 Kudos
lawsonkendall
New Contributor III

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.
0 Kudos