Hide Table of Contents
View Geometry Service - Calculate geometry sample in sandbox
Geometry Service - Calculate geometry

Description

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.

Code

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

 
         
Show Modal