Filter features with TimeSlider

Explore in the sandboxView live

This sample demonstrates how to filter temporal data in a GeoJSONLayer using a TimeSlider widget. This can be done by creating a new FeatureFilter and updating the filter's timeExtent property by watching the changes to the TimeSlider's timeExtent.

When the GeoJSONLayer is initialized, the timeInfo property for the layer is specified as shown below:

 const layer = new GeoJSONLayer({
  ...
  // specify timeInfo for the layer
  timeInfo: {
    startField: "time", // name of the date field
    interval: { // specify time interval for
      unit: "days",
      value: 1
    }
  }
  ...
 });

Then, an instance of the TimeSlider widget is created and added to the view. The additional properties for the TimeSlider are set from the layer's timeInfo information once the layer is loaded.

<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>Filter features with TimeSlider | Sample | ArcGIS API for JavaScript 4.20</title>

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }

      #timeSlider {
        width: 400px;
      }

      #infoDiv {
        height: 200px;
        padding: 10px;
        width: 280px;
      }

      #infoDiv span {
        color: #F9C653;
        font-size: 12pt;
        font-weight: bolder;
      }
    </style>

    <link rel="stylesheet" href="https://js.arcgis.com/4.20/esri/themes/dark/main.css" />
    <script src="https://js.arcgis.com/4.20/"></script>
    <script>
      require([
        "esri/Map",
        "esri/views/MapView",
        "esri/layers/GeoJSONLayer",
        "esri/widgets/TimeSlider",
        "esri/widgets/Expand",
        "esri/widgets/Legend"
      ], (Map, MapView, GeoJSONLayer, TimeSlider, Expand, Legend) => {
        let layerView;

        // set the timeInfo on GeoJSONLayer at the time initialization
        const layer = new GeoJSONLayer({
          url: "https://bsvensson.github.io/various-tests/geojson/usgs-earthquakes-06182019.geojson",
          copyright: "USGS Earthquakes",
          title: "USGS Earthquakes",
          // set the CSVLayer's timeInfo based on the date field
          timeInfo: {
            startField: "time", // name of the date field
            interval: {
              // set time interval to one day
              unit: "days",
              value: 1
            }
          },
          renderer: {
            type: "simple",
            field: "mag",
            symbol: {
              type: "simple-marker",
              color: "orange",
              outline: null
            },
            visualVariables: [
              {
                type: "size",
                field: "mag",
                stops: [
                  {
                    value: 1,
                    size: "5px"
                  },
                  {
                    value: 2,
                    size: "15"
                  },
                  {
                    value: 3,
                    size: "35"
                  }
                ]
              },
              {
                type: "color",
                field: "depth",
                stops: [
                  {
                    value: 2.5,
                    color: "#F9C653",
                    label: "<2km"
                  },
                  {
                    value: 3.5,
                    color: "#F8864D",
                    label: "3km"
                  },
                  {
                    value: 4,
                    color: "#C53C06",
                    label: ">4km"
                  }
                ]
              }
            ]
          },
          popupTemplate: {
            title: "{title}",
            content: [
              {
                type: "fields",
                fieldInfos: [
                  {
                    fieldName: "place",
                    label: "Location",
                    visible: true
                  },
                  {
                    fieldName: "mag",
                    label: "Magnitude",
                    visible: true
                  },
                  {
                    fieldName: "depth",
                    label: "Depth",
                    visible: true
                  }
                ]
              }
            ]
          }
        });

        const map = new Map({
          basemap: "dark-gray-vector",
          layers: [layer]
        });

        const view = new MapView({
          map: map,
          container: "viewDiv",
          zoom: 13,
          center: [-117.512764, 34.04355]
        });


        // create a new time slider widget
        // set other properties when the layer view is loaded
        // by default timeSlider.mode is "time-window" - shows
        // data falls within time range
        const timeSlider = new TimeSlider({
          container: "timeSlider",
          playRate: 50,
          stops: {
            interval: {
              value: 1,
              unit: "hours"
            }
          }
        });
        view.ui.add(timeSlider, "bottom-left");

        // wait till the layer view is loaded
        view.whenLayerView(layer).then((lv) => {
          layerView = lv;

          // start time of the time slider - 5/25/2019
          const start = new Date(2019, 4, 25);
          // set time slider's full extent to
          // 5/25/5019 - until end date of layer's fullTimeExtent
          timeSlider.fullTimeExtent = {
            start: start,
            end: layer.timeInfo.fullTimeExtent.end
          };

          // We will be showing earthquakes with one day interval
          // when the app is loaded we will show earthquakes that
          // happened between 5/25 - 5/26.
          let end = new Date(start);
          // end of current time extent for time slider
          // showing earthquakes with one day interval
          end.setDate(end.getDate() + 1);

          // timeExtent property is set so that timeslider
          // widget show the first day. We are setting
          // the thumbs positions.
          timeSlider.timeExtent = {start, end};
        });


        // watch for time slider timeExtent change
        timeSlider.watch("timeExtent", () => {
          // only show earthquakes happened up until the end of
          // timeSlider's current time extent.
          layer.definitionExpression =
            "time <= " + timeSlider.timeExtent.end.getTime();

          // now gray out earthquakes that happened before the time slider's current
          // timeExtent... leaving footprint of earthquakes that already happened
          layerView.effect = {
            filter: {
              timeExtent: timeSlider.timeExtent,
              geometry: view.extent
            },
            excludedEffect: "grayscale(20%) opacity(12%)"
          };

          // run statistics on earthquakes fall within the current time extent
          const statQuery = layerView.effect.filter.createQuery();
          statQuery.outStatistics = [
            magMax,
            magAvg,
            magMin,
            tremorCount,
            avgDepth
          ];

          layer.queryFeatures(statQuery).then((result) => {
              let htmls = [];
              statsDiv.innerHTML = "";
              if (result.error) {
                return result.error;
              } else {
                if (result.features.length >= 1) {
                  const attributes = result.features[0].attributes;
                  for (name in statsFields) {
                    if (attributes[name] && attributes[name] != null) {
                      const html =
                        "<br/>" +
                        statsFields[name] +
                        ": <b><span> " +
                        attributes[name].toFixed(2) +
                        "</span></b>";
                      htmls.push(html);
                    }
                  }
                  const yearHtml =
                    "<span>" +
                    result.features[0].attributes["tremor_count"] +
                    "</span> earthquakes were recorded between " +
                    timeSlider.timeExtent.start.toLocaleDateString() +
                    " - " +
                    timeSlider.timeExtent.end.toLocaleDateString() +
                    ".<br/>";

                  if (htmls[0] == undefined) {
                    statsDiv.innerHTML = yearHtml;
                  } else {
                    statsDiv.innerHTML =
                      yearHtml + htmls[0] + htmls[1] + htmls[2] + htmls[3];
                  }
                }
              }
            })
            .catch((error) => {
              console.log(error);
            });
        });

        const avgDepth = {
          onStatisticField: "depth",
          outStatisticFieldName: "Average_depth",
          statisticType: "avg"
        };

        const magMax = {
          onStatisticField: "mag",
          outStatisticFieldName: "Max_magnitude",
          statisticType: "max"
        };

        const magAvg = {
          onStatisticField: "mag",
          outStatisticFieldName: "Average_magnitude",
          statisticType: "avg"
        };

        const magMin = {
          onStatisticField: "mag",
          outStatisticFieldName: "Min_magnitude",
          statisticType: "min"
        };

        const tremorCount = {
          onStatisticField: "mag",
          outStatisticFieldName: "tremor_count",
          statisticType: "count"
        };

        const statsFields = {
          Max_magnitude: "Max magnitude",
          Average_magnitude: "Average magnitude",
          Min_magnitude: "Min magnitude",
          Average_depth: "Average Depth"
        };

        // add a legend for the earthquakes layer
        const legendExpand = new Expand({
          collapsedIconClass: "esri-icon-collapse",
          expandIconClass: "esri-icon-expand",
          expandTooltip: "Legend",
          view: view,
          content: new Legend({
            view: view
          }),
          expanded: false
        });
        view.ui.add(legendExpand, "top-left");

        const statsDiv = document.getElementById("statsDiv");
        const infoDiv = document.getElementById("infoDiv");
        const infoDivExpand = new Expand({
          collapsedIconClass: "esri-icon-collapse",
          expandIconClass: "esri-icon-expand",
          expandTooltip: "Expand earthquakes info",
          view: view,
          content: infoDiv,
          expanded: true
        });
        view.ui.add(infoDivExpand, "top-right");
      });
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
    <div id="timeSlider"></div>
    <div id="infoDiv" class="esri-widget">
      <div> <b>USGS Earthquakes</b></div><br/>
      <div id="statsDiv" class="esri-widget"></div>
    </div>
  </body>
</html>

Lastly, the application watches the TimeSlider's timeExtent property and the layer's effect is updated to show the earthquakes recorded within the current timeExtent of the widget. The application also does statistics query on the earthquakes on that day after the effect is applied.

// watch for TimeSlider timeExtent change
timeSlider.watch("timeExtent", () => {
  // gray out earthquakes that are outside of the current timeExtent
  layerView.effect = {
    filter: {
      timeExtent: timeSlider.timeExtent,
      geometry: view.extent
    },
    excludedEffect: "grayscale(20%) opacity(12%)"
  };
});

How it works

The app shows USGS earthquakes recorded between 5/25/2019 - 6/11/2019. The view's extent is set to Pomona, CA area to show earthquakes recorded in this region.

To start visualizing recorded earthquakes in this region you can do one of the following: