How do I programmically remove the navigation help?

CesiumJS
1

I'm trying to remove the navigation help panel (which I purposefully displayed by setting navigationInstructionsInitiallyVisible=true).

I've tried:

  var navHelp = $( '.cesium-navigation-help' );
  navHelp.removeClass( 'cesium-navigation-help-visible' );

This does remove the help panel, but it then requires to clicks to redisplay the navigation help.

Thanks.

2

You have 2 viewer options related to that:
http://cesiumjs.org/Cesium/Build/Documentation/Viewer.html?classFilter=viewer#navigationHelpButton to remove it completely (set it to false).

Another one is navigationInstructionsInitiallyVisible, which can be used to just start with the help screen closed.

3

Thanks Yonatan. I don't want to use navigationHelpButton and remove the button, I just want to remove the panel as if the Help button was clicked.

Similarly, as I said in my post, I **purposefully** set navigationInstructionsInitiallyVisible to true because I want it to display when the map is first displayed.

4

Sorry for misunderstanding.
That's a JS issue. Here's a vanilla js solution for you to work with the
sandcasle:

var viewer = new Cesium.Viewer('cesiumContainer', {
    navigationInstructionsInitiallyVisible: true
});
document.getElementsByClassName('cesium-navigation-help-button')[0].click();

You can replace it with a jQuery one: $('#cesiumContainer
.cesium-navigation-help-button').trigger('click') that should do the same.
Hope this helps.

5

You should be able to hide the instructions like this:

viewer.navigationHelpButton.viewModel.showInstructions = false;

Kevin

6

Nice one Kevin.
When does Cesium looks for changes in the viewModel? During a rendering
cycle?

7

It’s a knockout observable property, so the DOM update happens immediately, I believe.

8

You should be able to hide the instructions like this:

viewer.navigationHelpButton.viewModel.showInstructions = false;

Kevin

Perfect! Thanks Kevin.

9

Never worked with knockout. Thanks!