Evaluating Dynamic Variables in ArcGIS JavaScript Popup Templates and Feature Layers

Question

I'm using ArcGIS JavaScript to create popup templates on my map. It's going great. However, I'm struggling to evaluate variables that I set outside the popupTemplate or FeatureLayer calls. For example, this works quite well. Everything is static.

  const layerOne = new FeatureLayer({
    id: "feature_layer_id",  
    url: "https://services3.arcgis.com/myFeatureServer/0", 
    popupTemplate: { 
      title: `A Title Goes Here`,
      content: `<table>
          <tr>
            <td><img class="esri-popup__custom-image imageTrim" width="75" src="{expression/logo_url}" /></td>
          </tr>             
        </table>`, 
      expressionInfos: [
        {
          name: "logo_url",
          title: "Logo URL",
          expression: `return "http://some.fully.qualified.url/path/image.png";`
          }
        ],
      }, 
    renderer: someRendererObj, 
    visible: false  
    });

The problem happens when I try to make it dynamic. For example, how about making the logo URL dynamic, such as:

expression: `return "http://some.fully.qualified.url/path/image-" + randomJSVariable + ".png";`

Variable randomJSVariable is set elsewhere in my JS, and could be referenced as window.randomJSVariable.

In this case the expression is not evaluated, and the img renders as broken. Can someone make a suggestion as to how I can fix this?

Bob · Accepted Answer · 2022-05-27 01:15:21Z

1

If you want to use JS variables, pass a function to the content property instead of using expressionInfos:

content: (evt) => {
    // the variable "evt" contains info on the clicked feature, possibly useful below
    return `<table>
      <tr>
        <td><img class="esri-popup__custom-image imageTrim" width="75" src="http://some.fully.qualified.url/path/image-${randomJSVariable}.png" /></td>
      </tr>             
    </table>`;
},

See the documentation for more information:

function - Content may be defined with a JavaScript function that returns any of the above-mentioned elements. This is useful when your popup requires additional processing or functionality than what is provided with the four content types listed above.

edited May 27, 2022 at 1:15

answered May 21, 2022 at 2:07

Bob

4564 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

JRomeo Over a year ago

Thanks for the reply. This works, but only once. If the variable value changes, the popup does not. I'm working on a method to destroy and recreate the popup each time the value is changed. Will post it here as the answer if it works.

Bob Over a year ago

Ah, good point - in that case you want to use a function. I'll update the answer.

Collectives™ on Stack Overflow

Evaluating Dynamic Variables in ArcGIS JavaScript Popup Templates and Feature Layers

1 Answer 1

2 Comments

Your Answer

Collectives™ on Stack Overflow

Evaluating Dynamic Variables in ArcGIS JavaScript Popup Templates and Feature Layers

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related