Layers - dynamic visibility is not working - Hiding Layer

[LeVadim]

Hello!

Would it be possible to find a solution for the following issue? The mapbox is not intercepting our "visibility" parameter.. what could be the issue here?

Thanks in advance!

<MapboxGL.ShapeSource
                id={'item_markers'}
                hitbox={{width: 15, height: 15}}
                onPress={this.select}
                images={icons}
                shape={{
                    'type': 'FeatureCollection',
                    'features': this.props.items.map((item, index) => {
                        return {
                            "type": "Feature",
                            "id": 'item_'+item.id,
                            "properties": {
                                "discount_visibility": item.visible ? 'visible' : 'none'
                            },
                            "geometry": {
                                "type": "Point",
                                "coordinates": [parseFloat(item.lng), parseFloat(item.lat)]
                            }
                        }
                    })
                }}
                cluster={true}
                clusterRadius={1}
                clusterMaxZoomLevel={15}
            >
                <MapboxGL.SymbolLayer key='{id}' id='{id}' style={m_styles.icon} />
                <MapboxGL.SymbolLayer key='layer-{id}' id='layer-{id}' style={m_styles.discount} />
            </MapboxGL.ShapeSource>

const m_styles = MapboxGL.StyleSheet.create({
    icon: {
        iconImage: '{icon}',
        iconAllowOverlap: true,
        iconIgnorePlacement: true,
        iconSize: 1,
        iconOpacity: 1
    },
    discount: {
        iconImage: 'discount',
        iconAllowOverlap: true,
        iconIgnorePlacement: true,
        iconSize: 1,
        iconOpacity: 1,
        iconOffset: [15, -15],
        visibility: '{discount_visibility}' // <!--- not working
    }
});

[kristfal]

Visibility is not a data driven style prop. For this you must use a filter, eg [‘==‘, ‘discount_visibility’, true]

[LeVadim]

Where do I apply filter? I have one symbol that works as an addon to the main symbol? Please advise on how to filter the symbol using Mapbox.. Is there a stylesheet filter there? Thank you!

[kristfal]

Check the examples. You’ll put it on the corresponding Layer node in the jsx.