No More Ugly Pop-ups: Create Impactful Pop-ups for your Infrastructure Maps
Utilities: Maximize Your Maps with Dynamic Pop-Ups
Interactive, dynamic maps are essential for making complex data accessible and impactful. Infrastructure data is not only complex, but also critical to maintaining the systems we all rely on. Whether we are dealing with natural gas systems, electric networks, or any other type of infrastructure, these complex networks are composed of countless individual assets that collectively form the entire system.
Why are interactive maps so important? Consider a single valve in a natural gas system: during an emergency, you need to know the status (open or closed) of that valve, and you need that information to be fast and clear. One key feature of impactful maps is the use of feature pop-ups. With a good pop-up, when you click on that valve, you immediately see the right information. In this blog, I will explore a few examples of how you can configure pop-ups in your web maps to fully leverage the wealth of network data maintained by infrastructure organizations.
An Introduction to Pop-Ups
Often when people think of a pop-up on an ArcGIS map, they might imagine the default list of attributes. However, over the last decade pop-ups have evolved and improved to be more flexible than ever. Now you can use ArcGIS Arcade to perform calculations, HTML to display beautiful layouts, and out-of-the-box pop-up elements to add dynamic content like attachments, graphs, or related records to your pop-ups. In this blog, I will explore a few examples specific to the infrastructure industry.
Note: Additional resources and samples for all Arcade/HTML examples are provided at the bottom of the article.
Example One: Maximize Attribute Data
Displaying information in an easily understandable format is the fastest way to improve the impact of pop-ups in your maps. For this first example, let's enhance the default pop-up for gas meters in a natural gas system map:
We can immensely improve the readability and impact of this information by using ArcGIS Arcade and HTML for a more visually appealing pop-up. Organizing the attributes into different sections will make it faster and easier to find important information. Let's dive into how to improve this pop-up using an Arcade Pop-up Element.
1) Add an Arcade Element to the Pop-up.
First, we replace the default Fields List pop-up element with the Arcade pop-up element.
2) Use HTML to format a visually appealing layout.
Next, within the arcade pop-up element you can return HTML formatting. This allows you to create creative and beautiful pop-up elements.
3) Use ArcGIS Arcade to insert attributes or variables.
Lastly, using Arcade within the HTML allows you to add variables or attributes so your pop-up displays dynamic data values. Use this syntax to insert arcade into your HTML: ${add arcade here}.
This allows you to use arcade functions to ensure attributes are formatted correctly. Here are a few examples of helpful arcade functions:
SubtypeName() - returns the subtype label for a feature in a subtype group layer
DomainName() - returns the domain label for a feature instead of the coded value
Text() - can format dates and times into readable strings
With this quick change, we now have a pop-up that is beautiful, quick to understand, and more impactful.
Example Two: Dynamic Pop-Ups
In the previous example, we walked through a visually pleasing pop-up for a natural gas meter. What if we want these pop-ups to be dynamic? Changing the layout or style based on factors like device status or when the last inspection happened? Luckily, Arcade is a powerful tool that allows us to do just that. Let's explore a new example: an emergency valve in a natural gas system. In this example we will do three things:
1) Add a List of Related Inspections.
We can use the Related Records pop-up element to add a list showing all the inspection records related to the particular valve selected. This pop-up element is particularly powerful because it not only displays the related features but also allows you to navigate through the records to interact with each one.
2) Add a dynamic warning if an inspection is overdue.
Oftentimes critical assets – like emergency valves – are inspected every year. Next, let's add an eye-catching warning if the latest related inspection is over a year old. We can use arcade calculations within an arcade pop-up element to create the logic for this warning.
The result is a section within the pop-up that only appears if there has not been an inspection within the last year.
3) Create a dynamic element based on status of the valve (open or closed).
Lastly, this valve data has an attribute indicating if the valve is closed or open. We can use this attribute in the pop-up to add a dynamic valve status section. Similar to above, we can use arcade calculations and insert the results of these calculations in the HTML return of the arcade pop-up element. The result allows you to glance at the pop-up and immediately understand if the valve is open or closed.
With these three updates, we now have a pop-up for emergency valves that changes automatically based on the state of the valve and its related inspections.
Example 3: Spatial Calculations
Arcade in pop-ups is not limited to the data within the single feature you are viewing. You can also leverage information from other layers within the map or from layers shared in your portal. In this last example, let's explore adding spatial calculations to a polygon layer that divides a utility service territory into smaller “grids”.
For each grid, we can use spatial calculations to summarize the assets within that grid. In this case, I want to know:
What is the length of distribution gas pipe in each grid?
How many service meters are in each grid?
To accomplish this goal, we will add an arcade element to the pop-up of the “Service Territory Grids” polygon layer. In this arcade element, we will bring in the “Pipes and Wires” layer and the “Pipeline Devices” layer. We can then use these layers with arcade functions like Intersects(), Intersection(), and Count() to calculate the length of distribution pipe and number of meters within each grid. The full code sample is available at the bottom of the article, so let's skip to the result:
Now you can select any grid on the map and see an on-the-fly calculation of the network assets within that grid.
Note: Keep in mind that the size of your polygons or the number of assets within each polygon can affect the performance of the arcade expression.
In Review
Pop-ups like the ones we explored in this blog can be leveraged across web maps throughout the ArcGIS system, whether you are using your maps on desktop, web, or mobile platforms. Creating dynamic and well-structured pop-ups not only enhances the visual appeal of your maps but also ensures that users quickly receive the most important information. I have covered just a few examples of how dynamic pop-ups can help you maximize your network data. Now it’s your turn - how will you use pop-ups to create impactful maps?
Want help getting started? Below you will find links to additional Esri blogs on configuring pop-ups and code samples from the examples in this blog.
Additional Resources
Pop-Up Product Blogs
Pop-ups Documentation
Code Samples
Example One: Maximize Attribute Information
// This is an example of using HTML to create a formatted pop-up element to display attribute values
return {
type : 'text',
text : `
<!-- Header -->
<div style="background:linear-gradient(to right,#808080,#505050);color:#fff;padding:6px 10px;font-size:18px;font-weight:700;letter-spacing:1px;text-transform:uppercase;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;border-radius:12px;margin-bottom:10px;box-shadow:0 2px 6px rgba(0,0,0,0.08);text-align:center">
${SubtypeName($feature)}: ${DomainName($feature,'assettype')}
</div>
<!-- General Information Block -->
<table style="width:100%; border-collapse: collapse; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; box-shadow: 0 4px 6px rgba(0,0,0,0.1); border-radius: 8px; overflow: hidden;">
<thead>
<tr>
<th colspan="2" style="background: linear-gradient(to right, #808080, #505050); color: white; padding: 6px 8px; text-align: left; font-size: 14px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;">
General Information
</th>
</tr>
</thead>
<tbody>
<tr>
<td style="padding: 4px 8px; width: 40%; background-color: #E8E8E8; border-bottom: 1px solid #DCDCDC; font-weight: 600; color: #505050;">Asset ID</td>
<td style="padding: 4px 8px; background-color: #ffffff; border-bottom: 1px solid #DCDCDC; color: #333333;">${$feature.assetid}</td>
</tr>
<tr>
<td style="padding: 4px 8px; width: 40%; background-color: #E8E8E8; border-bottom: 1px solid #DCDCDC; font-weight: 600; color: #505050;">Regulatory Type</td>
<td style="padding: 4px 8px; background-color: #ffffff; border-bottom: 1px solid #DCDCDC; color: #333333;">${DomainName($feature, 'regulatorytype')}</td>
</tr>
<tr>
<td style="padding: 4px 8px; width: 40%; background-color: #E8E8E8; border-bottom: 1px solid #DCDCDC; font-weight: 600; color: #505050;">Lifecycle Status</td>
<td style="padding: 4px 8px; background-color: #ffffff; border-bottom: 1px solid #DCDCDC; color: #333333;">${DomainName($feature, 'lifecyclestatus')}</td>
</tr>
<tr>
<td style="padding: 4px 8px; width: 40%; background-color: #E8E8E8; border-bottom: 1px solid #DCDCDC; font-weight: 600; color: #505050;">Device Status</td>
<td style="padding: 4px 8px; background-color: #ffffff; border-bottom: 1px solid #DCDCDC; color: #333333;">${DomainName($feature, 'devicestatus')}</td>
</tr>
<tr>
<td style="padding: 4px 8px; width: 40%; background-color: #E8E8E8; border-bottom: 1px solid #DCDCDC; font-weight: 600; color: #505050;">Accessible</td>
<td style="padding: 4px 8px; background-color: #ffffff; border-bottom: 1px solid #DCDCDC; color: #333333;">${DomainName($feature, 'accessible')}</td>
</tr>
<tr>
<td style="padding: 4px 8px; width: 40%; background-color: #E8E8E8; border-bottom: 1px solid #DCDCDC; font-weight: 600; color: #505050;">System Zone Name</td>
<td style="padding: 4px 8px; background-color: #ffffff; border-bottom: 1px solid #DCDCDC; color: #333333;">${$feature.systemsubnetworkname}</td>
</tr>
<tr>
<td style="padding: 4px 8px; width: 40%; background-color: #E8E8E8; border-bottom: 1px solid #DCDCDC; font-weight: 600; color: #505050;">Pressure Zone Name</td>
<td style="padding: 4px 8px; background-color: #ffffff; border-bottom: 1px solid #DCDCDC; color: #333333;">${$feature.pressuresubnetworkname}</td>
</tr>
</tbody>
</table>
<!-- Device Specifications Block -->
<table style="width:100%; border-collapse: collapse; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; box-shadow: 0 4px 6px rgba(0,0,0,0.1); border-radius: 8px; overflow: hidden; margin-top: 20px;">
<thead>
<tr>
<th colspan="2" style="background: linear-gradient(to right, #808080, #505050); color: white; padding: 6px 8px; text-align: left; font-size: 14px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;">
Device Specifications
</th>
</tr>
</thead>
<tbody>
<tr>
<td style="padding: 4px 8px; width: 40%; background-color: #E8E8E8; border-bottom: 1px solid #DCDCDC; font-weight: 600; color: #505050;">Design Type</td>
<td style="padding: 4px 8px; background-color: #ffffff; border-bottom: 1px solid #DCDCDC; color: #333333;">${DomainName($feature, 'designtype')}</td>
</tr>
<tr>
<td style="padding: 4px 8px; width: 40%; background-color: #E8E8E8; border-bottom: 1px solid #DCDCDC; font-weight: 600; color: #505050;">Diameter</td>
<td style="padding: 4px 8px; background-color: #ffffff; border-bottom: 1px solid #DCDCDC; color: #333333;">${$feature.diameter}</td>
</tr>
<tr>
<td style="padding: 4px 8px; width: 40%; background-color: #E8E8E8; border-bottom: 1px solid #DCDCDC; font-weight: 600; color: #505050;">Install Date</td>
<td style="padding: 4px 8px; background-color: #ffffff; border-bottom: 1px solid #DCDCDC; color: #333333;">${Text($feature.installdate, 'MM/DD/YYYY')}</td>
</tr>
<tr>
<td style="padding: 4px 8px; width: 40%; background-color: #E8E8E8; border-bottom: 1px solid #DCDCDC; font-weight: 600; color: #505050;">In-Service Date</td>
<td style="padding: 4px 8px; background-color: #ffffff; border-bottom: 1px solid #DCDCDC; color: #333333;">${Text($feature.inservicedate, 'MM/DD/YYYY')}</td>
</tr>
<tr>
<td style="padding: 4px 8px; width: 40%; background-color: #E8E8E8; border-bottom: 1px solid #DCDCDC; font-weight: 600; color: #505050;">Manufacturer</td>
<td style="padding: 4px 8px; background-color: #ffffff; border-bottom: 1px solid #DCDCDC; color: #333333;">${DomainName($feature, 'manufacturer')}</td>
</tr>
<tr>
<td style="padding: 4px 8px; width: 40%; background-color: #E8E8E8; border-bottom: 1px solid #DCDCDC; font-weight: 600; color: #505050;">Manufacturer Lot #</td>
<td style="padding: 4px 8px; background-color: #ffffff; border-bottom: 1px solid #DCDCDC; color: #333333;">${$feature.manufacturerlotno}</td>
</tr>
<tr>
<td style="padding: 4px 8px; width: 40%; background-color: #E8E8E8; border-bottom: 1px solid #DCDCDC; font-weight: 600; color: #505050;">Manufacturer Date</td>
<td style="padding: 4px 8px; background-color: #ffffff; border-bottom: 1px solid #DCDCDC; color: #333333;">${Text($feature.manufacturedate, 'MM/DD/YYYY')}</td>
</tr>
</tbody>
</table>
<!-- MAOP Information Block -->
<table style="width:100%; border-collapse: collapse; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; box-shadow: 0 4px 6px rgba(0,0,0,0.1); border-radius: 8px; overflow: hidden; margin-top: 20px;">
<thead>
<tr>
<th colspan="2" style="background: linear-gradient(to right, #808080, #505050); color: white; padding: 6px 8px; text-align: left; font-size: 14px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;">
MAOP Information
</th>
</tr>
</thead>
<tbody>
<tr>
<td style="padding: 4px 8px; width: 40%; background-color: #E8E8E8; border-bottom: 1px solid #DCDCDC; font-weight: 600; color: #505050;">MAOP Design</td>
<td style="padding: 4px 8px; background-color: #ffffff; border-bottom: 1px solid #DCDCDC; color: #333333;">${$feature.maopdesign} ${DomainName($feature, 'maopunits')}</td>
</tr>
<tr>
<td style="padding: 4px 8px; width: 40%; background-color: #E8E8E8; border-bottom: 1px solid #DCDCDC; font-weight: 600; color: #505050;">MAOP Test</td>
<td style="padding: 4px 8px; background-color: #ffffff; border-bottom: 1px solid #DCDCDC; color: #333333;">${$feature.maoptest} ${DomainName($feature, 'maopunits')}</td>
</tr>
<tr>
<td style="padding: 4px 8px; width: 40%; background-color: #E8E8E8; border-bottom: 1px solid #DCDCDC; font-weight: 600; color: #505050;">MAOP Record</td>
<td style="padding: 4px 8px; background-color: #ffffff; border-bottom: 1px solid #DCDCDC; color: #333333;">${$feature.maoprecord} ${DomainName($feature, 'maopunits')}</td>
</tr>
</tbody>
</table>
`
}
Example Two: Dynamic Pop-up
// This example is for a pop-up element for a valve feature. This has dynamic elements: a banner warning for past due inspections, and a section for valve status that changes color and symbols based on the device status
// VALVE STATUS INSPECTIONS
// set variables
var statusIcon = ""
var status = $feature.devicestatus
var statusColor = ""
// if valve is open
if (status == 1) {
statusIcon = "https://cdn-icons-png.flaticon.com/128/15866/15866742.png"
statusColor = "#a6f5e3"
}
//if valve is closed
else if (status == 0) {
statusIcon = "https://cdn-icons-png.flaticon.com/128/15866/15866756.png"
statusColor = "#f5b5a6"
}
// LAST INPSECTION CALCULATIONS
// get all of the inspections related to this valve
var inspections = FeatureSetByRelationshipName($feature, 'yourInfoHere', ['dateinspected'], true)
// url to icon for the alert symbol
var inspectionIcon = "https://cdn-icons-png.flaticon.com/128/4201/4201973.png"
// sort the inspections - the orderby() function will order them with the latest inspection first
inspections = OrderBy(inspections, 'dateinspected DESC')
// get the first (most recent) inspection record
var lastInspection = First(inspections)
// get the date of the inspection record
var lastInspectionDate = lastInspection.dateinspected
//calculate the date from one year ago from current time
var yearAgo = DateAdd(now(), -1, 'years')
//empty varible to hold the inspection status
var htmlDisplay = ""
// if the last inspection was less than a year ago, set the HTML display type to "inline-block". This will make it visible.
If (lastInspectionDate < yearAgo ) {
htmlDisplay = "inline-block"
}
// otherwise, set the HTML display to "none". This will make it invisible.
else {
htmlDisplay = "none"
}
return {
type : 'text',
text : `
<!-- Header -->
<div style="background:linear-gradient(to right,#808080,#505050);color:#fff;padding:8px 10px;font-size:18px;width:100%;box-sizing:border-box;font-weight:700;letter-spacing:1px;text-transform:uppercase;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;border-radius:12px;margin-bottom:10px;box-shadow:0 2px 6px rgba(0,0,0,0.08);text-align:center">
${SubtypeName($feature)}: ${DomainName($feature,'assettype')}
</div>
<!-- Past Due Inspection Pop-up -->
<div style="display:${htmlDisplay}">
<div style="display:flex; align-items:center; justify-content:space-between; gap:28px; width:100%;box-sizing:border-box; padding:14px 28px; margin-bottom:12px; border-radius:14px; background:linear-gradient(to right, #f5b5a6, #D42002); box-shadow:0 3px 24px rgba(255,60,68,0.13); border:2px solid #fff0f0; font-family:'Segoe UI', Arial, sans-serif; color:#630a16; font-size:1.18rem; font-weight:bold; letter-spacing:1px; text-transform:uppercase; position:relative; overflow:hidden;">
<span style="display:flex;width:100%;align-items:center; gap:10px;">
Inspection Past Due!<br>
<span style="font-size:0.97em; font-weight:400; color:white; text-transform:none;">
Inspected ${Text(lastInspectionDate, 'MM/DD/YY')}
</span>
</span>
<img src="${inspectionIcon}" alt="Inspection Alert Icon" style="width:54px; height:54px; border-radius:50%; box-shadow:0 2px 8px rgba(220,50,60,0.23); border:3px solid #fff0f0; background:#fff; object-fit:contain;">
</div>
</div>
<!-- General Information -->
<table style="width:100%;box-sizing:border-box; border-collapse: collapse; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; box-shadow: 0 4px 6px rgba(0,0,0,0.1); border-radius: 8px; overflow: hidden;">
<thead>
<tr>
<th colspan="2" style="background: linear-gradient(to right, #808080, #505050); color: white; padding: 6px 8px; text-align: left; font-size: 14px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;">
General Information
</th>
</tr>
</thead>
<tbody>
<!-- Valve Status Banner -->
<tr>
<td colspan="2" style="padding: 0; border-bottom: 1px solid #DCDCDC;">
<div style="
width: 100%;
background-color: ${statusColor};
color: #505050;
font-size: 16px;
font-weight: bold;
text-transform: uppercase;
display: flex;
align-items: center;
box-sizing: border-box;
padding: 5px 100px 5px 50px;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
">
<span style="flex:1;">
Valve is ${DomainName($feature, 'devicestatus')}
</span>
<img src=${statusIcon}
alt="valve icon"
style="width: 45px; height: 45px; object-fit: fill;" />
</div>
</td>
</tr>
<!-- Information Rows Continue -->
<tr>
<td style="padding: 4px 8px; width: 40%; background-color: #E8E8E8; border-bottom: 1px solid #DCDCDC; font-weight: 600; color: #505050;">Asset ID</td>
<td style="padding: 4px 8px; background-color: #ffffff; border-bottom: 1px solid #DCDCDC; color: #333333;">${$feature.assetid}</td>
</tr>
<tr>
<td style="padding: 4px 8px; width: 40%; background-color: #E8E8E8; border-bottom: 1px solid #DCDCDC; font-weight: 600; color: #505050;">Regulatory Type</td>
<td style="padding: 4px 8px; background-color: #ffffff; border-bottom: 1px solid #DCDCDC; color: #333333;">${DomainName($feature, 'regulatorytype')}</td>
</tr>
<tr>
<td style="padding: 4px 8px; width: 40%; background-color: #E8E8E8; border-bottom: 1px solid #DCDCDC; font-weight: 600; color: #505050;">Lifecycle Status</td>
<td style="padding: 4px 8px; background-color: #ffffff; border-bottom: 1px solid #DCDCDC; color: #333333;">${DomainName($feature, 'lifecyclestatus')}</td>
</tr>
<tr>
<td style="padding: 4px 8px; width: 40%; background-color: #E8E8E8; border-bottom: 1px solid #DCDCDC; font-weight: 600; color: #505050;">Device Status</td>
<td style="padding: 4px 8px; background-color: #ffffff; border-bottom: 1px solid #DCDCDC; color: #333333;">${DomainName($feature, 'devicestatus')}</td>
</tr>
<tr>
<td style="padding: 4px 8px; width: 40%; background-color: #E8E8E8; border-bottom: 1px solid #DCDCDC; font-weight: 600; color: #505050;">Accessible</td>
<td style="padding: 4px 8px; background-color: #ffffff; border-bottom: 1px solid #DCDCDC; color: #333333;">${DomainName($feature, 'accessible')}</td>
</tr>
<tr>
<td style="padding: 4px 8px; width: 40%; background-color: #E8E8E8; border-bottom: 1px solid #DCDCDC; font-weight: 600; color: #505050;">System Zone Name</td>
<td style="padding: 4px 8px; background-color: #ffffff; border-bottom: 1px solid #DCDCDC; color: #333333;">${$feature.systemsubnetworkname}</td>
</tr>
<tr>
<td style="padding: 4px 8px; width: 40%; background-color: #E8E8E8; border-bottom: 1px solid #DCDCDC; font-weight: 600; color: #505050;">Pressure Zone Name</td>
<td style="padding: 4px 8px; background-color: #ffffff; border-bottom: 1px solid #DCDCDC; color: #333333;">${$feature.pressuresubnetworkname}</td>
</tr>
</tbody>
</table>
<!-- Device Specifications -->
<table style="width:100%;box-sizing:border-box; border-collapse: collapse; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; box-shadow: 0 4px 6px rgba(0,0,0,0.1); border-radius: 8px; overflow: hidden; margin-top: 20px;">
<thead>
<tr>
<th colspan="2" style="background: linear-gradient(to right, #808080, #505050); color: white; padding: 6px 8px; text-align: left; font-size: 14px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;">
Device Specifications
</th>
</tr>
</thead>
<tbody>
<tr>
<td style="padding: 4px 8px; width: 40%; background-color: #E8E8E8; border-bottom: 1px solid #DCDCDC; font-weight: 600; color: #505050;">Design Type</td>
<td style="padding: 4px 8px; background-color: #ffffff; border-bottom: 1px solid #DCDCDC; color: #333333;">${DomainName($feature, 'designtype')}</td>
</tr>
<tr>
<td style="padding: 4px 8px; width: 40%; background-color: #E8E8E8; border-bottom: 1px solid #DCDCDC; font-weight: 600; color: #505050;">Diameter</td>
<td style="padding: 4px 8px; background-color: #ffffff; border-bottom: 1px solid #DCDCDC; color: #333333;">${$feature.diameter} ${DomainName($feature, "diameterunits")}</td>
</tr>
<tr>
<td style="padding: 4px 8px; width: 40%; background-color: #E8E8E8; border-bottom: 1px solid #DCDCDC; font-weight: 600; color: #505050;">Install Date</td>
<td style="padding: 4px 8px; background-color: #ffffff; border-bottom: 1px solid #DCDCDC; color: #333333;">${Text($feature.installdate, 'MM/DD/YYYY')}</td>
</tr>
<tr>
<td style="padding: 4px 8px; width: 40%; background-color: #E8E8E8; border-bottom: 1px solid #DCDCDC; font-weight: 600; color: #505050;">In-Service Date</td>
<td style="padding: 4px 8px; background-color: #ffffff; border-bottom: 1px solid #DCDCDC; color: #333333;">${Text($feature.inservicedate, 'MM/DD/YYYY')}</td>
</tr>
<tr>
<td style="padding: 4px 8px; width: 40%; background-color: #E8E8E8; border-bottom: 1px solid #DCDCDC; font-weight: 600; color: #505050;">Manufacturer</td>
<td style="padding: 4px 8px; background-color: #ffffff; border-bottom: 1px solid #DCDCDC; color: #333333;">${DomainName($feature, 'manufacturer')}</td>
</tr>
<tr>
<td style="padding: 4px 8px; width: 40%; background-color: #E8E8E8; border-bottom: 1px solid #DCDCDC; font-weight: 600; color: #505050;">Manufacturer Lot #</td>
<td style="padding: 4px 8px; background-color: #ffffff; border-bottom: 1px solid #DCDCDC; color: #333333;">${$feature.manufacturerlotno}</td>
</tr>
<tr>
<td style="padding: 4px 8px; width: 40%; background-color: #E8E8E8; border-bottom: 1px solid #DCDCDC; font-weight: 600; color: #505050;">Manufacturer Date</td>
<td style="padding: 4px 8px; background-color: #ffffff; border-bottom: 1px solid #DCDCDC; color: #333333;">${Text($feature.manufacturedate, 'MM/DD/YYYY')}</td>
</tr>
</tbody>
</table>
`
}
Example Three: Spatial Calculations
// This example brings in data from other network layers in the map, and returns a summery of which features are spatially coincident with the grid feature
// Network Data
// Define layer for pipeline lines (all pipes)
var pipelineLine = FeatureSetById($map, "exampleid1234", ['objectid'], true)
// Filter to only distribution pipes
pipelineLine = FilterBySubtypeCode(pipelineLine, 2)
// Define layer for gas devices (includes meters)
var services = FeatureSetById($map, "exampleid1234", ['objectid'], true)
// Filter to only meters
services = FilterBySubtypeCode(services, 2)
// Calculate intersecting pipe segments
// Find only the intersecting pipe segments
var intersectingPipe = Intersects(pipelineLine, $feature)
// Count intersecting pipe segments
var intersectingPipeCount = count(intersectingPipe)
// Define variable to hold cumulative length of intersecting pipe
var intersectLength = 0
// If there are any intersecting pipes, loop though and add the lengths of the intersecting sections
if (intersectingPipeCount > 0) {
for (var i in intersectingPipe) {
intersectLength += Length(Intersection($feature, i), "miles")
}
}
var totalPipeLength = Round(intersectLength, 2)
// Calculate intersecting service meters
var intersectingServices = Intersects(services, $feature)
//Count the number of intersecting meters
var meterCount = Count(intersectingServices)
// return html
return {
type : 'text',
text : `
<div style="font-family: Arial, sans-serif; width: 100%; border-radius: 8px; overflow: hidden; background-color: #0077be; padding: 0; margin: 0;">
<h2 style="color: white; padding: 12px 16px; margin: 0; font-weight: 900; font-size: 22px; border-bottom: 3px solid #005f99;">
Grid: ${$feature.gridid}
</h2>
<div style="background-color: #f0f6fb; border-radius: 0 0 8px 8px; border: 1px solid #0077be; border-top: none; padding: 12px 16px;">
<table style="width: 100%; border-collapse: collapse; font-size: 16px; margin-bottom: 15px;">
<tr style="background-color: #e6f0fa;">
<td style="color: #0077be; font-weight: bold; padding: 8px; border-bottom: 1px solid #d1d9e6; width: 50%;">Grid Type:</td>
<td style="padding: 8px; border-bottom: 1px solid #d1d9e6;">${DomainName($feature, 'gridtype')}</td>
</tr>
<tr>
<td style="color: #0077be; font-weight: bold; padding: 8px; border-bottom: 1px solid #d1d9e6;">Grid ID:</td>
<td style="padding: 8px; border-bottom: 1px solid #d1d9e6;">${$feature.gridid}</td>
</tr>
<tr style="background-color: #e6f0fa;">
<td style="color: #0077be; font-weight: bold; padding: 8px; border-bottom: 1px solid #d1d9e6;">Length of Gas Main:</td>
<td style="padding: 8px;font-weight: bold; border-bottom: 1px solid #d1d9e6;">${totalPipeLength} miles</td>
</tr>
<tr>
<td style="color: #0077be; font-weight: bold; padding: 8px;">Number of Services:</td>
<td style="padding: 8px;font-weight: bold;">${meterCount}</td>
</tr>
</table>
</div>
</div>
`
}
