Select by rectangle or by click using ArcGIS JavaScript API

[ZaidOdeh]

0

I have a small button that has one job, select features on the Map. I am using the SketchViewModel class, to create a rectangle. Then use this rectangle to query features that intersect it. The behaviour is hold mouse, drag, release, we now have a rectangle. This is correct since the user will use the mouse to draw the rectangle that will select the features they want.

The problem I am facing is when the user single clicks on the map once the method create("rectangle") is called. The API default behaviour, is to draw a rectangle, large enough to intersect multiple features from a single click on the map.

This is not the correct behaviour that I am looking for. I looked everywhere through the help, as to change this default size of the rectangle but there is no way to change it so that on click will not draw a large rectangle.

How do I resolve this?

 // click button handler
function sketchViewClicked(event) {
   shereSketchModel.create("rectangle");
}
...
...
...

 shereSketchModel.on("create", (event) => {
    if (event.state === "complete") {
      // this polygon will be used to query features that intersect it
      const geometries = polygonGraphicsLayer.graphics.map(function(graphic) {
        return graphic.geometry;
      });
      GeometryEngineAsync.union(geometries.toArray()).then(
        (queryGeometry) => {
          SelectFeatures(queryGeometry);
         
        }
      );  }
  });

[UndralBatsukh · Accepted solution]

Hi there, 

You can set the SkethcViewModel.defaultCreateOptions.mode to freehand or can set the mode when you call create method: 

const sketchViewModel = new SketchViewModel({
  view: view,
  layer: polygonGraphicsLayer,
  defaultCreateOptions: {
    mode: "freehand"
  }
});

Or you can do: 

sketchViewModel.create("rectangle", { mode: "freehand" });

Both options should work in your case.