nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Invoke sketch widget tool from button click?

GWReid

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.

Find more posts tagged with

Accepted answers

rscheitlin

@GWReid

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

All comments

GWReid

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

rscheitlin

@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.

GWReid

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>

rscheitlin

@GWReid

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

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.