topic Re: Popups in ArcGIS v4.23 vs 4.11 in ArcGIS JavaScript Maps SDK Questions

Popups in ArcGIS v4.23 vs 4.11

TimDietz — Fri, 22 Sep 2023 20:39:15 GMT

Our app contained the following code snippet when configured to use 4.11:

popup.on('trigger-action', (event) => {
const featureLocation = this.mapView.toMap(event.target.screenLocation);
}

We are now moving to 4.23 and the only event attribute is 'action', not 'target'. I can't quite figure out how to do it the new way. It looks like I might be able to do:

event.action.get(<something>)

but I don't know what the equivalent to 'screenLocation' would be.

Can somebody help with this and either point me to where I might find the event.action object or paste the equivalent statement?

TIA.

Tim

Re: Popups in ArcGIS v4.23 vs 4.11

JeffreyThompson2 — Fri, 22 Sep 2023 21:04:44 GMT

The event referred to in the trigger-action is the triggering of the popup action, not the standard browser click event. https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Popup.html#event-trigger-action

Since you have a popup open, you can use its selectedFeature property to get the get the geometry of the that the popup is connected to and then go to that map point. Something like...

mapView.goTo(popup.selectedFeature)

Re: Popups in ArcGIS v4.23 vs 4.11

JoelBennett — Fri, 22 Sep 2023 23:41:31 GMT

You can also do this as well:

popup.on("trigger-action", function(target, event) { const featureLocation = target.location; }.bind(this, popup));

Re: Popups in ArcGIS v4.23 vs 4.11

TimDietz — Wed, 04 Oct 2023 17:16:16 GMT

As an FYI, your example will not work. I tried it and apparently, there is only one argument associated with the function and it is the event. When I put the two in the console, the target param contained the same elements as an event, and the event param was null.

Still searching for a solution.

Re: Popups in ArcGIS v4.23 vs 4.11

JoelBennett — Wed, 04 Oct 2023 17:43:16 GMT

I've found it to be working properly. In the sandbox for the "Popup actions" sample, you can change the code in the script tag beginning on line 27 to the following:

require([ "esri/Map", "esri/layers/FeatureLayer", "esri/views/MapView", "esri/geometry/geometryEngine", "esri/core/reactiveUtils", "esri/widgets/Popup" ], (Map, FeatureLayer, MapView, geometryEngine, reactiveUtils, Popup) => { // Create the Map const map = new Map({ basemap: "gray-vector" }); // Create the MapView const view = new MapView({ container: "viewDiv", map: map, center: [-117.08, 34.1], zoom: 11, popup: new Popup({}) }); /************************************************************* * The PopupTemplate content is the text that appears inside the * popup. Bracketed {fieldName} can be used to reference the value * of an attribute of the selected feature. HTML elements can be * used to provide structure and styles within the content. **************************************************************/ // Add this action to the popup so it is always available in this view const measureThisAction = { title: "Measure Length", id: "measure-this", image: "https://developers.arcgis.com/javascript/latest/sample-code/popup-actions/live/Measure_Distance16.png" }; const template = { // autocasts as new PopupTemplate() title: "Trail run", content: "{name}", actions: [measureThisAction] }; const featureLayer = new FeatureLayer({ url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/TrailRuns/FeatureServer/0", popupTemplate: template }); map.add(featureLayer); // Execute each time the "Measure Length" is clicked function measureThis() { const geom = view.popup.selectedFeature.geometry; const initDistance = geometryEngine.geodesicLength(geom, "miles"); const distance = parseFloat( Math.round(initDistance * 100) / 100 ).toFixed(2); view.popup.content = view.popup.selectedFeature.attributes.name + "<div style='background-color:DarkGray;color:white'>" + distance + " miles.</div>"; } // Event handler that fires each time an action is clicked. reactiveUtils.on( () => view.popup, "trigger-action", (event) => { // Execute the measureThis() function if the measure-this action is clicked if (event.action.id === "measure-this") { measureThis(); } } ); view.popup.on("trigger-action", function(target, event) { const featureLocation = target.location; console.info(featureLocation.x + ", " + featureLocation.y); console.info(event.action.title); console.info(target); console.info(event); }.bind(this, view.popup)); });

In the code above, changes to the original are found on lines 6-8, 19-20, and (primarily) 77-84. After the sample is refreshed, clicking on a feature and then the "Measure Length" action in the popup produces the following in the console, showing the expected output:

If I had to guess as to why it isn't working for you, perhaps the call to bind was not made correctly.

Re: Popups in ArcGIS v4.23 vs 4.11

TimDietz — Wed, 04 Oct 2023 19:27:00 GMT

Thanks for the reply. I believe your 'this' and my 'this' are two different object. What does your 'this' refer to?

Re: Popups in ArcGIS v4.23 vs 4.11

JoelBennett — Wed, 04 Oct 2023 19:35:19 GMT

In the case of the sample, "this" will refer to the window object since that's the context in which the call to bind occurs. Whatever you pass in the first argument of the bind function will be whatever "this" refers to inside the bound function.

Re: Popups in ArcGIS v4.23 vs 4.11

TimDietz — Wed, 04 Oct 2023 19:52:36 GMT

Thank you, Sir! That did it. Appreciate the quick responses.