Visualize data with rotation | Sample | ArcGIS Maps SDK for JavaScript

Skip to content

This sample shows how to use the rotation visual variable to visualize wind direction measured at various weather stations around the world.

The rotation visual variable can be set directly in the renderer’s constructor.

1
      const symbol = {
2
        type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
3
        path: "M14.5,29 23.5,0 14.5,9 5.5,0z",
4
        color: "#ffff00",
5
        outline: {
6
          color: [0, 0, 0, 0.7],
7
          width: 0.5,
8
        },
9
        angle: 180,
10
        size: 15,
11
      };
12

13
      const rotationRenderer = {
14
        type: "simple", // autocasts as new SimpleRenderer()
15
        symbol: symbol,
16
        visualVariables: [
17
          {
18
            type: "rotation",
19
            field: "WIND_DIRECT",
20
            rotationType: "geographic",
21
          },
22
          {
23
            type: "size",
24
            field: "WIND_SPEED",
25
            minDataValue: 0,
26
            maxDataValue: 60,
27
            minSize: 8,
28
            maxSize: 40,
29
          },
30
        ],
31
      };

Additional visualization samples and resources

3D icon rotation

Scale feature sizes based on real world sizes (2D)

Data-driven continuous color

Data-driven continuous size

Data-driven extrusion

Extrude building footprints based on real world heights

Data-driven opacity

Thematic multivariate visualization (2D)

Thematic multivariate visualization (3D)

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <title>Visualize data with rotation | Sample | ArcGIS Maps SDK for JavaScript</title>

    <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
    <script type="module" src="https://js.arcgis.com/5.0/"></script>

    <style>
      html,
      body {
        height: 100%;
        margin: 0;
      }
    </style>
  </head>

  <body>
    <arcgis-map basemap="satellite" center="14,52" zoom="4">
      <arcgis-zoom slot="top-left"></arcgis-zoom>
    </arcgis-map>
    <script type="module">
      const FeatureLayer = await $arcgis.import("@arcgis/core/layers/FeatureLayer.js");

      // Create an arrow symbol using an SVG path
      // Since the arrow points downward, we set
      // the angle to 180 degrees to point to
      // 0 geographic degrees north

      const symbol = {
        type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
        path: "M14.5,29 23.5,0 14.5,9 5.5,0z",
        color: "#ffff00",
        outline: {
          color: [0, 0, 0, 0.7],
          width: 0.5,
        },
        angle: 180,
        size: 15,
      };

      /******************************************************
       *
       * Create a SimpleRenderer where each feature will be
       * rendered with the same symbol (in this case, an arrow).
       * Set the symbol on the renderer and a "rotation"
       * visual variable that points to a field in the stream service
       * that contains heading information for each feature.
       * The "geographic" rotation type assumes 0 degrees is due north.
       *
       * The size visual variable resizes each symbol
       * based on the feature's wind speed.
       *
       *******************************************************/

      const rotationRenderer = {
        type: "simple", // autocasts as new SimpleRenderer()
        symbol: symbol,
        visualVariables: [
          {
            type: "rotation",
            field: "WIND_DIRECT",
            rotationType: "geographic",
          },
          {
            type: "size",
            field: "WIND_SPEED",
            minDataValue: 0,
            maxDataValue: 60,
            minSize: 8,
            maxSize: 40,
          },
        ],
      };

      // Construct the layer and add it to the map
      const layer = new FeatureLayer({
        url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/weather_stations_010417/FeatureServer/0",
        renderer: rotationRenderer,
      });

      // Get a reference to the Map component element.
      const viewElement = document.querySelector("arcgis-map");
      await viewElement.viewOnReady();
      viewElement.map.add(layer);
    </script>
  </body>
</html>