ArcGIS Arcade Pop up expression - How to get a list in the pop up to show colours related to symbology

Question

I'm relatively new to ArcGIS Arcade but I've been trying to learn, with lots of help from Esri lessons and articles - also Copilot assists with some scripts.

Outside of one of the lessons learning criteria, I wanted to display a list of all power plants that intersect with a polygon layer and the counts for those power plants.

I managed to achieve this but then I wanted to take it a step further in associating the name of the type of power plant with the colour of its symbology. I know there is a way to do it by creating a separate expression and adding the expression to the pop up and building a list that way but the code I created it uses a Literal to define the list.

I created a dictionary with the colours that I want the values to return as but I can't figure out how to get it into the last if statement.

var PPInt = Intersects($feature, FeatureSetByName($map, "Global Power Plants", ["fuel1", "country_long"]));

var energyCounts = {
  "Hydro": 0,
  "Oil": 0,
  "Solar": 0,
  "Wind": 0,
  "Gas": 0,
  "Coal": 0,
  "Biomass": 0,
  "Waste": 0,
  "Nuclear": 0,
  "Geothermal": 0
};

var energyColour = {
  "Hydro": "a6cee3",
  "Oil": "e31a1c",
  "Solar": "b2df8a",
  "Wind": "33a02c",
  "Gas": "fb9a99",
  "Coal": "fdbf6f",
  "Biomass": "ff7f00",
  "Waste": "cab2d6",
  "Nuclear": "6a3d9a",
  "Geothermal": "1f78b4"
};

for (var feature in PPInt) {
  var fuelType = feature["fuel1"];
  if (energyCounts[fuelType] != 'undefined') {
    energyCounts[fuelType]++;
  }
}

var popupContent = "";
for (var energySource in energyCounts) {
  var colour = energyColour[energySource];
  popupContent += `${energySource}: ${energyCounts[energySource]} (Colour: ${colour}) ${TextFormatting.NewLine}`;
}

return popupContent;

Answer 1

Use the Arcade element to utilize the html tags necessary to color the different plants (span and style). Note that there is a change in the first loop, which uses the HasKey function instead of checking if a value is 'undefined'.

var PPInt = Intersects($feature, FeatureSetByName($map, "Global Power Plants", ["fuel1", "country_long"]));

var energyCounts = {
  "Hydro": 0,
  "Oil": 0,
  "Solar": 0,
  "Wind": 0,
  "Gas": 0,
  "Coal": 0,
  "Biomass": 0,
  "Waste": 0,
  "Nuclear": 0,
  "Geothermal": 0
};

var energyColour = {
  "Hydro": "a6cee3",
  "Oil": "e31a1c",
  "Solar": "b2df8a",
  "Wind": "33a02c",
  "Gas": "fb9a99",
  "Coal": "fdbf6f",
  "Biomass": "ff7f00",
  "Waste": "cab2d6",
  "Nuclear": "6a3d9a",
  "Geothermal": "1f78b4"
};

for (var feature in PPInt) {
  var fuelType = feature["fuel1"];
  if (HasKey(energyCounts, fuelType)) {
    energyCounts[fuelType]++;
  }
}

var popupContent = "";
for (var energySource in energyCounts) {
  var colour = energyColour[energySource];
  popupContent += `<span style="color:#${colour};">${energySource}: ${energyCounts[energySource]}</span> <br/>`;
}

return { 
    type : 'text', 
    text : popupContent
}