Community
Select to view content in your preferred language

Invoke sketch widget tool from button click?

2167
4
Jump to solution
05-18-2021 07:26 AM
GWReid
by
Emerging Contributor
‎05-18-2021 07:26 AM

I'd like to invoke a sketch widget tool from a button click as opposed to the widget itself.  Can this be done?

 

const sketch = new Sketch({
        layer: graphicsLayer,
        view: view,
        creationMode: 'update',
        availableCreateTools: ['rectangle'],
        defaultUpdateOptions: {
            enableRotation: false,
            toggleToolOnClick: false
        },
        visibleElements: {
            selectionTools: {
              "lasso-selection": false,
              "rectangle-selection": false,
            },
            undoRedoMenu: false
        }
    });
    view.ui.add(sketch, "top-right");

 

 

Thanks.

Tags (1)
0 Kudos
1 Solution

Accepted Solutions
4 Replies
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎05-18-2021 07:29 AM

@GWReid 

  I do this using the SketchViewModel instead of the Sketch widget. 
https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Sketch-SketchViewModel.ht...

 

GWReid
by
Emerging Contributor
‎05-19-2021 09:24 AM

Thanks for the hint Robert.  I've throw together some code, but I'm missing the drawing on the map part....

<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>Sketch update validation | Sample | ArcGIS API for JavaScript 4.19</title>

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

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }

      #instructions {
        width: 225px;
        background: #fff;
        padding: 10px;
      }
      
      .esri-button {
        display: inline-block;
        width: 75px;
      }

      .relative {
        padding: 10px;
        position: relative;
        margin: 10px;
      }
    </style>

    <script>
      require([
        "esri/widgets/Sketch/SketchViewModel",
        "esri/Graphic",
        "esri/Map",
        "esri/views/MapView",
        "esri/layers/GraphicsLayer",
        "esri/geometry/Polygon",
        "esri/widgets/Expand"
      ], function(
        SketchViewModel,
        Graphic,
        Map,
        MapView,
        GraphicsLayer,
        Polygon,
        Expand
      ) {
        let sketchViewModel,
          instructionsExpand;

        const graphicsLayer = new GraphicsLayer();

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

        const view = new MapView({
          container: "viewDiv",
          map: map,
          zoom: 6,
          center: [-82, 35]
        });

        setUpInstructions();

        view.when(function() {
           sketchViewModel = new SketchViewModel({
            view: view,
            layer: graphicsLayer,
            polygonSymbol: {
              type: "simple-fill",
              color: "rgba(255,0,0, 0.8)",
              style: "solid",
              outline: {
                color: "black",
                width: 1
              }
            }
          });

          sketchViewModel.on("create", function(evt) {
            graphicsLayer.add(evt.graphic);
          });
        });

        const drawBtn = document.getElementById("draw");
        drawBtn.addEventListener("click", function() {
          console.log("draw button");
          graphicsLayer.removeAll();
          sketchViewModel.create("polygon");
        });

        const resetBtn = document.getElementById("reset");
        resetBtn.addEventListener("click", function() {
          console.log("reset button");
          graphicsLayer.removeAll();
        });

        function setUpInstructions() {
          const sampleInstructions = document.getElementById("instructions");
          instructionsExpand = new Expand({
            expandIconClass: "esri-icon-question",
            expandTooltip: "How to use this sample",
            expanded: true,
            view: view,
            content: sampleInstructions
          });
          view.ui.add(instructionsExpand, "top-left");

          // hide the instructions expand widget when the view becomes focused
          view.watch("focused", function(newValue, oldValue, property, object) {
            if (newValue) {
              instructionsExpand.expanded = false;
            }
          });
        }
      });
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
    <div id="instructions" class="esri-widget">
      <div class="relative">
        <button class="esri-button" id="draw">Draw</button>
        <button class="esri-button" id="reset">Reset</button>
      </div>
    </div>
  </body>
</html>

  

0 Kudos
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎05-19-2021 10:25 AM

@GWReid  The code you provided works fine. Once you click on the Draw button then you just click on the map to start drawing the polygon.

0 Kudos
GWReid
by
Emerging Contributor
‎05-20-2021 04:14 AM

Oops, I was thinking "rectangle", but had "polygon" in there.  Thanks Robert. 

0 Kudos