Popup after layer refresh: unable to set features

MichalGasparovic · ‎05-31-2018

Hi,

I have the layer that refreshes periodically, and I've noticed that once I have the popup opened, then its content goes blank, though it still contains some data (features).

So I've tried to implement something that will grab the last ObjectID and after refresh to find it in the data and set the popup features object to that particular feature, but it doesn't appear to be working. See the sample

Popup issue after refresh

In the sample above, the featurelayer refreshes every 5 seconds. You can clearly see how the popup behaves.

Then un-comment last few lines in the that set the popup features parameter to new feature. It seems like it's unable to render it or something else.

Thanks

RobertScheitlin__GISP · ‎06-01-2018

Michal,

The issue is when the layer is refreshed the popup destroys the layer and poupTemplate that the popup.features are attached to. So you have to reset the layer and popupTemplate for the popups features:

<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <!--
  ArcGIS API for JavaScript, https://js.arcgis.com
  For more information about the intro-popuptemplate sample, read the original sample description at developers.arcgis.com.
  https://developers.arcgis.com/javascript/latest/intro-popuptemplate/index.html
  -->
  <title>Intro to PopupTemplate - 4.7</title>

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

  <link rel="stylesheet" href="https://js.arcgis.com/4.7/esri/css/main.css">
  <script src="https://js.arcgis.com/4.7/"></script>

  <script>
    let lastPopupFeatureData = null;
    let feats = null;

    require([
      "esri/Map",
      "esri/layers/FeatureLayer",
      "esri/views/MapView",
      "esri/core/watchUtils",
      "dojo/domReady!"
    ], function(
      Map,
      FeatureLayer,
      MapView,
      watchUtils
    ) {

      // Create the map
      var map = new Map({
        basemap: "gray"
      });

      // Create the MapView
      var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-73.950, 40.702],
        zoom: 11
      });

      /*************************************************************
       * The PopupTemplate content is the text that appears inside the
       * popup. {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. The
       * fieldInfos property is an array of objects (each object representing
       * a field) that is use to format number fields and customize field
       * aliases in the popup and legend.
       **************************************************************/

      var template = { // autocasts as new PopupTemplate()
        title: "Marriage in NY, Zip Code: {ZIP}",
        content: [{
          // It is also possible to set the fieldInfos outside of the content
          // directly in the popupTemplate. If no fieldInfos is specifically set
          // in the content, it defaults to whatever may be set within the popupTemplate.
          type: "fields",
          fieldInfos: [{
            fieldName: "MARRIEDRATE",
            label: "Married %",
            visible: true
          }, {
            fieldName: "MARRIED_CY",
            label: "People Married",
            visible: true,
            format: {
              digitSeparator: true,
              places: 0
            }
          }, {
            fieldName: "NEVMARR_CY",
            label: "People that Never Married",
            visible: true,
            format: {
              digitSeparator: true,
              places: 0
            }
          }, {
            fieldName: "DIVORCD_CY",
            label: "People Divorced",
            visible: true,
            format: {
              digitSeparator: true,
              places: 0
            }
          }]
        }]
      };

      // Reference the popupTemplate instance in the
      // popupTemplate property of FeatureLayer
      var featureLayer = new FeatureLayer({
        url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/NYCDemographics1/FeatureServer/0",
        outFields: ["*"],
        popupTemplate: template,
      });
      map.add(featureLayer);

      // Grab the view
      view.whenLayerView(featureLayer)
        .then((layerView) => {
          // The layerview for the layer store as the layer parameter. I don't know why ESRI complicated this
          console.log('I have layer view here...', layerView);
          featureLayer.view = layerView;
          setInterval(() => {
            featureLayer.refresh();
          }, 5000);
        })
        .catch((error) => {
          console.error(error);
        });

      featureLayer.on('refresh', () => {
        if(view.popup.visible){
          feats = view.popup.features;
        }
        feats.forEach((feat) => {
          feat.layer = featureLayer;
          feat.popupTemplate = featureLayer.popupTemplate;
        })
        if (view.popup.visible && feats) {
          view.popup.open({
            features: feats
          });
        }
      });
    });
  </script>
</head>

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

</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

MichalGasparovic · ‎06-04-2018

Thanks Rob.

So I thought the trick was in re-setting the popupTemplate ... your solution works on that sample but not in my application which I found surprising. I've found some workaround as well and that is to clear the features by providing the empty array and then resetting the features. What I also find lacking is the ability of the popup to source the 'z' value from the elevation layer. It does it initially, but after refresh I need to set it myself.

KellyHutchins · ‎06-01-2018

You can refresh the layer using the refreshInterval property instead of setTimeout and layer.refresh.

   var featureLayer = new FeatureLayer({
                url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/NYCDemographics1/FeatureServer/0",
                outFields: ["*"],
                popupTemplate: template,
                refreshInterval: 0.1
            });‍‍‍‍‍‍

But that said I think the popup content should be updated after refresh. Can you contact Esri Technical Support‌ and log an issue?

MichalGasparovic · ‎06-01-2018

Hi Kelly, I've noticed the refresh interval, but the funny part is that that doesn't trigger the refresh 'event'. What method shall I be listening 'on' or porperty to 'watch' so K can be notified once the features are reloaded while using the 'refreshInterval'?

How do I raise an issue? Via the support or is just another post type I shall compose here ...

Thank you

RobertScheitlin__GISP · ‎06-02-2018

Michal,

I noticed the same thing. The refresh event is NOT fired.