Toggle Layers using Checkbox

788
2
07-22-2018 12:18 AM
Highlighted
New Contributor III

Attention:

Ken Buja

Created Feature Layer class as

 

const fl5 = new FeatureLayer({
url: "***"
});

 

Added the Map as

 

var map = new Map({
basemap: app.basemap,
layers: [ ]
});

 

Created a checkbox as 

 

<div class="form-check">
<input class="form-check-input" type="checkbox" id="Checkbox1" value="option1">
<label class="form-check-label" for="Checkbox1">Wells</label>
Default checkbox
</div>

 

Now, how can I toggle the Layer (fl5) using the checkbox?

Thanks in advance.

Reply
0 Kudos
2 Replies
Highlighted
Occasional Contributor II

Something like this maybe:

Toggle Feature Layer 

Davide

Highlighted
MVP Honored Contributor

All you have to do is add a listener to the checkbox that sets the visible property of the layer.

var checkbox = document.getElementById("Checkbox1");
checkbox.onclick = function () {
  fl5.visible = this.checked;
}