Linking MapImageLayer, Sublayers to checkboxes in a sidebar

LeonDavis

 

Hi there, 

I'm currently working with this example to attempt to link MapIMageLayer - Sublayers to checkboxes instead of button divs as per the example

MapImageLayer - Toggle sublayer visibility | Sample Code | ArcGIS API for JavaScript 4.25 | ArcGIS Developers

I can get the first checkbox working but the others are unresponsive. I have simply tried to replicate their code using Li checkbox inputs rather than Button Div inputs

heres a pen of my attempts

A Pen by Leon (codepen.io)

any help is really appreciated, it's been a while...  :')

Best,

Leon

 

JoelBennett

The problem is that querySelector only returns the first matching element, but you want all matching elements.  Instead, you can use querySelectorAll.  The last part would then go something like this instead:

        const sublayersElements = document.querySelectorAll(".list_item");
        for (var x = 0; x < sublayersElements.length; x++) {
          sublayersElements[x].addEventListener("click", (event) => {
            const id = event.target.getAttribute("data-id");
            if (id) {
              const sublayer = layer.findSublayerById(parseInt(id));
              const node = document.querySelector(".list_item[data-id='" + id + "']");
              sublayer.visible = !sublayer.visible;
              node.classList.toggle("visible-layer");
            }
          });
        }