nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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.

Vind meer berichten getagd met

Accepted answers

lawsonkendall

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.

All comments

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

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.

RRubalcava

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

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.

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.