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

## Steps

### Create a new pen

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

You need an access token with the correct privileges to access the location services used in this tutorial.

1. Go to the Create an API key tutorial and create an API key with the following privilege(s):
• Privileges
• Location services > Basemaps
2. 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
});``````

### 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.
Expand
Use dark colors for code blocks
``````      #viewDiv {
margin: 0;
height: 100%;
width: 100%;
}

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

</style>

<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>
<body>
<div id="viewDiv">

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

1. In the `require` statement, add the modules.

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.

1. 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
2. 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
3. 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"
});

``````
Expand
4. 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.

1. 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"
});

const graphicsLayer = new GraphicsLayer();

``````
Expand
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.

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

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,
},
}
});

``````
Expand
3. 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,
},
}
});

``````
Expand
4. 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");
``````
Expand
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`.

Expand
Use dark colors for code blocks
``````        const measurements = document.getElementById("measurements");

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

}

``````
Expand
2. 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
3. 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
4. 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
5. 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.

1. 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");

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
2. 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");

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
});

``````
Expand
3. `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

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.

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