Location style | ArcGIS Maps SDK for JavaScript

Flash flood warnings (2002 - 2012). All warning areas are given the same transparent symbol, which allows areas of more intense activity to show more clearly.

What is the location style?

The location style involves styling all features in a layer with a single symbol. This is designed to only visualize the location of features with no other data-driven attributes overriding the symbol. Location, or geometry, is the only way to distinguish one feature from another. This allows you to treat all the features equally and let their spatial pattern speak for itself on the map.

How to style features by location

In general, there are two ways to style features :

Apply symbols to graphics: Use this approach when you need to display the location for temporary graphics in a map or scene . The symbol type must match the geometry type of the graphic. Learn more about how to create graphics in Graphics.
Apply a renderer (with symbols) to a data layer: Use this approach to define the style for all features in a data layer in a map or scene. A renderer defines the rules for applying symbols to features, such as how to color or size features based on a data value.

Simple renderer

Location styles are defined with a simple renderer. Using a simple renderer, all visual properties of the symbol (e.g. size, color, opacity, texture, etc.) are fixed for each feature. The primary purpose of the visualization is to show where a feature is located, not specifics about the feature’s attributes. For example, if you want to know the locations of weather stations, but you don’t need to know additional attribute information about each station, you should render all points with the same symbol.

22 collapsed lines
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <title>Esri Developer Guide: 2D Points</title>

    <link rel="stylesheet" href="https://js.arcgis.com/5.0/esri/themes/dark/main.css" />
    <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
    <script type="module" src="https://js.arcgis.com/5.0/"></script>

    <script type="module">
      const [Map, MapView, FeatureLayer, SimpleMarkerSymbol, SimpleRenderer] = await $arcgis.import(
        [
          "@arcgis/core/Map.js",
          "@arcgis/core/views/MapView.js",
          "@arcgis/core/layers/FeatureLayer.js",
          "@arcgis/core/symbols/SimpleMarkerSymbol.js",
          "@arcgis/core/renderers/SimpleRenderer.js",
        ],
      );


      const renderer = new SimpleRenderer({
        symbol: new SimpleMarkerSymbol({
          size: 4,
          color: [0, 255, 255],
          outline: null,
        }),
      });
40 collapsed lines


      const weatherStations = new FeatureLayer({
        portalItem: {
          id: "cb1886ff0a9d4156ba4d2fadd7e8a139",
        },
        renderer: renderer,
      });

      // Add the layers to the map
      const map = new Map({
        basemap: "dark-gray-vector",
        layers: [weatherStations],
      });

      const view = new MapView({
        container: "viewDiv",
        map: map,
        zoom: 3,
        center: [-95, 38],
        constraints: {
          snapToZoom: false,
        },
      });
    </script>

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

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

Symbols

The style for features in a map are defined by a symbol. The symbol should represent the data with either what the symbol represents or how the feature is related to other features with respect to location and the data attributes being mapped.

The symbol chosen for a layer depends on the view in which it is rendered (2D or 3D), and the geometry type of the features in the layer (point, polyline, polygon, or mesh).

2D Symbols

You use 2D symbols to style point, line, and polygon geometries and display them in a map. The main types are marker, line, fill, picture, and text symbols. See below for more examples.

const symbol = new SimpleMarkerSymbol({
  color: "rgba(0,128,155,0.8)",
  size: "10px",
  outline: new SimpleLineSymbol({
    width: 0.5,
    color: "rgba(255,255,255,0.3)"
  })
});

3D Symbols

You use 3D symbols to style point, line, polygon, and mesh geometries and display them in a scene. In a scene, you can choose between two types of symbols:

2D symbols such as marker symbols, line symbols and polygon fill symbols.
3D symbols such as 3D model symbols, path symbols and extruded polygon symbols.

See below for more examples.

const pointSymbol = new PointSymbol3D({
  symbolLayers: [ new IconSymbol3DLayer({
    resource: { href: "pin.svg" },
    size: 15,
    material: {
      color: "#4c397f"
    },
    anchor: "bottom"
  })]
});

2D examples

Points

To visualize the location of point features in a map, set a simple marker symbol, picture marker symbol, or a CIM symbol in a simple renderer , and set the renderer on the layer. All features will display in the view with the same symbol.

This example visualizes the locations of weather stations.

Create a simple marker symbol and add it to a simple renderer.
Set the renderer to a data layer.

22 collapsed lines
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <title>Esri Developer Guide: 2D Points</title>

    <link rel="stylesheet" href="https://js.arcgis.com/5.0/esri/themes/dark/main.css" />
    <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
    <script type="module" src="https://js.arcgis.com/5.0/"></script>

    <script type="module">
      const [Map, MapView, FeatureLayer, SimpleMarkerSymbol, SimpleRenderer] = await $arcgis.import(
        [
          "@arcgis/core/Map.js",
          "@arcgis/core/views/MapView.js",
          "@arcgis/core/layers/FeatureLayer.js",
          "@arcgis/core/symbols/SimpleMarkerSymbol.js",
          "@arcgis/core/renderers/SimpleRenderer.js",
        ],
      );


      const renderer = new SimpleRenderer({
        symbol: new SimpleMarkerSymbol({
          size: 4,
          color: [0, 255, 255],
          outline: null,
        }),
      });
40 collapsed lines


      const weatherStations = new FeatureLayer({
        portalItem: {
          id: "cb1886ff0a9d4156ba4d2fadd7e8a139",
        },
        renderer: renderer,
      });

      // Add the layers to the map
      const map = new Map({
        basemap: "dark-gray-vector",
        layers: [weatherStations],
      });

      const view = new MapView({
        container: "viewDiv",
        map: map,
        zoom: 3,
        center: [-95, 38],
        constraints: {
          snapToZoom: false,
        },
      });
    </script>

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

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

Lines

To visualize the location of line features in a map, use a simple line symbol or a cim symbol, and a simple renderer.

This example displays the locations of major highways with one symbol.

Steps

Create a simple line symbol and add it to a simple renderer.
Set the renderer to the data layer.

30 collapsed lines
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <title>Esri Developer Guide: 2D Lines</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 class="calcite-mode-dark">
    <arcgis-map basemap="dark-gray-vector" center="-95.43, 29.77" scale="544505">
      <arcgis-zoom slot="top-left"></arcgis-zoom>
    </arcgis-map>

    <script type="module">
      const FeatureLayer = await $arcgis.import("@arcgis/core/layers/FeatureLayer.js");

      const viewElement = document.querySelector("arcgis-map");
      await viewElement.viewOnReady();
      viewElement.constraints.snapToZoom = false;

      // These autocast to SimpleRenderer and SimpleLineSymbol, respectively.
      const renderer = {
        type: "simple",
        symbol: { type: "simple-line", color: "#fb12ff", width: 1 },
      };
14 collapsed lines

      const layer = new FeatureLayer({
        // Fetch from a service containing primary road features.
        url: "https://services2.arcgis.com/FiaPA4ga0iQKduv3/ArcGIS/rest/services/Transportation_v1/FeatureServer/1",
        title: "US Road System",
        renderer,
        minScale: 0,
        maxScale: 0,
      });

      viewElement.map.add(layer); // Add the layer to the map.
    </script>
  </body>
</html>

Polygons

To visualize the location of polygon features in a map, you can use either a simple fill symbol or a picture fill symbol. You can also use simple marker symbol, picture marker symbol, web style symbol, or a cim symbol to visualize the centroid of the polygon.

This example visualizes flash flood warnings in the United States with very transparent polygons.

Steps

Create a simple fill symbol and add it to a simple renderer.
Set the renderer to the data layer.

45 collapsed lines
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <title>Location style - polygons</title>

    <link rel="stylesheet" href="https://js.arcgis.com/5.0/esri/themes/light/main.css" />
    <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
    <script type="module" src="https://js.arcgis.com/5.0/"></script>

    <style>
      html,
      body,
      #viewDiv {
        height: 100%;
        margin: 0;
      }
      #titleDiv {
        padding: 10px;
      }

      #titleText {
        font-size: 20pt;
        font-weight: 60;
        padding-bottom: 10px;
      }
    </style>
    <script type="module">
      const [MapView, Map, FeatureLayer, SimpleRenderer, SimpleFillSymbol] = await $arcgis.import([
        "@arcgis/core/views/MapView.js",
        "@arcgis/core/Map.js",
        "@arcgis/core/layers/FeatureLayer.js",
        "@arcgis/core/renderers/SimpleRenderer.js",
        "@arcgis/core/symbols/SimpleFillSymbol.js",
      ]);

      // flash flood warnings layer
      const layer = new FeatureLayer({
        portalItem: {
          id: "f9e348953b3848ec8b69964d5bceae02",
        },
      });


      layer.renderer = new SimpleRenderer({
        symbol: new SimpleFillSymbol({
          color: "rgba(0,76,115,0.04)",
          outline: null,
        }),
      });
25 collapsed lines


      const map = new Map({
        basemap: "gray-vector",
        layers: [layer],
      });

      const view = new MapView({
        map,
        container: "viewDiv",
        center: [-98, 40],
        zoom: 3,
      });
      view.ui.add("titleDiv", "top-right");
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
    <div id="titleDiv" class="esri-widget">
      <div id="titleText">Flash Floods by Season</div>
      <div>Flash Flood Warnings (2002 - 2012)</div>
    </div>
  </body>
</html>

3D examples

Points

To visualize the location of point features in a scene, set a marker symbol or a 3D model symbol in a simple renderer, and set the renderer on the layer. All features will display in the view with the same symbol. This example shows how to create a globe that displays cities all over the world. The symbol for the cities is a pin marker.

Steps

Create a marker symbol and add it to a simple renderer.
Apply the renderer to the data layer so that each feature is displayed with the marker symbol.


30 collapsed lines
1
<html>
2
  <head>
3
    <meta charset="utf-8" />
4
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
5
    <title>Esri Developer Guide: 3D Points</title>
6

7
    <link rel="stylesheet" href="https://js.arcgis.com/5.0/esri/themes/dark/main.css" />
8
    <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
9
    <script type="module" src="https://js.arcgis.com/5.0/"></script>
10

11
    <script type="module">
12
      const [
13
        WebScene,
14
        SceneView,
15
        FeatureLayer,
16
        LabelClass,
17
        SimpleRenderer,
18
        PointSymbol3D,
19
        IconSymbol3DLayer,
20
      ] = await $arcgis.import([
21
        "@arcgis/core/WebScene.js",
22
        "@arcgis/core/views/SceneView.js",
23
        "@arcgis/core/layers/FeatureLayer.js",
24
        "@arcgis/core/layers/support/LabelClass.js",
25
        "@arcgis/core/renderers/SimpleRenderer.js",
26
        "@arcgis/core/symbols/PointSymbol3D.js",
27
        "@arcgis/core/symbols/IconSymbol3DLayer.js",
28
      ]);
29

30

31
      const renderer = new SimpleRenderer({
32
        symbol: new PointSymbol3D({
33
          symbolLayers: [
34
            new IconSymbol3DLayer({
35
              resource: {
36
                href: "https://static.arcgis.com/arcgis/styleItems/Icons/web/resource/Pushpin3.svg",
37
              },
38
              size: 15,
39
              material: {
40
                color: "#4c397f",
41
              },
42
              anchor: "bottom",
43
            }),
44
          ],
45
        }),
46
      });
141 collapsed lines
47

48

49
      const webscene = new WebScene({
50
        basemap: null,
51
        ground: {
52
          surfaceColor: [0, 0, 0, 0],
53
        },
54
      });
55

56
      const view = new SceneView({
57
        container: "view",
58
        map: webscene,
59
        alphaCompositingEnabled: true,
60
        camera: {
61
          position: {
62
            spatialReference: {
63
              wkid: 4326,
64
            },
65
            x: 94.28248677690586,
66
            y: 21.553684553226123,
67
            z: 25000000,
68
          },
69
          heading: 0,
70
          tilt: 0.12089379039103153,
71
        },
72
        constraints: {
73
          altitude: {
74
            min: 18000000,
75
            max: 25000000,
76
          },
77
        },
78
        environment: {
79
          background: {
80
            type: "color",
81
            color: [0, 0, 0, 0],
82
          },
83
          lighting: {
84
            date: "Sun Jul 15 2018 15:30:00 GMT+0900 (W. Europe Daylight Time)",
85
          },
86
          starsEnabled: false,
87
          atmosphereEnabled: false,
88
        },
89
      });
90
      window.view = view;
91

92
      view.ui.empty("top-left");
93

94
      const countryBoundaries = new FeatureLayer({
95
        url: "http://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/World_Countries_(Generalized)/FeatureServer",
96
        title: "World Countries",
97
        renderer: {
98
          type: "simple",
99
          symbol: {
100
            type: "polygon-3d",
101
            symbolLayers: [
102
              {
103
                type: "fill",
104
                material: {
105
                  color: "white",
106
                },
107
              },
108
            ],
109
          },
110
        },
111
      });
112

113
      const populationLayer = new FeatureLayer({
114
        url: "https://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/World_Cities_analysis/FeatureServer",
115
        definitionExpression: "POP > 6000000",
116
        renderer: renderer,
117
        screenSizePerspectiveEnabled: false,
118
        labelingInfo: [
119
          new LabelClass({
120
            labelExpressionInfo: { expression: "$feature.CITY_NAME" },
121
            symbol: {
122
              type: "label-3d",
123
              symbolLayers: [
124
                {
125
                  type: "text", // autocasts as new TextSymbol3DLayer()
126
                  material: { color: "#4c397f" },
127
                  size: 10,
128
                  font: {
129
                    family: "Open Sans",
130
                    weight: "bold",
131
                  },
132
                  halo: {
133
                    color: "white",
134
                    size: 1,
135
                  },
136
                },
137
              ],
138
            },
139
          }),
140
        ],
141
      });
142

143
      const graticule = new FeatureLayer({
144
        url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/World_graticule_15deg/FeatureServer",
145
        renderer: {
146
          type: "simple",
147
          symbol: {
148
            type: "line-3d",
149
            symbolLayers: [
150
              {
151
                type: "line",
152
                material: {
153
                  color: [255, 255, 255, 0.8],
154
                },
155
                size: 1,
156
              },
157
            ],
158
          },
159
        },
160
      });
161

162
      webscene.addMany([countryBoundaries, graticule, populationLayer]);
163
    </script>
164

165
    <style>
166
      html,
167
      body {
168
        background: linear-gradient(150deg, #beb5ce, #a2c9e5) no-repeat;
169
        height: 100%;
170
        margin: 0;
171
      }
172

173
      #view {
174
        height: 100%;
175
        width: 100%;
176
      }
177

178
      #view canvas {
179
        filter: drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.5));
180
      }
181
    </style>
182
  </head>
183

184
  <body>
185
    <div id="view"></div>
186
  </body>
187
</html>

Lines

To visualize the location of line features in a scene, set a line symbol or a 3D path symbol in a simple renderer, and set the renderer on the layer. This example shows how to style the metro lines in Lyon using a path symbol.

Steps

Create a path symbol with a width of 5 and a height of 30 meters.
Add it to a simple renderer.
Apply the renderer to the data layer.

32 collapsed lines
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>Esri Developer Guide: 3D Lines</title>

  <link rel="stylesheet" href="https://js.arcgis.com/5.0/esri/themes/light/main.css" />
  <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
  <script type="module" src="https://js.arcgis.com/5.0/"></script>

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

  <script type="module">
    const [WebScene, SceneView, FeatureLayer, SimpleRenderer, LineSymbol3D, PathSymbol3DLayer] =
      await $arcgis.import([
        "@arcgis/core/WebScene.js",
        "@arcgis/core/views/SceneView.js",
        "@arcgis/core/layers/FeatureLayer.js",
        "@arcgis/core/renderers/SimpleRenderer.js",
        "@arcgis/core/symbols/LineSymbol3D.js",
        "@arcgis/core/symbols/PathSymbol3DLayer.js",
      ]);


    const renderer = new SimpleRenderer({
      symbol: new LineSymbol3D({
        symbolLayers: [
          new PathSymbol3DLayer({
            profile: "quad",
            material: {
              color: [46, 255, 238],
            },
            width: 5,
            height: 30,
            join: "miter",
            cap: "round",
            anchor: "bottom",
            profileRotation: "all",
          }),
        ],
      }),
    });
42 collapsed lines


    const webscene = new WebScene({
      portalItem: {
        // autocasts as new PortalItem()
        id: "4a711462369c4334972dcd39b064d214"
      }
    });

    const view = new SceneView({
      container: "viewDiv",
      map: webscene,
      environment: {
        lighting: {
          directShadowsEnabled: true
        }
      }
    });

    /* Create layer with the transit lines */
    const transitLayer = new FeatureLayer({
      url: "http://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/subway_tcl_stations_lines_wgs84/FeatureServer/0",
      copyright:
        "Data from <a href='https://data.beta.grandlyon.com/en/datasets/lignes-metro-funiculaire-reseau-transports-commun-lyonnais/info'>Data Grand Lyon - Sytral</a>",
      elevationInfo: {
        mode: "relative-to-ground",
        offset: 10
      },
      title: "Transit lines in Lyon",
      definitionExpression: "sens='Aller'",
      renderer: renderer
    });

    webscene.add(transitLayer);
  </script>
</head>

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

</html>

Polygons

To visualize polygon features in a scene, use a fill symbol or extrude the polygon based on real-world heights. The example below extrudes building footprints with a fixed height to display schematic buildings in a city.

Steps

Create an extruded polygon symbol and add it to a simple renderer.
Apply the renderer to the data layer.

31 collapsed lines
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <title>Esri Developer Guide: 3D Polygons</title>

    <link rel="stylesheet" href="https://js.arcgis.com/5.0/esri/themes/light/main.css" />
    <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
    <script type="module" src="https://js.arcgis.com/5.0/"></script>

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

    <script type="module">
      const [Map, SceneView, FeatureLayer, PolygonSymbol3D, ExtrudeSymbol3DLayer, SimpleRenderer] =
        await $arcgis.import([
          "@arcgis/core/Map.js",
          "@arcgis/core/views/SceneView.js",
          "@arcgis/core/layers/FeatureLayer.js",
          "@arcgis/core/symbols/PolygonSymbol3D.js",
          "@arcgis/core/symbols/ExtrudeSymbol3DLayer.js",
          "@arcgis/core/renderers/SimpleRenderer.js",
        ]);


      const renderer = new SimpleRenderer({
        symbol: new PolygonSymbol3D({
          symbolLayers: [
            new ExtrudeSymbol3DLayer({
              material: {
                color: "#ffc53d",
              },
              size: 10,
              edges: {
                type: "solid",
                color: "#a67400",
                size: 1.5,
              },
            }),
          ],
        }),
      });
36 collapsed lines


      const buildingsLayer = new FeatureLayer({
        url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/building_footprints_height/FeatureServer",
        renderer,
      });

      const map = new Map({
        basemap: "gray-vector",
        ground: "world-elevation",
        layers: [buildingsLayer],
      });

      const view = new SceneView({
        container: "viewDiv",
        map,
        camera: {
          position: {
            spatialReference: {
              wkid: 102100,
            },
            x: -8358578,
            y: 4625665,
            z: 79,
          },
          heading: 341,
          tilt: 76,
        },
      });
    </script>
  </head>

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

VisualizationIntroduction Data-driven stylesIntroduction