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); } ); } });
Solved! Go to 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.
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.