Select to view content in your preferred language

No More Ugly Pop-ups: Create Impactful Pop-ups for your Infrastructure Maps

2027
3
08-06-2025 08:10 AM
Labels (1)
Megan-Hendrick
Esri Contributor
8 3 2,027

Banner Image.jpg

 

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:

uglymeterpopup.jpg

 

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. 

PopupPicture2.jpg

 

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.  

PopUpPicture3.jpg

 

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

htmlwitharcade.jpg

 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.

PopUpPicture1.jpg

 

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.  

PopUpPicture5.jpg

 

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. 

PopUpPicture6.jpg

 

The result is a section within the pop-up that only appears if there has not been an inspection within the last year.

PopUpPicture8.jpg

 

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.

PopUpPicture10.jpg

 

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. 

PopUpPicture11.jpg

 

 

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

PopUpPicture12.jpg

 

 For each grid, we can use spatial calculations to summarize the assets within that grid. In this case, I want to know:  

  1. What is the length of distribution gas pipe in each grid? 

  2. 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:

PopUpPicture14.jpg

 

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

prettyMeterPopup.jpg

 

 

// 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

PopUpPicture11.jpg

 

 

// 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

PopUpPicture14.jpg

 

 

// 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>
 `  
}

 

 

Tags (3)
3 Comments
Contributors
Labels