Calculate geometries

Learn how to buffer, intersect, and union geometries.

A geometry calculation is an operation you can use to buffer, intersect, or union geometries to create a new geometry. The resulting geometry is commonly used to display a graphic in a map or as input for another analysis.

In this tutorial, you use the geometryEngine to buffer, intersect, and union geometries.

Prerequisites

You need a free ArcGIS developer account to access your dashboard and API keys. The API key must be scoped to access the services used in this tutorial.

Steps

Create a map with graphics

  1. To get started, complete the Add a point, line, and polygon tutorial or .

Set the API key

To access ArcGIS services, you need an API key.

  1. Go to your dashboard to get an API key.

  2. In CodePen, set the apiKey to your key, so it can be used to access basemap layer and location services.

        
    Change line
    1
    2
    3
    4
    esriConfig.apiKey = "YOUR_API_KEY";
    const map = new Map({
      basemap: "arcgis-topographic" // Basemap layer service
    });
    

Add the geometryEngine module

  1. In the require statement, add the geometryEngine module.

    The ArcGIS API for JavaScript uses AMD modules. The require function is used to load modules so they can be used in the main function. It's important to keep the module references and function parameters in the same order.

                                                                                                                                                                                                                                      
    Add line.Change line
    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
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    <html>
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
            <title>ArcGIS API for JavaScript Tutorials: Calculate geometries</title>
            <style>
              html, body, #viewDiv {
                padding: 0;
                margin: 0;
                height: 100%;
                width: 100%;
                font-family: "Avenir Next"
              #controls {
                width: 250px;
                padding: 0px 5px 0px 5px;
              .esri-button {
                margin: 5px 0px 5px 0px;
            </style>
            <link rel="stylesheet" href="https://js.arcgis.com/4.21/esri/themes/light/main.css">
            <script src="https://js.arcgis.com/4.21/"></script>
            <script>
              require([
                "esri/config",
                "esri/Map",
                "esri/views/MapView",
                "esri/Graphic",
                "esri/layers/GraphicsLayer",
    
                "esri/geometry/geometryEngine"
    
              ], function(esriConfig, Map, MapView, Graphic, GraphicsLayer, geometryEngine) {
                esriConfig.apiKey = "YOUR_API_KEY";
                const map = new Map({
                  basemap: "arcgis-topographic" //Basemap layer service
                const view = new MapView({
                  map: map,
                  center: [-118.80500, 34.0075], //Longitude, latitude
                  zoom: 13,
                  container: "viewDiv"
                const graphicsLayer = new GraphicsLayer();
                const resultsLayer = new GraphicsLayer();
                const point = { //Create a point
                  type: "point",
                  longitude: -118.80657463861,
                  latitude: 34.0005930608889,
                const simpleMarkerSymbol = {
                  type: "simple-marker",
                  color: [226, 119, 40], // Orange
                  outline: {
                    color: [255, 255, 255], // White
                    width: 1
                const pointGraphic = new Graphic({
                  geometry: point,
                  symbol: simpleMarkerSymbol
                // Create a line geometry
                const polyline = {
                  type: "polyline",
                  paths: [
                    [-118.821527826096, 34.0139576938577], //Longitude, latitude
                    [-118.814893761649, 34.0080602407843], //Longitude, latitude
                    [-118.808878330345, 34.0016642996246] //Longitude, latitude
                const simpleLineSymbol = {
                  type: "simple-line",
                  color: [226, 119, 40], // Orange
                  width: 2
                const polylineGraphic = new Graphic({
                  geometry: polyline,
                  symbol: simpleLineSymbol
                // Create a polygon geometry
                const polygon = {
                  type: "polygon",
                  rings: [
                    [-118.818984489994, 34.0137559967283], //Longitude, latitude
                    [-118.806796597377, 34.0215816298725], //Longitude, latitude
                    [-118.791432890735, 34.0163883241613], //Longitude, latitude
                    [-118.79596686535, 34.008564864635], //Longitude, latitude
                    [-118.808558110679, 34.0035027131376] //Longitude, latitude
                const simpleFillSymbol = {
                  type: "simple-fill",
                  color: [227, 139, 79, 0.8], // Orange, opacity 80%
                  outline: {
                    color: [255, 255, 255],
                    width: 1
                const polygonGraphic = new Graphic({
                  geometry: polygon,
                  symbol: simpleFillSymbol
                view.ui.add(document.getElementById("controls"), "top-right");
                document.getElementById("buffer").addEventListener("click", createBuffer);
                document.getElementById("reset").addEventListener("click", resetGraphics);
                document.getElementById("intersect").addEventListener("click", findIntersect);
                document.getElementById("union").addEventListener("click", createUnion);
                let bufferGraphic;
                function createBuffer() {
                  if (bufferGraphic) {
                    return;
                  const buffer = geometryEngine.geodesicBuffer(
                    1,
                    "kilometers"
                  bufferGraphic = new Graphic({
                    geometry: buffer,
                    symbol: {
                      type: "simple-fill",
                      color: [227, 139, 79, 0.5],
                      outline: {
                        color: [255, 255, 255, 255],
                function resetGraphics() {
                  bufferGraphic = null;
                function findIntersect() {
                    if (!bufferGraphic) {
                      return;
                    const intersectGeom = geometryEngine.intersect(polygonGraphic.geometry, bufferGraphic.geometry);
                    const intersectionGraphic = new Graphic({
                        geometry: intersectGeom,
                        symbol: {
                            type: "simple-fill",
                            style: "cross",
                            color: "green",
                            outline: {
                                color: "green"
                function createUnion() {
                    if (!bufferGraphic) {
                      return;
                    const unionGeom = geometryEngine.union(polygonGraphic.geometry, bufferGraphic.geometry);
                    const unionGraphic = new Graphic({
                    geometry: unionGeom,
                    symbol: {
                        type: "simple-fill",
                        style: "cross",
                        color: "green",
                        outline: {
                        color: "green"
            </script>
        </head>
        <body>
    
        <div id="viewDiv"></div>
    
        <div id="controls" class="esri-widget">
          <button id="buffer" class="esri-button">Buffer</button>
          <button id="intersect" class="esri-button">Intersect</button>
          <button id="union" class="esri-button">Union</button>
          <button id="reset" class="esri-button esri-button--secondary">Reset</button>
        </div>
    
        </body>
    </html>

Add HTML elements

Add a simple user interface for the user by placing buttons in the view that will either call a calculation operation or remove graphics from the view.

  1. Add a div with three buttons to calculate the intersection, the union, and the last to remove all resulting geometries. Use the esri-widget and esri-button classes to give the elements consistent styling.

                                                                                                                                                                                                                                      
    Add line.Add line.Add line.Add line.Add line.Add line.
    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
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    <html>
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
            <title>ArcGIS API for JavaScript Tutorials: Calculate geometries</title>
            <style>
              html, body, #viewDiv {
                padding: 0;
                margin: 0;
                height: 100%;
                width: 100%;
                font-family: "Avenir Next"
              #controls {
                width: 250px;
                padding: 0px 5px 0px 5px;
              .esri-button {
                margin: 5px 0px 5px 0px;
            </style>
            <link rel="stylesheet" href="https://js.arcgis.com/4.21/esri/themes/light/main.css">
            <script src="https://js.arcgis.com/4.21/"></script>
            <script>
              require([
                "esri/config",
                "esri/Map",
                "esri/views/MapView",
                "esri/Graphic",
                "esri/layers/GraphicsLayer",
                "esri/geometry/geometryEngine"
              ], function(esriConfig, Map, MapView, Graphic, GraphicsLayer, geometryEngine) {
                esriConfig.apiKey = "YOUR_API_KEY";
                const map = new Map({
                  basemap: "arcgis-topographic" //Basemap layer service
                const view = new MapView({
                  map: map,
                  center: [-118.80500, 34.0075], //Longitude, latitude
                  zoom: 13,
                  container: "viewDiv"
                const graphicsLayer = new GraphicsLayer();
                const resultsLayer = new GraphicsLayer();
                const point = { //Create a point
                  type: "point",
                  longitude: -118.80657463861,
                  latitude: 34.0005930608889,
                const simpleMarkerSymbol = {
                  type: "simple-marker",
                  color: [226, 119, 40], // Orange
                  outline: {
                    color: [255, 255, 255], // White
                    width: 1
                const pointGraphic = new Graphic({
                  geometry: point,
                  symbol: simpleMarkerSymbol
                // Create a line geometry
                const polyline = {
                  type: "polyline",
                  paths: [
                    [-118.821527826096, 34.0139576938577], //Longitude, latitude
                    [-118.814893761649, 34.0080602407843], //Longitude, latitude
                    [-118.808878330345, 34.0016642996246] //Longitude, latitude
                const simpleLineSymbol = {
                  type: "simple-line",
                  color: [226, 119, 40], // Orange
                  width: 2
                const polylineGraphic = new Graphic({
                  geometry: polyline,
                  symbol: simpleLineSymbol
                // Create a polygon geometry
                const polygon = {
                  type: "polygon",
                  rings: [
                    [-118.818984489994, 34.0137559967283], //Longitude, latitude
                    [-118.806796597377, 34.0215816298725], //Longitude, latitude
                    [-118.791432890735, 34.0163883241613], //Longitude, latitude
                    [-118.79596686535, 34.008564864635], //Longitude, latitude
                    [-118.808558110679, 34.0035027131376] //Longitude, latitude
                const simpleFillSymbol = {
                  type: "simple-fill",
                  color: [227, 139, 79, 0.8], // Orange, opacity 80%
                  outline: {
                    color: [255, 255, 255],
                    width: 1
                const polygonGraphic = new Graphic({
                  geometry: polygon,
                  symbol: simpleFillSymbol
                view.ui.add(document.getElementById("controls"), "top-right");
                document.getElementById("buffer").addEventListener("click", createBuffer);
                document.getElementById("reset").addEventListener("click", resetGraphics);
                document.getElementById("intersect").addEventListener("click", findIntersect);
                document.getElementById("union").addEventListener("click", createUnion);
                let bufferGraphic;
                function createBuffer() {
                  if (bufferGraphic) {
                    return;
                  const buffer = geometryEngine.geodesicBuffer(
                    1,
                    "kilometers"
                  bufferGraphic = new Graphic({
                    geometry: buffer,
                    symbol: {
                      type: "simple-fill",
                      color: [227, 139, 79, 0.5],
                      outline: {
                        color: [255, 255, 255, 255],
                function resetGraphics() {
                  bufferGraphic = null;
                function findIntersect() {
                    if (!bufferGraphic) {
                      return;
                    const intersectGeom = geometryEngine.intersect(polygonGraphic.geometry, bufferGraphic.geometry);
                    const intersectionGraphic = new Graphic({
                        geometry: intersectGeom,
                        symbol: {
                            type: "simple-fill",
                            style: "cross",
                            color: "green",
                            outline: {
                                color: "green"
                function createUnion() {
                    if (!bufferGraphic) {
                      return;
                    const unionGeom = geometryEngine.union(polygonGraphic.geometry, bufferGraphic.geometry);
                    const unionGraphic = new Graphic({
                    geometry: unionGeom,
                    symbol: {
                        type: "simple-fill",
                        style: "cross",
                        color: "green",
                        outline: {
                        color: "green"
            </script>
        </head>
        <body>
    
        <div id="viewDiv"></div>
    
        <div id="controls" class="esri-widget">
          <button id="buffer" class="esri-button">Buffer</button>
          <button id="intersect" class="esri-button">Intersect</button>
          <button id="union" class="esri-button">Union</button>
          <button id="reset" class="esri-button esri-button--secondary">Reset</button>
        </div>
    
        </body>
    </html>
  2. Add CSS to style the HTML elements that were just added.

                                                                                                                                                                                                                                      
    Add line.Add line.Add line.Add line.Add line.Add line.Add line.
    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
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    <html>
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
            <title>ArcGIS API for JavaScript Tutorials: Calculate geometries</title>
            <style>
              html, body, #viewDiv {
                padding: 0;
                margin: 0;
                height: 100%;
                width: 100%;
                font-family: "Avenir Next"
              }
    
              #controls {
                width: 250px;
                padding: 0px 5px 0px 5px;
              }
              .esri-button {
                margin: 5px 0px 5px 0px;
              }
            </style>
            <link rel="stylesheet" href="https://js.arcgis.com/4.21/esri/themes/light/main.css">
            <script src="https://js.arcgis.com/4.21/"></script>
            <script>
              require([
                "esri/config",
                "esri/Map",
                "esri/views/MapView",
                "esri/Graphic",
                "esri/layers/GraphicsLayer",
                "esri/geometry/geometryEngine"
              ], function(esriConfig, Map, MapView, Graphic, GraphicsLayer, geometryEngine) {
                esriConfig.apiKey = "YOUR_API_KEY";
                const map = new Map({
                  basemap: "arcgis-topographic" //Basemap layer service
                const view = new MapView({
                  map: map,
                  center: [-118.80500, 34.0075], //Longitude, latitude
                  zoom: 13,
                  container: "viewDiv"
                const graphicsLayer = new GraphicsLayer();
                const resultsLayer = new GraphicsLayer();
                const point = { //Create a point
                  type: "point",
                  longitude: -118.80657463861,
                  latitude: 34.0005930608889,
                const simpleMarkerSymbol = {
                  type: "simple-marker",
                  color: [226, 119, 40], // Orange
                  outline: {
                    color: [255, 255, 255], // White
                    width: 1
                const pointGraphic = new Graphic({
                  geometry: point,
                  symbol: simpleMarkerSymbol
                // Create a line geometry
                const polyline = {
                  type: "polyline",
                  paths: [
                    [-118.821527826096, 34.0139576938577], //Longitude, latitude
                    [-118.814893761649, 34.0080602407843], //Longitude, latitude
                    [-118.808878330345, 34.0016642996246] //Longitude, latitude
                const simpleLineSymbol = {
                  type: "simple-line",
                  color: [226, 119, 40], // Orange
                  width: 2
                const polylineGraphic = new Graphic({
                  geometry: polyline,
                  symbol: simpleLineSymbol
                // Create a polygon geometry
                const polygon = {
                  type: "polygon",
                  rings: [
                    [-118.818984489994, 34.0137559967283], //Longitude, latitude
                    [-118.806796597377, 34.0215816298725], //Longitude, latitude
                    [-118.791432890735, 34.0163883241613], //Longitude, latitude
                    [-118.79596686535, 34.008564864635], //Longitude, latitude
                    [-118.808558110679, 34.0035027131376] //Longitude, latitude
                const simpleFillSymbol = {
                  type: "simple-fill",
                  color: [227, 139, 79, 0.8], // Orange, opacity 80%
                  outline: {
                    color: [255, 255, 255],
                    width: 1
                const polygonGraphic = new Graphic({
                  geometry: polygon,
                  symbol: simpleFillSymbol
                view.ui.add(document.getElementById("controls"), "top-right");
                document.getElementById("buffer").addEventListener("click", createBuffer);
                document.getElementById("reset").addEventListener("click", resetGraphics);
                document.getElementById("intersect").addEventListener("click", findIntersect);
                document.getElementById("union").addEventListener("click", createUnion);
                let bufferGraphic;
                function createBuffer() {
                  if (bufferGraphic) {
                    return;
                  const buffer = geometryEngine.geodesicBuffer(
                    1,
                    "kilometers"
                  bufferGraphic = new Graphic({
                    geometry: buffer,
                    symbol: {
                      type: "simple-fill",
                      color: [227, 139, 79, 0.5],
                      outline: {
                        color: [255, 255, 255, 255],
                function resetGraphics() {
                  bufferGraphic = null;
                function findIntersect() {
                    if (!bufferGraphic) {
                      return;
                    const intersectGeom = geometryEngine.intersect(polygonGraphic.geometry, bufferGraphic.geometry);
                    const intersectionGraphic = new Graphic({
                        geometry: intersectGeom,
                        symbol: {
                            type: "simple-fill",
                            style: "cross",
                            color: "green",
                            outline: {
                                color: "green"
                function createUnion() {
                    if (!bufferGraphic) {
                      return;
                    const unionGeom = geometryEngine.union(polygonGraphic.geometry, bufferGraphic.geometry);
                    const unionGraphic = new Graphic({
                    geometry: unionGeom,
                    symbol: {
                        type: "simple-fill",
                        style: "cross",
                        color: "green",
                        outline: {
                        color: "green"
            </script>
        </head>
        <body>
    
        <div id="viewDiv"></div>
    
        <div id="controls" class="esri-widget">
          <button id="buffer" class="esri-button">Buffer</button>
          <button id="intersect" class="esri-button">Intersect</button>
          <button id="union" class="esri-button">Union</button>
          <button id="reset" class="esri-button esri-button--secondary">Reset</button>
        </div>
    
        </body>
    </html>
  3. Add the controls div to the view UI.

                                                                                                                                                                                                                                      
    Add line.
    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
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    <html>
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
            <title>ArcGIS API for JavaScript Tutorials: Calculate geometries</title>
            <style>
              html, body, #viewDiv {
                padding: 0;
                margin: 0;
                height: 100%;
                width: 100%;
                font-family: "Avenir Next"
              #controls {
                width: 250px;
                padding: 0px 5px 0px 5px;
              .esri-button {
                margin: 5px 0px 5px 0px;
            </style>
            <link rel="stylesheet" href="https://js.arcgis.com/4.21/esri/themes/light/main.css">
            <script src="https://js.arcgis.com/4.21/"></script>
            <script>
              require([
                "esri/config",
                "esri/Map",
                "esri/views/MapView",
                "esri/Graphic",
                "esri/layers/GraphicsLayer",
                "esri/geometry/geometryEngine"
              ], function(esriConfig, Map, MapView, Graphic, GraphicsLayer, geometryEngine) {
                esriConfig.apiKey = "YOUR_API_KEY";
                const map = new Map({
                  basemap: "arcgis-topographic" //Basemap layer service
                const view = new MapView({
                  map: map,
                  center: [-118.80500, 34.0075], //Longitude, latitude
                  zoom: 13,
                  container: "viewDiv"
                const graphicsLayer = new GraphicsLayer();
                const resultsLayer = new GraphicsLayer();
                const point = { //Create a point
                  type: "point",
                  longitude: -118.80657463861,
                  latitude: 34.0005930608889,
                const simpleMarkerSymbol = {
                  type: "simple-marker",
                  color: [226, 119, 40], // Orange
                  outline: {
                    color: [255, 255, 255], // White
                    width: 1
                const pointGraphic = new Graphic({
                  geometry: point,
                  symbol: simpleMarkerSymbol
                // Create a line geometry
                const polyline = {
                  type: "polyline",
                  paths: [
                    [-118.821527826096, 34.0139576938577], //Longitude, latitude
                    [-118.814893761649, 34.0080602407843], //Longitude, latitude
                    [-118.808878330345, 34.0016642996246] //Longitude, latitude
                const simpleLineSymbol = {
                  type: "simple-line",
                  color: [226, 119, 40], // Orange
                  width: 2
                const polylineGraphic = new Graphic({
                  geometry: polyline,
                  symbol: simpleLineSymbol
                // Create a polygon geometry
                const polygon = {
                  type: "polygon",
                  rings: [
                    [-118.818984489994, 34.0137559967283], //Longitude, latitude
                    [-118.806796597377, 34.0215816298725], //Longitude, latitude
                    [-118.791432890735, 34.0163883241613], //Longitude, latitude
                    [-118.79596686535, 34.008564864635], //Longitude, latitude
                    [-118.808558110679, 34.0035027131376] //Longitude, latitude
                const simpleFillSymbol = {
                  type: "simple-fill",
                  color: [227, 139, 79, 0.8], // Orange, opacity 80%
                  outline: {
                    color: [255, 255, 255],
                    width: 1
                const polygonGraphic = new Graphic({
                  geometry: polygon,
                  symbol: simpleFillSymbol
                view.ui.add(document.getElementById("controls"), "top-right");
    
                document.getElementById("buffer").addEventListener("click", createBuffer);
                document.getElementById("reset").addEventListener("click", resetGraphics);
                document.getElementById("intersect").addEventListener("click", findIntersect);
                document.getElementById("union").addEventListener("click", createUnion);
                let bufferGraphic;
                function createBuffer() {
                  if (bufferGraphic) {
                    return;
                  const buffer = geometryEngine.geodesicBuffer(
                    1,
                    "kilometers"
                  bufferGraphic = new Graphic({
                    geometry: buffer,
                    symbol: {
                      type: "simple-fill",
                      color: [227, 139, 79, 0.5],
                      outline: {
                        color: [255, 255, 255, 255],
                function resetGraphics() {
                  bufferGraphic = null;
                function findIntersect() {
                    if (!bufferGraphic) {
                      return;
                    const intersectGeom = geometryEngine.intersect(polygonGraphic.geometry, bufferGraphic.geometry);
                    const intersectionGraphic = new Graphic({
                        geometry: intersectGeom,
                        symbol: {
                            type: "simple-fill",
                            style: "cross",
                            color: "green",
                            outline: {
                                color: "green"
                function createUnion() {
                    if (!bufferGraphic) {
                      return;
                    const unionGeom = geometryEngine.union(polygonGraphic.geometry, bufferGraphic.geometry);
                    const unionGraphic = new Graphic({
                    geometry: unionGeom,
                    symbol: {
                        type: "simple-fill",
                        style: "cross",
                        color: "green",
                        outline: {
                        color: "green"
            </script>
        </head>
        <body>
    
        <div id="viewDiv"></div>
    
        <div id="controls" class="esri-widget">
          <button id="buffer" class="esri-button">Buffer</button>
          <button id="intersect" class="esri-button">Intersect</button>
          <button id="union" class="esri-button">Union</button>
          <button id="reset" class="esri-button esri-button--secondary">Reset</button>
        </div>
    
        </body>
    </html>
  4. Run the app to verify that the buttons have been added to the view.

Add new graphics layers

A graphics layer is a container for graphics. It is used with a map view to display graphics on a map. You can add more than one graphics layer to a map view. Graphics layers are displayed on top of all other layers.

  1. Add an additional instance of the GraphicsLayer for the results of the geometry calculations. To add multiple layers to the map at once, use map.addMany.

                                                                                                                                                                                                                                      
    Add line.Change line
    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
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    <html>
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
            <title>ArcGIS API for JavaScript Tutorials: Calculate geometries</title>
            <style>
              html, body, #viewDiv {
                padding: 0;
                margin: 0;
                height: 100%;
                width: 100%;
                font-family: "Avenir Next"
              #controls {
                width: 250px;
                padding: 0px 5px 0px 5px;
              .esri-button {
                margin: 5px 0px 5px 0px;
            </style>
            <link rel="stylesheet" href="https://js.arcgis.com/4.21/esri/themes/light/main.css">
            <script src="https://js.arcgis.com/4.21/"></script>
            <script>
              require([
                "esri/config",
                "esri/Map",
                "esri/views/MapView",
                "esri/Graphic",
                "esri/layers/GraphicsLayer",
                "esri/geometry/geometryEngine"
              ], function(esriConfig, Map, MapView, Graphic, GraphicsLayer, geometryEngine) {
                esriConfig.apiKey = "YOUR_API_KEY";
                const map = new Map({
                  basemap: "arcgis-topographic" //Basemap layer service
                const view = new MapView({
                  map: map,
                  center: [-118.80500, 34.0075], //Longitude, latitude
                  zoom: 13,
                  container: "viewDiv"
                const graphicsLayer = new GraphicsLayer();
    
                const resultsLayer = new GraphicsLayer();
                map.addMany([graphicsLayer, resultsLayer]);
                const point = { //Create a point
                  type: "point",
                  longitude: -118.80657463861,
                  latitude: 34.0005930608889,
                const simpleMarkerSymbol = {
                  type: "simple-marker",
                  color: [226, 119, 40], // Orange
                  outline: {
                    color: [255, 255, 255], // White
                    width: 1
                const pointGraphic = new Graphic({
                  geometry: point,
                  symbol: simpleMarkerSymbol
                // Create a line geometry
                const polyline = {
                  type: "polyline",
                  paths: [
                    [-118.821527826096, 34.0139576938577], //Longitude, latitude
                    [-118.814893761649, 34.0080602407843], //Longitude, latitude
                    [-118.808878330345, 34.0016642996246] //Longitude, latitude
                const simpleLineSymbol = {
                  type: "simple-line",
                  color: [226, 119, 40], // Orange
                  width: 2
                const polylineGraphic = new Graphic({
                  geometry: polyline,
                  symbol: simpleLineSymbol
                // Create a polygon geometry
                const polygon = {
                  type: "polygon",
                  rings: [
                    [-118.818984489994, 34.0137559967283], //Longitude, latitude
                    [-118.806796597377, 34.0215816298725], //Longitude, latitude
                    [-118.791432890735, 34.0163883241613], //Longitude, latitude
                    [-118.79596686535, 34.008564864635], //Longitude, latitude
                    [-118.808558110679, 34.0035027131376] //Longitude, latitude
                const simpleFillSymbol = {
                  type: "simple-fill",
                  color: [227, 139, 79, 0.8], // Orange, opacity 80%
                  outline: {
                    color: [255, 255, 255],
                    width: 1
                const polygonGraphic = new Graphic({
                  geometry: polygon,
                  symbol: simpleFillSymbol
                view.ui.add(document.getElementById("controls"), "top-right");
                document.getElementById("buffer").addEventListener("click", createBuffer);
                document.getElementById("reset").addEventListener("click", resetGraphics);
                document.getElementById("intersect").addEventListener("click", findIntersect);
                document.getElementById("union").addEventListener("click", createUnion);
                let bufferGraphic;
                function createBuffer() {
                  if (bufferGraphic) {
                    return;
                  const buffer = geometryEngine.geodesicBuffer(
                    1,
                    "kilometers"
                  bufferGraphic = new Graphic({
                    geometry: buffer,
                    symbol: {
                      type: "simple-fill",
                      color: [227, 139, 79, 0.5],
                      outline: {
                        color: [255, 255, 255, 255],
                function resetGraphics() {
                  bufferGraphic = null;
                function findIntersect() {
                    if (!bufferGraphic) {
                      return;
                    const intersectGeom = geometryEngine.intersect(polygonGraphic.geometry, bufferGraphic.geometry);
                    const intersectionGraphic = new Graphic({
                        geometry: intersectGeom,
                        symbol: {
                            type: "simple-fill",
                            style: "cross",
                            color: "green",
                            outline: {
                                color: "green"
                function createUnion() {
                    if (!bufferGraphic) {
                      return;
                    const unionGeom = geometryEngine.union(polygonGraphic.geometry, bufferGraphic.geometry);
                    const unionGraphic = new Graphic({
                    geometry: unionGeom,
                    symbol: {
                        type: "simple-fill",
                        style: "cross",
                        color: "green",
                        outline: {
                        color: "green"
            </script>
        </head>
        <body>
    
        <div id="viewDiv"></div>
    
        <div id="controls" class="esri-widget">
          <button id="buffer" class="esri-button">Buffer</button>
          <button id="intersect" class="esri-button">Intersect</button>
          <button id="union" class="esri-button">Union</button>
          <button id="reset" class="esri-button esri-button--secondary">Reset</button>
        </div>
    
        </body>
    </html>

Create a buffer

A buffer is a polygon that surrounds the input geometry at a specified distance. Use a buffer to help better visualize the geometries created from the intersect and union operations.

  1. Create the global variable bufferGraphic and the createBuffer function. If there is a bufferGraphic, return.

                                                                                                                                                                                                                                      
    Add line.Add line.Add line.Add line.Add line.
    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
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    <html>
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
            <title>ArcGIS API for JavaScript Tutorials: Calculate geometries</title>
            <style>
              html, body, #viewDiv {
                padding: 0;
                margin: 0;
                height: 100%;
                width: 100%;
                font-family: "Avenir Next"
              #controls {
                width: 250px;
                padding: 0px 5px 0px 5px;
              .esri-button {
                margin: 5px 0px 5px 0px;
            </style>
            <link rel="stylesheet" href="https://js.arcgis.com/4.21/esri/themes/light/main.css">
            <script src="https://js.arcgis.com/4.21/"></script>
            <script>
              require([
                "esri/config",
                "esri/Map",
                "esri/views/MapView",
                "esri/Graphic",
                "esri/layers/GraphicsLayer",
                "esri/geometry/geometryEngine"
              ], function(esriConfig, Map, MapView, Graphic, GraphicsLayer, geometryEngine) {
                esriConfig.apiKey = "YOUR_API_KEY";
                const map = new Map({
                  basemap: "arcgis-topographic" //Basemap layer service
                const view = new MapView({
                  map: map,
                  center: [-118.80500, 34.0075], //Longitude, latitude
                  zoom: 13,
                  container: "viewDiv"
                const graphicsLayer = new GraphicsLayer();
                const resultsLayer = new GraphicsLayer();
                const point = { //Create a point
                  type: "point",
                  longitude: -118.80657463861,
                  latitude: 34.0005930608889,
                const simpleMarkerSymbol = {
                  type: "simple-marker",
                  color: [226, 119, 40], // Orange
                  outline: {
                    color: [255, 255, 255], // White
                    width: 1
                const pointGraphic = new Graphic({
                  geometry: point,
                  symbol: simpleMarkerSymbol
                // Create a line geometry
                const polyline = {
                  type: "polyline",
                  paths: [
                    [-118.821527826096, 34.0139576938577], //Longitude, latitude
                    [-118.814893761649, 34.0080602407843], //Longitude, latitude
                    [-118.808878330345, 34.0016642996246] //Longitude, latitude
                const simpleLineSymbol = {
                  type: "simple-line",
                  color: [226, 119, 40], // Orange
                  width: 2
                const polylineGraphic = new Graphic({
                  geometry: polyline,
                  symbol: simpleLineSymbol
                // Create a polygon geometry
                const polygon = {
                  type: "polygon",
                  rings: [
                    [-118.818984489994, 34.0137559967283], //Longitude, latitude
                    [-118.806796597377, 34.0215816298725], //Longitude, latitude
                    [-118.791432890735, 34.0163883241613], //Longitude, latitude
                    [-118.79596686535, 34.008564864635], //Longitude, latitude
                    [-118.808558110679, 34.0035027131376] //Longitude, latitude
                const simpleFillSymbol = {
                  type: "simple-fill",
                  color: [227, 139, 79, 0.8], // Orange, opacity 80%
                  outline: {
                    color: [255, 255, 255],
                    width: 1
                const polygonGraphic = new Graphic({
                  geometry: polygon,
                  symbol: simpleFillSymbol
                view.ui.add(document.getElementById("controls"), "top-right");
    
                document.getElementById("buffer").addEventListener("click", createBuffer);
                document.getElementById("reset").addEventListener("click", resetGraphics);
                document.getElementById("intersect").addEventListener("click", findIntersect);
                document.getElementById("union").addEventListener("click", createUnion);
                let bufferGraphic;
                function createBuffer() {
                  if (bufferGraphic) {
                    return;
                  }
    
                  const buffer = geometryEngine.geodesicBuffer(
                    1,
                    "kilometers"
                  bufferGraphic = new Graphic({
                    geometry: buffer,
                    symbol: {
                      type: "simple-fill",
                      color: [227, 139, 79, 0.5],
                      outline: {
                        color: [255, 255, 255, 255],
                function resetGraphics() {
                  bufferGraphic = null;
                function findIntersect() {
                    if (!bufferGraphic) {
                      return;
                    const intersectGeom = geometryEngine.intersect(polygonGraphic.geometry, bufferGraphic.geometry);
                    const intersectionGraphic = new Graphic({
                        geometry: intersectGeom,
                        symbol: {
                            type: "simple-fill",
                            style: "cross",
                            color: "green",
                            outline: {
                                color: "green"
                function createUnion() {
                    if (!bufferGraphic) {
                      return;
                    const unionGeom = geometryEngine.union(polygonGraphic.geometry, bufferGraphic.geometry);
                    const unionGraphic = new Graphic({
                    geometry: unionGeom,
                    symbol: {
                        type: "simple-fill",
                        style: "cross",
                        color: "green",
                        outline: {
                        color: "green"
            </script>
        </head>
        <body>
    
        <div id="viewDiv"></div>
    
        <div id="controls" class="esri-widget">
          <button id="buffer" class="esri-button">Buffer</button>
          <button id="intersect" class="esri-button">Intersect</button>
          <button id="union" class="esri-button">Union</button>
          <button id="reset" class="esri-button esri-button--secondary">Reset</button>
        </div>
    
        </body>
    </html>
  2. Create a 1 kilometer buffer around the Point graphic using the geodesicBuffer method on the geometryEngine.

                                                                                                                                                                                                                                      
    Add line.Add line.Add line.Add line.Add line.
    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
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    <html>
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
            <title>ArcGIS API for JavaScript Tutorials: Calculate geometries</title>
            <style>
              html, body, #viewDiv {
                padding: 0;
                margin: 0;
                height: 100%;
                width: 100%;
                font-family: "Avenir Next"
              #controls {
                width: 250px;
                padding: 0px 5px 0px 5px;
              .esri-button {
                margin: 5px 0px 5px 0px;
            </style>
            <link rel="stylesheet" href="https://js.arcgis.com/4.21/esri/themes/light/main.css">
            <script src="https://js.arcgis.com/4.21/"></script>
            <script>
              require([
                "esri/config",
                "esri/Map",
                "esri/views/MapView",
                "esri/Graphic",
                "esri/layers/GraphicsLayer",
                "esri/geometry/geometryEngine"
              ], function(esriConfig, Map, MapView, Graphic, GraphicsLayer, geometryEngine) {
                esriConfig.apiKey = "YOUR_API_KEY";
                const map = new Map({
                  basemap: "arcgis-topographic" //Basemap layer service
                const view = new MapView({
                  map: map,
                  center: [-118.80500, 34.0075], //Longitude, latitude
                  zoom: 13,
                  container: "viewDiv"
                const graphicsLayer = new GraphicsLayer();
                const resultsLayer = new GraphicsLayer();
                const point = { //Create a point
                  type: "point",
                  longitude: -118.80657463861,
                  latitude: 34.0005930608889,
                const simpleMarkerSymbol = {
                  type: "simple-marker",
                  color: [226, 119, 40], // Orange
                  outline: {
                    color: [255, 255, 255], // White
                    width: 1
                const pointGraphic = new Graphic({
                  geometry: point,
                  symbol: simpleMarkerSymbol
                // Create a line geometry
                const polyline = {
                  type: "polyline",
                  paths: [
                    [-118.821527826096, 34.0139576938577], //Longitude, latitude
                    [-118.814893761649, 34.0080602407843], //Longitude, latitude
                    [-118.808878330345, 34.0016642996246] //Longitude, latitude
                const simpleLineSymbol = {
                  type: "simple-line",
                  color: [226, 119, 40], // Orange
                  width: 2
                const polylineGraphic = new Graphic({
                  geometry: polyline,
                  symbol: simpleLineSymbol
                // Create a polygon geometry
                const polygon = {
                  type: "polygon",
                  rings: [
                    [-118.818984489994, 34.0137559967283], //Longitude, latitude
                    [-118.806796597377, 34.0215816298725], //Longitude, latitude
                    [-118.791432890735, 34.0163883241613], //Longitude, latitude
                    [-118.79596686535, 34.008564864635], //Longitude, latitude
                    [-118.808558110679, 34.0035027131376] //Longitude, latitude
                const simpleFillSymbol = {
                  type: "simple-fill",
                  color: [227, 139, 79, 0.8], // Orange, opacity 80%
                  outline: {
                    color: [255, 255, 255],
                    width: 1
                const polygonGraphic = new Graphic({
                  geometry: polygon,
                  symbol: simpleFillSymbol
                view.ui.add(document.getElementById("controls"), "top-right");
                document.getElementById("buffer").addEventListener("click", createBuffer);
                document.getElementById("reset").addEventListener("click", resetGraphics);
                document.getElementById("intersect").addEventListener("click", findIntersect);
                document.getElementById("union").addEventListener("click", createUnion);
                let bufferGraphic;
                function createBuffer() {
                  if (bufferGraphic) {
                    return;
                  }
    
                  const buffer = geometryEngine.geodesicBuffer(
                    pointGraphic.geometry,
                    1,
                    "kilometers"
                  );
    
                  bufferGraphic = new Graphic({
                    geometry: buffer,
                    symbol: {
                      type: "simple-fill",
                      color: [227, 139, 79, 0.5],
                      outline: {
                        color: [255, 255, 255, 255],
                function resetGraphics() {
                  bufferGraphic = null;
                function findIntersect() {
                    if (!bufferGraphic) {
                      return;
                    const intersectGeom = geometryEngine.intersect(polygonGraphic.geometry, bufferGraphic.geometry);
                    const intersectionGraphic = new Graphic({
                        geometry: intersectGeom,
                        symbol: {
                            type: "simple-fill",
                            style: "cross",
                            color: "green",
                            outline: {
                                color: "green"
                function createUnion() {
                    if (!bufferGraphic) {
                      return;
                    const unionGeom = geometryEngine.union(polygonGraphic.geometry, bufferGraphic.geometry);
                    const unionGraphic = new Graphic({
                    geometry: unionGeom,
                    symbol: {
                        type: "simple-fill",
                        style: "cross",
                        color: "green",
                        outline: {
                        color: "green"
            </script>
        </head>
        <body>
    
        <div id="viewDiv"></div>
    
        <div id="controls" class="esri-widget">
          <button id="buffer" class="esri-button">Buffer</button>
          <button id="intersect" class="esri-button">Intersect</button>
          <button id="union" class="esri-button">Union</button>
          <button id="reset" class="esri-button esri-button--secondary">Reset</button>
        </div>
    
        </body>
    </html>
  3. Create a Graphic to display the buffer geometry in your map. Set the geometry of the graphic to the buffer you just calculated, and set the symbol to a SimpleFillSymbol. Add the graphic to the bufferLayer.

                                                                                                                                                                                                                                      
    Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
    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
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    <html>
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
            <title>ArcGIS API for JavaScript Tutorials: Calculate geometries</title>
            <style>
              html, body, #viewDiv {
                padding: 0;
                margin: 0;
                height: 100%;
                width: 100%;
                font-family: "Avenir Next"
              #controls {
                width: 250px;
                padding: 0px 5px 0px 5px;
              .esri-button {
                margin: 5px 0px 5px 0px;
            </style>
            <link rel="stylesheet" href="https://js.arcgis.com/4.21/esri/themes/light/main.css">
            <script src="https://js.arcgis.com/4.21/"></script>
            <script>
              require([
                "esri/config",
                "esri/Map",
                "esri/views/MapView",
                "esri/Graphic",
                "esri/layers/GraphicsLayer",
                "esri/geometry/geometryEngine"
              ], function(esriConfig, Map, MapView, Graphic, GraphicsLayer, geometryEngine) {
                esriConfig.apiKey = "YOUR_API_KEY";
                const map = new Map({
                  basemap: "arcgis-topographic" //Basemap layer service
                const view = new MapView({
                  map: map,
                  center: [-118.80500, 34.0075], //Longitude, latitude
                  zoom: 13,
                  container: "viewDiv"
                const graphicsLayer = new GraphicsLayer();
                const resultsLayer = new GraphicsLayer();
                const point = { //Create a point
                  type: "point",
                  longitude: -118.80657463861,
                  latitude: 34.0005930608889,
                const simpleMarkerSymbol = {
                  type: "simple-marker",
                  color: [226, 119, 40], // Orange
                  outline: {
                    color: [255, 255, 255], // White
                    width: 1
                const pointGraphic = new Graphic({
                  geometry: point,
                  symbol: simpleMarkerSymbol
                // Create a line geometry
                const polyline = {
                  type: "polyline",
                  paths: [
                    [-118.821527826096, 34.0139576938577], //Longitude, latitude
                    [-118.814893761649, 34.0080602407843], //Longitude, latitude
                    [-118.808878330345, 34.0016642996246] //Longitude, latitude
                const simpleLineSymbol = {
                  type: "simple-line",
                  color: [226, 119, 40], // Orange
                  width: 2
                const polylineGraphic = new Graphic({
                  geometry: polyline,
                  symbol: simpleLineSymbol
                // Create a polygon geometry
                const polygon = {
                  type: "polygon",
                  rings: [
                    [-118.818984489994, 34.0137559967283], //Longitude, latitude
                    [-118.806796597377, 34.0215816298725], //Longitude, latitude
                    [-118.791432890735, 34.0163883241613], //Longitude, latitude
                    [-118.79596686535, 34.008564864635], //Longitude, latitude
                    [-118.808558110679, 34.0035027131376] //Longitude, latitude
                const simpleFillSymbol = {
                  type: "simple-fill",
                  color: [227, 139, 79, 0.8], // Orange, opacity 80%
                  outline: {
                    color: [255, 255, 255],
                    width: 1
                const polygonGraphic = new Graphic({
                  geometry: polygon,
                  symbol: simpleFillSymbol
                view.ui.add(document.getElementById("controls"), "top-right");
                document.getElementById("buffer").addEventListener("click", createBuffer);
                document.getElementById("reset").addEventListener("click", resetGraphics);