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 on a map or as input for another analysis.
In this tutorial, you will use the geometry operators to buffer, intersect, and union geometries.
Prerequisites
Steps
Create a map with graphics
- To get started, complete the Add a point, line, and polygon tutorial or .
Get an access token
You need an access token with the correct privileges to access the location services used in this tutorial.
- Go to the Create an API key tutorial and create an API key with the following privilege(s):
- Privileges
- Location services > Basemaps
- Privileges
- In CodePen, set
esrito your access token.Config.api Key Use dark colors for code blocks var esriConfig = { apiKey: "YOUR_ACCESS_TOKEN", };
To learn about other ways to get an access token, go to Types of authentication.
Add modules
-
Use
$arcgis.importto add the required modules.The ArcGIS Maps SDK for JavaScript is available via CDN and npm, but this tutorial is based on CDN. The
$arcgis.importglobal function accepts a module path or array of module paths, and returns a promise that resolves with the requested modules. This function can only be used when working with the CDN; otherwise, use the standard import syntax. To learn more about the SDK's different modules, visit the References page.Use dark colors for code blocks const [ Graphic, Map, geodesicBufferOperator, intersectionOperator, unionOperator, GraphicsLayer, ] = await $arcgis.import([ "@arcgis/core/Graphic.js", "@arcgis/core/Map.js", "@arcgis/core/geometry/operators/geodesicBufferOperator.js", "@arcgis/core/geometry/operators/intersectionOperator.js", "@arcgis/core/geometry/operators/unionOperator.js", "@arcgis/core/layers/GraphicsLayer.js", ]);
Add HTML elements
Add a simple user interface by placing actions in the arcgis-map that will either call a geometry operation or remove graphics from the arcgis-map.
-
Inside of an
arcgis-placement, add acalcite-action-barwithcalcite-actions to calculate the buffer, intersection, union, and to remove all resulting graphics with a reset action.Use dark colors for code blocks <arcgis-map center="-118.805, 34.027" zoom="13"> <arcgis-zoom position="top-left"></arcgis-zoom> <arcgis-placement position="top-right"> <calcite-action-bar expand-disabled expanded> <calcite-action id="buffer" text="Buffer" icon="circle-area"></calcite-action> <calcite-action id="intersect" disabled text="Intersect" icon="preserve"></calcite-action> <calcite-action id="union" disabled text="Union" icon="dissolve-features"></calcite-action> <calcite-action id="reset" disabled text="Reset" icon="reset"></calcite-action> </calcite-action-bar> </arcgis-placement> </arcgis-map> -
In the script, create variables to store references to the newly added action elements.
Use dark colors for code blocks const bufferAction = document.querySelector("#buffer"); const intersectAction = document.querySelector("#intersect"); const unionAction = document.querySelector("#union"); const resetAction = document.querySelector("#reset"); -
Run the app to verify that the action bar has been added to the arcgis-map.
Add new graphics layers
A graphics layer is a container for graphics. It is used with an arcgis-map component to display graphics on a map. You can add more than one graphics layer to a map. Graphics layers are displayed on top of all other layers.
- Create an additional instance of a
Graphicsfor the results of the geometry calculations and add both layers to the Map.Layer Use dark colors for code blocks const graphicsLayer = new GraphicsLayer(); const resultsLayer = new GraphicsLayer(); viewElement.map = new Map({ basemap: "arcgis/topographic", layers: [graphicsLayer, resultsLayer], });
Create a buffer
A buffer is a polygon surrounding the input geometry at a specified distance. Use a buffer to help better visualize the geometries created from the intersectionOperator and unionOperator operations.
-
Create the global variable
bufferand theGraphic createfunction. If there is aBuffer buffer,Graphic return.Use dark colors for code blocks let bufferGraphic; async function createBuffer() { if (bufferGraphic) { return; } } -
Create a
1kilometer buffer around the Point graphic using thegeodesic.Buffer Operator Use dark colors for code blocks let bufferGraphic; async function createBuffer() { if (bufferGraphic) { return; } if (!geodesicBufferOperator.isLoaded()) { await geodesicBufferOperator.load(); } const buffer = geodesicBufferOperator.execute(pointGraphic.geometry, 1, { unit: "kilometers", }); } -
Create a
Graphicto 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 buffer graphic to thegraphics. Enable the other actions and disable the Buffer action.Layer Use dark colors for code blocks let bufferGraphic; async function createBuffer() { if (bufferGraphic) { return; } if (!geodesicBufferOperator.isLoaded()) { await geodesicBufferOperator.load(); } const buffer = geodesicBufferOperator.execute(pointGraphic.geometry, 1, { unit: "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); bufferAction.disabled = true; resetAction.disabled = false; intersectAction.disabled = false; unionAction.disabled = false; } -
Add an event listener to the buffer action that will call the
createfunction when it is clicked.Buffer Use dark colors for code blocks const polygonGraphic = new Graphic({ geometry: polygon, symbol: simpleFillSymbol, attributes: attributes, popupTemplate: popupTemplate, }); graphicsLayer.add(polygonGraphic); bufferAction?.addEventListener("click", createBuffer); -
Run the app and click on the Buffer action to view the buffer graphic.
Remove graphics from the result layer
Create a function that will reset and remove all graphics from the graphics layer.
-
Create the
resetfunction. Remove theGraphics bufferfrom theGraphic graphicsandLayer removegraphics from theAll results. Set theLayer buffertoGraphic null. Disable all actions except the Buffer action.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); bufferAction.disabled = true; resetAction.disabled = false; intersectAction.disabled = false; unionAction.disabled = false; } function resetGraphics() { graphicsLayer.remove(bufferGraphic); resultsLayer.removeAll(); bufferGraphic = null; bufferAction.disabled = false; resetAction.disabled = true; intersectAction.disabled = true; unionAction.disabled = true; } -
Add an event listener to the Reset action to call the
resetfunction when the action is clicked.Graphics Use dark colors for code blocks bufferAction?.addEventListener("click", createBuffer); resetAction?.addEventListener("click", resetGraphics); -
Run the app. Switch between the Buffer and Reset actions to create a buffer and then remove it from the
arcgis-map.
Intersect geometries
Two geometries intersect when they have a geometric area in common. When the Intersect action is clicked, call the find function and add the resulting graphic to the results.
-
Define the
findfunction.Intersect Use dark colors for code blocks function resetGraphics() { graphicsLayer.remove(bufferGraphic); resultsLayer.removeAll(); bufferGraphic = null; bufferAction.disabled = false; resetAction.disabled = true; intersectAction.disabled = true; unionAction.disabled = true; } async function findIntersection() { } -
removegraphics from theAll results. If there is not aLayer bufferwith which to execute theGraphic intersection, thenOperator return.Use dark colors for code blocks async function findIntersection() { resultsLayer.removeAll(); if (!bufferGraphic) { return; } } -
Use the
intersectionto find the intersection between the two geometries.Operator Use dark colors for code blocks async function findIntersection() { resultsLayer.removeAll(); if (!bufferGraphic) { return; } const intersectGeom = intersectionOperator.execute( polygonGraphic.geometry, bufferGraphic.geometry, ); } -
Create a graphic to display the intersecting geometry and add it to the
results.Layer Use dark colors for code blocks async function findIntersection() { resultsLayer.removeAll(); if (!bufferGraphic) { return; } const intersectGeom = intersectionOperator.execute( polygonGraphic.geometry, bufferGraphic.geometry, ); const intersectionGraphic = new Graphic({ geometry: intersectGeom, symbol: { type: "simple-fill", style: "cross", color: "green", outline: { color: "green", }, }, }); resultsLayer.add(intersectionGraphic); } -
Add an event listener to the Intersect action to call the
findfunction when the action is clicked.Intersect Use dark colors for code blocks resetAction?.addEventListener("click", resetGraphics); intersectAction?.addEventListener("click", findIntersection); -
Run the app. Click the Buffer action followed by the Intersect action to calculate and display the resulting geometry.
Union geometries
A union is the result of combining two or more input geometries. When the Union action is clicked, calculate the union between the buffer and polygon geometries and add the result to the results.
-
Define the
createfunction.Union Use dark colors for code blocks const intersectGeom = intersectionOperator.execute( 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() { } -
removegraphics from theAll results. If there is not aLayer bufferwith which to execute theGraphic unionoperation, thenOperator return.Use dark colors for code blocks function createUnion() { resultsLayer.removeAll(); if (!bufferGraphic) { return; } } -
Use the
unionto find the union between the two geometries.Operator Use dark colors for code blocks function createUnion() { resultsLayer.removeAll(); if (!bufferGraphic) { return; } const unionGeom = unionOperator.execute(polygonGraphic.geometry, bufferGraphic.geometry); } -
Create a graphic to display the resulting geometry and add it to the
results.Layer Use dark colors for code blocks function createUnion() { resultsLayer.removeAll(); if (!bufferGraphic) { return; } const unionGeom = unionOperator.execute(polygonGraphic.geometry, bufferGraphic.geometry); const unionGraphic = new Graphic({ geometry: unionGeom, symbol: { type: "simple-fill", style: "cross", color: "green", outline: { color: "green", }, }, }); resultsLayer.add(unionGraphic); } -
Add an event listener to the Union action to call the
createfunction when the action is clicked.Union Use dark colors for code blocks bufferAction?.addEventListener("click", createBuffer); resetAction?.addEventListener("click", resetGraphics); intersectAction?.addEventListener("click", findIntersection); unionAction?.addEventListener("click", createUnion); -
Run the application. Click the Buffer action followed by the Union or Intersect actions.
Run the app
In CodePen, run your code to display the map.
The map should load with a point, line and polygon displayed on the map. Click the Buffer action to add a buffer graphic around the point graphic. Then, when you click on the intersect or union actions, 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: