Using Arcade to Create a Status Graphic

In times of crisis, having a safe and reliable shelter is crucial for the well-being and survival of individuals and communities. Whether it’s a natural disaster, a pandemic, or any other type of emergency, being prepared with the right shelter options can make all the difference.

Let’s say we work for a County Office of Emergency management and we need to provide a web map for decision makers on potential shelter locations. From assessing the location and structural integrity to evaluating capacity and accessibility, there is a lot of evaluation that goes into selecting shelters prior to an emergency. We want to provide a quick way to check on what type of shelters we have and their status as we do a yearly inventory of shelters.

We can use an Arcade pop-up template to achieve this. The Arcade pop-up template is a feature that allows you to customize the content and appearance of pop-up windows in your maps. This allows us to present our data in a visually appealing and informative way to our decision makers.

There are four shelter location categories we will add to the status graphic in the  pop-up:

• Planned – Locations that are being evaluated to make sure they meet all the criteria for a shelter.
• Temporary – Locations that can be used for a short-term event.
• Permanent – Current shelters that can support any duration of event.
• Other – Animal control run shelters used for large-animal housing.

Within our code, we will define the four categories so that when a shelter location is selected on the map, the pop-up status graphic will display the category type in blue, otherwise it will return a grey color, as shown in the graphic below:

We will use an IIF statement to do this. The IIF statement stands for “Immediate If” and allows you to perform different actions based on a condition.

The syntax of the IIF statement is:
IIF(condition, trueValue, falseValue)

So for our example, we will define a variable to use in our IIF statement:
var field = $feature.STATUS
IIF(field == 'Planned', 'background-color:#1987bb', 'background-color:#DDDDDD')

We will then take this code and use it for every shelter type (Planned, Temporary, Permanent, Other). We will use the Add Content section of the pop-up configuration in our web map, select Arcade and enter this code:
var field = $feature.STATUS
var phase1 = IIF(field == 'Planned', 'background-color:#1987bb', 'background-color:#DDDDDD')
var phase2 = IIF(field == 'Temp', 'background-color:#1987bb', 'background-color:#DDDDDD')
var phase3 = IIF(field == 'Perm', 'background-color:#1987bb', 'background-color:#DDDDDD')
var phase4 = IIF(field == 'Other', 'background-color:#1987bb', 'background-color:#DDDDDD')
var template = '<span><b>Phase</b></span><table style=" border-collapse: separate; border-spacing: 6px 4px; width: 100%; table-layout: fixed;"><tbody><tr height="16"><td style="'
+ phase1 + '"></td><td style="'
+ phase2 + '"></td><td style="'
+ phase3 + '"></td><td style="'
+ phase4 + '"></td></tr><tr height="24" style="text-align: center;"><td>Planned</td><td>Temporary</td><td>Permanent</td><td>Other</td></tr></tbody></table>'

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

Arcade is a powerful and versatile expression language that allows you to unlock the full potential of your GIS data. With its ability to manipulate and format data, create dynamic content, and customize the appearance of pop-ups, Arcade offers endless possibilities for enhancing your maps and applications. Whether you’re a seasoned developer or just starting out, incorporating Arcade into your workflows can take your GIS projects to the next level. So why wait? Start exploring the world of Arcade today and unleash the true potential of your spatial data.

Happy Mapping!
Stephanie

 Special thanks to Lisa Berry!

About the author

Stephanie Oliver

Stephanie Oliver is a Senior Instructor that has worked in the GIS industry for over 15 years, much of that in the public sector. She has extensive experience with cartography, transportation, and emergency management. She teaches both Desktop and Enterprise classes.

Connect: