Visualizing wind data with VectorFieldRenderer

This sample shows how to apply VectorFieldRenderer to an ImageryLayer to show the wind speed and direction.

The imagery layer used in this sample contains weather data from the National Digital Forecast Database (NDFD). It contains wind speed and direction variables between October 26, 2014 - October 30, 2014.

Wind speed and directions variables can be visualized using VectorFieldRenderer as shown below:

Use dark colors for code blocksCopy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// image service contains wind speed and direction variables which can be visualized
// with VectorFieldRenderer. VectorFieldRenderer has size visual variables set for magnitude
// and rotation visual variables set for directions
const layer = new ImageryLayer({
  url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/ScientificData/NDFD_wind/ImageServer",
  renderer: {
    type: "vector-field",
    style: "beaufort-kn", // Beaufort point symbol (knots)
    flowRepresentation: "flow-from", // show flow from angle for wind direction
    symbolTileSize: 20, // draw one symbol in every 20x20 pixels
    visualVariables: [
      {
        type: "size",
        field: "Magnitude", // values read from the first band
        maxDataValue: 32,
        maxSize: "100px",
        minDataValue: 0.04,
        minSize: "8px"
      },
      {
        type: "rotation",
        field: "Direction", // values read from the second band
        rotationType: "geographic"
      }
    ]
  }
});

The TimeSlider widget will allow you to display the wind speed and directions at a specific instant in time. When the layer is loaded, we set the time slider's fullTimeExtent and stops properties using the layer's timeInfo information as shown below.

Use dark colors for code blocksCopy
1
2
3
4
5
6
7
8
9
view.whenLayerView(layer).then((lv) => {
  const fullTimeExtent = layer.timeInfo.fullTimeExtent;

  // set up time slider properties
  timeSlider.fullTimeExtent = fullTimeExtent;
  timeSlider.stops = {
    interval: layer.timeInfo.interval
  };
});

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