JSAPI 4.12 Sketch Widget Area

505
5
Jump to solution
10-23-2019 12:15 PM
RichardRhone
New Contributor III

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

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

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

0 Kudos
5 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

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>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
0 Kudos
RichardRhone
New Contributor III

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

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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.

0 Kudos
RichardRhone
New Contributor III

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

0 Kudos
ehpsauce
New Contributor
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>
        <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 {
                padding0;
                margin0;
                height100%;
                width100%;
            }
        </style>
        <script>
            require(["esri/widgets/Sketch""esri/Map""esri/layers/GraphicsLayer""esri/views/MapView""esri/geometry/geometryEngine""esri/Graphic"], function (SketchMapGraphicsLayerMapViewgeometryEngineGraphic) {
                const layer = new GraphicsLayer();
                const map = new Map({
                    basemap: "streets",
                    layers: [layer]
                });
                const view = new MapView({
                    container: "viewDiv",
                    map: map,
                    zoom: 5,
                    center: [9045]
                });
                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>
0 Kudos