# Link imagery layers to the cesium time playback controls

**URL:** <https://community.cesium.com/t/link-imagery-layers-to-the-cesium-time-playback-controls/36312>\
**Category:** CesiumJS\
**Created:** [November 4, 2024, 2:29pm UTC](https://community.cesium.com/t/link-imagery-layers-to-the-cesium-time-playback-controls/36312 "2024-11-04T14:29:48Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![a.okeefe289](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/a.okeefe289/32/14037_2.png) [@a.okeefe289](https://community.cesium.com/u/a.okeefe289)\
**Post date:** [November 4, 2024, 2:29pm UTC](https://community.cesium.com/t/link-imagery-layers-to-the-cesium-time-playback-controls/36312/1 "2024-11-04T14:29:48Z")

</div>

Hi,

Just wondering if it is possible to link different imagery layers to the time scrubber?  
E.g. I have 5 imagery layers in cesium ion representing flooding at different levels. Ideally, I’d like to press play on the time playback controls and then it would scrub through these 5 imagery layers, repeatedly.

Is such a thing possible? I can’t seem to find any examples similar to what I’m trying to achieve

 ![image](https://global.discourse-cdn.com/cesium/original/3X/a/a/aaa579cb6e99e45655dff0a98088d99359da76fc.png)

---

<div class="post-metadata">

**Author:** ![Luke\_McKinstry](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/luke_mckinstry/32/25557_2.png) [@Luke\_McKinstry](https://community.cesium.com/u/Luke_McKinstry)\
**Post date:** [November 4, 2024, 8:48pm UTC](https://community.cesium.com/t/link-imagery-layers-to-the-cesium-time-playback-controls/36312/2 "2024-11-04T20:48:41Z")

</div>

Hi @a.okeefe289 ,  
Thanks for your post and being part of the Cesium community.

To confirm my understanding, you have 5 different imagery layers, and you would like to show them in succession one at a time of a period of time, controlled by the timeline scrubber in the viewer. Is that correct?

I am not sure what format you have your data in. If they are for instance 3D Tiles, you could create a `Cesium3DTileset` [Cesium3DTileset - Cesium Documentation](https://cesium.com/learn/cesiumjs/ref-doc/Cesium3DTileset.html?classFilter=3DTile) for each, and toggle them on off using the `show` property [Cesium3DTileset - Cesium Documentation](https://cesium.com/learn/cesiumjs/ref-doc/Cesium3DTileset.html?classFilter=3DTile#show).

Here is some pseudocode

```auto
// Initialize Cesium Viewer
const viewer = new Cesium.Viewer("cesiumContainer", {
    animation: true,
    timeline: true,
});

// Load two tilesets
const tileset1 = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
    url: 'path/to/first/tileset',
}));

const tileset2 = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
    url: 'path/to/second/tileset',
}));

// Set initial visibility
tileset1.show = true;
tileset2.show = false;

// Set up the timeline and clock
viewer.clock.startTime = Cesium.JulianDate.fromIso8601("2023-01-01T00:00:00Z");
viewer.clock.stopTime = Cesium.JulianDate.fromIso8601("2023-01-01T24:00:00Z");
viewer.clock.currentTime = viewer.clock.startTime;
viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP; // Loop at the end of the timeline
viewer.clock.multiplier = 3600; // Speed up time for testing

// Function to toggle tileset visibility based on time
viewer.clock.onTick.addEventListener(() => {
    const currentTime = viewer.clock.currentTime;

    // Define time ranges for each tileset's visibility
    const startTime1 = Cesium.JulianDate.fromIso8601("2023-01-01T00:00:00Z");
    const endTime1 = Cesium.JulianDate.fromIso8601("2023-01-01T12:00:00Z");

    const startTime2 = Cesium.JulianDate.fromIso8601("2023-01-01T12:00:00Z");
    const endTime2 = Cesium.JulianDate.fromIso8601("2023-01-01T24:00:00Z");

    // Toggle visibility based on current time
    if (Cesium.JulianDate.greaterThanOrEquals(currentTime, startTime1) &&
        Cesium.JulianDate.lessThan(currentTime, endTime1)) {
        tileset1.show = true;
        tileset2.show = false;
    } else if (Cesium.JulianDate.greaterThanOrEquals(currentTime, startTime2) &&
               Cesium.JulianDate.lessThan(currentTime, endTime2)) {
        tileset1.show = false;
        tileset2.show = true;
    }
});

```

I think this approach best fits your use case. We also have some examples supporting time dynamic data here [Cesium Time Animation using CZML – Cesium](https://cesium.com/blog/2018/03/21/czml-time-animation/) and here [Visualizing Time Dynamic Data – Cesium](https://cesium.com/learn/ion/stories-time-dynamic/) which may be of interest to you.

Please let us know if this is helpful and if we can be of more assistance.  
Best,  
Luke

---

<div class="post-metadata">

**Author:** ![a.okeefe289](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/a.okeefe289/32/14037_2.png) [@a.okeefe289](https://community.cesium.com/u/a.okeefe289)\
**Post date:** [November 5, 2024, 5:20pm UTC](https://community.cesium.com/t/link-imagery-layers-to-the-cesium-time-playback-controls/36312/3 "2024-11-05T17:20:32Z")

</div>

@Luke_McKinstry Perfect! That’s exactly what I needed, except I swapped the 3D tilesets out for imagery layers. Thank you