This sample shows how to add an instance of a transposed multidimensional ImageryTileLayer to a map component. The VectorFieldRenderer is applied to the ImageryTileLayer instance to show the average wind speed and direction aggregated from hourly observation data as recorded on Jan 1, 2011 when the app loads.

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

Once the sample is loaded, users can use the time slider component to animate through the daily wind data. Users can also click on the vector field to create a wind rose chart of that location for 2011. The wind rose chart can be created for each day of 2011 because the layer references a multidimensional transposed tiled image service. Multidimensional transposed raster tiles are hypercubic image tiles representing the specific variables over all the dimensions. They are created for optimizing performance when accessing pixel values across all multidimensional slices rather than for visualization at different map scales.

If this service was not transposed then we would have to call the ImageryTileLayer.identify method 365 times for each day of 2011 to create a wind rose chart. Since this service is a transposed, the ImageryTileLayer.identify method is called only once by setting the transposedVariableName parameter. The RasterIdentifyResult returns an array of RasterSliceValues containing wind speed and direction values for each day of 2011 for the clicked location.

      // Get wind direction and speed info for all the time dimension values available from this
      // transposed multidimensional service - identify will return 365 values for the each day of 2011
      viewElement.addEventListener("arcgisViewClick", async (event) => {
        const mapPoint = event.detail.mapPoint;
        await getWindSamples(mapPoint);
      });

      async function getWindSamples(currentLocation) {
        if (!currentLocation || !layer.serviceRasterInfo.hasMultidimensionalTranspose) {
          return;
        }

        // set the transposedVariableName for the identify method. Identify method will return
        // values for all the slices since multidimensionalDefinition is not defined
        const results = await layer.identify(currentLocation, {
          transposedVariableName: "wind_magdir",
        });
        if (!results.dataSeries) {
          return;
        }

        // first number is the magdirValue array is the wind magnitude
        // second number is the magdirValue array is the direction the wind blew from.
        const pixelValues = results.dataSeries.map(({ magdirValue }) => [magdirValue[0], magdirValue[1]]);
        const data = getFrequencies(pixelValues);

        chartCanvas.hidden = false;
        drawChart(data);
        instructionsElement.hidden = true;
      }