This sample demonstrates how to visualize historical hurricane locations as tracks (beta) in a GeoJSONLayer.

Track data is represented as a series of observations. In addition to a timestamp, each observation must belong to a track identified by a unique ID. This ID is used to group observations into a track. In this sample, we visualize hurricane paths along a track line using point data recording a hurricane’s previous locations. You can visualize each hurricane’s previous observations, latest observation (or most recent at the time of the slider), and the track line separately using a series of renderers and labels.

To render track data, the layer must be configured with a valid timeInfo.

The timeInfo property of the layer defines the following:

• startField: The field representing the time the observation occurred.
• trackIdField: The field containing the unique ID of the track the observation belongs to.

1
        timeInfo: {
2
          startField: "ISO_time", // the time the observation occurred
3
          trackIdField: "Serial_Num", // unique identifier for each track
4
        },

For client-side layers, such as GeoJSONLayer, you must set this property directly on the layer instance. For server-side layers, such as FeatureLayer, you can also set this property in the layer’s service definition.

To render each hurricane location as tracks, you must also set the trackInfo property of the layer. The trackInfo property defines how to render the track, including the following properties:

• previousObservations: Defines how to render the previous observations of the track.
• latestObservations: Defines how to render the latest observations of the track.
• trackLine: Defines how to render the track line.

layer.trackInfo = {
  previousObservations: {
    renderer: {
      // renderer configuration defined here
    },
    labelingInfo: [
      // labelingInfo configuration defined here
    ],
  },
  latestObservations: {
    renderer: {
      // renderer configuration defined here
    },
    labelingInfo: [
      // labelingInfo configuration defined here
    ],
  },
  trackLine: {
    renderer: {
      // renderer configuration defined here
    },
    labelingInfo: [
      // labelingInfo configuration defined here
    ],
  },
};

Related samples and resources