Details auf Abruf: Pop-ups für deine Karten gestalten und bauen

Ich rede immer über die Besonderheiten interaktiver Karten – im Vergleich zu meinen geliebten analogen Karten. Und es gibt dieses eine Element, das in jeder interaktiven Karte auftaucht – und in einer analogen nie: das Pop-up. Das Pop-up ist das zentrale Element, um Inhalte abzurufen und Informationen zu den Features einer Karte zu bekommen. Pop-ups gut zu gestalten ist eine Kunst, die nur wenige Karten wirklich beherrschen – und die Herausforderung ist nicht, überhaupt eins zu haben, sondern es tatsächlich notwendig und hilfreich zu machen.

Jetzt, wo du in GOAT deine Pop-ups mit einfachen Bausteinen oder mit HTML gestalten kannst, hielt ich es für wichtig, darüber zu schreiben. In diesem Guide nehme ich dich mit auf meinen Weg, Pop-ups zu gestalten: von der Frage, ob sie überhaupt nötig sind, bis hin zum Komma an der richtigen Stelle.

1. Pop-up: ja oder nein?

Eine große Ausgangsfrage ist genau das: Pop-up, ja oder nein? Welche Layer brauchen überhaupt ein Pop-up? Wenn zum Beispiel in einem Einzugsgebiet die Information schon durch die Legende und die Farbe getragen wird, brauche ich kein Pop-up, das mir noch einmal sagt, dass die „Kostenstufe dieses Polygons 5“ ist. Das macht die Farbe bereits. Pop-ups sind für Features da, die etwas anderes zu erzählen haben.

Stell dir ein Pop-up wie das kleine Schild neben einem Gemälde im Museum vor. Du hängst nicht überall an der Wand ein Schild auf– nur neben die Stücke, die eine Geschichte zu erzählen haben.

Wenn ein Feature schon durch seine Farbe oder Größe für sich selbst spricht, lass es. Heb dir das Schild für das auf, was das Auge nicht von allein sieht.

2. Was gehört in ein Pop-up?

Wenn jemand auf deine Karte klickt, sollte er mit einem Bündel nützlicher Informationen über diesen Ort belohnt werden. Ein großer Teil der Arbeit an guten Pop-ups besteht also darin, genau zu entscheiden, welche nützlichen Informationen das sind und wie sie im Inhaltsbereich erscheinen. Dafür musst du dir über eine Sache im Klaren sein: Wofür ist dieses Pop-up da? Soll es jemandem helfen, mehr über eine Arztpraxis zu erfahren? Oder die Analyse hinter einem Feature zu zeigen? Der Zweck entscheidet über den Inhalt.

Die Pop-ups oben zeigen eine Reihe von Beispielen. Du kannst Text, Bilder, einen Titel, Links, Buttons und mehr verwenden. Das Einzige, was du niemals tun solltest, ist, es mit Informationen zu überladen.

Eine meiner liebsten Methoden, um genau diese Überladung zu vermeiden, ist progressive disclosure – das schrittweise Einblenden von Inhalten: Du hältst die zusätzlichen Inhalte verborgen, bis der Nutzer sie tatsächlich anfordert. In GOAT kannst du dafür zum Beispiel die Option „Collapse after“ nutzen, die die Felder bis zu einem bestimmten Punkt zeigt und den Nutzer dann klicken lässt, um den Rest aufzudecken. So bleibt das Pop-up übersichtlicher, und die Leute können sich auf die Informationen konzentrieren, die sie lesen wollen. Im selben Sinne: Verzichte auf nichtssagende Spalten – ObjectID, Koordinaten, kryptische Abkürzungen – und bring den Inhalt stattdessen in eine menschliche, lesbare Sprache und Struktur.

3. Ein einfaches Pop-up – oder ein komplexeres, mehr gestaltetes?

Wie schon gesagt: Ein Pop-up darf den Nutzer nicht überfordern. Und das hängt nicht nur davon ab, wie viel Information wir hineinpacken, sondern auch von der visuellen Hierarchie, die hilft, sie besser auszudrücken.

Die visuelle Hierarchie gibt dem Pop-up im Grunde seine Struktur. Hier sehen wir zwei Beispiele, die beide ihr Ziel erreichen. Das linke ist schlicht; das rechte hat mehr Farbe und ein rasterartiges Layout. Das eine zieht die Aufmerksamkeit auf sich, das andere gibt dir einfach die Information. Du entscheidest, was du erreichen willst. Es hängt auch stark von der Karte ab, mit der du arbeitest: Manche tragen so viel Information, dass es besser ist, das Pop-up schlicht zu halten, während andere sich auf das Pop-up verlassen, um alles zu zeigen.

Ich bin nicht immer ein Fan von Regeln, aber wenn du dich bei der visuellen Hierarchie ein bisschen verloren fühlst, ist hier eine, an der du dich festhalten kannst: Mach die Überschrift zum auffälligsten Element. Fast jedes Pop-up hat einen Titel; dann folgt manchmal ein unterstützender Text und schließlich der Call-to-Action-Button (falls es einen gibt).

Aber wie gesagt, ich folge nicht immer Regeln – und das Pop-up hier unten ist der Beweis. Das ist ein verspielteres Pop-up, und das ist völlig in Ordnung. Folge deiner Kreativität!

4. Wie wird ein Pop-up ausgelöst?

Der einfachste Weg, ein Pop-up auszulösen, ist ein Klick auf einen Marker oder ein Feature. Alternativ kann es sich schon beim Hovern über dem Element öffnen. Nutzer können das Pop-up über das X in der oberen rechten Ecke schließen – oder du lässt diese explizite Option weg und lässt sie es schließen, indem sie woanders auf die Karte klicken, was entweder ein anderes Pop-up öffnet oder es schließt, falls dort keine Information vorhanden ist. Wichtig zu wissen: Meistens kann nur ein Pop-up gleichzeitig existieren – das heißt, wenn ein neues Pop-up aufgeht, muss das gerade aktive sich schließen.

Ehrlich gesagt bin ich kein Fan des Schließen-Buttons. Aber ich muss zugeben, dass er sich seinen Platz verdient, wenn eine Karte voller Features ist. Dann landet ein Klick „woanders“ fast immer auf einem anderen Feature – und schon geht das nächste Pop-up auf. Um diese Endlosschleife auf einer vollen Karte zu vermeiden, lasse ich den Schließen-Button lieber oben rechts.

Noch ein kleiner Tipp aus Erfahrung: Hover fühlt sich am Desktop wunderbar an, verschwindet aber auf Touchscreens, wo es keinen Cursor zum Hovern gibt. Wenn deine Karte auf Smartphones zu sehen sein wird, ist der Klick die sicherere Standardlösung.

5. Pop-ups mit KI, in GOAT

In GOAT hast du wirklich viel Freiheit bei der Wahl dessen, was du im Pop-up zeigst. Der Pop-up-Editor gibt dir Kontrolle über Stil und Inhalt, mit Optionen, um Felder, Bilder, Text und mehr einzubetten. Du kannst es selbst mit den Bausteinen bauen oder einfach HTML nutzen und völlig frei sein – und mit KI als Co-Pilot ist diese Freiheit jetzt für alle erreichbar, nicht nur für Entwickler. Mit HTML und KI zusammen kannst du deine Pop-ups auf das nächste Level heben.

Wie gehe ich also konkret mit KI vor? Ich starte mit einer schnellen Skizze auf Papier, wie ich mir das Pop-up vorstelle – hier ein Titel, dort ein paar Infos, da ein Diagramm. Dann gebe ich der KI ein Foto dieser Skizze, dazu einen Screenshot der Tabelle mit allen Feldern und eine Erklärung, was ich will. Wenn es relevant ist, gebe ich auch die Farben der Karten-Features mit, damit sie im Pop-up reproduziert werden können.

‍

Ein Trick, den ich mag: die Farbe des Pop-ups einem wichtigen Feld aus dem Layer folgen zu lassen – manchmal genau dem Feld, das auch die Polygone einfärbt. Wie hier:

‍

Damit das funktioniert, muss der Hintergrund des Pop-ups von demselben Feld gesteuert werden, das die Füllfarbe des Layers bestimmt. Also mache ich einfach einen Screenshot dieses Farbschemas – die Werte und ihre Farben – aus dem „Layer Design“-Panel des Polygon-Layers in GOAT und gebe ihn mit, damit die KI sie im Blick behält, während sie arbeitet.

Eine letzte Sache: Es ist wichtig, der KI zwei technische Vorgaben zu machen, sonst funktioniert der Code in GOAT nicht. Erstens nutzt GOAT die Liquid-Syntax ({{ field }} und {% if %}). Zweitens können Pop-ups kein JavaScript ausführen – wenn ein Abschnitt also lang wird, mach ihn mit einem nativen <details>/<summary>-„Mehr anzeigen…“-Umschalter aufklappbar.

6. Jetzt bist du dran

Am Ende ist ein gutes Pop-up eine kleine Geste der Gastfreundschaft: Du hast jemanden auf deine Karte eingeladen, und so sorgst du dafür, dass er sich willkommen fühlt.

Ein Pop-up ist der Moment, in dem deine Karte aufhört, ein Bild zu sein, und anfängt, ein Gespräch zu werden – der Moment, in dem jemand klickt und die Karte antwortet.

Und das ist eigentlich der Kern. Egal ob du es bei einem Titel und zwei Zeilen belässt oder etwas Reiches mit Diagrammen, Farben und aufklappbaren Abschnitten baust – wichtig ist, dass es notwendig, klar und wirklich deins ist. Mit Bausteinen für die schnellen Fälle und HTML plus KI für alles darüber hinausgehende gibt es keine Grenze mehr dafür, was deine Pop-ups sein können.

Also bau eins. Du kannst GOAT kostenlos ausprobieren, den Pop-up-Editor öffnen und dein erstes noch heute gestalten – vom schlichten Zweizeiler bis zur voll individuellen HTML-Karte. Ich bin gespannt, was du baust.

Häufige Fragen

Was ist ein Pop-up auf einer Karte?

Ein Pop-up ist das kleine Fenster, das erscheint, wenn man ein Feature auf einer interaktiven Karte anklickt. Es ist der wichtigste Weg, über den eine Karte zusätzliche Informationen zu einem Punkt, einer Linie oder einem Polygon zeigt — etwas, das eine analoge Karte nicht kann.

Wann sollte eine Karte ein Pop-up haben?

Nutze ein Pop-up nur dann, wenn ein Feature etwas Zusätzliches zu sagen hat. Wenn die Legende und die Farbe die Information bereits vermitteln, brauchst du keins. Pop-ups sind für Details gedacht, die die Karte nicht ohnehin schon visuell zeigt.

Welche Informationen gehören in ein Karten-Pop-up?

Nimm nur das auf, was dem Zweck des Pop-ups dient — einen Titel, ein paar wichtige Felder und vielleicht ein Bild oder ein Diagramm. Verzichte auf nichtssagende Datenbankspalten wie IDs oder Koordinaten und blende zusätzliche Details erst ein, wenn der Nutzer sie anfordert (progressive disclosure).

Sollte sich ein Karten-Pop-up per Klick oder per Hover öffnen?

Der Klick ist die sicherere Standardlösung. Hover fühlt sich am Desktop gut an, funktioniert aber nicht auf Touchscreens, wo es keinen Cursor gibt — und die meisten Karten landen am Ende auf dem Smartphone.

Kann man in GOAT Pop-ups mit HTML bauen?

Ja — der Pop-up-Editor von GOAT lässt dich entweder mit No-Code-Bausteinen oder mit vollem HTML und CSS arbeiten. Mit KI-Unterstützung beim Schreiben des HTML sind vollständig individuelle Pop-ups auch dann möglich, wenn du nicht programmierst.

Unterstützen GOAT-Pop-ups JavaScript?

Nein, GOAT-Pop-ups können kein JavaScript ausführen. Für längere Inhalte mit einer „Mehr anzeigen…“-Funktion nutzt du das native HTML-Element <details>/<summary>, das ganz ohne Skript funktioniert.