# How do I hide CZML datasources outside availability boundaries ?

**URL:** <https://community.cesium.com/t/how-do-i-hide-czml-datasources-outside-availability-boundaries/3431>\
**Category:** CesiumJS\
**Created:** [December 9, 2015, 2:06pm UTC](https://community.cesium.com/t/how-do-i-hide-czml-datasources-outside-availability-boundaries/3431 "2015-12-09T14:06:05Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![rcastay.astek](https://avatars.discourse-cdn.com/v4/letter/r/a88e4f/32.png) [@rcastay.astek](https://community.cesium.com/u/rcastay.astek)\
**Post date:** [December 9, 2015, 2:06pm UTC](https://community.cesium.com/t/how-do-i-hide-czml-datasources-outside-availability-boundaries/3431/1 "2015-12-09T14:06:05Z")

</div>

Hi everyone,

I have CZML data that is shown even when the viewer.clock.currentTime is outside the CZML availability boundaries. Is it normal ?

I still don't know if CZMLs are supposed to be loaded with a specifically built timeline or if its display is "cyclic" (modulo-like)...

Either way I need to hide these data when they are supposed to be.

This is how I load it :

var czmlObj = [...];  
var czmlDataSource = new Cesium.CzmlDataSource();  
viewer.dataSources.add(czmlDataSource.process(czmlObj));

Do you have any information or idea that could help me ?

Regards.

---

<div class="post-metadata">

**Author:** ![rcastay.astek](https://avatars.discourse-cdn.com/v4/letter/r/a88e4f/32.png) [@rcastay.astek](https://community.cesium.com/u/rcastay.astek)\
**Post date:** [December 10, 2015, 2:08pm UTC](https://community.cesium.com/t/how-do-i-hide-czml-datasources-outside-availability-boundaries/3431/2 "2015-12-10T14:08:25Z")

</div>

Nobody ? Tell me if I wasn't clear enough and I'll try to complete my question.

---

<div class="post-metadata">

**Author:** ![rcastay.astek](https://avatars.discourse-cdn.com/v4/letter/r/a88e4f/32.png) [@rcastay.astek](https://community.cesium.com/u/rcastay.astek)\
**Post date:** [December 10, 2015, 3:10pm UTC](https://community.cesium.com/t/how-do-i-hide-czml-datasources-outside-availability-boundaries/3431/3 "2015-12-10T15:10:15Z")

</div>

I tried that :

// After loading the CZML file  
viewer.clock.multiplier = 0;  
viewer.clock.clockStep = Cesium.ClockStep.TICK\_DEPENDENT;  
viewer.clock.clockRange = Cesium.ClockRange.CLAMPED;

Result :  
( The CZML file is set between [14:00 ; 15:00] )  
]15:00 ; 23:59] Data is hidden, this is what I want  
[14:00 ; 15:00] Data is displayed, nothing weird about that  
[00:00 ; 14:00[ Data is still displayed, I want it hidden

I still can't figure out why it works perfectly after 14:00 and not before.

---

<div class="post-metadata">

**Author:** ![hannah](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/hannah/32/4509_2.png) [@hannah](https://community.cesium.com/u/hannah)\
**Post date:** [December 10, 2015, 3:50pm UTC](https://community.cesium.com/t/how-do-i-hide-czml-datasources-outside-availability-boundaries/3431/4 "2015-12-10T15:50:30Z")

</div>

Sorry for missing your question yesterday!  
It’s hard for me to say what is wrong without looking at your CZML file.

Have you seen this demo? [http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=CZML%20Polygon%20-%20Intervals,%20Availability.html&label=CZML](http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=CZML%20Polygon%20-%20Intervals,%20Availability.html&label=CZML)

Looking at that might help you debug your own CZML and figure out what is different.

Best,

Hannah

---

<div class="post-metadata">

**Author:** ![rcastay.astek](https://avatars.discourse-cdn.com/v4/letter/r/a88e4f/32.png) [@rcastay.astek](https://community.cesium.com/u/rcastay.astek)\
**Post date:** [December 10, 2015, 4:22pm UTC](https://community.cesium.com/t/how-do-i-hide-czml-datasources-outside-availability-boundaries/3431/5 "2015-12-10T16:22:12Z")

</div>

Don't worry I know there is a lot to answer to 🙂

I didn't post my CZML because it is generated from a data model. Here is the template though :

[  
{  
&nbsp;&nbsp;"id" : "document",  
&nbsp;&nbsp;"name" : "name",  
&nbsp;&nbsp;"version" : "1.0"  
},  
{  
&nbsp;&nbsp;"id" : "",  
&nbsp;&nbsp;"name" : "",  
&nbsp;&nbsp;"availability" : "2014-05-10T14:00:00Z/2014-05-10T15:00:00Z",  
&nbsp;&nbsp;"polygon" : {  
&nbsp;&nbsp;&nbsp;"positions" : [  
&nbsp;&nbsp;&nbsp;&nbsp;"cartographicDegrees" : [lon,lat,height,...]  
&nbsp;&nbsp;&nbsp;],  
&nbsp;&nbsp;&nbsp;"material" : {  
&nbsp;&nbsp;&nbsp;&nbsp;"solidColor" : {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"color" : [  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"rgba" : [255,255,255,255]  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]  
&nbsp;&nbsp;&nbsp;&nbsp;}  
&nbsp;&nbsp;&nbsp;},  
&nbsp;&nbsp;&nbsp;"show" : [{ // I just tried stuff here, even if it's dirty  
&nbsp;&nbsp;&nbsp;&nbsp;"interval" : "1800-01-01T00:00:00Z/2014-05-10T14:00:00Z",  
&nbsp;&nbsp;&nbsp;&nbsp;"boolean" : false  
&nbsp;&nbsp;&nbsp;},  
&nbsp;&nbsp;&nbsp;{  
&nbsp;&nbsp;&nbsp;&nbsp;"interval" : "2014-05-10T14:00:00Z/2014-05-10T15:00:00Z",  
&nbsp;&nbsp;&nbsp;&nbsp;"boolean" : true  
&nbsp;&nbsp;&nbsp;},  
&nbsp;&nbsp;&nbsp;{  
&nbsp;&nbsp;&nbsp;&nbsp;"interval" : "2014-05-10T15:00:00Z/2999-12-31T23:59:59Z",  
&nbsp;&nbsp;&nbsp;&nbsp;"boolean" : false  
&nbsp;&nbsp;&nbsp;}]  
&nbsp;&nbsp;}  
}  
]

Does it help you ?

---

<div class="post-metadata">

**Author:** ![hannah](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/hannah/32/4509_2.png) [@hannah](https://community.cesium.com/u/hannah)\
**Post date:** [December 10, 2015, 7:53pm UTC](https://community.cesium.com/t/how-do-i-hide-czml-datasources-outside-availability-boundaries/3431/6 "2015-12-10T19:53:49Z")

</div>

Try using the ‘availability’ option.

In the demo I pointed to, this is what makes California show/hide

{  
“id” : “california”,  
“name” : “static california with set availability”,  
“availability”:“2012-08-04T16:10:00Z/2012-08-04T16:30:00Z”,  
“polygon” : {  
“positions” : {  
“cartographicDegrees” : [  
-120, 42, 50000,  
-124, 42, 30500,  
-124.5, 40, 3000,  
-123, 38, 0,  
-122, 36, 0,  
-120.8, 34.2, 0,  
-118, 34, 0,  
-117, 32.2, 6000,  
-115.5, 32.5, 1530,  
-115, 35, 1530,  
-120, 39, 30500  
]  
},  
“material” : {  
“solidColor” : {  
“color” : {  
“rgba” : [255, 0, 0, 150]  
}  
}  
},  
“perPositionHeight” : true,  
“extrudedHeight”: 0  
}  
},

``

-Hannah

---

<div class="post-metadata">

**Author:** ![rcastay.astek](https://avatars.discourse-cdn.com/v4/letter/r/a88e4f/32.png) [@rcastay.astek](https://community.cesium.com/u/rcastay.astek)\
**Post date:** [December 11, 2015, 8:55am UTC](https://community.cesium.com/t/how-do-i-hide-czml-datasources-outside-availability-boundaries/3431/7 "2015-12-11T08:55:44Z")

</div>

As you can see in my previous message, that's what I did and it is supposed to work. I don't think the problem is coming from the CZML file but from the way I use the Cesium Clock (I use a custom timeline). I guess just doing that isn't enough :

// After CZML load  
viewer.clock.multiplier = 0;  
viewer.clock.clockStep = Cesium.ClockStep.TICK\_DEPENDENT;  
viewer.clock.clockRange = Cesium.ClockRange.CLAMPED;

// When setting currentTime  
viewer.clock.currentTime = Cesium.JulianDate.fromDate(date);

---

<div class="post-metadata">

**Author:** ![hannah](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/hannah/32/4509_2.png) [@hannah](https://community.cesium.com/u/hannah)\
**Post date:** [December 11, 2015, 3:17pm UTC](https://community.cesium.com/t/how-do-i-hide-czml-datasources-outside-availability-boundaries/3431/8 "2015-12-11T15:17:24Z")

</div>

Oh sorry, I just saw what you were trying to do with show.  
Could you please post a full working example? I can’t seem to reproduce your problem by piecing together the different code snippets you posted.

Thanks,

Hannah

---

<div class="post-metadata">

**Author:** ![rcastay.astek](https://avatars.discourse-cdn.com/v4/letter/r/a88e4f/32.png) [@rcastay.astek](https://community.cesium.com/u/rcastay.astek)\
**Post date:** [December 14, 2015, 8:50am UTC](https://community.cesium.com/t/how-do-i-hide-czml-datasources-outside-availability-boundaries/3431/9 "2015-12-14T08:50:09Z")

</div>

Hi,

I have wrote my code in the Sandcastle and this isn't working. Here is the code I used :

var czml = [  
&nbsp;&nbsp;&nbsp;&nbsp;{  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"id" : "document",  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"name" : "name",  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"version" : "1.0"  
&nbsp;&nbsp;&nbsp;&nbsp;},  
&nbsp;&nbsp;&nbsp;&nbsp;{  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"id" : "",  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"name" : "",  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"availability" : "2014-05-10T14:00:00Z/2014-05-10T15:00:00Z",  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"polygon" : {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"positions" : [  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"cartographicDegrees" : [  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-50, 20, 0,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-50, 40, 0,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-40, 40, 0,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-40, 20, 0  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;],  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"material" : {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"solidColor" : {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"color" : [{  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"rgba" : [255,255,255,255]  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}]  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"show" : [  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ // I just tried stuff here, even if it's dirty  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"interval" : "1800-01-01T00:00:00Z/2014-05-10T14:00:00Z",  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"boolean" : false  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"interval" : "2014-05-10T14:00:00Z/2014-05-10T15:00:00Z",  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"boolean" : true  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"interval" : "2014-05-10T15:00:00Z/2999-12-31T23:59:59Z",  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"boolean" : false  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]  
&nbsp;&nbsp;&nbsp;&nbsp;}  
];

var viewer = new Cesium.Viewer('cesiumContainer', {timeline: false});  
var ds = new Cesium.CzmlDataSource();  
viewer.dataSources.add(ds.process(czml));

viewer.clock.multiplier = 0;  
viewer.clock.clockStep = Cesium.ClockStep.TICK\_DEPENDENT;  
viewer.clock.clockRange = Cesium.ClockRange.CLAMPED;

var date = new Date();  
date.setUTCFullYear(2014);  
date.setUTCMonth(4);  
date.setUTCDate(10);  
date.setUTCHours(16);  
date.setUTCMinutes(0);  
console.log(date.toUTCString());

setTimeout(function(){  
&nbsp;&nbsp;&nbsp;&nbsp;viewer.clock.currentTime = Cesium.JulianDate.fromDate(date);  
&nbsp;&nbsp;&nbsp;&nbsp;console.log('---- Time Set ----');  
},3000);

I obviously did something wrong. Do you know what it is ?

Thanks

Raphael

---

<div class="post-metadata">

**Author:** ![rcastay.astek](https://avatars.discourse-cdn.com/v4/letter/r/a88e4f/32.png) [@rcastay.astek](https://community.cesium.com/u/rcastay.astek)\
**Post date:** [December 14, 2015, 11:20am UTC](https://community.cesium.com/t/how-do-i-hide-czml-datasources-outside-availability-boundaries/3431/10 "2015-12-14T11:20:29Z")

</div>

Update :

I reversed the show fields in the CZML :

false -\> true -\> false ===\> true -\> false -\> false

And it works ! It seems like elements before true in the show field are erased...

The solution doesn't satisfy me though (not as clean as I would like).

Raphael