ArcGIS JS API 4.34 – Selecting existing graphics using Sketch Widget selection tools

[Med-Karim-Rouissi]

Hello everyone,

I am working with the ArcGIS API for JavaScript 4.34 in a React + Vite project (TypeScript).

I would like to know whether it is possible to select existing graphics (for example, points stored in a GraphicsLayer) using the selection tools of the Sketch widget (rectangle / lasso), and if so, what the recommended approach is.

Technical context

• Environment: React + Vite
• API: ArcGIS JS API 4.34
• ES module imports, for example:

import Sketch from "@arcgis/core/widgets/Sketch.js";
import GraphicsLayer from "@arcgis/core/layers/GraphicsLayer.js"; 

• I do not use @ArcGIS/map-components, as my application contains several custom widgets and an existing React architecture.
• The Sketch widget is attached to a dedicated GraphicsLayer used only for drawing.
• The graphics to be selected (points, polygons, etc.) are stored in another existing GraphicsLayer already added to the map.

Goal

• Use the selection tools of the Sketch widget (rectangle / lasso)
• To select existing graphics
• And retrieve the selected features (IDs or graphics) in order to update React state

What I have observed

• The "create" and "update" events work correctly to retrieve the drawn geometry.

• The documentation indicates that "selection-change" can be accessed via event.toolEventInfo within the "update" event, but:

  • TypeScript does not allow listening to "selection-change" directly using sketch.on(...)

  • The exact expected workflow for selecting already existing graphics is not fully clear

• I am not sure whether:

  1. The Sketch widget can directly handle the selection of external graphics

  2. Or if the intended approach is to use the drawn geometry to perform a manual spatial selection (e.g. geometryEngine.intersects, etc.)

Questions

1. Is it officially supported to use the Sketch widget’s selection tools to select existing graphics?

2. If yes, what is the recommended approach (event, property, or workflow)?

3. If not, what is the best practice with the 4.x API to implement this kind of selection while keeping the Sketch widget UX?

Thank you in advance for your help and any examples you may be able to share.

Best regards,

Karim

[VenkataKondepati · Accepted solution]

Hi @Med-Karim-Rouissi,

As per understanding, the Sketch widget cannot directly select graphics in external layers; you must use its "Rectangle" or "Lasso" tools to draw a geometry and then manually find intersections using geometryEngine.intersects() against your target layer. Once the geometry is captured in the create event, you can filter your external graphics, extract their IDs, and update your React state accordingly.

If you haven't already seen the video below, I suggest it.
https://www.youtube.com/watch?v=8eUMNAZ79gg

[Med-Karim-Rouissi]

Thank you for the clarification, Venkat.

I’ll test this approach in my React + Vite setup and will keep you informed of the results.

Thanks again for your help.

Best regards,
Karim

[Med-Karim-Rouissi]

Thank you Venkat, I managed to adapt the odoe.net code to the current version of the JS API for ArcGIS, and to my work environment. I can now draw and select external features with the Sketch widget.

[VenkataKondepati]

Glad to know.