Web Map Tile Service with Time.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
    />
    <meta
      name="description"
      content="Use Viewer to start building new applications or easily embed Cesium into existing applications."
    />
    <meta name="cesium-sandcastle-labels" content="Beginner, Showcases" />
    <title>Cesium Demo</title>
    <script type="text/javascript" src="../Sandcastle-header.js"></script>
    <script
      type="text/javascript"
      src="../../../Build/CesiumUnminified/Cesium.js"
      nomodule
    ></script>
    <script type="module" src="../load-cesium-es6.js"></script>
  </head>
  <body
    class="sandcastle-loading"
    data-sandcastle-bucket="bucket-requirejs.html"
  >
    <style>
      @import url(../templates/bucket.css);
    </style>
    <div id="cesiumContainer" class="fullSize"></div>
    <div id="loadingOverlay"><h1>Loading...</h1></div>
    <div id="toolbar"></div>
    <script id="cesium_sandcastle_script">
      function startup(Cesium) {
        "use strict";
        //Sandcastle_Begin
        var viewer = new Cesium.Viewer("cesiumContainer", {
          shouldAnimate: true,
        });

        function dataCallback(interval, index) {
          var time;
          if (index === 0) {
            // leading
            time = Cesium.JulianDate.toIso8601(interval.stop);
          } else {
            time = Cesium.JulianDate.toIso8601(interval.start);
          }

          return {
            Time: time,
          };
        }

        var times = Cesium.TimeIntervalCollection.fromIso8601({
          iso8601: "2015-07-30/2017-06-16/P1D",
          leadingInterval: true,
          trailingInterval: true,
          isStopIncluded: false, // We want stop time to be part of the trailing interval
          dataCallback: dataCallback,
        });

        // Add a WMTS imagery layer.
        // This comes from NASA's GIBS API.
        // See https://wiki.earthdata.nasa.gov/display/GIBS/GIBS+API+for+Developers#GIBSAPIforDevelopers-OGCWebMapService(WMS)
        var provider = new Cesium.WebMapTileServiceImageryProvider({
          url:
            "https://gibs.earthdata.nasa.gov/wmts/epsg4326/best/MODIS_Terra_CorrectedReflectance_TrueColor/default/{Time}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.jpg",
          layer: "MODIS_Terra_CorrectedReflectance_TrueColor",
          style: "default",
          tileMatrixSetID: "250m",
          maximumLevel: 5,
          format: "image/jpeg",
          clock: viewer.clock,
          times: times,
          credit: "NASA Global Imagery Browse Services for EOSDIS",
        });
        var imageryLayers = viewer.imageryLayers;
        var layer = imageryLayers.addImageryProvider(provider);
        provider.readyPromise.then(function () {
          var start = Cesium.JulianDate.fromIso8601("2015-07-30");
          var stop = Cesium.JulianDate.fromIso8601("2017-06-17");

          viewer.timeline.zoomTo(start, stop);

          var clock = viewer.clock;
          clock.startTime = start;
          clock.stopTime = stop;
          clock.currentTime = start;
          clock.clockRange = Cesium.ClockRange.LOOP_STOP;
          clock.multiplier = 7200;
          // Make the weather layer semi-transparent to see the underlying geography.
          layer.alpha = 0.5;
        });
        //Sandcastle_End
        Sandcastle.finishedLoading();
      }
      if (typeof Cesium !== "undefined") {
        window.startupCalled = true;
        startup(Cesium);
      }
    </script>
  </body>
</html>