3

I am able to toggle the opacity of individual groups within a tileset. Unfortunately this does not hide the data when clicked on. As the layers are stacked this is a problem.

const toggleGroups = (layerName) => {
 if (mapRef.current && !loading) {
   let map = mapRef.current.getMap()
   let expression = ['match', ['get', `${layerName}_class`]]
  
   Object.keys(mapboxGroups[layerName]).forEach(key => {
     expression.push(parseInt(key), mapboxGroups[layerName][key] ? 0.58 : 0)
   })

   expression.push(0)
   map.setPaintProperty(layerName, 'fill-opacity', expression)
 }
}

The setLayoutProperty visibility works for other layers without groups and it also hides the layer data from being shown when layers are stacked.

I have tried to convert my function to work with setLayoutProperty but I get an error.

  const toggleGroups = (layerName) => {
if (mapRef.current && !loading) {
  let map = mapRef.current.getMap()
  let expression = ['match', ['get', `${layerName}_class`]]
  
  Object.keys(mapboxGroups[layerName]).forEach(key => {
    expression.push(parseInt(key), mapboxGroups[layerName][key] ? 'visible' : 'none')
  })

  map.setLayoutProperty(layerName, 'visibility', expression)
}

}

Error message reads : layers.risk.layout.visibility: expected one of [visible, none]

Is there another way of hiding the groups within a layer and also hiding their properties so when stacked the data is not visible when clicked?

1 Answer 1

2

For anyone looking for a solution to this.

  const toggleGroups = (layerName) => {
   if (mapRef.current && !loading) {
    let array = []
    let map = mapRef.current.getMap()
    let group = mapboxGroups[layerName]
    let filter = ['match', ['get', `${layerName}_class`], array, true, false]

    Object.keys(group).forEach(key => {
      if (group[key]) array.push(parseInt(key))
    })
  
    if (!Object.values(group).some(val => val)) {
     filter = ['match', ['get', `${layerName}_class`], [1,2,3,4], false, true]
    }

    map.setFilter(layerName, filter)
  }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.