Geometry operator - geodesic buffers | Sample | ArcGIS Maps SDK for JavaScript

Skip to content

This sample uses the geodesicBufferOperator to create geodesic buffers around the pointer (mouse/touch) location as a user moves the pointer across the view.

Geodesic buffers account for the earth’s curvature, resulting in more accurate representations, especially when viewed in 3D and over large areas. On a 2D Web Mercator map, the geodesic buffers appear increasingly distorted as they are drawn farther from the equator. This happens because the shortest path on a globe is not a straight line when represented on a flat map. This distortion is unavoidable when projecting a sphere onto a flat surface, leading to stretching and shearing.

In comparison. planar buffers are best for viewing smaller geographic areas. The shape of planar buffers won’t distort on 2D Web Mercator map, but their size and areas will be increasingly inaccurate as they move away from the equator. In the 3D view, the size of planar buffers will be largest at the equator and smaller the closer they get to the poles.

How it works

The sample listens to arcgisViewPointerMove and arcgisViewKeyDown events both on the Map and Scene instances. If the b key is tapped, a user can click on or move the pointer around both views to create a geodesic buffer around the pointer location.

viewElementMap.addEventListener("arcgisViewPointerMove", (event) => {
  if (bufferEnabled) {
    createBuffer(event.detail, viewElementMap.view);
  }
});

Geometry operator - proximity analysis

Geometry operator - offset analysis

Geometry operator - centroid analysis

Introduction to geometry operators

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <title>Geometry operator - geodesic buffers | Sample | ArcGIS Maps SDK for JavaScript</title>

    <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
    <script type="module" src="https://js.arcgis.com/5.0/"></script>

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

      arcgis-scene {
        width: 49.9%;
        float: right;
      }

      arcgis-map {
        width: 49.9%;
        float: left;
      }

      calcite-block {
        width: 120px;
        margin-block: 0;
        --calcite-block-padding: 0px;
        padding: 5px;
        line-height: 1.2rem;
      }

      .strong {
        font-weight: 800;
      }
    </style>
  </head>

  <body>
    <arcgis-map zoom="3" center="0,60">
      <arcgis-zoom slot="top-left"></arcgis-zoom>
    </arcgis-map>
    <arcgis-scene zoom="3" center="0,60">
      <arcgis-zoom slot="top-left"></arcgis-zoom>
      <arcgis-navigation-toggle slot="top-left"></arcgis-navigation-toggle>
      <arcgis-compass slot="top-left"></arcgis-compass>
      <calcite-panel slot="top-right">
        <calcite-block expanded label="info">
          Press <span class="strong">b key</span> to enable
          <span id="mode" class="strong">buffering</span>. Then click or move the mouse to buffer.
        </calcite-block>
      </calcite-panel>
    </arcgis-scene>
    <script type="module">
      const [Map, GraphicsLayer, Graphic, geodesicBufferOperator] = await $arcgis.import([
        "@arcgis/core/Map.js",
        "@arcgis/core/layers/GraphicsLayer.js",
        "@arcgis/core/Graphic.js",
        "@arcgis/core/geometry/operators/geodesicBufferOperator.js",
      ]);

      // Symbol definition for polylines
      const polySymbol = {
        type: "simple-fill", // autocasts as new SimpleFillSymbol()
        color: [255, 255, 0, 0.6],
        outline: {
          color: [0, 0, 0, 0.5],
          width: 2,
        },
      };

      // Symbol definition for points
      const pointSymbol = {
        type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
        color: [255, 0, 0],
        outline: {
          color: [255, 255, 255],
          width: 1,
        },
        size: 7,
      };

      // Indicates whether buffering is enabled
      let bufferEnabled = false;

      // Create a map to be shared by two views
      const map = new Map({
        basemap: "satellite",
      });

      // Add two graphics layers to the map, one for points, another for buffers
      const bufferLayer = new GraphicsLayer();
      const pointLayer = new GraphicsLayer();
      map.addMany([bufferLayer, pointLayer]);

      // Get the reference to the Map and Scene components
      const viewElementMap = document.querySelector("arcgis-map");
      const viewElementScene = document.querySelector("arcgis-scene");

      // Assign the same map to both components
      viewElementMap.map = map;
      viewElementScene.map = map;

      // Wait for the views to load
      await viewElementMap.viewOnReady();
      await viewElementScene.viewOnReady();
      // Load the operator's dependencies and add event listeners
      await geodesicBufferOperator.load();

      viewElementMap.addEventListener("arcgisViewPointerMove", (event) => {
        if (bufferEnabled) {
          createBuffer(event.detail, viewElementMap.view);
        }
      });

      viewElementScene.addEventListener("arcgisViewPointerMove", (event) => {
        if (bufferEnabled) {
          createBuffer(event.detail, viewElementScene.view);
        }
      });

      viewElementMap.addEventListener("arcgisViewKeyDown", (event) => {
        keyDownListener(event.detail);
      });

      viewElementScene.addEventListener("arcgisViewKeyDown", (event) => {
        keyDownListener(event.detail);
      });

      console.log("geodesicBufferOperator dependencies and event listeners loaded.");

      // *****  HELPER FUNCTIONS ***** //

      /**
       * Stops propagation on the given event and constructs a point for
       * buffering.
       *
       * @param {Object} event - Event object containing XY screen coordinates.
       * @param {MapView | SceneView} view - View instance from which the point was obtained.
       */
      const createBuffer = (event, view) => {
        // prevent further propagation of the current event bubbling up the event chain.
        // in this case, it will prevent default `drag` event behavior for the MapView
        // which is to move around the view by dragging the pointer.
        event.stopPropagation();

        // convert screen coordinates to map coordinates
        const point = view.toMap(event);

        if (point) {
          bufferPoint(point);
        }
      };

      /**
       * Buffers the given point by 500 kilometers.
       *
       * @param {esri/geometry/Point} point - A point instance to buffer.
       */
      const bufferPoint = (point) => {
        // removes z-values from the point when taken from a SceneView.
        // geometry operators do not support 3D geometries.
        point.hasZ = false;
        point.z = undefined;

        if (pointLayer.graphics.length === 0) {
          pointLayer.add(
            new Graphic({
              geometry: point,
              symbol: pointSymbol,
            }),
          );
        } else {
          const graphic = pointLayer.graphics.getItemAt(0);
          graphic.geometry = point;
        }

        const buffer = geodesicBufferOperator.execute(point, 500, { unit: "kilometers" });

        if (bufferLayer.graphics.length === 0) {
          bufferLayer.add(
            new Graphic({
              geometry: buffer,
              symbol: polySymbol,
            }),
          );
        } else {
          const graphic = bufferLayer.graphics.getItemAt(0);
          graphic.geometry = buffer;
        }
      };

      /**
       * When the b key is tapped, then buffering is enabled.
       * @param {Object} event - The event object associated with the
       *   key-down event.
       */
      function keyDownListener(event) {
        const keyInput = event.key;
        bufferEnabled = keyInput === "b" && !bufferEnabled;
        document.getElementById("mode").textContent = bufferEnabled ? "navigation" : "buffering";
      }
    </script>
  </body>
</html>