Limit drop marker to feature

[ITApplications]

Hi

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

[ReneRubalcava]

You can check the length of the graphics layer collection.

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

[ITApplications]

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.

[ReneRubalcava]

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

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

[ITApplications]

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

[ReneRubalcava]

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.

[ITApplications]

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.

[ReneRubalcava]

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

[ITApplications]

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

[ReneRubalcava · Accepted solution]

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