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; } } }

View OnClick handler not working when SketchViewModel Create method is called

ZaidOdeh

I have a button that is for feature selection, whenever SketchViewModel.Create("Rectangle") is called, the View.On("Click") will not register clicks.

the SketchViewModel drawing mode is "freehand" and I want it to stay that way, at the same time I want the tool to register single clicks even when the Create("Rectangle") method is called. Sort of like how Arcmap selection tool works.

I want the users to be able to Either draw a rectangle and get the features that intersect, or a single click and query features that are in the location of the click.

Any ideas on how to do this ?

Encuentra más publicaciones etiquetadas con

Accepted answers

UndralBatsukh

I think I follow what you are saying. I updated the codepen to at least reflect what I think you are asking for: https://codepen.io/U_B_U/pen/poLMEdW?editors=1000

You need to use the immediate-click event instead of the click event to see if user clicked once or dragging the mouse.

All comments

ZaidOdeh

That's it thank you so much.

UndralBatsukh

I think I follow what you are saying. I updated the codepen to at least reflect what I think you are asking for: https://codepen.io/U_B_U/pen/poLMEdW?editors=1000

You need to use the immediate-click event instead of the click event to see if user clicked once or dragging the mouse.

ZaidOdeh

@UndralBatsukh Thanks for your reply,
I think I am not being clear, or my explanation of the problem is confusing.
I don't have a problem with querying features using the rectangle. In fact it is already implemented in my code. I am trying to enhance the selection processes so that I dont have to add an extra button just to select by single clicks on the map.

The problem here is when you use the sketchviewmodel.create("rectangle") method, the view.on("click") will not handle clicks on the map, so I want to find a way to handle clicks after sketchviewmodel.create("rectangle") is called.

In your example in code pen, You cannot select features without drawing a rectangle, if you try to single click the map without drawing, a predefined rectangle big enough to select multiple features will be drawn, and undesired features within will be selected.
That is not the behaviour I want, I want users to decide on what to do when the selection button is clicked. Be able to either click on a feature, query the location of click point, or the user can hold the click, drag, release to draw a rectangle and query the ones inside of it.
So when I created the SketchViewModel, I specified the Mode to be "FreeHand" which will not draw a predefined rectangle on single clicks, users will have to click, drag the mouse and release to draw the rectangle.
So again my problem is that I am unable to handle single clicks on the map to query the feature/s, while the SketchViewModel.Create() is called.
Do you get the picture ? If you remember, Arcmap does this behaviour, and it is terrific from a user experience. The select button lets you single click without drawing a rectangle, or you can draw a rectangle and select whats in it.

Hope this clears the confusion

UndralBatsukh

You don't need to listen to view's click event if you are using SketchViewModel. Instead you should listen to SketchViewModel's create event. This is what the sample does. You can repurpose the sample for your needs as it uses SketchViewModel. I am not sure what you mean by select features without querying. You need to query features to highlight the features that intersect with your rectangle. That is what the sample does. In any case, you should be able to move your code that runs in response to view.click event to the SketchViewModel's create event.

 // Once user is done drawing a rectangle on the map
// use the rectangle to select features on the map and table
sketchViewModel.on("create", async (event) => {
 if (event.state === "complete") {
   // rectangle is created
   // remove the rectangle and select features
 }
});

Here a codepen that highlight (which you must query features that intersect your geometry/rectangle) features that intersect a rectangle and it removes the rectangle from the view once highlight is complete: https://codepen.io/U_B_U/pen/poLMEdW?editors=100

ZaidOdeh

Thanks for the example, but this not what i am looking for. In the example you sent, you select features via SketchModel.Create("rectangle") and then query the features within. What if I just want to select a feature that I click on the map without drawing the rectangle. Basically I am trying to create a button that will let me select either by dragging and drawing the rectangle or by single click on a feature.

Usually I use view.on("click,fn) and it works as long as the sketchviewmodel.Create method isn't called. For my purpose I want to be able to draw the rectangle and select features, or select with a single click on the map.

UndralBatsukh

Hi there,

This sample does what you are asking for: https://developers.arcgis.com/javascript/latest/sample-code/highlight-features-by-geometry/

-Undral

Únete a la Conversación

Los miembros registrados pueden publicar, seguir actualizaciones y más. ¿Nuevo aquí? Regístrate gratis.

Enlaces Rápidos

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