Toggling layer visibility with a checkbox and updateTriggers

Description

I am facing issue with implementing a checkbox to turn on or off a layer in pure js using updatetriggers. I have looked at the documentation here and here.

I have this layer with the visible property controlled by a function “enabled”. I added the updateTriggers for the visible property.

    const myIconlayer = new IconLayer({
        id: 'icon-layer',
        data:educationData.features,
        pickable: true,
        iconAtlas: './schooltr.png',
        iconMapping: ICON_MAPPING,
        getIcon: d => 'marker',
        
        visible: enabled,
        updateTriggers: {
          visible: [true, false],
        },

        sizeScale: 6,
        getPosition: d => d.geometry.coordinates,
        getSize: d => 5,
        getColor: d => [Math.sqrt(1000), 140, 0],
      });

      deckgl.setProps({
        layers: [hexagonLayer,myIconlayer],
        viewState: Object.assign({}, currentViewState)
      });

I am updating the visibility with the following enabled function that reads a checkbox element id.

    function enabled() {
      // Get the checkbox
      var checkBox = document.getElementById("Education");

      // If the checkbox is checked, display return true
      if (checkBox.checked == true){
        console.log("checkbox true")
        return true    
      } else {
        console.log("checkbox false")
        return false
      }
    }

However nothing happens on the map, it doesnt seem to change the visibility of the layer. However when i do it manually (replacing with false and true the visible prop) it works.

Here is an example of the working app. https://covmob-website.herokuapp.com/

What am I missing to make the checkbox turn on and off the visibility of the layers?

Environment (please complete the following information):

• Framework Version: deck.gl latest
• Browser Version: Chrome Version 81.0.4044.129
• OS: W10 64bit

[alitarraf]

Hi, this is how I worked it out. Also checkout the source code for this example https://deck.gl/gallery/hexagon-layer. renderlayer function and also you can have a look at http://sets-cloud.com/covrex/

You have the renderlayer() function:

// here you are creating the option for the layer to be visible or not depending on wether the checkbox is checked or not.
    let optionsEducation = {
        visible: document.getElementById('Education').checked
      };

//here you are defining your layers parameters
const educationLayer = new IconLayer({
        id: 'education-layer',
        data:educationData.features,
        pickable: true,
        iconAtlas: './img/school.png',
        iconMapping: ICON_MAPPING,
        getIcon: d => 'marker',
        sizeScale: 5,
        getPosition: d => d.geometry.coordinates,
        getSize: d => 5,
        onHover: updateTooltipPOI,
        ...optionsEducation // <<<<<<<--------notice here we are using the optionsEducation variable in the layer
      });

// here you are setting the deckgl prop to render your layer
 deckgl.setProps({
        layers: [educationLayer],
        viewState: Object.assign({}, currentViewState)
      });

[Pessimistress]

You are correct that layer props cannot be changed after creation. Even updateTriggers cannot be changed. You must create a new instance of the layer if you want to update a prop. See this example.

You can learn more about the reactive programming model in https://deck.gl/#/documentation/developer-guide/using-layers