This example shows how you can use an ArcGIS Server geometry service to measure polygon areas and perimeter lengths in your Web application. When you draw a polygon with the mouse, the Draw toolbar captures the polygon's geometry. This sample passes the geometry to the GeometryService.areasAndLengths() method.
Because this map uses a projected coordinate system that is appropriate for calculating lengths and areas, no projection of the polygon is necessary. If your map is in a geographic coordinate system and you need to project the polygon before measuring, see the sample Measure distances to learn how to perform the projection with the geometry service.
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <title>Measure Polygon Area and Perimeter</title> <link rel="stylesheet" href="https://js.arcgis.com/3.46/esri/css/esri.css"> <style> html, body, #mapDiv { height: 100%; margin: 0; padding: 0; width: 100%; } #info { bottom: 20px; color: #444; height: auto; font-family: arial; left: 20px; margin: 5px; padding: 10px; position: absolute; text-align: left; width: 200px; z-index: 40; } .label { display: inline-block; width: 4em; } </style> <script src="https://js.arcgis.com/3.46/"></script> <script> require(["dojo/dom", "dojo/_base/lang", "dojo/json", "esri/config", "esri/map", "esri/graphic", "esri/geometry/Geometry", "esri/geometry/Extent", "esri/SpatialReference", "esri/tasks/GeometryService", "esri/tasks/AreasAndLengthsParameters", "esri/toolbars/draw", "esri/symbols/SimpleFillSymbol"], function(dom, lang, json, esriConfig, Map, Graphic, Geometry, Extent, SpatialReference, GeometryService, AreasAndLengthsParameters, Draw, SimpleFillSymbol){ var map = new Map("mapDiv", { basemap: "topo-vector", center: [-122.778, 45.483], zoom: 15 }); map.on("load", function() { var tb = new Draw(map); tb.on("draw-end", lang.hitch(map, getAreaAndLength)); tb.activate(Draw.FREEHAND_POLYGON); }); var geometryService = new GeometryService("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/Geometry/GeometryServer"); geometryService.on("areas-and-lengths-complete", outputAreaAndLength); function getAreaAndLength(evtObj) { var map = this, geometry = evtObj.geometry; map.graphics.clear(); var graphic = map.graphics.add(new Graphic(geometry, new SimpleFillSymbol())); //setup the parameters for the areas and lengths operation var areasAndLengthParams = new AreasAndLengthsParameters(); areasAndLengthParams.lengthUnit = GeometryService.UNIT_FOOT; areasAndLengthParams.areaUnit = GeometryService.UNIT_ACRES; areasAndLengthParams.calculationType = "geodesic"; geometryService.simplify([geometry], function(simplifiedGeometries) { areasAndLengthParams.polygons = simplifiedGeometries; geometryService.areasAndLengths(areasAndLengthParams); }); } function outputAreaAndLength(evtObj) { var result = evtObj.result; console.log(json.stringify(result)); dom.byId("area").innerHTML = result.areas[0].toFixed(3) + " acres"; dom.byId("length").innerHTML = result.lengths[0].toFixed(3) + " feet"; } }); </script> </head> <body> <div id="mapDiv"></div> <div id="info" class="esriSimpleSlider"> Draw a polygon to be used as input to the geometryService's areasAndLengths() operation. <br><br> <span class="label">Area:</span> <span id="area"></span> <br> <span class="label">Length:</span> <span id="length"></span> </div> </body> </html>