Invoke sketch widget tool from button click?

GWReid — Tue, 18 May 2021 14:26:22 GMT

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.

Re: Invoke sketch widget tool from button click?

RobertScheitlin__GISP — Tue, 18 May 2021 14:29:44 GMT

@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

Re: Invoke sketch widget tool from button click?

GWReid — Wed, 19 May 2021 16:24:29 GMT

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>

Re: Invoke sketch widget tool from button click?

RobertScheitlin__GISP — Wed, 19 May 2021 17:25:03 GMT

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

Re: Invoke sketch widget tool from button click?

GWReid — Thu, 20 May 2021 11:14:02 GMT

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

topic Re: Invoke sketch widget tool from button click? in ArcGIS JavaScript Maps SDK Questions

Invoke sketch widget tool from button click?

Re: Invoke sketch widget tool from button click?

Re: Invoke sketch widget tool from button click?

Re: Invoke sketch widget tool from button click?

Re: Invoke sketch widget tool from button click?