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

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

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

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

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.

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

``````

### 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
``````        const view = new MapView({
container: "viewDiv",
map: map,

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

});
``````
2. Create a `scalebar` and set the `view` parameter to the `view`. Specify the `unit` as `metric`.

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

});

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

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

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

});

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

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

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

const graphicsLayer = new GraphicsLayer();

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

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

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

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

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

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

const measurements = document.getElementById("measurements");
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`.