Popup(Template) of featureLayer conflicting with MapView click events

Question

Hi and a good day to you all,  I am using ArcGIS 4 with Chrome and Node Backend serving data via JSON/XHR

Goal:

* I need to place symbols (showing information via popup when clicked) on the map
* Allow the user to add new symbols if it clicks on unused location where NO symbol is (yet) placed.

Achieved so far:
I have successfully created  a FeatureLayer which renders data I fetch via Ajax this part is working very fine, If I click on a feature I get a correct popup that shows attributes.

So far so good

Problem:
For the "add new Feature" functionality I tried to use MapView.on("click", ...) which uses view.popup.open(Options) etc   also this works well , BUT, now the problem is that  IF I click on an item in the featurelayer the popup due to the featurelayer click is now replaced by the popup generated by MapView.on('click  process

I can I solve this problem?

Regards

Jacob Bogers

JacobBogers · Answer

Sorry I should have closed this question ,
Hi I found the solution in the "code sample section" (link) >> Access features with click events | ArcGIS API for JavaScript 4.1

I still use the FeatureLayer, I have to show to kinds of popups, on his handled by the featurelayer (ReactJS popupTemplate), the other is based if click on the map but do not click on any feature, (this way you can add features dynamicly to the layer)

I just test if I hit a graphic, if i do , I ignore it cause that part is handled by the featurelayer

Many Thanks for taking the effort to post your answer
Jacob

FC_Basson · Answer

Get rid of the featurelayer's popup template and work with the view click event instead. Then you can open the popup on any map click event and still check for any graphic click event with the view.hitTest function as described in this post: https://community.esri.com/message/609517#comment-609517 Your view.click event can work something like this: view.on("click", function(event) { var lat = event.mapPoint.latitude.toFixed(6); var lon = event.mapPoint.longitude.toFixed(6); view.hitTest(event.screenPoint).then(function(response) { view.popup.open({ title: "Map click", location: event.mapPoint, content: "Lat: " + lat + " | Lon: " + lon }); graphics = response.results; if (graphics.length > 0){ var graphic = graphics[0]; view.popup.content += "
Value: " + graphic.graphic.attributes['Value']; } }); });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍