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 traffic service requires a token for authentication. This sample uses an API Key to authenticate. You can either replace it with your own API Key, or remove it and log in once prompted. Alternatively, you can use another authentication method to access the traffic service.

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.

Use dark colors for code blocksCopy
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:

Use dark colors for code blocksCopy
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.

Use dark colors for code blocksCopy
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
    };
  }
}

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.