Toggle Layers using Checkbox

07-22-2018 12:18 AM
New Contributor III


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


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

Thanks in advance.

0 Kudos
2 Replies
Occasional Contributor II

Something like this maybe:

Toggle Feature Layer 


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;