Hosted ImageryTileLayer with VectorFieldRenderer

Explore in the sandboxView live

This sample shows how to add an instance of a hosted ImageryTileLayer to a Map in a MapView. The VectorFieldRenderer is applied to the ImageryTileLayer instance to show the wind speed and direction as recorded on January 1, 2011.

The imagery layer used in this sample contains North American Land Data Assimilation System (NLDAS) wind data for 2011 from NASA. It contains magnitude and direction data measured 10 meters above the surface.

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

                                                                                     
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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>Hosted ImageryTileLayer with VectorFieldRenderer | Sample | ArcGIS API for JavaScript 4.21</title>

    <link rel="stylesheet" href="https://js.arcgis.com/4.21/esri/themes/dark/main.css" />
    <script src="https://js.arcgis.com/4.21/"></script>

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

<script>
  require([
    "esri/Map",
    "esri/views/MapView",
    "esri/layers/ImageryTileLayer",
    "esri/widgets/Legend"
  ], (Map, MapView, ImageryTileLayer, Legend) => {
    // create a new instance of an imagery tile layer and apply
    // VectorFieldRenderer to show the speed and direction of wind
    // as recorded on  January 1, 2011
    const layer = new ImageryTileLayer({
      url: "https://tiledimageservices.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/NLDAS2011_daily_wind_magdir/ImageServer",
      title: "2011 wind - 10 meters above surface",
      renderer: {
        type: "vector-field",
        style: "classified-arrow",
        flowRepresentation: "flow-to", // show flow to angle for wind direction
        symbolTileSize: 30,
        visualVariables: [
          {
            type: "size",
            field: "Magnitude", // values read from the first band
            maxDataValue: 32,
            maxSize: "60px",
            minDataValue: 0.04,
            minSize: "20px"
          },
          {
            type: "rotation",
            field: "Direction", // values read from the second band
            rotationType: "geographic"
          }
        ]
      }
    });
    const map = new Map({
      basemap: "dark-gray-vector",
      layers: [layer]
    const view = new MapView({
      map: map,
      container: "viewDiv",
      center: [-100, 38],
      zoom: 3
    const legend = new Legend({
      view: view
    view.ui.add(legend, "bottom-left");
</script>
  </head>

  <body>
    <div id="viewDiv"></div>
  </body>
  </html>

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