CODEWITHSUNDEEP
mapbox-gldeck.gl
cj devin
cj devin

Reputation: 1375

How to update visible props for deckgl-mapbox MapboxLayer

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.

Upvotes: 3

Views: 1591

Answers (2)

vidriloco
vidriloco

Reputation: 71

Was struggling with this as well and noticed the following:

If you inspect the properties associated with the deckgl object you will likely notice the presence of a _map property. If you did not instantiate a mapbox map instance in your JS namespace, then you should be able to access to it by doing: deckgl._map.map. Otherwise, DeckGL will add an underscore to it deckgl._map._map.

To recap:

deckgl._map.map.setLayoutProperty('road-label-simple', 'none')

Hope this helps

Upvotes: 0

gooin
gooin

Reputation: 113

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 })

Upvotes: 2

Related Questions