Detail on demand: how to design and build pop-ups for your maps

I always talk about the singularities of interactive maps in relation to my beloved analogue maps. And there is this element that appears in every interactive map — and never in an analogue one: the pop-up. The pop-up is the main element for accessing content and retrieving information about the features on a map. Designing pop-ups is an art that few maps truly master — and the challenge isn’t just having one, but making it actually necessary and helpful.

Now that in GOAT you can customise your pop-ups with simple blocks or with HTML, I felt it was my duty to write about them. In this guide I’ll walk you through how I design pop-ups: from asking whether they’re really necessary, all the way down to putting the comma in the right place.

1. Pop-up: yes or no?

One big starting question is exactly that: pop-up, yes or no? Which layers need a pop-up? For example, in a catchment area, if the information is already carried by the legend and the colour, I don’t need a pop-up to tell me again that the “cost step of this polygon is 5.” The colour already does that. Pop-ups go for features that need to tell something else.

Think of a pop-up like the little plaque beside a painting in a museum. You don’t put a plaque on every brick of the wall — only next to the pieces that have a story worth telling.

If a feature can already speak for itself through its colour or size, let it. Save the plaque for what the eye can’t see on its own.

2. What information goes inside a pop-up?

When someone clicks on your map, they should be rewarded with a bundle of useful information about that location. So a big part of creating useful pop-ups is deciding exactly what that useful information is, and how it appears in the content area. To do that, you need to be clear about one thing: what is this pop-up for? Is it there to help someone find more information about a doctor? To show the analytics behind a feature? The purpose decides the content.

The pop-ups on top show a variety of examples. You can use text, images, a title, links, buttons, and more. The one thing you should never do is overload it with information.

One of my favourite ways to avoid that overload is progressive disclosure: you keep the extra content hidden until the user actually asks for it. For example, in GOAT you can use the “Collapse after” option, which shows the fields up to a chosen point and then lets the user click to reveal the rest. This way, the pop-up stays less cluttered, and people can focus on exploring the information they want to read about. In the same spirit, avoid meaningless columns — ObjectID, Coordinates, cryptic abbreviations — and instead compose the content into human, readable language.

3. A simple pop-up, or a complex, more designed one?

As I mentioned before, a pop-up must not overwhelm the user. And that’s not just about how much information we put in, but also about the visual hierarchy that helps express it better.

The visual hierarchy basically gives a pop-up its structure. Here we can see two examples, which both achieve their objective. The one on the left is simple; the one on the right has more colour and a grid-like layout. One calls for your attention, the other simply gives you the information. You choose what you want to achieve. It also depends a lot on the map you’re working with: some carry so much information that it’s better to keep the pop-up simple, while others rely on the pop-up to do everything.

I’m not always a fan of rules, but if you feel a bit lost with visual hierarchy, here’s one you can lean on: make the headline the most prominent element. Almost every pop-up has a title; then sometimes some supporting text follows, and finally the call-to-action button (if there is one).

But as I told you, I don’t always follow rules — and the pop-up below is the proof. This is a more playful pop-up, and that’s totally fair. Follow your creativity!

4. How is the pop-up triggered?

The simplest way to trigger a pop-up is to click a marker or feature. Alternatively, opening can be triggered by just hovering on top of the element. Users can close the pop-up by clicking the X in the upper-right corner, or you can omit that explicit option and let them close it by clicking elsewhere on the map — which will either open another pop-up or close it, in case no information exists. It’s important to note that, most of the time, only one pop-up can exist at a time, which means that when a new pop-up opens, the currently active one must close.

Personally, I’m not a fan of the close button. But I have to admit it earns its place when a map is full of features. In that case, clicking “elsewhere” almost always lands on another feature, which just opens yet another pop-up. So, to avoid that endless loop on a crowded map, I prefer to keep the close button in the top-right corner.

Another small tip from experience: hovering feels lovely on a desktop, but it vanishes on touch screens, where there’s no cursor to hover with. If your map will live on phones, click is the safer default.

5. Pop-ups with AI, in GOAT

In GOAT, you actually have lots of freedom to choose what you show in the pop-up. The pop-up editor gives you control over both style and content, with options to embed fields, images, text, and more. You can do it yourself with the building blocks, or just use HTML and be totally free — and with AI as your co-pilot, that freedom is now within everyone’s reach, not only developers’. With HTML and AI together, you can take your pop-ups to the next level.

So how do I actually work with AI? I start with a quick sketch on paper of how I picture the pop-up — a title here, some info, a chart there. Then I give the AI a photo of that sketch, plus a screenshot of the table with all the fields, and an explanation of what I want. If it's relevant, I also hand over the colours used for the map's features, so they can be reproduced in the pop-up.

One trick I like is to make the pop-up's colour follow an important field from the layer — sometimes the very same field that colours the polygons. Like here:

To achieve this, the pop-up's background has to be driven by the same field that colours the fill of the layer. So I simply take a screenshot of that colour scheme — the values and their colours — from the polygon layer's Layer Design panel in GOAT, and include it so the AI keeps them in mind while it works.

One last thing: it’s important to give the AI two technical constraints, otherwise the code won’t work in GOAT. First, GOAT uses Liquid syntax ({{ field }} and {% if %}). Second, pop-ups can’t run JavaScript — so if a section gets long, make it collapsible with a native <details>/<summary> “See more…” toggle.

6. Now it’s your turn

In the end, a good pop-up is a small act of hospitality: you’ve invited someone onto your map, and this is how you make them feel welcome.

A pop-up is where your map stops being a picture and starts being a conversation — the moment someone clicks and the map answers back.

And that’s really the heart of it. Whether you keep it to a title and two lines, or build something rich with charts, colours and collapsible sections, what matters is that it’s necessary, clear, and truly yours. With blocks for the quick wins and HTML plus AI for everything beyond, there’s no longer a ceiling on what your pop-ups can be.

So go build one. You can try GOAT for free, open the pop-up editor, and design your first one today — from a simple two-liner to a fully custom HTML card. I’d love to see what you make.

FAQ

What is a pop-up on a map?
A pop-up is the small window that appears when you click a feature on an interactive map. It's the main way a map shares extra detail about a point, line, or polygon — the thing an analogue map can't do.

When should a map have a pop-up?
Use a pop-up only when a feature has something extra to say. If the legend and the colour already carry the information, you don't need one.

What information should a map pop-up include?
Include only what serves the pop-up's purpose — a title, a few key fields, and maybe an image or a chart. Avoid raw columns like IDs or coordinates, and use progressive disclosure for the rest.

Should a map pop-up open on click or on hover?
Click is the safer default. Hover feels nice on desktop but fails on touch screens — and most maps end up on phones.

Can you build map pop-ups with HTML in GOAT?
Yes — GOAT's pop-up editor lets you build with no-code blocks or with full HTML and CSS, and AI can help write the HTML.

Do GOAT pop-ups support JavaScript?
No, GOAT pop-ups can't run JavaScript. For a "See more…" toggle, use the native HTML <details>/<summary> element.