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?
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.