How to update visible props for deckgl-mapbox MapboxLayer

Question

I have 10-15 different different layerId layers and creating MapboxLayer from deck.gl/mapbox submodule api refrence and added in mapbox map instance.

Trying to set visibility of layer based on passing layerId and propertyValue as true/false checkbox from UI by calling layerVisibility method but it's not working.

DeckglLayer class:

declare let deck;
export class DeckglLayer {
    constructor() {

    }
    createDeckglMapboxLayer(layerId, data) {
        const { MapboxLayer, HexagonLayer } = deck;
        const options = {
            radius: 1000,
            coverage: 1,
            upperPercentile: 100
        };
    ...
    ...
        const hexagonLayer = new MapboxLayer({
            type: HexagonLayer,
            id: layerId,
            data,
            colorRange: COLOR_RANGE,
            elevationRange: [0, 20000],
            elevationScale: 4,
            extruded: true,
            getPosition: d => d.COORDINATES,
            getElevationValue: e => Math.sqrt(e[0].properties.height) * 10,
            getColorValue: this.getColorValue,
            lightSettings: LIGHT_SETTINGS,
            pickable: true,
            onHover: setTooltip,
            opacity: 1,
            visible: true,
            ...options
        });
        return hexagonLayer;
    }
}

Mapbox Instance:

 createMap(mapOptions) {
        this.mapInstance = new MapboxGl.Map(mapOptions);
    }

    addDeckglLayer(layerId, data) {
        var hexalayer = new DeckglLayer().createDeckglMapboxLayer(layerId, data);
        this.mapInstance.addLayer(hexalayer);
    }

    layerVisibility(layerId,propertyValue) {
        var ll: any = this.mapInstance.getLayer(layerId);
        //***********first way
        // ll.implementation.props.visible = propertyValue;
        //this.mapInstance.addLayer(ll);

        //*******second way
        //ll.setProps({ visible: propertyValue });
    }

Note: -i have tried by setting layer layout property visibility as "visible" or "none" but in this case tooltip appearing eventhough layer hiding.

Could you please suggest me best approach,how to set layer visible property true/false for the hexagonLayer type of MapboxLayer.

Answer 1

try this, it works for me.

let refreshedLayers = [];
let currLayers = map.__deck.layerManager.getLayers();
let layer = currLayers[0];

// make it visible
// newLayer = layer.clone({ visible: true });
// make it unvisible
newLayer = layer.clone({ visible: false });
refreshedLayers.push(newLayer);

map.__deck.setProps({ layers: refreshedLayers })