Kenta Goto Kenta Goto - 3 months ago 30
AngularJS Question

ArcGis 4.0 Javascript API events when pop up shows

I am using the ArcGIS JavaScript API 4.0 in order to display manholes for a given area. I am using our GIS Service to generate a feature layer. However, all the associated photos for that manhole has to be queried independently. My thought was to find an event handler for when the pop up opens and then somehow query the database for those photos and dynamically place the links in the popup template object. Here are the problems:


  1. There isn't a specific event handler for when the pop up opens. Only actions defined in the pop up itself.

  2. Even if there was how would I get the reference of manhole that was clicked by the user?

  3. How would I dynamically add media under the content property of the popup template?



Here is the event handler for when user clicks on the map

view.on("click", function(evt){
console.log("test pop up handler");
});


There are event handlers for when the feature layer is added and for action on the pop up. Here is the pop up template I need to add dynamic media:

var manholeTemplate = new PopupTemplate({
title: 'Smoke : {Label}',
content:
[{
type:"media",
mediaInfos: [{
title: "<b> Related Photos </b>",
type: "image",
value:{
sourceURL: "https://xxxxx.xxxx.getPhoto.php?id=09fsgfsfgE"
}
}]
}]
});

Answer
  1. Use the watching properties feature to watch the "view.popup.visible" property.

  2. Once the popup is open, you can get the feature(s) that the popup is poiting to using popup.features

  3. You can use the attribute name inside curly brackets in your sourceURL string and the API will automatically get the url based on the clicked attributes.

An example map shows the above three items here (open the browser console, and then click on a feature): https://jsfiddle.net/gavinr/1jLmfLLL/

Comments