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 will use the geometryEngine to buffer, intersect, and union geometries.

Prerequisites

You need an ArcGIS Developer or ArcGIS Online account to access the dashboard and create an API key.

Steps

Create a map with graphics

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.

Go to your dashboard to get an API key.
In CodePen, set the apiKey to your key, so it can be used to access basemap layer and location services.

Use dark colors for code blocks
esriConfig.apiKey = "YOUR_API_KEY";
const map = new Map({
  basemap: "arcgis/topographic" // basemap styles service
});

Add the geometryEngine module

In the require statement, add the geometryEngine module.

The ArcGIS Maps SDK for JavaScript is available as AMD modules and ES modules, but this tutorial is based on AMD. The AMD require function uses references to determine which modules will be loaded – for example, you can specify "esri/Map" for loading the Map module. After the modules are loaded, they are passed as parameters (e.g. Map) to the callback function where they can be used in your application. It is important to keep the module references and callback parameters in the same order. For more information on the different types of modules, visit the Introduction to Tooling guide topic.

Expand
Use dark colors for code blocks
          require([
            "esri/config",
            "esri/Map",
            "esri/views/MapView",
            "esri/Graphic",
            "esri/layers/GraphicsLayer",

            "esri/geometry/geometryEngine"

          ], function(esriConfig, Map, MapView, Graphic, GraphicsLayer, geometryEngine) {
Expand

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.

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.

Expand
Use dark colors for code blocks
    <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>
Expand

Add CSS to style the HTML elements that were just added.

Expand
Use dark colors for code blocks
          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;
          }
Expand

Add the controls div to the view UI.

Expand
Use dark colors for code blocks
            view.ui.add(document.getElementById("controls"), "top-right");

Expand

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.

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.

Expand
Use dark colors for code blocks
            const graphicsLayer = new GraphicsLayer();

            const resultsLayer = new GraphicsLayer();
            map.addMany([graphicsLayer, resultsLayer]);
Expand

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.

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

Expand
Use dark colors for code blocks
            view.ui.add(document.getElementById("controls"), "top-right");

            let bufferGraphic;
            function createBuffer() {
              if (bufferGraphic) {
                return;
              }

Expand

Create a 1 kilometer buffer around the Point graphic using the geodesicBuffer method on the geometryEngine.

Expand
Use dark colors for code blocks
            let bufferGraphic;
            function createBuffer() {
              if (bufferGraphic) {
                return;
              }

              const buffer = geometryEngine.geodesicBuffer(
                pointGraphic.geometry,
                1,
                "kilometers"
              );

Expand

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.

Expand
Use dark colors for code blocks
            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],
                  },
                },
              });
              graphicsLayer.add(bufferGraphic);
            }
Expand

Add an event listener to the Buffer button that will call the createBuffer function when it is clicked.

Expand
Use dark colors for code blocks
            view.ui.add(document.getElementById("controls"), "top-right");

            document.getElementById("buffer").addEventListener("click", createBuffer);
Expand

Run the app to view the buffer.

Remove graphics from the result layer

Create a function that will reset and remove all graphics from the graphics layer.

Create the resetGraphics function. Remove the bufferGraphic from the graphicsLayer and removeAll geometries from the resultsLayer. Set the bufferGraphic to null.

Expand
Use dark colors for code blocks
              bufferGraphic = new Graphic({
                geometry: buffer,
                symbol: {
                  type: "simple-fill",
                  color: [227, 139, 79, 0.5],
                  outline: {
                    color: [255, 255, 255, 255],
                  },
                },
              });
              graphicsLayer.add(bufferGraphic);
            }

            function resetGraphics() {
              graphicsLayer.remove(bufferGraphic);
              resultsLayer.removeAll();
              bufferGraphic = null;
            }
Expand

Add an event listener to the Reset button to call the resetGraphics function when the button is clicked.

Expand
Use dark colors for code blocks
            document.getElementById("buffer").addEventListener("click", createBuffer);

            document.getElementById("reset").addEventListener("click", resetGraphics);
Expand

Run the app. Switch between the Buffer and Reset buttons to create a buffer and then remove it from the view.

Intersect geometries

Two geometries intersect when they have a geometric area in common. When the Intersect button is clicked, call the findIntersect function and add the resulting graphic to the resultsLayer.

Define the findIntersect function.

Expand
Use dark colors for code blocks
            function resetGraphics() {
              graphicsLayer.remove(bufferGraphic);
              resultsLayer.removeAll();
              bufferGraphic = null;
            }

            function findIntersect() {

            }
Expand

removeAll graphics from the resultsLayer. If there is not a bufferGraphic with which to execute the intersect operation, then return.

Expand
Use dark colors for code blocks
            function findIntersect() {

                resultsLayer.removeAll();
                if (!bufferGraphic) {
                  return;
                }

            }
Expand

Call the intersect method to find the intersection between the two geometries.

Expand
Use dark colors for code blocks
            function findIntersect() {

                resultsLayer.removeAll();
                if (!bufferGraphic) {
                  return;
                }

                const intersectGeom = geometryEngine.intersect(polygonGraphic.geometry, bufferGraphic.geometry);

            }
Expand

Create a graphic to display the intersecting geometry and add it to the resultsLayer.

Expand
Use dark colors for code blocks
            function findIntersect() {

                resultsLayer.removeAll();
                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"
                        }
                    }
                });
                resultsLayer.add(intersectionGraphic);

            }
Expand

Add an event listener to the Intersect button to call the findIntersect function when the button is clicked.

Expand
Use dark colors for code blocks
            document.getElementById("reset").addEventListener("click", resetGraphics);

            document.getElementById("intersect").addEventListener("click", findIntersect);
Expand

Run the app. If you click the Intersect button first, the intersect method will not be called because it needs the bufferGraphic. Click the Buffer button followed by the Intersect button to view the resulting geometry.

Union geometries

A union is a resulting geometry from the combination of two input geometries. When the Union button is clicked, calculate the union between the buffer and polygonGraphic geometries and add the result to the resultsLayer.

Define the createUnion function.

Expand
Use dark colors for code blocks
                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"
                        }
                    }
                });
                resultsLayer.add(intersectionGraphic);

            }

            function createUnion() {

            }
Expand

removeAll graphics from the resultsLayer. If there is not a bufferGraphic with which to execute the union operation, then return.

Expand
Use dark colors for code blocks
            function createUnion() {

                resultsLayer.removeAll();
                if (!bufferGraphic) {
                  return;
                }

            }
Expand

Call the union method to find the union between the two geometries.

Expand
Use dark colors for code blocks
            function createUnion() {

                resultsLayer.removeAll();
                if (!bufferGraphic) {
                  return;
                }

                const unionGeom = geometryEngine.union(polygonGraphic.geometry, bufferGraphic.geometry);

            }
Expand

Create a graphic to display the resulting geometry and add it to the resultsLayer.

Expand
Use dark colors for code blocks
            function createUnion() {

                resultsLayer.removeAll();
                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"
                    }
                }
                });
                resultsLayer.add(unionGraphic);

            }
Expand

Add an event listener to the Union button to call the createUnion function when the button is clicked.

Expand
Use dark colors for code blocks
            document.getElementById("buffer").addEventListener("click", createBuffer);

            document.getElementById("reset").addEventListener("click", resetGraphics);

            document.getElementById("intersect").addEventListener("click", findIntersect);

            document.getElementById("union").addEventListener("click", createUnion);
Expand

Run the application. If you click the Union button first, the method will not be called because it needs the bufferGraphic. Click the Buffer button followed by the Union button to view the resulting geometry. to view the resulting geometry.

Run the app

In CodePen, run your code to display the map.

The map should load with a buffer graphic around the point graphic. When you click on the intersect or union buttons, it should create a graphic for the results of those calculations.

What's next?

Learn how to use additional API features and ArcGIS services in these tutorials: