Point, line, and polygon styles

USA weather stations, highways, and states displayed using symbols and simple renderers

What are point, line, and polygon styles?

You can style and display points, lines, and polygons in a map or scene by defining symbols for features. To style features in a feature layer, you define symbols and apply them with a renderer. Styling points, lines, and polygons is also known as styling features because every feature contains a geometry and is styled with a symbol.

There are many different types of symbols you can use to style features. The type of symbol you use depends on the type of visualization you would like to create. 2D symbols are used to display features in a map, and 3D symbols are used to display features in a scene. The most common type of symbol is a simple symbol.

This document covers how to use different symbols and a renderer to style features in a map or scene.

How to style points, lines, and polygons

In general, there are two ways to style features:

  1. Apply symbols to graphics: You 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.

  2. Apply a renderer (with symbols) to a data layer: You use this approach when you want to style all features in a data layer in a map or scene. A renderer defines the "rules" for applying symbols to features, and the symbols define the style used to display the feature. Learn more about layers that support features in Data layers.

Simple renderer

The most common type of renderer is a simple renderer. You use a simple renderer to style all of the features in a data layer the same way. 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 doen't need to know additional attribute information about each station, you should render all points with the same symbol.

ArcGIS JS APIArcGIS .NET APIArcGIS Android APIArcGIS iOS APIArcGIS Java APIArcGIS Qt API (C++)ArcGIS Qt API (QML)
                                                                                    
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
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>
      ArcGIS Developer Guide: 2D Points
    </title>

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

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
        background-color: rgba(15, 15, 15, 1);
    </style>

    <script>
      require([
        "esri/config",
        "esri/Map",
        "esri/views/MapView",
        "esri/layers/FeatureLayer",
        "esri/symbols/SimpleMarkerSymbol",
        "esri/renderers/SimpleRenderer"
      ],(
        Map,
      )=> {
        esriConfig.apiKey = "YOUR_API_KEY";
        const renderer = new SimpleRenderer({
          symbol: new SimpleMarkerSymbol({
            size: 4,
            color: [0, 255, 255],
            outline: null
          })
        });
        const weatherStations = new FeatureLayer({
          portalItem: {
            id: "cb1886ff0a9d4156ba4d2fadd7e8a139"
          renderer: renderer
        // Add the layers to the map
        const map = new Map({
          basemap: "arcgis-dark-gray",
          layers: [weatherStations]
        const view = new MapView({
          container: "viewDiv",
          map: map,
          zoom: 3,
          center: [-95, 38],
          constraints: {
            snapToZoom:false
    </script>
  </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, picture, and text symbols. See below for more examples.

ArcGIS JS APIArcGIS .NET APIArcGIS Android APIArcGIS iOS APIArcGIS Java APIArcGIS Qt API (C++)ArcGIS Qt API (QML)
        
1
2
3
4
5
6
7
8
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.

ArcGIS JS APIArcGIS .NET APIArcGIS Android APIArcGIS iOS APIArcGIS Java APIArcGIS Qt API (C++)ArcGIS Qt API (QML)
          
1
2
3
4
5
6
7
8
9
10
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.

  1. Create a simple marker symbol and add it to a simple renderer.
  2. Set the renderer to a data layer.
ArcGIS JS APIArcGIS .NET APIArcGIS Android APIArcGIS iOS APIArcGIS Java APIArcGIS Qt API (C++)ArcGIS Qt API (QML)
                                                                                    
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
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>
      ArcGIS Developer Guide: 2D Points
    </title>

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

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
        background-color: rgba(15, 15, 15, 1);
    </style>

    <script>
      require([
        "esri/config",
        "esri/Map",
        "esri/views/MapView",
        "esri/layers/FeatureLayer",
        "esri/symbols/SimpleMarkerSymbol",
        "esri/renderers/SimpleRenderer"
      ],(
        Map,
      )=> {
        esriConfig.apiKey = "YOUR_API_KEY";
        const renderer = new SimpleRenderer({
          symbol: new SimpleMarkerSymbol({
            size: 4,
            color: [0, 255, 255],
            outline: null
          })
        });
        const weatherStations = new FeatureLayer({
          portalItem: {
            id: "cb1886ff0a9d4156ba4d2fadd7e8a139"
          renderer: renderer
        // Add the layers to the map
        const map = new Map({
          basemap: "arcgis-dark-gray",
          layers: [weatherStations]
        const view = new MapView({
          container: "viewDiv",
          map: map,
          zoom: 3,
          center: [-95, 38],
          constraints: {
            snapToZoom:false
    </script>
  </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 using a single symbol.

Steps

  1. Create a simple line symbol and add it to a simple renderer .
  2. Set the renderer to the data layer.
ArcGIS JS APIArcGIS .NET APIArcGIS Android APIArcGIS iOS APIArcGIS Java APIArcGIS Qt API (C++)ArcGIS Qt API (QML)
                                                                                     
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
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>
      ArcGIS Developer Guide: 2D Lines
    </title>

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

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
        background-color: rgba(15, 15, 15, 1);
    </style>

    <script>
      require([
        "esri/config",
        "esri/Map",
        "esri/views/MapView",
        "esri/layers/FeatureLayer",
        "esri/symbols/SimpleLineSymbol",
        "esri/renderers/SimpleRenderer"
      ],(
        Map,
      )=> {
        esriConfig.apiKey = "YOUR_API_KEY";
        const renderer = new SimpleRenderer({
          symbol: new SimpleLineSymbol({
            width: 1,
            color: "#fb12ff",
          })
        });
        // Set the renderer on the layer
        const hwyLayer = new FeatureLayer({
          url: "https://services.arcgis.com/P3ePLMYs2RVChkJx/ArcGIS/rest/services/USA_Freeway_System/FeatureServer/2",
          renderer: renderer,
          title: "USA Freeway System",
          minScale: 0,
          maxScale: 0
        // Add the layers to the map
        const map = new Map({
          basemap: "arcgis-dark-gray",
          layers: [ hwyLayer ]
        const view = new MapView({
          container: "viewDiv",
          map: map,
          zoom: 3,
          center: [-95, 38],
          constraints: {
            snapToZoom:false
    </script>
  </head>

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

Polygons

To visualize the location of polygon features in a map, you can use a number of different symbol types such as a simple fill symbol, picture fill symbol, simple marker symbol, picture marker symbol, web style symbol, or a CIM symbol.

This example visualizes the borders of the states in the U.S. with very transparent polygons.

Steps

  1. Create a simple fill symbol and add it to a simple renderer.
  2. Set the renderer to the data layer.
ArcGIS JS APIArcGIS .NET APIArcGIS Android APIArcGIS iOS APIArcGIS Java APIArcGIS Qt API (C++)ArcGIS Qt API (QML)
                                                                                       
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
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>
      ArcGIS Developer Guide: 2D Polygons
    </title>

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

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

    <script>
      require([
        "esri/config",
        "esri/Map",
        "esri/views/MapView",
        "esri/layers/FeatureLayer",
        "esri/symbols/SimpleFillSymbol",
        "esri/renderers/SimpleRenderer"
      ],(
        Map,
      )=> {
        esriConfig.apiKey = "YOUR_API_KEY";
        const renderer = new SimpleRenderer({
          symbol: new SimpleFillSymbol({
            color: "rgba(249, 249, 199, .05)",
            outline: {
              color: "white",
              width: .15
            }
          })
        });
        // Set the renderer on the layer
        const layer = new FeatureLayer({
          portalItem: {
            id: "99fd67933e754a1181cc755146be21ca"
          renderer: renderer,
          title: "States"
        // Add the layers to the map
        const map = new Map({
          basemap: "arcgis-dark-gray",
          layers: [ layer ]
        const view = new MapView({
          container: "viewDiv",
          map: map,
          zoom: 3,
          center: [-95, 38],
          constraints: {
            snapToZoom:false
    </script>
  </head>

  <body>
    <div id="viewDiv"></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

  1. Create a marker symbol and add it to a simple renderer .
  2. Apply the renderer to the data layer so that each feature is displayed with the marker symbol.
ArcGIS JS APIArcGIS .NET APIArcGIS Android APIArcGIS iOS APIArcGIS Java APIArcGIS Qt API (C++)ArcGIS Qt API (QML)
                                                                                                                                                                                                           
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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>
      ArcGIS Developer Guide: 3D Points
    </title>

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

    <style>
      html, body {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
        background: #a2c9e5;
        background: linear-gradient(150deg, #beb5ce, #a2c9e5) no-repeat;
      #view {
        height: 100%;
        width: 100%;
      #view canvas {
        filter: drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.5));
    </style>

    <script>
      require([
        "esri/config",
        "esri/WebScene",
        "esri/views/SceneView",
        "esri/layers/FeatureLayer",
        "esri/layers/support/LabelClass",
        "esri/renderers/SimpleRenderer",
        "esri/symbols/PointSymbol3D",
        "esri/symbols/IconSymbol3DLayer",
      ],(
      )=> {
        esriConfig.apiKey = "YOUR_API_KEY";
        const renderer = new SimpleRenderer({
          symbol: new PointSymbol3D({
            symbolLayers: [
              new IconSymbol3DLayer({
                resource: {
                  href:
                    "https://static.arcgis.com/arcgis/styleItems/Icons/web/resource/Pushpin3.svg",
                },
                size: 15,
                material: {
                  color: "#4c397f",
                },
                anchor: "bottom",
              }),
            ],
          }),
        });
        const webscene = new WebScene({
          basemap: null,
          ground: {
            surfaceColor: [0, 0, 0, 0],
        const view = new SceneView({
          container: "view",
          map: webscene,
          alphaCompositingEnabled: true,
          qualityProfile: "high",
          camera: {
            position: {
              spatialReference: {
                wkid: 4326,
              x: 94.28248677690586,
              y: 21.553684553226123,
              z: 25000000,
            heading: 0,
            tilt: 0.12089379039103153,
          constraints: {
            altitude: {
              min: 18000000,
              max: 25000000,
          environment: {
            background: {
              type: "color",
              color: [0, 0, 0, 0],
            lighting: {
              date:
                "Sun Jul 15 2018 15:30:00 GMT+0900 (W. Europe Daylight Time)",
            starsEnabled: false,
            atmosphereEnabled: false,
        window.view = view
        view.ui.empty("top-left")
        const countryBoundaries = new FeatureLayer({
          url:
            "http://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/World_Countries_(Generalized)/FeatureServer",
          title: "World Countries",
          renderer: {
            type: "simple",
            symbol: {
              type: "polygon-3d",
              symbolLayers: [
                  type: "fill",
                  material: {
                    color: "white",
        const populationLayer = new FeatureLayer({
          url:
            "https://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/World_Cities_analysis/FeatureServer",
          definitionExpression: "POP > 6000000",
          renderer: renderer,
          screenSizePerspectiveEnabled: false,
          labelingInfo: [
            new LabelClass({
              labelExpressionInfo: { expression: "$feature.CITY_NAME" },
              symbol: {
                type: "label-3d",
                symbolLayers: [
                    type: "text", // autocasts as new TextSymbol3DLayer()
                    material: { color: "#4c397f" },
                    size: 10,
                    font: {
                      family: "Open Sans",
                      weight: "bold",
                    halo: {
                      color: "white",
                      size: 1,
        const graticule = new FeatureLayer({
          url:
            "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/World_graticule_15deg/FeatureServer",
          renderer: {
            type: "simple",
            symbol: {
              type: "line-3d",
              symbolLayers: [
                  type: "line",
                  material: {
                    color: [255, 255, 255, 0.8],
                  size: 1,
    </script>
  </head>

  <body>
    <div id="view"></div>
  </body>
</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 streets in Manhattan using a path symbol.

Steps

  1. Create a path symbol with a width and a height of 10 meters.
  2. Add it to a simple renderer.
  3. Apply the renderer to the data layer.
ArcGIS JS APIArcGIS .NET APIArcGIS Android APIArcGIS iOS APIArcGIS Java APIArcGIS Qt API (C++)ArcGIS Qt API (QML)
                                                                                                                 
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
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>
      ArcGIS Developer Guide: 3D Lines
    </title>

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

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

    <script>
      require([
        "esri/config",
        "esri/Map",
        "esri/views/SceneView",
        "esri/layers/FeatureLayer",
        "esri/renderers/SimpleRenderer",
        "esri/symbols/LineSymbol3D",
        "esri/symbols/PathSymbol3DLayer",
      ], (
        Map,
      )=> {
        esriConfig.apiKey = "YOUR_API_KEY";
        const renderer = new SimpleRenderer({
          symbol: new LineSymbol3D({
            symbolLayers: [
              new PathSymbol3DLayer({
                profile: "quad",
                material: {
                  color: [46, 255, 238],
                },
                width: 10,
                height: 10,
                join: "miter",
                cap: "round",
                anchor: "bottom",
                profileRotation: "all",
              }),
            ],
          }),
        })
        const webscene = new Map({
          basemap: "arcgis-light-gray",
        const view = new SceneView({
          container: "viewDiv",
          map: webscene,
          qualityProfile: "high",
          camera: {
            position: [
              -74.02689962,
              40.69937406,
              502.59973
            heading: 56.33,
            tilt: 71.49
          environment: {
            lighting: {
              directShadowsEnabled: true,
              ambientOcclusionEnabled: true,
            atmosphere: {
              quality: "high",
        const roadsLayer = new FeatureLayer({
          url:
            "https://services1.arcgis.com/4yjifSiIG17X0gW4/arcgis/rest/services/StreetAssessmentRatingNYC/FeatureServer",
          elevationInfo: {
            mode: "relative-to-ground",
            offset: 0,
          title: "Strees in Manhattan",
          renderer: renderer,
    </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

  1. Create an extruded polygon symbol and add it to a simple renderer.
  2. Apply the renderer to the data layer.
ArcGIS JS APIArcGIS .NET APIArcGIS Android APIArcGIS iOS APIArcGIS Java APIArcGIS Qt API (C++)ArcGIS Qt API (QML)
                                                                                                       
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
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>
      ArcGIS Developer Guide: 3D Polygons
    </title>

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

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

    <script>
      require([
        "esri/config",
        "esri/Map",
        "esri/views/SceneView",
        "esri/layers/FeatureLayer",
        "esri/symbols/PolygonSymbol3D",
        "esri/symbols/ExtrudeSymbol3DLayer",
        "esri/renderers/SimpleRenderer"
      ],(
        Map,
      )=> {
        esriConfig.apiKey = "YOUR_API_KEY";
        const renderer = new SimpleRenderer({
          symbol: new PolygonSymbol3D({
            symbolLayers: [ new ExtrudeSymbol3DLayer({
                material: {
                  color: "#ffc53d"
                },
                size: 10,
                edges: {
                  type: "solid",
                  color: "#a67400",
                  size: 1.5
                }
            })]
          })
        });
        const buildingsLayer = new FeatureLayer({
          url:
            "https://services1.arcgis.com/jjVcwHv9AQEq3DH3/ArcGIS/rest/services/Buildings/FeatureServer/0",
          renderer: renderer
        const map = new Map({
         basemap: "arcgis-light-gray",
          ground: "world-elevation",
          layers: [buildingsLayer]
        const view = new SceneView({
          container: "viewDiv",
          map: map,
          qualityProfile: "high",
          camera: {
            position: {
              x: -8354148,
              y: 4641966,
              z: 129,
              spatialReference: {
                wkid: 3857
            heading: 300,
            tilt: 75
    </script>
  </head>

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

Tutorials

Services

Feature service

Add, update, delete, and query feature data.

API support

Point, line, and polygon stylesData-driven visualization3D visualization
ArcGIS API for JavaScriptFully supportedFully supportedFully supported
ArcGIS Runtime API for AndroidFully supportedFully supportedFully supported
ArcGIS Runtime API for iOSFully supportedFully supportedFully supported
ArcGIS Runtime API for JavaFully supportedFully supportedFully supported
ArcGIS Runtime API for .NETFully supportedFully supportedFully supported
ArcGIS Runtime API for QtFully supportedFully supportedFully supported
ArcGIS API for PythonFully supportedDefine renderers with JavaScriptSupports web scenes only
Full supportPartial support (see notes)Not supported

Tools

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