topic Re: Limit drop marker to feature in ArcGIS JavaScript Maps SDK Questions

Limit drop marker to feature

ITApplications — Thu, 19 May 2022 08:13:04 GMT

When zoomed in and the streets feature layer is available we are able to drop a graphic marker anywhere on the map.

I'd like to limit the graphic marker to be only able to drop it onto the feature (street) and not just anywhere on the map.

How can I do that?

This map will be used for reporting potholes on a street and the graphic will serve no other service other than visually showing (along with the popup that appears when you click on the feature) where someone has clicked to report the location of the pothole.

Thanks

Re: Limit drop marker to feature

ReneRubalcava — Thu, 12 May 2022 14:45:02 GMT

You can check the length of the graphics layer collection.

if (!view.graphics.length) { view.graphics.removeAll(); view.graphics.add(graphic); }

Re: Limit drop marker to feature

ITApplications — Thu, 12 May 2022 15:05:22 GMT

Hi Rene

Thank you for your advice. I'm really new to API's and am just trying to learn the ropes, can you please advise where I would pop that in my particular code and is there anything else I'd need to modify?

Thanks in advance.

Re: Limit drop marker to feature

ReneRubalcava — Thu, 12 May 2022 16:14:21 GMT

Here you go, I made a fork of your codepen showing where to add it.

https://codepen.io/odoe/pen/RwQGxbP?editors=0010

Re: Limit drop marker to feature

ITApplications — Fri, 13 May 2022 09:45:46 GMT

Hi Rene

Thank you. I've put the code in exactly as you have and sadly I'm still able to drop a marker anywhere on the map, it's not restricting it to the feature. I have a hit test on the streets feature layer (see example below) and I want to restrict the marker to only be dropped on this.

Your codepen is also still letting me drop a marker outside of this limitation.

I'm thinking, could I put the create graphic event inside the IF part of hittest query? Therefore if the hittest is true allow the graphic to be created, else don't? I've tried to play around that but can't get it to work.
Thanks

Re: Limit drop marker to feature

ReneRubalcava — Fri, 13 May 2022 17:32:51 GMT

Sorry, I misunderstood what you were looking for. You can use a hitTest to check if your layer where you clicked. I would normally do more checks for the layer id or title, but in this case just checking for results is ok.

if (!view.graphics.length) { // check if layer where you clicked // with hitTest view.hitTest(evt).then(({results}) => { if (results.length) { view.graphics.removeAll(); view.graphics.add(graphic); } }); }

I updated the codepen in my previous post.

Re: Limit drop marker to feature

ITApplications — Mon, 16 May 2022 12:24:54 GMT

Hi Rene

Thank you for the update. I can confirm that is has now restricted the graphic to just on the feature layer. There is only one minor tweak that I need to make. On my original codepen (see link in topmost post) the graphic reset itself the next time you clicked on the map. I'd like it to still do this when clicking on the feature layer.

The code to restrict the graphic to only to the feature layer seems to have restricted it to one click only unless you reset it using the reset button I have. I've decided I no longer need the reset button (which I'll remove) and instead would just like the next click to reset and replace the graphic.

How do I please tweak your code to allow this? I'm then there.

Thank you for your valued assistance.

Re: Limit drop marker to feature

ReneRubalcava — Mon, 16 May 2022 15:12:19 GMT

Remove the check on graphics length and that will do it.

Re: Limit drop marker to feature

ITApplications — Wed, 18 May 2022 09:55:11 GMT

Hi Rene

Thanks again for your help. I'm really new to this so your help is really appreciated.

Sorry for asking, I can't seem to edit it without it throwing an error. Which part do I need to remove?

Thanks

Re: Limit drop marker to feature

ReneRubalcava — Wed, 18 May 2022 15:10:54 GMT

// change this if (!view.graphics.length) { // check if layer where you clicked // with hitTest view.hitTest(evt).then(({results}) => { if (results.length) { view.graphics.removeAll(); view.graphics.add(graphic); } }); } // to this // check if layer where you clicked // with hitTest view.hitTest(evt).then(({results}) => { if (results.length) { view.graphics.removeAll(); view.graphics.add(graphic); } });

Re: Limit drop marker to feature

ITApplications — Thu, 19 May 2022 08:12:34 GMT

That's excellent and working well, thank you. I did try taking the top line out but I'd missed taking out the } right at the bottom and that clearly now was my error!

thank you so much for your patience, help and advice.

Re: Limit drop marker to feature

ITApplications — Mon, 31 Oct 2022 14:58:24 GMT

Hi Rene,

This has been working great, I hope you don't mind but I now have a further query with regards to this.

I've been asked to add another layer to the map (the boundary layer) see this pen https://codepen.io/RFletERYC/full/mdKbQEo . When I add this layer the check on the graphics no longer works and I can drop a marker anywhere on the map again, rather than it being restricted to the streets layer.

I note further up the comments you mention further checks such as layer id or title. This sounds like something I now need. How would I add one of those checks in please?

Thanks in advance. Ricky

Re: Limit drop marker to feature

ReneRubalcava — Mon, 31 Oct 2022 15:32:21 GMT

You have a second hitTest in your code there, but aren't passing the options with the target layer in the include.

https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html#hitTest

You do it the first hitTest.

I tested that in your codepen and it works just like before when you do that.

This sample does something similar.

https://developers.arcgis.com/javascript/latest/sample-code/view-hittest/

For your example, this works ok. But note that hitTest was updated at 4.24.

https://developers.arcgis.com/javascript/latest/release-notes/#mapview-and-sceneview-hittest-updates

So depending on how you are using the hitTest results, you may need to check the type like the snippet in the docs.