Stack Overflow 39133352

Working on issue from http://stackoverflow.com/questions/39133352/arcgis-4-0-javascript-api-events-when-pop-up-shows#

by Alex Azuero

HTML

<script src="https://js.arcgis.com/4.0/init.js"></script>
<link rel="stylesheet" href="https://js.arcgis.com/4.0/esri/css/main.css">
<script type="text/javascript">
  var dojoConfig = {
    async: true
  };

</script>
<div id="viewDiv"></div>

CSS

html,
body,
#viewDiv {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
}

JavaScript

require([
    "esri/Map",
    "esri/views/SceneView",
    "esri/views/MapView",
    "esri/layers/FeatureLayer",
    "esri/geometry/Extent",
    "esri/PopupTemplate",
    "dojo/domReady!"
  ],
  function(Map, SceneView, MapView, FeatureLayer, Extent, PopupTemplate) {
    var map = new Map({
      basemap: "streets"
    });

    var viewOptions = {
      container: "viewDiv",
      map: map
    };

    // 2D:
    var view = new MapView(viewOptions);

    view.extent = new Extent({
      "xmin": -8931079.817275323,
      "ymin": 3140286.585998413,
      "xmax": -8928786.70642696,
      "ymax": 3141474.942922434,
      "spatialReference": {
        "wkid": 102100
      }
    });

    var fl = new FeatureLayer({
      url: "https://geoweb.martin.fl.us/arcgis/rest/services/MapDrawer/MapServer/9"
    });
    fl.maxScale = 0;
    fl.minScale = 0;
    map.add(fl);

    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={OBJECTID}" // use an attribute dynamically in the URL
          }
        }]
      }]
    });
    fl.popupTemplate = manholeTemplate;
    
    // watch the visible property of the popup to run your own code when the popup opens
    var handle = view.watch('popup.visible', function(newValue, oldValue, property, object) {
      if(newValue) {
      	console.log('opened popup! selected:')
        console.log('watch', view.popup.features); // get the currently selected feature(s)
      }
    });
  });