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