Search code examples
cesiumjs

Get the base layer selected by user


I want to fetch what base layer user has selected on Cesium app.

Is there any way we can get the selected base layer like Mapbox Streets or OpenStreet Map?

Or any event which is triggered when the base layer is changed?

Any help is appreciated. Thanks in advance.


Solution

  • The user changes terrain and imagery using the BaseLayerPicker widget. Internally, this UI widget uses the Knockout library to track the state of its viewModel. You can use this to subscribe to changes in the viewModel.

    Here's a live demo.

    var viewer = new Cesium.Viewer('cesiumContainer');
    
    var hud = document.getElementById('toolbar');
    
    function updateHud() {
        hud.innerHTML = 'Imagery: ' + viewer.baseLayerPicker.viewModel.selectedImagery.name +
            '<br/>Terrain: ' + viewer.baseLayerPicker.viewModel.selectedTerrain.name;
    
    }
    
    // First run
    updateHud();
    
    // Update when imagery changes.
    Cesium.knockout.getObservable(viewer.baseLayerPicker.viewModel,
                                  'selectedImagery').subscribe(updateHud);
    
    // Update when terrain changes.
    Cesium.knockout.getObservable(viewer.baseLayerPicker.viewModel,
                                  'selectedTerrain').subscribe(updateHud);