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 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

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 new pen

To get started, either complete the Display a map 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
Change line
esriConfig.apiKey = "YOUR_API_KEY";
const map = new Map({
  basemap: "arcgis-topographic" // Basemap layer service
});

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
Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
      #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.26/esri/themes/light/main.css">
  <script src="https://js.arcgis.com/4.26/"></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_API_KEY";

        const map = new Map({
          basemap: "arcgis-topographic", // Basemap layer 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. For more information on the different types of modules, visit the Introduction to Tooling guide topic.

Expand
Use dark colors for code blocks
Add line.Add line.Add line.Add line.Add line.Change lineChange lineChange lineChange lineChange line
  <link rel="stylesheet" href="https://js.arcgis.com/4.26/esri/themes/light/main.css">
  <script src="https://js.arcgis.com/4.26/"></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_API_KEY";

        const map = new Map({
          basemap: "arcgis-topographic", // Basemap layer 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 non-metric 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
Change lineChange line
        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
Add line.Add line.Add line.Add line.
          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
Add line.
          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
Add line.Add line.
        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
Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
        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
Add line.
        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
Add line.Add line.
        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
Add line.Add line.Add line.Add line.Add line.
        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
Add line.Add line.
        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
Add line.Add line.Add line.Add line.Add line.
          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
Add line.Add line.
        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
Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
        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
Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
        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
Add line.Add line.Add line.Add line.Add line.Add line.
        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