Teil 5: HTML mit Arcade in Pop-ups
Arcade-Ausdrücke ermöglichen Ihnen eine Vielzahl von Anpassungen der Karten. Arcade kann auf der gesamten ArcGIS Plattform genutzt werden. Sie können Ausdrücke verwenden, um neue Werte zu erstellen, die in Ihren Pop-ups angezeigt werden, aber sie können auch innerhalb des HTML- Codes zur weiteren Anpassung verwendet werden.
In diesem Blog ist beschrieben, wie das umgesetzt werden kann.
Im folgenden Beispiel wird ein Web Feature Service (WFS) aus dem Geoportal Nordrhein – Westfalen verwendet. Dieser WFS beinhaltet das Straßennetz und die Unfalldaten des Landes.
Für dieses Beispiel laden wir die Unfalldaten des Dienstes im Map Viewer.
Abbildung 1: Standard Pop-up
Um individuelle Pop-ups zu erstellen, muss die Standard Einstellung des Pop-up-Inhalts unter „Pop-up konfigurieren“ auf „Eine benutzerdefinierte Attributanzeige“ umgestellt werden.
Um den HTML- Code einzugeben, auf „Konfigurieren“ klicken und die Schaltfläche „HTML-Quelle“ aktivieren.
HTML- Code
Die zukünftigen Pop-up Informationen, sollen mit einer Tabelle strukturiert werden.
Dafür beginnen wir, die Tabelle im HTML- Code einzutragen.
Abbildung 2: HTML- Code für die Erstellung einer Tabelle
Wir möchten die Unfallkategorien farblich nach der Schwere der Unfälle und die Straßenklassen farblich nach der Art der Straße im Pop-up darstellen. Diese Aufgabe können wir mit Arcade- Ausdrücken lösen, indem wir angeben, dass der Hexagon-Wert für die Farbe ein bestimmter Wert sein soll. Wenn zum Beispiel die Straßenklasse „A“ ist, soll der Wert „#0000ff“ eingetragen werden, wenn aber die Straßenklasse „B“ ist, soll ein anderer Wert „#ffd700“ eingetragen werden.
Arcade- Ausdrücke
- Zuordnung der Unfallkategorien nach Farben:
- Zuordnung der Straßenklassen nach Farben:
Die erstellten Ausdrücke werden gespeichert und können nun im HTML- Code eingetragen werden.
Abbildung 3: HTML- Code mit Arcade- Ausdrücken und Attributen
Das angepasste Pop-up zeigt nun die Straßenklassen in verschiedenen Farben an (Blau für Autobahn, Gelb für Bundesstraße usw.), sowie die Unfallkategorien nach Unfallschwere (Grün für Leichtverletzten, Orange für Schwerverletzten usw.).
Abbildung 4
Abbildung 5
Abbildung 6
So ist auf einen Blick zu erkennen, wie schwer der Unfall war und auf welcher Straße er stattfand!
In einem zweiten Beispiel zeigen wir, wie mit Arcade-Ausdrücken Felder mit leeren Werten in Pop-ups ausgeblendet werden können.
Wir haben einen Layer mit Haltestellen, in dem es ein Attribut mit der Fahrplan-URL gibt. Jedoch hat nicht jeder Haltestellenpunkt eine URL zum Fahrplan hinterlegt.
Wenn wir ein Pop-up mit Link auf den Fahrplan erstellen, wird dieser Link auch angezeigt, wenn keine Werte vorhanden sind. Dieser Link führt auf eine leere Seite.
Abbildung 7
Diese Methode ist nutzerunfreundlich und ärgerlich für die Anwender, die dann auf einer leeren Webseite landen.
Das Problem kann gelöst werden, indem die Darstellung des Links mit Hilfe von Arcade gesteuert wird.
Der hier genutzte Ausdruck durchsucht das Feld „fahrplan“ nach Werten, und wenn ein Feld ohne Wert gefunden wird, wird kein Text zurückgegeben. Wird aber ein Wert im Feld gefunden, wird der Text „zum Fahrplan“ zurückgegeben.
Dieser Arcade-Ausdruck wird jetzt in der Pop-Up Konfiguration zusammen mit dem HTML-Code eingetragen:
Im Pop-up ist dann der Link nur zu sehen, wenn dieser auch tatsächlich eine URL zum Fahrplan enthält.
Ebenso wurde (nach dem Arcade-Ausdruck des ersten Beispiels) noch eine farbliche und textliche Information zum Vorhandensein eines Ticketautomaten ergänzt.
Abbildung 8: Kein Ticketautomat und kein Link zum Fahrplan
Abbildung 9: Kein Ticketautomat und Link zum Fahrplan
Abbildung 10: Ticketautomat und Link zum Fahrplan
An diesen beiden einfachen Beispielen haben wir gezeigt, wie sich Pop-ups mit HTML und Arcade sehr individuell und nutzerfreundlich gestalten lassen.
Probieren Sie es aus!
Das gezeigte Beispiel können Sie sich ansehen:
Weitere Informationen zu Arcade:
- Beschriftung von Layern mit Arcade
- Styling mit Arcade
- Pop-ups mit Arcade
- Geometrische Funktionen mit Arcade