Building the web map: symbology, pop-ups and layer visibility for dashboards

The map that nobody can read. It's seven in the morning and a large water main has broken downtown. The operations manager opens the city dashboard on the wall screen, and the map is a mess. Every break, open or already repaired, is the same blue dot. Pipes, hydrants and pressure zones all draw at once, so the downtown blocks turn into a solid smear. Someone clicks a point, and the pop-up shows field names like MAIN underscore MAT underscore CD and a date that nobody can read. None of that is really the dashboard's fault. A dashboard shows whatever the web map tells it to show. So in this lesson, we fix the web map itself.

What you will learn. By the end of this lesson you'll be able to do three things. First, choose symbology, which simply means the colors, shapes and sizes a layer is drawn with, so that the map answers one clear question at a glance. Second, configure pop-ups that speak plain language, including one small Arcade expression that calculates a value on the fly. Third, control which layers are visible, in what order they draw, and at which zoom levels they appear, so the map stays readable on a wall screen and on a phone. We'll use a water main break layer throughout.

The dashboard inherits the web map. Let's be clear about where each setting lives. Your hosted feature layer holds the data. The web map, built in Map Viewer, decides how that data looks: the symbols, the pop-ups, which layers are on, their order, the basemap and the starting extent. When you add a map element to a dashboard, it reads the saved web map item and inherits all of that. The dashboard can add filters and interactions, but it can't restyle your points. So the rule is simple. If something looks wrong on the dashboard map, fix it in Map Viewer, save, and every screen showing that dashboard picks it up.

Status as a category: Types. So what's the one question the operations team asks this map? Usually it's, where are the breaks that still need a crew? In Map Viewer, open Styles, choose the Status field, and pick Types, which gives each category its own symbol. Now make the colors do the work. Open breaks in strong red, crew on site in orange, repaired in a quiet grey that fades into the background. Resist a rainbow. Three to five categories is plenty for a wall screen, and rare values, like a data entry typo, can be grouped into Other. Someone across the room should spot the red dots in two seconds.

Many points: clusters or heat. Here are eight recent breaks in a Denver example. With eight points the map is fine, but a real utility may log hundreds a year, and at city scale they pile on top of each other. Map Viewer gives you two tools. Clustering replaces nearby points with one bubble showing a count, and the bubbles split apart as you zoom. Clustering is a layer setting; this animation shows the other option. Watch as we switch on a heat map, and the downtown hotspot jumps out instantly, which is great for a strategic view of aging pipes. For live operations, though, crews need exact locations, so when we fly in to downtown street level, the individual points come back.

Size for how many are affected. Status tells you what needs attention, but not how much it matters. Add a second field, Customers Affected, and choose Counts and amounts with size. A break affecting twelve customers draws as a small dot, while one cutting water to four hundred and fifty customers draws large. Set sensible minimum and maximum sizes so a big break doesn't cover three streets on a phone. Map Viewer lets you combine both fields in one style, so color shows status and size shows impact. That single layer now answers two questions at a glance: which breaks are open, and which ones hurt the most people.

Pop-ups that speak plain language. When a supervisor taps a point on the dashboard, the pop-up is their detail view, so treat it like a small report. In Map Viewer, open Pop-ups for the layer. Set a title from a field, such as the street name followed by main break. In the fields list, remove anything internal, like object IDs, global IDs and editor tracking. Check that each field shows its alias, the friendly display name you set when preparing the data last lesson, so people read Customers affected instead of CUST underscore AFF. Finally, format dates as date and time and numbers with thousands separators.

Worked example: hours out of service. Sometimes the value people want isn't stored anywhere. The operations manager asks, how long has this break been open? Arcade, Esri's small expression language, can calculate it when the pop-up opens. In the pop-up settings, add an attribute expression. The first line reads the reported date from the feature. Next comes a guard: if the date is empty, the pop-up says Reported time unknown instead of showing an error, because real data always has a few gaps. Then DateDiff gets the difference between now and that date, measured in hours. The last line rounds it to one decimal and adds a label. Add the expression to the fields list, and every pop-up now shows something like six point five hours out of service, always current, with no new field in your data.

Layer visibility and draw order. Now the layers. Draw order matters: breaks as points on top, water mains as lines below them, pressure zones as polygons at the bottom, set to about seventy percent transparency so they tint rather than hide. Next, visible range. Thousands of pipe segments are noise at city scale, so set the water mains layer to appear only when zoomed in, around street level. Turn off any layer the dashboard audience doesn't need, like the analyst's scratch layer. And choose a muted basemap, such as light gray canvas, so your red and orange symbols are the loudest thing on the screen.

Common mistake: the unsaved map. Here's the trap that catches almost everyone. You spend twenty minutes perfecting colors and pop-ups in Map Viewer, switch to the dashboard, and nothing has changed. That's because the dashboard reads the saved web map item, not what's open on your screen. Save first, then refresh the dashboard. The second half of the trap is the opposite problem. If the same web map also feeds a public app or a field app, your dashboard-friendly changes change those too. When a map is shared, use Save As to make a copy just for the dashboard, and name it clearly.

Recap. Let's recap. First, symbology should answer one question at a glance: Types for status categories, size for how many customers are affected, and clustering or a heat map when points pile up. Second, pop-ups are the dashboard's detail view, so show only useful fields with aliases, format dates and numbers, and add Arcade when a value like hours out of service isn't stored. Third, control what draws and when: points on top, pipes only when zoomed in, a quiet basemap. And always save the web map, because that saved item is exactly what your dashboard shows.

Your exercise. Now it's your turn, before the next lesson. Open Map Viewer with a water main break layer, or a service request layer from Living Atlas if you don't have your own. Style it by Status with three clear colors and size it by customers affected or a similar count. If your layer has no Status or count field, use any category field and any number field instead. Configure the pop-up with a title, friendly aliases and the hours-open Arcade expression. Add a line layer and give it a visible range so it appears only when zoomed in. Then save it as a dashboard copy. Next lesson, we'll build filtered views of this data for each audience.