JSAPI 4.12 Sketch Widget Area

RichardRhone · ‎10-23-2019

Is there a way to calculate and display the area of the polygon sketched?

RobertScheitlin__GISP · ‎10-24-2019

Richard,

Here is a sample that labels the area when the sketch is complete.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>Sketch widget - 4.13</title>

    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.13/esri/themes/light/main.css"
    />
    <script src="https://js.arcgis.com/4.13/"></script>

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>
    <script>
      require([
        "esri/widgets/Sketch",
        "esri/Map",
        "esri/layers/GraphicsLayer",
        "esri/views/MapView",
        "esri/geometry/geometryEngine",
        "esri/Graphic"
      ], function(Sketch, Map, GraphicsLayer, MapView, geometryEngine, Graphic) {
        const layer = new GraphicsLayer();

        const map = new Map({
          basemap: "streets",
          layers: [layer]
        });

        const view = new MapView({
          container: "viewDiv",
          map: map,
          zoom: 5,
          center: [90, 45]
        });

        const sketch = new Sketch({
          layer: layer,
          view: view
        });
        
        // Listen to sketch widget's create event.
        sketch.on("create", function(event) {
          // check if the create event's state has changed to complete indicating
          // the graphic create operation is completed.
          if (event.state === "complete" && event.graphic && (event.graphic.geometry.type === 'polygon' || event.graphic.geometry.type === 'extent')) {
            //event.graphic.geometry;
            var area = geometryEngine.geodesicArea(event.graphic.geometry, 'square-miles');
            console.log(area);
            var textSymbol = {
              type: "text",  // autocasts as new TextSymbol()
              color: "white",
              haloColor: "black",
              haloSize: "1px",
              text: area.toFixed(2)+' SqMi.',
              xoffset: 3,
              yoffset: 3,
              font: {  // autocasts as new Font()
                size: 12,
                weight: "bold"
              }
            };
            var gra = new Graphic({
              geometry: event.graphic.geometry,
              symbol: textSymbol
            });
            sketch.layer.add(gra);
          }
        });

        view.ui.add(sketch, "top-right");
      });
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
  </body>
</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

RobertScheitlin__GISP · ‎10-24-2019

Richard,

Here is a sample that labels the area when the sketch is complete.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>Sketch widget - 4.13</title>

    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.13/esri/themes/light/main.css"
    />
    <script src="https://js.arcgis.com/4.13/"></script>

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>
    <script>
      require([
        "esri/widgets/Sketch",
        "esri/Map",
        "esri/layers/GraphicsLayer",
        "esri/views/MapView",
        "esri/geometry/geometryEngine",
        "esri/Graphic"
      ], function(Sketch, Map, GraphicsLayer, MapView, geometryEngine, Graphic) {
        const layer = new GraphicsLayer();

        const map = new Map({
          basemap: "streets",
          layers: [layer]
        });

        const view = new MapView({
          container: "viewDiv",
          map: map,
          zoom: 5,
          center: [90, 45]
        });

        const sketch = new Sketch({
          layer: layer,
          view: view
        });
        
        // Listen to sketch widget's create event.
        sketch.on("create", function(event) {
          // check if the create event's state has changed to complete indicating
          // the graphic create operation is completed.
          if (event.state === "complete" && event.graphic && (event.graphic.geometry.type === 'polygon' || event.graphic.geometry.type === 'extent')) {
            //event.graphic.geometry;
            var area = geometryEngine.geodesicArea(event.graphic.geometry, 'square-miles');
            console.log(area);
            var textSymbol = {
              type: "text",  // autocasts as new TextSymbol()
              color: "white",
              haloColor: "black",
              haloSize: "1px",
              text: area.toFixed(2)+' SqMi.',
              xoffset: 3,
              yoffset: 3,
              font: {  // autocasts as new Font()
                size: 12,
                weight: "bold"
              }
            };
            var gra = new Graphic({
              geometry: event.graphic.geometry,
              symbol: textSymbol
            });
            sketch.layer.add(gra);
          }
        });

        view.ui.add(sketch, "top-right");
      });
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
  </body>
</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

RichardRhone · ‎10-29-2019

Thanks Robert.

Is there a way to determine when the delete feature (trash icon) is clicked? I would need this to clear all features as currently, on click doesnt clear the labels

RobertScheitlin__GISP · ‎10-29-2019

Richard,

Change (line 80):

view.graphics.add(gra);‍‍

to:

sketch.layer.add(gra);‍‍

Don't forget to mark this question as answered by clicking on the "Mark Correct" link on the reply that answered your question.

RichardRhone · ‎10-29-2019

Robert,

That works. However, if i draw a polygon then select it and click delete features, it deletes the text. i have to select and delete again to delete polygon. That's why I wanted to know when delete features button click so I could do a removeAll

ehpsauce · ‎07-05-2021

For whatever reason, the code answers here are being squashed into a single line on both Chrome and Edge. If it helps someone who comes across this page in the future, here's @RobertScheitlin__GISP 's code in plain text to preserve positioning & lines.

< !DOCTYPE html>

<html>

<head>

<title> Sketch widget - 4.13 </title>

<style>

html,

body,

#viewDiv {

padding: 0;

margin: 0;

height: 100%;

width: 100%;

}

</style>

require(["esri/widgets/Sketch", "esri/Map", "esri/layers/GraphicsLayer", "esri/views/MapView", "esri/geometry/geometryEngine", "esri/Graphic"], function (Sketch, Map, GraphicsLayer, MapView, geometryEngine, Graphic) {

const layer = new GraphicsLayer();

const map = new Map({

basemap: "streets",

layers: [layer]

});

const view = new MapView({

container: "viewDiv",

map: map,

zoom: 5,

center: [90, 45]

});

const sketch = new Sketch({

layer: layer,

view: view

});

// Listen to sketch widget's create event.

sketch.on("create", function (event) {

// check if the create event's state has changed to complete indicating

// the graphic create operation is completed.

if (event.state === "complete" && event.graphic && (event.graphic.geometry.type === 'polygon' || event.graphic.geometry.type === 'extent')) {

//event.graphic.geometry;

var area = geometryEngine.geodesicArea(event.graphic.geometry, 'square-miles');

console.log(area);

var textSymbol = {

type: "text", // autocasts as new TextSymbol()

color: "white",

haloColor: "black",

haloSize: "1px",

text: area.toFixed(2) + ' SqMi.',

xoffset: 3,

yoffset: 3,

font: { // autocasts as new Font()

size: 12,

weight: "bold"

}

};

var gra = new Graphic({

geometry: event.graphic.geometry,

symbol: textSymbol

});

sketch.layer.add(gra);

}

});

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

});

</script>

</head>

<body>

</body>

</html>