# Button to toggle layers on/off

**URL:** <https://community.cesium.com/t/button-to-toggle-layers-on-off/14943>\
**Category:** CesiumJS\
**Created:** [August 22, 2021, 9:52am UTC](https://community.cesium.com/t/button-to-toggle-layers-on-off/14943 "2021-08-22T09:52:03Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![JC\_2021](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/jc_2021/32/3476_2.png) [@JC\_2021](https://community.cesium.com/u/JC_2021)\
**Post date:** [August 22, 2021, 9:52am UTC](https://community.cesium.com/t/button-to-toggle-layers-on-off/14943/1 "2021-08-22T09:52:03Z")

</div>

Hello, I am completely new to Cesium and just starting to explore the software a bit more. I have tried creating Cesium stories but would like some more functionality from my map. Currently I am trying to create buttons to toggle layers on/off. I tried this code, which tries to create a button to toggle the “ports” layer on/off. It should hide the ports layer by default when opening the map. However, this does not work, and when clicking the button I get an error, which I have pasted below. Please let me know if you know where I am going wrong in this code.

An error occurred while rendering. Rendering has stopped.  
TypeError: Cannot read property ‘length’ of undefined  
TypeError: Cannot read property ‘length’ of undefined  
at DataSourceDisplay.update ([https://sandcastle.cesium.com/CesiumUnminified/Cesium.js:226497:29](https://sandcastle.cesium.com/CesiumUnminified/Cesium.js:226497:29))  
at Viewer.\_onTick ([https://sandcastle.cesium.com/CesiumUnminified/Cesium.js:329502:45](https://sandcastle.cesium.com/CesiumUnminified/Cesium.js:329502:45))  
at Event.raiseEvent ([https://sandcastle.cesium.com/CesiumUnminified/Cesium.js:14139:22](https://sandcastle.cesium.com/CesiumUnminified/Cesium.js:14139:22))  
at Clock.tick ([https://sandcastle.cesium.com/CesiumUnminified/Cesium.js:51089:17](https://sandcastle.cesium.com/CesiumUnminified/Cesium.js:51089:17))  
at CesiumWidget.render ([https://sandcastle.cesium.com/CesiumUnminified/Cesium.js:323161:37](https://sandcastle.cesium.com/CesiumUnminified/Cesium.js:323161:37))  
at render ([https://sandcastle.cesium.com/CesiumUnminified/Cesium.js:322411:20](https://sandcastle.cesium.com/CesiumUnminified/Cesium.js:322411:20))

Here is a link to my code: [Sandcastle code link](https://sandcastle.cesium.com/#c=tVVrc9o4FP0rWr5gZrIyNCGzbQmzWYdNTXm0QJuG8Qwj5GtQsCVWkiFmp/+9EjavNJnuTncZzyDpnnt87kPXrotuJeEaeaBYmrSHiFAKSiEtUCZSiZjgiCgFWgU8x2BfcBxCRNJYX2/BI7EAjq5QUIKsPZ/eUtZnbf/Txq/1mK98PqhTz7/0F8svn732a2xAf4W3CwPyq93ROBk/tGr3w2o2HvVYZzR46CVd3b8bsJ5XrXeT+8feq4+veg8fa/0byjpeezk2ZL3Rota7aSk/ieeh2XdH91nvxj/vbVrn3S9VDNFkM66T6K7/mPx5zcn6fXQBcu5Fd7/9enF7Nz2fhfR1fTpqDz8FpbcBD/iKSLRisAZpIuGwLjKCP2/PnKBEt3tPcE0YBxmUKnu/pZBaGbdDggagTPYo4EiK5Nrmzw+d+sVl9eKyEnCEsJ4Dd6KUU20z7MgCX0F/WzNCEnQq+Y7xfRLfEE2GOWcsSLj3ONt5IERJApK8KcLAigIHnB+eHTBGsfoOYw8LzFcbl/17Tme4V/FUaUF4AChMwvDY4WdoN0IkI/ESmzB0cs0UHFGClELu2ajgSsQ2dbPCUvjvazipVauTTE6iWIhwMvjwT8p5cX5ZrTyNxfLuihPwQsG/L+ePi/mjUm6D+3/L+LOJd13kSSAaEEE6WzJKYuRtTrJjQbY+BwW10wt6incsseseofP8ljF2zTMkyTIGC3cVs0tMjXt5r+Y6DI0UOge6mIpHRDQyEZphuDQ6QkHTBLjGM9CtGOzyj8z0QVkLEU+JLFcw42YyvBt1O+gqD7/ciMkU4maD8WWqbYxwZUZJwR+UEAvNXs3F2jucuU30wU6Uhps7l/dNuhd2hV5Uc0y2DWznZAvZWhlchyltekU6ZTonfAblM7Qrn7MvnC3N7m1K2xLl4BDndhYhZ8+8XUBYOcyiLcHQSLFALjSysjg+mK3/L890G80HrHK2Q7VyQml/LzRojn57wH4tphmCWMETXe9YCFYATaU0+YizZ9X9N+IkJGIFL+szV9SknxiR1lo6KzWUzmJoWvPvpkWNH0pl7Jjm1WA61lRCudPUpFtjqraUDXfn0gjZKm+p775WiMbmO24sURrHQ7aBoNRsuAZ/4mbvCuOz/gpkTDIDsTIa81qzkxswxg3XbO1Ln/oW1+CI9xs)

---

<div class="post-metadata">

**Author:** ![scottUFR](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/scottufr/32/3458_2.png) [@scottUFR](https://community.cesium.com/u/scottUFR)\
**Post date:** [August 23, 2021, 12:30pm UTC](https://community.cesium.com/t/button-to-toggle-layers-on-off/14943/2 "2021-08-23T12:30:24Z")

</div>

You need to set the value of ports in the then from the load.

```auto
Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI0MTZmZjE1YS0yZTNiLTRjNmMtOWRiNC05MmYxN2Q2NjQ1ODciLCJpZCI6NTk1NDEsImlhdCI6MTYyNDI3NzE3MX0.ef_zZ5afWOxmFAnawKf4erhCfW8-4GWb3gdc95bTJSU";

var viewer = new Cesium.Viewer("cesiumContainer");

var ports;

Cesium.IonResource.fromAssetId(546046)
  .then(function (resource) {
    return Cesium.KmlDataSource.load(resource, {
      camera: viewer.scene.camera,
      canvas: viewer.scene.canvas,
    });
  })
  .then(function (dataSource) {
    ports = dataSource;
    return viewer.dataSources.add(dataSource);
  })
  .then(function (dataSource) {

```

The only other thing I see is that the state of the checkbox is not correct.

Scott

---

<div class="post-metadata">

**Author:** ![JC\_2021](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/jc_2021/32/3476_2.png) [@JC\_2021](https://community.cesium.com/u/JC_2021)\
**Post date:** [August 23, 2021, 2:12pm UTC](https://community.cesium.com/t/button-to-toggle-layers-on-off/14943/3 "2021-08-23T14:12:07Z")

</div>

That worked well, thank you

---

<div class="post-metadata">

**Author:** ![sam.rothstein](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/sam.rothstein/32/6584_2.png) [@sam.rothstein](https://community.cesium.com/u/sam.rothstein)\
**Post date:** [August 23, 2021, 3:22pm UTC](https://community.cesium.com/t/button-to-toggle-layers-on-off/14943/4 "2021-08-23T15:22:30Z")

</div>

@scottUFR

Thank you for posting - your solution looks perfect 🚀

-Sam