Control available scene modes in SceneModePicker

[OmarShehata]

The BaseLayerPicker allows you to pass an array of which imagery layers should be available. It would be nice if the SceneModePicker had a similar option.

This was requested on the forum. Currently it's hardcoded to show all 3. I think it should be easy to add an option to control this. I think you'd need to edit https://github.com/AnalyticalGraphicsInc/cesium/blob/master/Source/Widgets/SceneModePicker/SceneModePicker.js and https://github.com/AnalyticalGraphicsInc/cesium/blob/master/Source/Widgets/SceneModePicker/SceneModePickerViewModel.js.

[emackey]

Here's a Sandcastle with Columbus View turned off. Be sure to check out the code.

[emackey]

I'll reproduce it here for better visibility.

<style>
    @import url(../templates/bucket.css);
    
    .cesium-sceneModePicker-dropDown-icon[data-bind*="COLUMBUS_VIEW"] {
        display: none;
    }

    /* This one is for 2D mode.
    .cesium-sceneModePicker-dropDown-icon[data-bind*="SCENE2D"] {
        display: none;
    }
    */
    
</style>

[OmarShehata]

I had quite the experience gazing in disbelief at the feature working with no custom code, until it occurred to me check the CSS!

[shunter]

The CSS is a good short-term workaround, but it would be easy for the SceneModePickerViewModel to have booleans to control whether each mode is included or not.

[owensjp]

Thank you for the CSS example! Unfortunately, I can't replicate it in a production webpack environment. (There is no bucket.css) - I use require('cesium/Widgets/widget.css') in my javascript file. (As well as my own CSS file)

Adding

.cesium-sceneModePicker-dropDown-icon[data-bind*="COLUMBUS_VIEW"] {
    display: none;
}

to my CSS file does not remove the option from my drop down list. The CSS Solution would be fine for me, through an API solution would work just as well.

[emackey]

@ognjenb If you right-click the offending button and hit "inspect", and then make sure the <button element is selected, can you confirm that (a) it includes class cesium-sceneModePicker-dropDown-icon and (b) it includes a data-bind attribute that mentions COLUMBUS_VIEW? If both of those things are true, the CSS rule should apply to the button element. Is another rule overriding it?

[owensjp]

It does have the class

class="cesium-button cesium-toolbar-button cesium-sceneModePicker-dropDown-icon cesium-scemeModePicker-visible"

In the data-bind section it has a lot of things that say things like sceneMode === _sceneMode.COLUMBUS_VIEW or !== and the title of course of the button is "Columbus View".

I don't have any rules overriding any of the default widgets other then the ones removing some of them from the viewer.

[OmarShehata]

Another thing you can try @owensjp is to get the button with JS and modify its CSS that way. For example, I used the browser inspector get the CSS selector for the button, and then the following line in JS can hide it:

document.querySelector("#cesiumContainer > div > div.cesium-viewer-toolbar > span.cesium-sceneModePicker-wrapper.cesium-toolbar-button > button:nth-child(4)").style.display = 'none';

[owensjp]

Thanks Omar! That worked!