Time-based layer

This sample demonstrates how to display traffic information from a MapImageLayer within a specified time extent. You can view the traffic information at different times by changing the time on the clock widget.

This app displays a dynamic traffic map service with capabilities for visualizing traffic speeds and incidents. The historical, live, and predictive traffic data is updated every five minutes through traffic feeds. You can learn more about the data here.

How it works

The world traffic MapImageLayer is initialized with a refresh interval of three minutes. Its useViewTime property is set to false so that the time extent can be set directly on the layer.

1
2
3
4
5
6
7
const trafficLayer = new MapImageLayer({
  url: "https://traffic.arcgis.com/arcgis/rest/services/World/Traffic/MapServer",
  dpi: 48,
  imageFormat: "png32",
  refreshInterval: 3, // refresh the layer every 3 minutes
  useViewTime: false // layer sets its time extent and will ignore view's timeExtent.
});

Once the app is initialized, the user can change the time on the clock widget to display traffic data for that time period. The clock widget is initialized as shown below:

1
2
3
4
5
6
const clock = new Clock({
  el: "clock", // container div
  skin: "clock.svg",
  time: Date.now() // number of milliseconds elapsed since January 1, 1970, 00:00:00 UTC.
});
clock.on("time-change", setDate);

Whenever the user changes the time on the clock widget, the time-change event is triggered and the traffic layer's timeExtent is updated. If the live button is clicked on the clock, then the layer will fetch the latest traffic data.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function setDate(time) {
  // reset the clock widget show the latest traffic data if the user
  // clicks on `live` button on the clock
  if (clock.mode === "live") {
    trafficLayer.timeExtent = null;
  }
  else { // otherwise shows the traffic data where
    // the clock handles move to
    trafficLayer.timeExtent = {
      start: time,
      end: time
    };
  }
}