Find length and area

Learn how to calculate the length and area of geometries.

You can calculate the length of a line and determine the area of a polygon using the geometryEngine. The measurement depends on the coordinate system (or spatial reference) defined for the geometry. If the geometry's spatial reference is Web Mercator (3857) or WGS84 (4326), you would use geodesic calculations to take into account the curvature of the Earth. If the spatial reference is something different from Web Mercator (3857) or WGS84 (4326), you would use planar measurements based on Euclidean distances.

In this tutorial, you will use the Sketch widget to draw graphics on the view and the geometryEngine to calculate both geodesic and planar lengths and areas to see the difference between the two measurements.

Prerequisites

Steps

Create a new pen

To get started, either complete the Display a map 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

In CodePen, set esriConfig.apiKey to your API key..

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

To learn about other ways to get an access token, go to Types of authentication.

Set HTML

Create a measurements div to display the results of a calculation and add some CSS styling to set the font size and margins.

Expand
Use dark colors for code blocks
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }

      #measurements {
        padding: 4px 8px;
        font-size: 16px;
        bottom: 15px;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%,-50%);
      }

    </style>

  <link rel="stylesheet" href="https://js.arcgis.com/4.30/esri/themes/light/main.css">
  <script src="https://js.arcgis.com/4.30/"></script>
    <script>
      require([
        "esri/config",
        "esri/Map",
        "esri/views/MapView",

        "esri/widgets/ScaleBar",
        "esri/widgets/Sketch",
        "esri/Graphic",
        "esri/layers/GraphicsLayer",
        "esri/geometry/geometryEngine",

      ], (
        esriConfig,
        Map,
        MapView,

      ) => {
        esriConfig.apiKey = "YOUR_ACCESS_TOKEN";

        const map = new Map({
          basemap: "arcgis/topographic", // basemap styles service
        });

        const view = new MapView({
          container: "viewDiv",
          map: map,

      });
    </script>
  </head>
  <body>
    <div id="viewDiv">

      <div id="measurements" class="esri-widget">
Expand

Add modules

In the require statement, add the modules.

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. To learn more about the API's different modules visit the Overview Guide page.

Expand
Use dark colors for code blocks
  <link rel="stylesheet" href="https://js.arcgis.com/4.30/esri/themes/light/main.css">
  <script src="https://js.arcgis.com/4.30/"></script>
    <script>
      require([
        "esri/config",
        "esri/Map",
        "esri/views/MapView",

        "esri/widgets/ScaleBar",
        "esri/widgets/Sketch",
        "esri/Graphic",
        "esri/layers/GraphicsLayer",
        "esri/geometry/geometryEngine",

      ], (
        esriConfig,
        Map,
        MapView,

        ScaleBar,
        Sketch,
        Graphic,
        GraphicsLayer,
        geometryEngine,

      ) => {
        esriConfig.apiKey = "YOUR_ACCESS_TOKEN";

        const map = new Map({
          basemap: "arcgis/topographic", // basemap styles service
        });

        const view = new MapView({
          container: "viewDiv",
          map: map,

Expand

Recenter and add a scalebar

The ScaleBar widget will display a scale bar on the map. You can choose either metric or imperial values. For example, if you specify metric, it will show either kilometers or meters depending on the scale.

Change the center to and zoom levels for the view.

Expand
Use dark colors for code blocks
        const view = new MapView({
          container: "viewDiv",
          map: map,

          center: [-10, 30],
          zoom: 3,

        });
Expand

Create a scalebar and set the view parameter to the view. Specify the unit as metric.

Expand
Use dark colors for code blocks
          center: [-10, 30],
          zoom: 3,

        });

        const scalebar = new ScaleBar({
          view: view,
          unit: "metric"
        });

Expand

Add the scalebar to the bottom-right of the view.

Expand
Use dark colors for code blocks
          center: [-10, 30],
          zoom: 3,

        });

        const scalebar = new ScaleBar({
          view: view,
          unit: "metric"
        });

        view.ui.add(scalebar, "bottom-right");
Expand

Run the app to verify the change in the center and zoom level. The scalebar should appear at the bottom of the view.

The Sketch widget provides UI that allows you to create and update graphics in the MapView.

Create a graphicsLayer to add a GraphicsLayer to the map.

Expand
Use dark colors for code blocks
        const scalebar = new ScaleBar({
          view: view,
          unit: "metric"
        });

        view.ui.add(scalebar, "bottom-right");

        const graphicsLayer = new GraphicsLayer();
        map.add(graphicsLayer);

Expand

Create a sketch widget. Set the layer parameter to the graphicsLayer. Any geometry drawn using the widget will be added to the graphicsLayer. Limit the features on the widget by setting the availableCreateTools to only show polyline, polygon, and rectangle options and disabling other default settings found in the visibleElements and selectionTools properties.

Expand
Use dark colors for code blocks
        const scalebar = new ScaleBar({
          view: view,
          unit: "metric"
        });

        view.ui.add(scalebar, "bottom-right");

        const graphicsLayer = new GraphicsLayer();
        map.add(graphicsLayer);

        const sketch = new Sketch({
          layer: graphicsLayer,
          view: view,
          availableCreateTools: ["polyline", "polygon", "rectangle"],
          creationMode: "update",
          updateOnGraphicClick: true,
          visibleElements: {
            createTools: {
              point: false,
              circle: false
            },
            selectionTools:{
              "lasso-selection": false,
              "rectangle-selection":false,
            },
            settingsMenu: false,
            undoRedoMenu: false
          }
        });

Expand

Add the sketch widget to the top-right of the view.

Expand
Use dark colors for code blocks
        const sketch = new Sketch({
          layer: graphicsLayer,
          view: view,
          availableCreateTools: ["polyline", "polygon", "rectangle"],
          creationMode: "update",
          updateOnGraphicClick: true,
          visibleElements: {
            createTools: {
              point: false,
              circle: false
            },
            selectionTools:{
              "lasso-selection": false,
              "rectangle-selection":false,
            },
            settingsMenu: false,
            undoRedoMenu: false
          }
        });

        view.ui.add(sketch, "top-right");
Expand

Add the measurements element to the view to display the measurements when you draw a geometry.

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

        const measurements = document.getElementById("measurements");
        view.ui.add(measurements, "manual");
Expand

Run the app to verify that the widget appears in the view and that you are able to draw geometries.

Calculate length and area

The geometryEngine allows you to calculate either the planar length/area or geodesic length/area of a geometry. Because the geometries in this application are projected in Web Mercator, it is best practice to use geodesic measurements. However, to visualize the difference between geodesic and planar calculations, measure both when a geometry is drawn.

Create a getArea function that takes a polygon as its parameter. Call the geodesicArea() method and the planarArea() methods to calculate the area of the polygon in square-kilometers.

Expand
Use dark colors for code blocks
        const measurements = document.getElementById("measurements");
        view.ui.add(measurements, "manual");

        function getArea(polygon) {
          const geodesicArea = geometryEngine.geodesicArea(polygon, "square-kilometers");
          const planarArea = geometryEngine.planarArea(polygon, "square-kilometers");

        }

Expand

Append the results of the calculation to the innerHTML of measurements.

Expand
Use dark colors for code blocks
        function getArea(polygon) {
          const geodesicArea = geometryEngine.geodesicArea(polygon, "square-kilometers");
          const planarArea = geometryEngine.planarArea(polygon, "square-kilometers");

          measurements.innerHTML =
          "<b>Geodesic area</b>:  " + geodesicArea.toFixed(2) + " km\xB2" + " |   <b>Planar area</b>: " + planarArea.toFixed(2) + "  km\xB2";

        }
Expand

Create a getLength function that takes a line parameter. Call the geodesicLength and planarLength methods to calculate the length of the line in kilometers.

Expand
Use dark colors for code blocks
          measurements.innerHTML =
          "<b>Geodesic area</b>:  " + geodesicArea.toFixed(2) + " km\xB2" + " |   <b>Planar area</b>: " + planarArea.toFixed(2) + "  km\xB2";

        }

        function getLength(line) {
          const geodesicLength = geometryEngine.geodesicLength(line, "kilometers");
          const planarLength = geometryEngine.planarLength(line, "kilometers");

        }
Expand

Append the results of the geodesic length calculation to the innerHTML of measurements.

Expand
Use dark colors for code blocks
        function getLength(line) {
          const geodesicLength = geometryEngine.geodesicLength(line, "kilometers");
          const planarLength = geometryEngine.planarLength(line, "kilometers");

          measurements.innerHTML =
            "<b>Geodesic length</b>:  " + geodesicLength.toFixed(2) + " km" + " |   <b>Planar length</b>: " + planarLength.toFixed(2) + "  km";

        }
Expand

Create a switch statement that will either call the getArea function or the getLength function depending on whether the geometry is a polygon or a polyline.

Expand
Use dark colors for code blocks
        function getLength(line) {
          const geodesicLength = geometryEngine.geodesicLength(line, "kilometers");
          const planarLength = geometryEngine.planarLength(line, "kilometers");

          measurements.innerHTML =
            "<b>Geodesic length</b>:  " + geodesicLength.toFixed(2) + " km" + " |   <b>Planar length</b>: " + planarLength.toFixed(2) + "  km";

        }

        function switchType(geom) {
          switch (geom.type) {
            case "polygon":
              getArea(geom);
              break;
            case "polyline":
              getLength(geom);
              break;
            default:
              console.log("No value found");
          }
        }
Expand

Create a default graphic to measure

To show the user the way in which to interact with the application, create a default polygon and display its area when the app starts.

Create a polygon. Set the type to polygon and the wkid in the spatialReference property to 3857 (Web Mercator). Create a simplePolygonSymbol to style the graphic.

Expand
Use dark colors for code blocks
        const measurements = document.getElementById("measurements");
        view.ui.add(measurements, "manual");

        const polygon = {
            type: "polygon",
            spatialReference: {
              wkid: 3857,
            },
            rings: [
              [
                [-4508069.082189632, 3599936.936171892],
                [-4508069.082189632, 5478453.343307884],
                [-2629552.6750536393, 5478453.343307884],
                [-2629552.6750536393, 3599936.936171892],
                [-4508069.082189632, 3599936.936171892],
              ],
            ],
          };

          const simplePolygonSymbol = {
            type: "simple-fill",
            outline: {
              color: [200, 0, 0],
              width: 2,
            },
          };

Expand

Create an instance of the Graphic class. Set the geometry and symbol properties to the polygon and simplePolygonSymbol. Add the graphic to the graphicsLayer.

Expand
Use dark colors for code blocks
        const measurements = document.getElementById("measurements");
        view.ui.add(measurements, "manual");

        const polygon = {
            type: "polygon",
            spatialReference: {
              wkid: 3857,
            },
            rings: [
              [
                [-4508069.082189632, 3599936.936171892],
                [-4508069.082189632, 5478453.343307884],
                [-2629552.6750536393, 5478453.343307884],
                [-2629552.6750536393, 3599936.936171892],
                [-4508069.082189632, 3599936.936171892],
              ],
            ],
          };

          const simplePolygonSymbol = {
            type: "simple-fill",
            outline: {
              color: [200, 0, 0],
              width: 2,
            },
          };

          const polygonGraphic = new Graphic({
            geometry: polygon,
            symbol: simplePolygonSymbol
          });

        graphicsLayer.add(polygonGraphic);
Expand

when the view loads, call the update method on the polygonGraphic and call the getArea function based on the geometry of the polygonGraphic.

Expand
Use dark colors for code blocks
        graphicsLayer.add(polygonGraphic);

        view.when(() => {
          sketch.update(polygonGraphic);
          getArea(polygonGraphic.geometry);
        });
Expand

Add an event listener

The settings of the Sketch widget allow you to edit the geometry drawn on the view. Create an event listener to register the different states of the geometry on the update and dynamically measure its area or length.

Create an event listener that listens for changes on the update when you create, resize, or move a graphic. Set the geometry element with the geometry of the first graphic from the event.

Expand
Use dark colors for code blocks
        view.when(() => {
          sketch.update(polygonGraphic);
          getArea(polygonGraphic.geometry);
        });

        sketch.on("update", (e) => {
          const geometry = e.graphics[0].geometry;

        });
Expand

Create conditional statements based on whether the sketch event's state is: start, complete, or in a state of change. For each state, except for complete, call the switchType statement with geometry as its parameter. When the event is complete, remove the graphic from the graphicsLayer and clear the innerHTML.

Expand
Use dark colors for code blocks
        sketch.on("update", (e) => {
          const geometry = e.graphics[0].geometry;

          if (e.state === "start") {
            switchType(geometry);
          }

          if (e.state === "complete") {
            graphicsLayer.remove(graphicsLayer.graphics.getItemAt(0));
            measurements.innerHTML = null;
          }

          if (
            e.toolEventInfo &&
            (e.toolEventInfo.type === "scale-stop" ||
              e.toolEventInfo.type === "reshape-stop" ||
              e.toolEventInfo.type === "move-stop")
          ) {
            switchType(geometry);
          }

        });
Expand

Run the app

In CodePen, run your code to display the map.

When you run the app, you will see a polygon with its calculated geodesic and planar area. You can use the sketch widget to draw other geometries and display their measurements. If you move the geometry, the geodesic measurements will change but the planar measurements will not.

What's next?

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