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

  1. To get started, either complete the Display a map tutorial or .

Set the API key

To access ArcGIS services, you need an API key.

  1. Go to your dashboard to get an API key.

  2. In CodePen, set the apiKey to your key, so it can be used to access basemap layer and location services.

        
    Change line
    1
    2
    3
    4
    esriConfig.apiKey = "YOUR_API_KEY";
    const map = new Map({
      basemap: "arcgis-topographic" // Basemap layer service
    });
    

Set HTML

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

                                                                                                                                                                                                                 
    Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    <html>
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
        <title>Get length and area</title>
        <style>
          html,
          body,
          #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.21/esri/themes/light/main.css">
      <script src="https://js.arcgis.com/4.21/"></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,
    
              center: [-10, 30],
              zoom: 3,
            const scalebar = new ScaleBar({
              view: view,
              unit: "metric"
            view.ui.add(scalebar, "bottom-right");
            const graphicsLayer = new 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
            view.ui.add(sketch, "top-right");
            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
            view.when(() => {
            sketch.on("update", (e) => {
              const geometry = e.graphics[0].geometry;
              if (e.state === "start") {
              if (e.state === "complete") {
                graphicsLayer.remove(graphicsLayer.graphics.getItemAt(0));
                measurements.innerHTML = null;
              if (
                (e.toolEventInfo.type === "scale-stop" ||
                  e.toolEventInfo.type === "reshape-stop" ||
                  e.toolEventInfo.type === "move-stop")
            function getArea(polygon) {
              const geodesicArea = geometryEngine.geodesicArea(polygon, "square-kilometers");
              const planarArea = geometryEngine.planarArea(polygon, "square-kilometers");
              "<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");
                "<b>Geodesic length</b>:  " + geodesicLength.toFixed(2) + " km" + " |   <b>Planar length</b>: " + planarLength.toFixed(2) + "  km";
            function switchType(geom) {
              switch (geom.type) {
                case "polygon":
                  break;
                case "polyline":
                  break;
                default:
                  console.log("No value found");
          });
        </script>
      </head>
      <body>
        <div id="viewDiv">
    
          <div id="measurements" class="esri-widget">
    
        </div>
      </div>
      </body>
    </html>

Add modules

  1. In the require statement, add the modules.

    The ArcGIS API for JavaScript uses AMD modules. The require function is used to load modules so they can be used in the main function. It's important to keep the module references and function parameters in the same order.

                                                                                                                                                                                                                 
    Add line.Add line.Add line.Add line.Add line.Change lineChange lineChange lineChange lineChange line
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    <html>
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
        <title>Get length and area</title>
        <style>
          html,
          body,
          #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.21/esri/themes/light/main.css">
      <script src="https://js.arcgis.com/4.21/"></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,
    
              center: [-10, 30],
              zoom: 3,
            const scalebar = new ScaleBar({
              view: view,
              unit: "metric"
            view.ui.add(scalebar, "bottom-right");
            const graphicsLayer = new 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
            view.ui.add(sketch, "top-right");
            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
            view.when(() => {
            sketch.on("update", (e) => {
              const geometry = e.graphics[0].geometry;
              if (e.state === "start") {
              if (e.state === "complete") {
                graphicsLayer.remove(graphicsLayer.graphics.getItemAt(0));
                measurements.innerHTML = null;
              if (
                (e.toolEventInfo.type === "scale-stop" ||
                  e.toolEventInfo.type === "reshape-stop" ||
                  e.toolEventInfo.type === "move-stop")
            function getArea(polygon) {
              const geodesicArea = geometryEngine.geodesicArea(polygon, "square-kilometers");
              const planarArea = geometryEngine.planarArea(polygon, "square-kilometers");
              "<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");
                "<b>Geodesic length</b>:  " + geodesicLength.toFixed(2) + " km" + " |   <b>Planar length</b>: " + planarLength.toFixed(2) + "  km";
            function switchType(geom) {
              switch (geom.type) {
                case "polygon":
                  break;
                case "polyline":
                  break;
                default:
                  console.log("No value found");
        </script>
      </head>
      <body>
        <div id="viewDiv">
    
          <div id="measurements" class="esri-widget">
    
        </div>
      </div>
      </body>
    </html>

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.

  1. Change the center to and zoom levels for the view.

                                                                                                                                                                                                                 
    Change lineChange line
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    <html>
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
        <title>Get length and area</title>
        <style>
          html,
          body,
          #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.21/esri/themes/light/main.css">
      <script src="https://js.arcgis.com/4.21/"></script>
        <script>
          require([
            "esri/config",
            "esri/Map",
            "esri/views/MapView",
            "esri/widgets/ScaleBar",
            "esri/widgets/Sketch",
            "esri/Graphic",
            "esri/layers/GraphicsLayer",
            "esri/geometry/geometryEngine",
          ], (
            Map,
          ) => {
            esriConfig.apiKey = "YOUR_API_KEY";
            const map = new Map({
              basemap: "arcgis-topographic", // Basemap layer service
            const view = new MapView({
              container: "viewDiv",
              map: map,
    
              center: [-10, 30],
              zoom: 3,
    
            });
            const scalebar = new ScaleBar({
              view: view,
              unit: "metric"
            view.ui.add(scalebar, "bottom-right");
            const graphicsLayer = new 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
            view.ui.add(sketch, "top-right");
            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
            view.when(() => {
            sketch.on("update", (e) => {
              const geometry = e.graphics[0].geometry;
              if (e.state === "start") {
              if (e.state === "complete") {
                graphicsLayer.remove(graphicsLayer.graphics.getItemAt(0));
                measurements.innerHTML = null;
              if (
                (e.toolEventInfo.type === "scale-stop" ||
                  e.toolEventInfo.type === "reshape-stop" ||
                  e.toolEventInfo.type === "move-stop")
            function getArea(polygon) {
              const geodesicArea = geometryEngine.geodesicArea(polygon, "square-kilometers");
              const planarArea = geometryEngine.planarArea(polygon, "square-kilometers");
              "<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");
                "<b>Geodesic length</b>:  " + geodesicLength.toFixed(2) + " km" + " |   <b>Planar length</b>: " + planarLength.toFixed(2) + "  km";
            function switchType(geom) {
              switch (geom.type) {
                case "polygon":
                  break;
                case "polyline":
                  break;
                default:
                  console.log("No value found");
        </script>
      </head>
      <body>
        <div id="viewDiv">
    
          <div id="measurements" class="esri-widget">
    
        </div>
      </div>
      </body>
    </html>
  2. Create a scalebar and set the view parameter to the view. Specify the unit as metric.

                                                                                                                                                                                                                 
    Add line.Add line.Add line.Add line.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    <html>
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
        <title>Get length and area</title>
        <style>
          html,
          body,
          #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.21/esri/themes/light/main.css">
      <script src="https://js.arcgis.com/4.21/"></script>
        <script>
          require([
            "esri/config",
            "esri/Map",
            "esri/views/MapView",
            "esri/widgets/ScaleBar",
            "esri/widgets/Sketch",
            "esri/Graphic",
            "esri/layers/GraphicsLayer",
            "esri/geometry/geometryEngine",
          ], (
            Map,
          ) => {
            esriConfig.apiKey = "YOUR_API_KEY";
            const map = new Map({
              basemap: "arcgis-topographic", // Basemap layer service
            const view = new MapView({
              container: "viewDiv",
              map: map,
              center: [-10, 30],
              zoom: 3,
    
            });
    
            const scalebar = new ScaleBar({
              view: view,
              unit: "metric"
            });
    
            view.ui.add(scalebar, "bottom-right");
            const graphicsLayer = new 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
            view.ui.add(sketch, "top-right");
            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
            view.when(() => {
            sketch.on("update", (e) => {
              const geometry = e.graphics[0].geometry;
              if (e.state === "start") {
              if (e.state === "complete") {
                graphicsLayer.remove(graphicsLayer.graphics.getItemAt(0));
                measurements.innerHTML = null;
              if (
                (e.toolEventInfo.type === "scale-stop" ||
                  e.toolEventInfo.type === "reshape-stop" ||
                  e.toolEventInfo.type === "move-stop")
            function getArea(polygon) {
              const geodesicArea = geometryEngine.geodesicArea(polygon, "square-kilometers");
              const planarArea = geometryEngine.planarArea(polygon, "square-kilometers");
              "<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");
                "<b>Geodesic length</b>:  " + geodesicLength.toFixed(2) + " km" + " |   <b>Planar length</b>: " + planarLength.toFixed(2) + "  km";
            function switchType(geom) {
              switch (geom.type) {
                case "polygon":
                  break;
                case "polyline":
                  break;
                default:
                  console.log("No value found");
        </script>
      </head>
      <body>
        <div id="viewDiv">
    
          <div id="measurements" class="esri-widget">
    
        </div>
      </div>
      </body>
    </html>
  3. Add the scalebar to the bottom-right of the view.

                                                                                                                                                                                                                 
    Add line.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    <html>
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
        <title>Get length and area</title>
        <style>
          html,
          body,
          #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.21/esri/themes/light/main.css">
      <script src="https://js.arcgis.com/4.21/"></script>
        <script>
          require([
            "esri/config",
            "esri/Map",
            "esri/views/MapView",
            "esri/widgets/ScaleBar",
            "esri/widgets/Sketch",
            "esri/Graphic",
            "esri/layers/GraphicsLayer",
            "esri/geometry/geometryEngine",
          ], (
            Map,
          ) => {
            esriConfig.apiKey = "YOUR_API_KEY";
            const map = new Map({
              basemap: "arcgis-topographic", // Basemap layer service
            const view = new MapView({
              container: "viewDiv",
              map: map,
              center: [-10, 30],
              zoom: 3,
    
            });
    
            const scalebar = new ScaleBar({
              view: view,
              unit: "metric"
            });
    
            view.ui.add(scalebar, "bottom-right");
            const graphicsLayer = new 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
            view.ui.add(sketch, "top-right");
            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
            view.when(() => {
            sketch.on("update", (e) => {
              const geometry = e.graphics[0].geometry;
              if (e.state === "start") {
              if (e.state === "complete") {
                graphicsLayer.remove(graphicsLayer.graphics.getItemAt(0));
                measurements.innerHTML = null;
              if (
                (e.toolEventInfo.type === "scale-stop" ||
                  e.toolEventInfo.type === "reshape-stop" ||
                  e.toolEventInfo.type === "move-stop")
            function getArea(polygon) {
              const geodesicArea = geometryEngine.geodesicArea(polygon, "square-kilometers");
              const planarArea = geometryEngine.planarArea(polygon, "square-kilometers");
              "<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");
                "<b>Geodesic length</b>:  " + geodesicLength.toFixed(2) + " km" + " |   <b>Planar length</b>: " + planarLength.toFixed(2) + "  km";
            function switchType(geom) {
              switch (geom.type) {
                case "polygon":
                  break;
                case "polyline":
                  break;
                default:
                  console.log("No value found");
        </script>
      </head>
      <body>
        <div id="viewDiv">
    
          <div id="measurements" class="esri-widget">
    
        </div>
      </div>
      </body>
    </html>
  4. Run the app to verify the change in the center and zoom level. The scalebar should appear at the bottom of the view.

Add the Sketch widget

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

  1. Create a graphicsLayer to add a GraphicsLayer to the map.

                                                                                                                                                                                                                 
    Add line.Add line.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    <html>
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
        <title>Get length and area</title>
        <style>
          html,
          body,
          #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.21/esri/themes/light/main.css">
      <script src="https://js.arcgis.com/4.21/"></script>
        <script>
          require([
            "esri/config",
            "esri/Map",
            "esri/views/MapView",
            "esri/widgets/ScaleBar",
            "esri/widgets/Sketch",
            "esri/Graphic",
            "esri/layers/GraphicsLayer",
            "esri/geometry/geometryEngine",
          ], (
            Map,
          ) => {
            esriConfig.apiKey = "YOUR_API_KEY";
            const map = new Map({
              basemap: "arcgis-topographic", // Basemap layer service
            const view = new MapView({
              container: "viewDiv",
              map: map,
              center: [-10, 30],
              zoom: 3,
            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
            view.ui.add(sketch, "top-right");
            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
            view.when(() => {
            sketch.on("update", (e) => {
              const geometry = e.graphics[0].geometry;
              if (e.state === "start") {
              if (e.state === "complete") {
                graphicsLayer.remove(graphicsLayer.graphics.getItemAt(0));
                measurements.innerHTML = null;
              if (
                (e.toolEventInfo.type === "scale-stop" ||
                  e.toolEventInfo.type === "reshape-stop" ||
                  e.toolEventInfo.type === "move-stop")
            function getArea(polygon) {
              const geodesicArea = geometryEngine.geodesicArea(polygon, "square-kilometers");
              const planarArea = geometryEngine.planarArea(polygon, "square-kilometers");
              "<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");
                "<b>Geodesic length</b>:  " + geodesicLength.toFixed(2) + " km" + " |   <b>Planar length</b>: " + planarLength.toFixed(2) + "  km";
            function switchType(geom) {
              switch (geom.type) {
                case "polygon":
                  break;
                case "polyline":
                  break;
                default:
                  console.log("No value found");
        </script>
      </head>
      <body>
        <div id="viewDiv">
    
          <div id="measurements" class="esri-widget">
    
        </div>
      </div>
      </body>
    </html>
  2. 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.

                                                                                                                                                                                                                 
    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.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    <html>
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
        <title>Get length and area</title>
        <style>
          html,
          body,
          #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.21/esri/themes/light/main.css">
      <script src="https://js.arcgis.com/4.21/"></script>
        <script>
          require([
            "esri/config",
            "esri/Map",
            "esri/views/MapView",
            "esri/widgets/ScaleBar",
            "esri/widgets/Sketch",
            "esri/Graphic",
            "esri/layers/GraphicsLayer",
            "esri/geometry/geometryEngine",
          ], (
            Map,
          ) => {
            esriConfig.apiKey = "YOUR_API_KEY";
            const map = new Map({
              basemap: "arcgis-topographic", // Basemap layer service
            const view = new MapView({
              container: "viewDiv",
              map: map,
              center: [-10, 30],
              zoom: 3,
            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
              }
            });
    
            view.ui.add(sketch, "top-right");
            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
            view.when(() => {
            sketch.on("update", (e) => {
              const geometry = e.graphics[0].geometry;
              if (e.state === "start") {
              if (e.state === "complete") {
                graphicsLayer.remove(graphicsLayer.graphics.getItemAt(0));
                measurements.innerHTML = null;
              if (
                (e.toolEventInfo.type === "scale-stop" ||
                  e.toolEventInfo.type === "reshape-stop" ||
                  e.toolEventInfo.type === "move-stop")
            function getArea(polygon) {
              const geodesicArea = geometryEngine.geodesicArea(polygon, "square-kilometers");
              const planarArea = geometryEngine.planarArea(polygon, "square-kilometers");
              "<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");
                "<b>Geodesic length</b>:  " + geodesicLength.toFixed(2) + " km" + " |   <b>Planar length</b>: " + planarLength.toFixed(2) + "  km";
            function switchType(geom) {
              switch (geom.type) {
                case "polygon":
                  break;
                case "polyline":
                  break;
                default:
                  console.log("No value found");
        </script>
      </head>
      <body>
        <div id="viewDiv">
    
          <div id="measurements" class="esri-widget">
    
        </div>
      </div>
      </body>
    </html>
  3. Add the sketch widget to the top-right of the view.

                                                                                                                                                                                                                 
    Add line.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    <html>
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
        <title>Get length and area</title>
        <style>
          html,
          body,
          #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.21/esri/themes/light/main.css">
      <script src="https://js.arcgis.com/4.21/"></script>
        <script>
          require([
            "esri/config",
            "esri/Map",
            "esri/views/MapView",
            "esri/widgets/ScaleBar",
            "esri/widgets/Sketch",
            "esri/Graphic",
            "esri/layers/GraphicsLayer",
            "esri/geometry/geometryEngine",
          ], (
            Map,
          ) => {
            esriConfig.apiKey = "YOUR_API_KEY";
            const map = new Map({
              basemap: "arcgis-topographic", // Basemap layer service
            const view = new MapView({
              container: "viewDiv",
              map: map,
              center: [-10, 30],
              zoom: 3,
            const scalebar = new ScaleBar({
              view: view,
              unit: "metric"
            view.ui.add(scalebar, "bottom-right");
            const graphicsLayer = new 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
              }
            });
    
            view.ui.add(sketch, "top-right");
            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
            view.when(() => {
            sketch.on("update", (e) => {
              const geometry = e.graphics[0].geometry;
              if (e.state === "start") {
              if (e.state === "complete") {
                graphicsLayer.remove(graphicsLayer.graphics.getItemAt(0));
                measurements.innerHTML = null;
              if (
                (e.toolEventInfo.type === "scale-stop" ||
                  e.toolEventInfo.type === "reshape-stop" ||
                  e.toolEventInfo.type === "move-stop")
            function getArea(polygon) {
              const geodesicArea = geometryEngine.geodesicArea(polygon, "square-kilometers");
              const planarArea = geometryEngine.planarArea(polygon, "square-kilometers");
              "<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");
                "<b>Geodesic length</b>:  " + geodesicLength.toFixed(2) + " km" + " |   <b>Planar length</b>: " + planarLength.toFixed(2) + "  km";
            function switchType(geom) {
              switch (geom.type) {
                case "polygon":
                  break;
                case "polyline":
                  break;
                default:
                  console.log("No value found");
        </script>
      </head>
      <body>
        <div id="viewDiv">
    
          <div id="measurements" class="esri-widget">
    
        </div>
      </div>
      </body>
    </html>
  4. Add the measurements element to the view to display the measurements when you draw a geometry.

                                                                                                                                                                                                                 
    Add line.Add line.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    <html>
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
        <title>Get length and area</title>
        <style>
          html,
          body,
          #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.21/esri/themes/light/main.css">
      <script src="https://js.arcgis.com/4.21/"></script>
        <script>
          require([
            "esri/config",
            "esri/Map",
            "esri/views/MapView",
            "esri/widgets/ScaleBar",
            "esri/widgets/Sketch",
            "esri/Graphic",
            "esri/layers/GraphicsLayer",
            "esri/geometry/geometryEngine",
          ], (
            Map,
          ) => {
            esriConfig.apiKey = "YOUR_API_KEY";
            const map = new Map({
              basemap: "arcgis-topographic", // Basemap layer service
            const view = new MapView({
              container: "viewDiv",
              map: map,
              center: [-10, 30],
              zoom: 3,
            const scalebar = new ScaleBar({
              view: view,
              unit: "metric"
            view.ui.add(scalebar, "bottom-right");
            const graphicsLayer = new 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
            view.ui.add(sketch, "top-right");
    
            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
            view.when(() => {
            sketch.on("update", (e) => {
              const geometry = e.graphics[0].geometry;
              if (e.state === "start") {
              if (e.state === "complete") {
                graphicsLayer.remove(graphicsLayer.graphics.getItemAt(0));
                measurements.innerHTML = null;
              if (
                (e.toolEventInfo.type === "scale-stop" ||
                  e.toolEventInfo.type === "reshape-stop" ||
                  e.toolEventInfo.type === "move-stop")
            function getArea(polygon) {
              const geodesicArea = geometryEngine.geodesicArea(polygon, "square-kilometers");
              const planarArea = geometryEngine.planarArea(polygon, "square-kilometers");
              "<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");
                "<b>Geodesic length</b>:  " + geodesicLength.toFixed(2) + " km" + " |   <b>Planar length</b>: " + planarLength.toFixed(2) + "  km";
            function switchType(geom) {
              switch (geom.type) {
                case "polygon":
                  break;
                case "polyline":
                  break;
                default:
                  console.log("No value found");
        </script>
      </head>
      <body>
        <div id="viewDiv">
    
          <div id="measurements" class="esri-widget">
    
        </div>
      </div>
      </body>
    </html>
  5. 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.

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