Eine Web Experience mit zwei Karten erstellen
Eine neue Experience erstellen
In ArcGIS können Web-Apps mit ArcGIS Dashboards, ArcGIS Instant Apps oder ArcGIS StoryMaps erstellt werden. Bei diesem Projekt verwenden Sie zum Erstellen der App ArcGIS Experience Builder, da Sie damit eine optimale Kontrolle und die meisten Anpassungsmöglichkeiten für das Layout haben.
Hinweis:
Welchen App-Builder Sie in verschiedenen Situationen am besten verwenden, erfahren Sie im Artikel Which App Builder Do I Choose?
Mit Experience Builder erstellte Web-Apps werden auch als Web Experiences bezeichnet. Zunächst erstellen Sie mit der leeren Vollbildvorlage eine neue Experience.
- Rufen Sie dazu ArcGIS Online auf, oder öffnen Sie Ihr ArcGIS Enterprise-Portal.
- Melden Sie sich bei Ihrem ArcGIS-Konto an.
Hinweis:
Wenn Sie nicht über ein ArcGIS-Konto verfügen, informieren Sie sich über die Optionen für den Zugriff auf die Software.
- Klicken Sie oben auf der Seite neben Ihrem Benutzernamen auf die Schaltfläche "App-Startprogramm".
- Klicken Sie auf Experience Builder.
ArcGIS Experience Builder wird auf einer neuen Registerkarte angezeigt.
- Klicken Sie auf die Schaltfläche Neue erstellen.
Auf der Seite Eine Vorlage zum Beginnen auswählen wird eine Liste mit Vorlagen angezeigt, die Sie zum Erstellen allgemeiner Layout-Designs verwenden können. In diesem Lernprogramm beginnen Sie mit einer leeren Vorlage. Dennoch müssen Sie einen Seitentyp auswählen: Vollbild, Raster oder Bildlauf. Verwenden Sie den Seitentyp "Vollbild", da er sich gut für Apps eignet, bei denen die Karte im Mittelpunkt steht, und weil Sie damit eine optimale Kontrolle und die meisten Anpassungsmöglichkeiten für das Layout haben. Mit diesem Seitentyp können Sie Widgets an jeder beliebigen Position der Zeichenfläche platzieren, sogar solche, die einander überlappen.
- Klicken Sie auf der Kachel Leeres Vollbild auf Erstellen.
Hinweis:
Wenn das Fenster Erste Schritte angezeigt wird, klicken Sie auf Tour überspringen.
Daraufhin wird die Zeichenfläche angezeigt, auf der Sie die Web-App erstellen können.
- Klicken Sie auf der Builder-Werkzeugleiste oben auf der Seite auf Unbenannte Experience. Löschen Sie den vorhandenen Text, und geben Sie American River Marine Estuary ein.
Neben der Zeichenfläche ist der Bereich Widget einfügen geöffnet. In diesem Bereich werden alle Elemente (Widgets genannt) angezeigt, die Sie dem Layout hinzufügen können.
- Scrollen Sie im Bereich Widget einfügen nach unten zum Abschnitt Layout.
Layout-Widgets sind Container, mit denen Sie weitere Widgets besser in der Zeichenfläche anordnen können. Sie sorgen auch dann für ein übersichtliches Layout, wenn sich die Bildschirmgröße ändert. Ein Layout lässt sich am einfachsten entwerfen, wenn die Layout-Widgets vor allen anderen hinzugefügt und angeordnet werden.
- Ziehen Sie im Bereich Widget einfügen das Widget Zeile auf die Zeichenfläche.
- Klicken Sie auf der Zeichenfläche auf der Werkzeugleiste des Widgets "Zeile" auf die Schaltfläche Ausrichten und dann auf Vollständige Größe.
Daraufhin wird das Widget "Zeile" so vergrößert, dass es die gesamte Zeichenfläche abdeckt.
Karten-Widget mit zwei Karten hinzufügen
Sie haben bereits zwei Karten vom Mündungsgebiet erstellt, die Sie nun in die Experience einbinden müssen. Daher fügen Sie als Nächstes ein Karten-Widget hinzu und konfigurieren es mit zwei Karten.
- Scrollen Sie im Bereich Widget einfügen wieder nach oben, und klicken Sie auf das Widget Karte. Ziehen Sie es auf die Zeichenfläche in das Widget "Zeile".
Daraufhin wird auf der Zeichenfläche eine Standardkarte angezeigt.
- Ziehen Sie die linke oder rechte Kante des Karten-Widgets.
Es werden vertikale gestrichelte Linien angezeigt. Mit Zeilen-Widgets werden Inhalte nebeneinander in zwölf gleich großen Bereichen angeordnet.
- Ziehen Sie die Kanten der Karte, bis diese bis auf die beiden linken Bereiche in der Zeile die gesamte Fläche ausfüllt.
Die beiden linken Bereiche lassen Sie für eine Legende und andere Widgets frei.
Auf der anderen Seite der Zeichenfläche wird der Bereich Karte mit den Eigenschaften des ausgewählten Widgets angezeigt. Als Nächstes füllen Sie das Karten-Widget mit den beiden Karten, die Sie zuvor für dieses Projekt erstellt haben.
- Klicken Sie im Bereich Karte auf Karte auswählen.
- Klicken Sie unten im Bereich Daten auswählen auf Neue Daten hinzufügen.
- Klicken Sie im Fenster Daten hinzufügen auf die Registerkarte ArcGIS Online. Geben Sie in der Suchleiste American River owner:Learn_ArcGIS ein.
- Klicken Sie in den Suchergebnissen auf die Kacheln Tidal class und Cover type.
Auf den ausgewählten Karten werden Häkchen angezeigt.
- Klicken Sie auf Fertig.
Die beiden Karten werden dem Bereich Daten auswählen hinzugefügt.
- Klicken Sie im Bereich Daten auswählen auf Cover type und Tidal class.
Die beiden Karten werden dem Bereich Karte hinzugefügt. Auf der Zeichenfläche wird nun im Karten-Widget anstelle der Standardkarte der Welt, die bisher angezeigt wurde, eine der Karten vom Mündungsgebiet angezeigt. Der Maßstab ist zu klein: Das Mündungsgebiet wird mitten auf der Zeichenfläche nur sehr klein angezeigt. Daher ändern Sie die Standardausdehnung für das Karten-Widget.
- Klicken Sie im Bereich Karte unter Ursprüngliche Ansicht auf Benutzerdefiniert. Klicken Sie auf Ändern.
- Schwenken und zoomen Sie die Ansicht im Fenster Ursprüngliche Ansicht ändern, um das Mündungsgebiet in der Ansicht zu zentrieren.
- Klicken Sie auf OK.
Die Karte wird auf der Zeichenfläche auf den Maßstab und die Position gezoomt, die Sie festgelegt haben.
Die Karten prüfen
Im Folgenden prüfen Sie die beiden Karten und testen den Wechsel zwischen beiden.
- Klicken Sie auf der Werkzeugleiste des Builders auf Live-Ansicht.
In der Live-Ansicht können Sie mit der Zeichenfläche wie ein Benutzer interagieren, statt Widgets auszuwählen.
- Klicken Sie in der unteren linken Ecke des Karten-Widgets auf die Schaltfläche zum Wechseln der Karte, sodass die andere Karte angezeigt wird.
- Klicken Sie ggf. erneut auf die Schaltfläche zum Wechseln der Karte, bis die Karte Tidal class (mit Bilddaten) angezeigt wird.
Auf dieser Karte sind die Gezeitenzonen, die Supratidal- oder Spritzzonen und die trockenliegende Zonen des Mündungsgebiets festgelegt. Mündungsgebiete sind eine Art Feuchtgebiet. Sie sind Küstengewässer, in denen sich in der Regel Süßwasser aus einem Fluss mit Salzwasser aus einer Verbindung mit dem Meer mischt. Diese Mischung liefert viele Nährstoffe, was zu einer hohen Artenvielfalt führt.
Dieses Mündungsgebiet heißt American River und befindet sich auf Kangaroo Island in South Australia. Es ist ein bedeutendes Gebiet für Watvögel, Seevögel und Fische, zu dem der Pelican Lagoon Conservation Park gehört. Es ist jedoch durch die zunehmende Erschließung, den Tourismus und die Nährstoffbelastung bedroht.
Hinweis:
Weitere Informationen zum American River und anderen Mündungsgebieten auf Kangaroo Island finden Sie im Bericht Kangaroo Island Natural Resources Management Region: Estuaries Information Package vom Government of South Australia, Department for Environment and Heritage.
- Klicken Sie erneut auf die Schaltfläche zum Wechseln der Karte, sodass die Karte Cover type angezeigt wird.
Auf dieser Karte ist die primäre Vegetations- oder Sedimentart der einzelnen Bereiche im Mündungsgebiet dargestellt. Sie hätten diese Informationen auch in der ersten Karte angeben können, aber sie sind in einer separaten Karte besser lesbar. Je mehr Informationen in einer einzigen Karte enthalten sind, umso schwieriger lassen sich diese Informationen erfassen. Meist ist es am besten, eine zweite Karte zu erstellen.
- Zoomen und schwenken Sie die Karte.
- Klicken Sie oben links in der Karte auf die Schaltfläche Standardkartenansicht.
Daraufhin wird die Karte wieder in der ursprünglich konfigurierten Ansicht angezeigt.
Hinweis:
Wenn das Layout nicht vollständig angezeigt wird, klicken Sie in Experience Builder rechts unten auf die Schaltfläche Breite an aktuelles Fenster anpassen.
Kartenwerkzeuge konfigurieren
Die Schaltfläche Standardkartenansicht ist ein Beispiel für ein Kartenwerkzeug. Im Folgenden konfigurieren Sie weitere Werkzeuge, die oben im Karten-Widget angezeigt werden. Nehmen Sie sich Zeit, um zu überlegen, welche Sie für die App benötigen. Fügen Sie dem Layout keine Werkzeuge hinzu, nur weil das möglich ist: Sie sollten immer erklären können, warum Sie ein Werkzeug hinzugefügt haben. Unnötige Elemente lenken nur von der Botschaft der Karte ab und können den Benutzer verwirren.
- Deaktivieren Sie im Bereich Karte unter Werkzeuge das Werkzeug Suchen.
Daraufhin wird die Schaltfläche Suchen nicht mehr auf der Karte angezeigt. Im Mündungsgebiet gibt es keine Orts- oder Straßennamen, nach denen gesucht werden könnte. Daher wird eine Suchleiste nicht benötigt.
Beim Werkzeug Kompass handelt es sich um einen Nordpfeil. Nicht für jede Karte ist ein Nordpfeil erforderlich. Und bei Webkarten ist die Wahrscheinlichkeit geringer, dass ein Nordpfeil benötigt wird, als bei statischen Karten, da die Benutzer bei Webkarten zoomen können, bis sie eine erkennbare Geographie finden. Diese App wird jedoch hauptsächlich auf Geräten mit Touchscreen verwendet, sodass es eher wahrscheinlich ist, das die Benutzer die Karten versehentlich drehen. Daher können Sie ihnen die Neuausrichtung der Karten erleichtern, indem Sie einen Nordpfeil hinzufügen.
- Aktivieren Sie hierzu unter Werkzeuge das Werkzeug Kompass.
Daraufhin wird die Schaltfläche Kompass auf der Karte unterhalb der Schaltfläche Standardkartenansicht angezeigt.
Mit den Werkzeugen Layer und Grundkarte können Benutzer festlegen, welche Layer angezeigt und welche Grundkarte verwendet wird. Diese Optionen sind hilfreich, wenn der Benutzer bei seinen Erkundungen viel Spielraum für Entscheidungen braucht. In diesem Beispiel erzählen Sie eine kontrollierte Story über das Mündungsgebiet. Wenn Sie dem Benutzer Möglichkeiten zum Ändern der Karte geben, haben Sie weniger Einflussmöglichkeiten. Zudem lenken Sie dadurch von der Botschaft ab. Daher fügen Sie weder das Werkzeug Layer noch das Werkzeug Grundkarte hinzu.
Die Benutzer müssen keine Flächen oder Entfernungen berechnen. Daher fügen Sie auch das Werkzeug Messen ebenfalls nicht hinzu. Die Benutzer bekommen jedoch einen besseren Überblick über das Mündungsgebiet, wenn sie genauere Informationen über die Größe erhalten. Da es nur wenige visuelle Anhaltspunkte auf den Karten gibt, anhand derer sich der Maßstab intuitiv erkennen lässt, fügen Sie eine Maßstabsleiste hinzu.
- Aktivieren Sie das Werkzeug Maßstabsleiste.
Daraufhin wird unten auf der Karte eine Maßstabsleiste angezeigt.
Hinweis:
Informationen zu den anderen Karten-Werkzeugen finden Sie auf der Hilfeseite Widget "Karte".
- Deaktivieren Sie auf der Werkzeugleiste des Builders die Option Live-Ansicht.
Es gibt keine Regeln dafür, welche Werkzeuge in eine Karte eingebunden werden sollen. Sie müssen sich je nach Zweck, Zielgruppe, Botschaft und Verwendung der Karte jeweils überlegen, ob ein bestimmtes Werkzeug benötigt wird.
Kopfzeile mit einem Titel hinzufügen
Die Anzeige einer Karte in einer Web-App hat den Vorteil, dass ein auffälliger Kartentitel angepasst werden kann. Im Folgenden erstellen Sie eine Kopfzeile für das Layout und fügen für den Titel ein Text-Widget hinzu. Kopf- und Fußzeilen können im Bereich Seite aktiviert werden.
- Klicken Sie auf der Werkzeugleiste im Seitenbereich auf die Schaltfläche Seite. Klicken Sie in dem Bereich, der daraufhin angezeigt wird, auf das hervorgehobene Element Seite.
Der Bereich Seite wird auf der anderen Seite der Zeichenfläche mit den Eigenschaften der Seite angezeigt.
- Aktivieren Sie im Bereich Seite die Umschaltfläche Kopfzeile.
Im oberen Bereich der Zeichenfläche wird eine blaue Kopfzeile angezeigt. Das Zeilen-Widget wird nach unten verschoben, um Platz zu machen. Das übliche Blau der Kopfzeile ist in keiner Ihrer Karten vorhanden. Damit das Layout konsistent und kohärent wird, verwenden Sie eine eingeschränkte Farbpalette, indem Sie beispielsweise in den Karten verwendete Farben wiederholt verwenden.
Ihre beiden Karten sind sehr farbenfroh, und Sie möchten, dass sie sich abheben. Wenn Sie für Elemente im Layout, die nicht Teil der Karten sind, neutrale Farben wie Schwarz, Weiß oder Grau verwenden, heben sich die Karten besser ab. Schwarz ist eine neutrale Farbe, die auch in den Karten verwendet wird. Daher eignet sie sich gut für die Kopfzeile.
- Klicken Sie im Bereich Seite auf das blaue Quadrat neben Füllen. Klicken Sie unter Standardfarben auf das schwarze Quadrat.
Daraufhin wird die Farbe der Kopfzeile aktualisiert. Als Nächstes fügen Sie ein Text-Widget für den Titel hinzu.
- Zeigen Sie auf der Zeichenfläche auf die Kopfzeile. Klicken Sie auf Kopfzeile bearbeiten.
- Klicken Sie auf der Werkzeugleiste im Seitenbereich auf die Schaltfläche Einfügen.
Daraufhin wird der Bereich Widget einfügen angezeigt.
- Klicken Sie im Bereich Widget einfügen auf den Pfeil neben Kartenbasiert, um diesen Abschnitt auszublenden.
- Blenden Sie auch den Abschnitt Datenbasiert aus.
- Klicken Sie unter Seitenelemente auf das Widget Text, und ziehen Sie es. Ziehen Sie es auf die Zeichenfläche, und legen Sie es in der Kopfzeile ab.
Daraufhin wird auf der Zeichenfläche ein Text-Widget angezeigt und der Bereich Text wird eingeblendet. Der Text ist standardmäßig schwarz und daher vor dem schwarzen Hintergrund der Kopfzeile nicht zu erkennen. Deshalb ändern Sie die Farbe, sodass Text weiß dargestellt wird, bevor Sie Text eingeben.
- Klicken Sie hierzu im Bereich Text unter Textformat auf die Schaltfläche Schriftfarbe. Klicken Sie unter Standardfarben auf das weiße Quadrat.
- Klicken Sie auf die Schaltfläche Fett.
- Doppelklicken Sie auf der Zeichenfläche auf das Text-Widget, und geben Sie American River Marine Estuary ein. Drücken Sie die Eingabetaste, und geben Sie Kangaroo Island, South Australia ein.
Als Nächstes vergrößern Sie die oberste Textzeile.
- Doppelklicken Sie auf die oberste Textzeile, um sie auszuwählen. Legen Sie in der Werkzeugleiste, die daraufhin angezeigt wird, die Schriftgröße auf 25 fest, und drücken Sie die Eingabetaste.
Nun ist das Text-Widget nicht mehr groß genug, um den vollständigen Titel anzuzeigen. Vergrößern Sie es, sodass die ganze Kopfzeile Platz hat.
- Klicken Sie im Bereich Text auf die Registerkarte Style.
- Klicken Sie auf die Optionsschaltfläche direkt unter der Registerkarte Style, und klicken Sie dann auf Vollständige Größe.
Wenn Sie das Text-Widget so festlegen, dass es die gesamte Größe der Kopfzeile einnimmt, ist sichergestellt, dass der Titeltext immer den maximal verfügbaren Platz belegt. Das ist umso wichtiger, wenn die App auf einem kleineren Bildschirm angezeigt wird.
- Klicken Sie auf den leeren Bereich des Zeilen-Widgets neben der Karte, um die Bearbeitung der Kopfzeile zu beenden.
- Klicken Sie auf der Werkzeugleiste des Builders auf die Schaltfläche Speichern.
In diesem Lernprogramm haben Sie eine Web-App mithilfe von ArcGIS Experience Builder erstellt. Sie enthält eine Kopfzeile mit einem Titel und ein Zeilen-Widget, das ein Karten-Widget mit zwei Karten und verschiedenen Karten-Werkzeugen enthält. Sie haben einige Entwurfskonzepte kennengelernt, die für den Entwurf von Web-App-Layouts wichtig sind, z. B. die Auswahl von Farben für Elemente, die nicht Teil der Karte sind, und die Entscheidung, welche Werkzeuge eingebunden werden. Im nächsten Lernprogramm in dieser Reihe (Ein Web-App-Layout mit mehreren Widgets gestalten) erfahren Sie, wie die Widgets "Legende", "Lesezeichen" und "Vergleichen" zur Experience "American River Marine Estuary" hinzugefügt werden.
