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 Oct 1, 2011 when the application loads. User then can display the daily wind speed and direction for month of October when the TimeSlider animates the temporal data.

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:

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
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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
    // create a new instance of an imagery tile layer and apply
    // VectorFieldRenderer to show the speed and direction of wind
    // as recorded on  Oct 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"
          }
        ]
      }
    });

At version 4.22, we added time support for ImageryTileLayer. This sample is updated to showcase how to use TimeSlider widget with time aware ImageryTileLayer. TimeSlider will display the daily wind speed and direction for month of October when it advances through time. The TimeSlider widget simplifies the process of visualizing temporal data in a JavaScript application.

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
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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
    // time slider widget initialization
    // users can visualize daily wind information
    // for the month of Oct 2011 using time slider
    const timeSlider = new TimeSlider({
      container: "timeSlider",
      mode: "instant",
      view: view,
      timeVisible: true,
      // Oct 1 - Oct 31
      fullTimeExtent: {
        start: new Date(1317427200000), // Oct 1, 2021,
        end: new Date(1320019200000)  // Oct 31, 2021
      },
      stops: {
        interval: {
          value: 24,
          unit: "hours"
        }
      }
    });
    view.ui.add(timeSlider, "bottom-left");

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