GraphicsLayer with visibilityTimeExtent | Sample | ArcGIS Maps SDK for JavaScript

This sample demonstrates how to set a visibilityTimeExtent on a GraphicsLayer so that the graphics layers can be animated over time to show additional information about the Kincade fire perimeter while the user interacts with the Time Slider component.

The visibilityTimeExtent specifies a fixed time extent during which a layer should be visible. This property is used to configure a layer that does not have time values stored in an attribute field to work with time. Once configured, the Time Slider component will display the layer within the set time extent.

The map displays the daily perimeters of the Kincade fire of 2019.

When the app is loaded, a query is made against all fire perimeters in the Kincade fire feature service. The query result is ordered by the recordedDate field, and the app loops through the result, adding the date to dates array. It also creates a GraphicsLayer for each date and sets its visibilityTimeExtent to the date. A new graphic is created with a text symbol and its text property points to notes attribute from the query result. The graphic is then added to the GraphicsLayer.

      // Store the unique recorded dates from the Kincade fire perimeters.
      const dates = [];

      // Query the perimeters in recorded date order.
      const query = featureLayer.createQuery();
      query.orderByFields = ["recordedDate"];

      const queryResult = await featureLayer.queryFeatures(query);

      // Create a dated GraphicsLayer and note label for each perimeter.
      queryResult.features.forEach((feature, i) => {
        const date = new Date(feature.attributes.recordedDate);
        const notes = feature.attributes.Notes;
        const centroid = centroidOperator.execute(feature.geometry);

        // Label each perimeter with its notes attribute.
        const graphic = new Graphic({
          geometry: {
            type: "point",
            x: centroid.x,
            y: centroid.y,
            spatialReference: {
              wkid: 102100,
            },
          },
          attributes: {
            acres: feature.attributes.gisacres,
            start: new Date(feature.attributes.recordedData),
          },
          symbol: new TextSymbol({
            text: notes,
            color: "black",
            xoffset: 50,
            yoffset: 10,
            lineWidth: 200,
            horizontalAlignment: "left",
            backgroundColor: "white",
            font: {
              size: 12,
              family: "sans-serif",
            },
          }),
        });

        // Show each graphics layer only for its recorded date.
        const glayer = createGraphicsLayer(date, i);
        glayer.add(graphic);
        viewElement.map.add(glayer);

        if (!dates.some((d) => d.getTime() === date.getTime())) {
          dates.push(date);
        }
      });

The createGraphicsLayer() function creates a new GraphicsLayer and sets its visibilityTimeExtent to match a given date as shown below.

      // Create a GraphicsLayer that is visible only for one date.
      function createGraphicsLayer(date, index) {
        const graphicsLayer = new GraphicsLayer();
        graphicsLayer.id = `graphicsLayer${index}`;

        graphicsLayer.visibilityTimeExtent = {
          start: date,
          end: date,
        };
        return graphicsLayer;
      }

The Time Slider component stops are set to a dates array and its initial timeExtent is set to the first date. The GraphicsLayer will be visible if its visibilityTimeExtent overlaps the Time Slider component’s current timeExtent. The GraphicsLayer will display additional info about the fire perimeter for the given day.

      // Set the time slider stops and initial time extent.
      timeSlider.stops = { dates };
      timeSlider.fullTimeExtent = new TimeExtent({
        start: dates[0],
        end: dates[dates.length - 1],
      });
      timeSlider.timeExtent = new TimeExtent({
        start: dates[0],
        end: dates[0],
      });