Ein ansprechendes Pop-up-Design ist entscheidend für die Erstellung herausragender Webkarten. Durch den gezielten Einsatz von Farben in den Textelementen der Pop-ups können Attribute hervorgehoben, ihre Bedeutung unterstrichen und die visuelle Aussagekraft der Karte verstärkt werden. In diesem Beitrag zeigen wir Ihnen, wie Sie Farben clever einsetzten.
Beispiele
Im folgenden Beispiel werden bestimmte Informationen farblich hervorgehoben, in diesem Fall die in der Analyse angegebene Fahrzeit, die Anzahl der versorgten Einwohner und der Prozentsatz der Gesamtbevölkerung.
Farben können in Pop-ups verwendet werden, um die Legende darzustellen und den Stil der Karte klarer zu vermitteln. Durch die Kombination von Farbe und Text wird es für die Betrachter einfacher, den dargestellten Inhalt besser zu verstehen.
Im folgenden Beispiel hebt die Farbe im Pop-up den einzigartigen Wert des Merkmals deutlich hervor. Die Farbanpassung wurde mit ArcGIS Arcade durchgeführt. Siehe das Beispiel am Ende dieses Blogartikels.
Mit Arcade kann der Text in Pop-ups mit Farben angezeigt werden, die auf der Auswertung von Ausdrücken basieren. In diesem Beispiel wird roter Text verwendet, wenn es einen Verlust an Waldfläche gab. Bei einer Vergrößerung der Waldfläche wird grüner Text verwendet.
Farbe zu Textelementen hinzufügen
Das Hinzufügen von Farbe zu Text in Pop-ups kann durch die Anwendung einer Farbe auf den ausgewählten Text, das Feld oder den Arcade-Ausdruck erfolgen. Siehe Pop-ups: Grundlagen für Textelemente, um die Grundlagen der Arbeit mit Textinhalten in Pop-ups zu lernen.
Wählen Sie im Texteditor den Text, das Feld oder den Ausdruck aus, klicken Sie auf die Schaltfläche Schriftfarbe und wählen Sie dann eine beliebige Farbe. Um eine bestimmte Farbe anzuwenden, geben Sie den Hexadezimalwert der gewünschten Farbe ein. Zuvor verwendete Farben werden gespeichert und können erneut ausgewählt werden.
Die Farben können statisch sein (Auswahl in der Farbauswahl) oder datengesteuert über ein Attribut oder einen Ausdruck, der einen hexadezimalen Farbwert liefert. Siehe das Beispiel im nächsten Abschnitt.
Das unten gezeigte Beispiel verwendet eine statische Farbe. Der Spitzenname, die Höhe, die Prominenz und die Isolation sind blau. Der Spitzenrang ist rot. Der Arcade-Ausdruck, der eine Rangfolge der Prominenz (niedrig, mäßig, hoch) zurückgibt, ist braun.
Verwendung von Arcade-Ausdrücken, um Farbe hinzuzufügen
Arcade ist eine Ausdruckssprache, die von ArcGIS unterstützt wird. Sie kann verwendet werden, um Berechnungen durchzuführen, Text zu manipulieren und logische Aussagen auszuwerten.
In Pop-ups kann Arcade auf zwei Arten verwendet werden: zum Erstellen von Ausdrücken in Textelementen, die wie Felder ausgewertet werden können, oder als separate Elemente, die einen kompletten Inhaltsblock zurückgeben.
Die Arcade-Pop-up Farbbeispielkarte enthält zwei Layer, auf denen die unten beschriebenen Techniken dargestellt werden. Die Attributausdrücke finden Sie, indem Sie in der Symbolleiste „Inhalt“ (dunkel) den Bereich „Layer“ öffnen, eine Ebene auswählen und dann in der Symbolleiste „Einstellungen“ (hell) auf „Pop-ups“ klicken. Klicken Sie in der Optionsleiste auf Attributausdrücke, um eine Liste der Ausdrücke anzuzeigen, und klicken Sie dann auf einen Ausdruck, um ihn im Arcade-Editor anzuzeigen.
Ausdrücke und statische Farbe verwenden
Folgen Sie dem Beispiel, indem Sie die Ebene Beobachtungsbrunnen (statischer Ausdruck Farbe) in der Beispielkarte anzeigen und auswählen.
Um das Ziel der Einfärbung des Textes zur Anzeige des Brunnenstatus zu erreichen, wurden zwei Ausdrücke erstellt, die das Feld {STATUS} auswerten, das einen von zwei Attributwerten enthält: Aktiv oder Inaktiv.
Der erste Ausdruck mit der Bezeichnung IsActive wertet aus, ob das Feld für das Merkmal das Wort Active enthält.
Der zweite Ausdruck mit der Bezeichnung IsInactive wertet aus, ob das Feld für das Merkmal das Wort Inactive enthält.
Im Textelement-Editor wird eine statische Farbe (ausgewählt aus der Farbauswahl) auf den Ausdruck angewendet, der wie ein Feld behandelt wird. Die Logik mag zunächst verwirrend erscheinen, aber wir erstellen zwei Ausdrücke, die den Stringwert Active oder Inactive zurückgeben. Wenn der Ausdruck nicht zu True ausgewertet wird, wird Null zurückgegeben. Die Ergebnisse sind unten dargestellt.
Ausdrücke für datengesteuerte hexadezimale Farben verwenden
Folgen Sie dem Beispiel, indem Sie die Ebene Beobachtungsquellen (datengesteuerter hexadezimaler Farbwert aus Ausdruck) in der Beispielkarte anzeigen und auswählen.
Sie können auch Ausdrücke verwenden, die den hexadezimalen Farbwert zurückgeben, um den Popup-Text so zu ändern, dass er den eindeutigen Symbolfarben entspricht. Der unten gezeigte Arcade-Ausdruck prüft das Feld STATUS und gibt den hexadezimalen Farbwert zurück: grün, wenn aktiv, rot, wenn inaktiv. Wenn Sie mehr eindeutige Werte haben, erweitern Sie einfach den Ausdruck für alle möglichen Werte.
Tipp: Achten Sie darauf, das Rautezeichen (#) in die Hexadezimalzahl einzuschließen.
Wählen Sie den Text im Textelement-Editor aus und klicken Sie dann auf das Werkzeug Schriftfarbe. Klicken Sie auf Datengesteuert (die Standardeinstellung ist Statisch) und wählen Sie dann den Arcade-Ausdruck, um die hexadezimale Farbe zurückzugeben.
Um das Werkzeug Schriftfarbe werden geschweifte Klammern { } angezeigt, und der ausgewählte Text wird umrandet. Mit Hexadezimalwerten können Sie die Farbe für den gesamten Textblock (wie in diesem Beispiel) oder für einzelne Wörter, Felder oder Ausdrücke festlegen.
Die Textfarbe im Popup-Fenster wird nun durch den Ausdruck festgelegt und entspricht der Farbe des Features.
Tipps zur Farbwahl
Wie bei vielen visuellen Techniken sollten Sie Pop-up-Farben sparsam verwenden. Zu viel Farbe kann ablenken und die Gesamtästhetik der Karte beeinträchtigen.
Vermeiden Sie helle oder blasse Farben, sie sind auf dem weißen Pop-up-Hintergrund schwer zu erkennen. Fett gedruckter Text kann helfen, die Farbunterschiede hervorzuheben.
Wenn Ihre Karte für die Verwendung in Apps und App-Buildern vorgesehen ist, sollten Sie die Themenfarbe der App berücksichtigen, die auch die Hintergrundfarbe des Pop-up-Fensters ändert, um optimale Ergebnisse zu erzielen.
Dieser Beitrag ist eine Übersetzung des amerikanischen Original-Beitrags.
Hier geht es zum Original-Beitrag!
