topic Popup contents function not being called in ArcGIS JavaScript Maps SDK Questions

Popup contents function not being called

Abbey_Roelofs — Sat, 11 Dec 2021 07:06:22 GMT

I'm trying to use a function to populate part of the contents of my popup, similar to the example shown here, but the function isn't being called--the popup just displays whatever field I attempt to pass to the function. My popup template code (very much simplified at this point, to determine if it's even being called) is shown below. I would expect the popup to contain the text "Put this in the popup " and the species field value, but all I'm seeing is the species field value. If I change 'species1' to another field in the content section, that field's value will be shown instead.

Any thoughts on what could be going wrong here would be much appreciated.

let getHeaderExpr = function(value,key,data){
    let textStr = "Put this in the popup " + value;
    return textStr;
};

let specimenPopup = new PopupTemplate({
    title: "Species: {species1}", 
    content: "{species1:getHeaderExpr}" 
});

layer = new FeatureLayer({
    url: layerPointsUrl,
    visible: false,
    renderer: specimenRenderer,
    popupTemplate: specimenPopup
});

Re: Popup contents function not being called

RobertScheitlin__GISP — Sat, 11 Dec 2021 07:06:25 GMT

Abbey,

The difference is that your function is scoped locally and in the sample you are referring to the function is scoped Globally (line 2):

<script>
    var populationChange;
    require([
        "esri/Map",
        "esri/views/MapView",
        "esri/layers/Layer"
      ],
      function(
        Map, MapView, Layer
      ) {
        var map = new Map({
          basemap: "dark-gray"
        });

...

populationChange = function(value, key, data) {
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Yours needs to mimic this:

<script>
    let getHeaderExpr;
    require([
        "esri/Map",
...

getHeaderExpr = function(value,key,data){‍‍‍‍‍‍‍‍

Re: Popup contents function not being called

Abbey_Roelofs — Mon, 25 Mar 2019 14:57:54 GMT

Thanks for your quick response. Unfortunately, I did initially try it with global scoping and had the same results. Any other thoughts?

Re: Popup contents function not being called

RobertScheitlin__GISP — Sat, 11 Dec 2021 07:06:28 GMT

Abbey,

There must be something else wrong in your code then as this works fine for me:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>PopupTemplate - use functions to set content - 4.10</title>

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

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

  <script>
    var getHeaderExpr;
    require([
        "esri/Map",
        "esri/views/MapView",
        "esri/layers/Layer"
      ],
      function(
        Map, MapView, Layer
      ) {
        var map = new Map({
          basemap: "dark-gray"
        });

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

        Layer.fromPortalItem({
            portalItem: { // autocasts as new PortalItem()
              id: "e8f85b4982a24210b9c8aa20ba4e1bf7"
            }
          })
          .then(function(layer) {
            // add the layer to the map
            map.add(layer);

            // create a new popupTemplate for the layer
            // format the numeric field values using out of the box
            // NumberFormat function. Call populationChange() custom
            // function to calculate percent change for the county.
            var popupTemplate = { // autocasts as new PopupTemplate()
              title: "Population in {NAME}",
              content: "{POP2013:getHeaderExpr}"
            };

            layer.popupTemplate = popupTemplate;

            getHeaderExpr = function(value, key, data) {
              let textStr = "Put this in the popup " + value;
              return textStr;
            }
          });
      });
  </script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍