Aus einer Webkarte eine Web-App erstellen

Ihr Team ist sich darin einig, dass eine kartenfokussierte Web-App das beste Kommunikationsmittel für Ihre Story ist. Sie werden also eine Webkarte suchen und modifizieren, aus der Karte eine neue Web-App erstellen und ihre grundlegende Layoutstruktur konfigurieren.

Eine Karte mit Daten zur Wohnsituation suchen

Statt mit einer leeren Webkarte zu beginnen, können Sie auch eine vorhandene Webkarte modifizieren. Der ArcGIS Living Atlas of the World ist eine kuratierte Sammlung geographischer Informationen und Karten. Dort finden Sie Esri Maps for Public Policy, eine Site, die mit dem Ziel entwickelt wurde, das Niveau bei der Berücksichtigung und Verwendung räumlicher und sonstiger Daten in der Politik zu heben. Diese Site können Sie nach Daten und Karten zur Wohnungsbaupolitik durchsuchen.

  1. Navigieren Sie zur Site Esri Maps for Public Policy.

    Hier finden Sie Datenressourcen zu den verschiedensten politischen Themen, die Sie durchsuchen können. In diesem Lernprogramm suchen Sie nach einer Webkarte zur Wohnsituation.

  2. Klicken Sie auf die Registerkarte Issues.

    Registerkarte "Issues"

  3. Klicken Sie auf die Registerkarte Economic Opportunity. Geben Sie in der Suchleiste den Text vacant housing ein, und drücken Sie die Eingabetaste.

    Registerkarte "Economic Opportunity" und Suchleiste

  4. Klicken Sie in den Suchergebnissen auf den Titel der Webkarte mit dem Namen Owned, Rented, or Vacant Housing Units von lisa_berry.

    Die Elementseite der Karte wird angezeigt. Dort erfahren Sie etwas über die Karte und die Daten, die sie enthält. Diese Karte zeigt, wo selbstgenutzte Eigentumswohnungen, vermietete Wohnungen oder leerstehende Wohnungen vorherrschend sind. Die Daten in dieser Karte stammen aus dem American Community Survey (ACS), der vom United States Census Bureau durchgeführt wird. Diese Karte eignet sich gut als Ausgangspunkt für Ihre App.

    Hinweis:

    Die Fünf-Jahres-Schätzungen des ACS decken eine breite Palette an Themen, wie zum Beispiel Armut, Einkommen und Wohnen, ab und werden häufig für staatspolitische Entscheidungen verwendet. Weitere Informationen zu den verfügbaren ACS-Layern in ArcGIS Living Atlas finden Sie unter Mit den Census ACS-Layern in Living Atlas die eigene Gemeinde besser kennenlernen.

    Da Sie diese Karte in einer für die Öffentlichkeit zugänglichen Web-App verwenden möchten, sollten Sie, bevor Sie fortfahren, überprüfen, ob spezielle Nutzungsbeschränkungen für den Inhalt bestehen.

  5. Führen Sie einen Bildlauf nach unten zum Abschnitt Nutzungsbedingungen am Ende der Elementseite durch.

    Abschnitt mit den Esri Nutzungsbedingungen

    Die Karte ist gemäß den für Web-Services und APIs geltenden Nutzungsbedingungen für Esri lizenziert. Weitere Informationen zu diesen Bedingungen erhalten Sie, wenn Sie auf View Summary zum Anzeigen der Zusammenfassung oder auf View Terms of Use zum Anzeigen der Nutzungsbedingungen klicken. In der Zusammenfassung wird erläutert, dass jeder Benutzer diese Webkarte für den internen und den externen Gebrauch verwenden darf, wenn er Esri und die Datenanbieter in seinen Quellennachweisen aufführt.

  6. Führen Sie einen Bildlauf nach oben zum Abschnitt Quellennachweise (Attribuierung) durch.

    Abschnitt "Quellennachweise"

    Dies sind die Informationen, die Sie benötigen, um die Datenquellen richtig anzugeben. Diese Informationen werden Sie später verwenden.

Webkarte konfigurieren

Bisher haben Sie eine Webkarte zur Wohnraumbelegung, die Sie als primären Inhalt für Ihre Web-App verwenden können, gefunden und sich davon überzeugt, dass Sie die Berechtigung zu ihrer Verwendung in Ihrem Projekt besitzen. Als Nächstes sollten Sie eine Kopie der Webkarte speichern und ihre Layer neu konfigurieren, damit sie für den Zweck Ihrer Web-App besser geeignet ist.

  1. Klicken Sie oben auf der Elementseite auf Anmelden. Melden Sie sich bei Ihrem ArcGIS-Organisationskonto an.
    Hinweis:

    Wenn Sie über kein Organisationskonto verfügen, informieren Sie sich über die Optionen für den Zugriff auf die Software.

  2. Klicken Sie oben auf der Elementseite auf die Schaltfläche In Map Viewer öffnen.

    Schaltfläche "In Map Viewer öffnen"

    Hinweis:

    Wenn die Schaltfläche In Map Viewer öffnen nicht angezeigt wird, dann klicken Sie auf den Pfeil neben In Map Viewer Classic öffnen, und wählen Sie In Map Viewer öffnen aus.

    Die Karte wird angezeigt.

  3. Klicken Sie auf der (dunklen) Werkzeugleiste Inhalt auf die Schaltfläche Layer.

    Schaltfläche "Layer" auf der Werkzeugleiste "Inhalt"

    Tipp:

    Wenn die Werkzeugleiste Inhalt nicht angezeigt wird, dann klicken Sie oben auf der Seite auf In der neuen Map Viewer-Version öffnen.

    Der Bereich Layer wird angezeigt. Aufgelistet sind drei Layer mit den Daten zur Wohnsituation für die Ebenen der Bundesstaaten, der Landkreise und der Zählbezirke. Da laut Konfiguration diese Layer bei unterschiedlichen Maßstäben angezeigt werden, ist aktuell nur der Layer Tract sichtbar.

    Da sich Ihr Interessenverband auf die Probleme mit der Wohnsituation auf lokaler Ebene konzentriert, sind Sie nur an den Daten auf der Ebene der Zählbezirke interessiert. Sie sollten eine Kopie der Webkarte speichern, die nur den Layer Tract enthält.

  4. Klicken Sie im Bereich Layer auf dem Layer State auf die Schaltfläche Optionen. Klicken Sie auf Entfernen.

    Schaltflächen "Optionen" und "Entfernen"

  5. Entfernen Sie auch den Layer County.

    Jetzt sind nur noch die Daten, die für Ihre Web-App relevant sind, übrig. Als Nächstes sollten Sie sicherstellen, dass sie bei allen Maßstäben sichtbar sind.

  6. Klicken Sie auf den Layer Tract.

    Auf der anderen Seite der Karte wird der Bereich Eigenschaften angezeigt.

    Tipp:

    Wenn der Bereich Eigenschaften nicht sichtbar ist, dann klicken Sie auf der (hellen) Werkzeugleiste Einstellungen auf die Schaltfläche Eigenschaften.

  7. Führen Sie im Bereich Eigenschaften einen Bildlauf nach unten durch. Stellen Sie den Schieberegler Sichtbarer Bereich so ein, dass der sichtbare Bereich von Welt bis Raum reicht.

    Schieberegler "Sichtbarer Bereich"

  8. Klicken Sie auf der Werkzeugleiste Inhalt auf die Schaltfläche Speichern und öffnen und dann auf Speichern unter.

    Schaltflächen "Speichern und öffnen" und "Speichern"

  9. Geben Sie im Fenster Speichern als Titel den Text Housing map ein. Ersetzen Sie im Feld Zusammenfassung den vorhandenen Text durch den folgenden Text:

    This map shows if owner-occupied housing, rented housing, or vacant housing is more prevalent in an area. This national data is from the most current American Community Survey (ACS) estimates census tracts. This is a copy of the web map found here: https://www.arcgis.com/home/item.html?id=8e3b994782444345953a30e2a6e5ab23

  10. Klicken Sie auf Karte speichern.

Eine Web-App erstellen

Sie haben jetzt eine Webkarte, die entsprechend Ihren Anforderungen konfiguriert ist. Aus dieser Karte können Sie mit ArcGIS Experience Builder eine Web-App erstellen. Das Layout der App werden Sie mit einer Karte und einer Spalte gestalten.

  1. Klicken Sie auf der Werkzeugleiste Inhalt auf die Schaltfläche App erstellen.

    Schaltfläche "App erstellen" und Galerie

    Daraufhin wird eine Liste der Optionen angezeigt. Es gibt mehrere ArcGIS-Produkte, mit denen Sie Web-Apps aus Webkarten erstellen können. Jedes Produkt stellt andere Werkzeuge bereit und ist für andere Situationen geeignet. Da bei diesem Projekt Ihr Schwerpunkt auf der Kontrolle über das Aussehen der App liegt, kann es zum Stil der Webkarte und Ihrer Organisation passen. Sie sollten sich für ArcGIS Experience Builder entscheiden, da dieses Produkt die meiste Kontrolle über die Anpassung ermöglicht.

  2. Klicken Sie auf Experience Builder.

    Eine Vorlagengalerie wird angezeigt. Für zukünftige Projekte können Sie mit diesen Vorlagen viel Zeit sparen, indem Sie das Layout vorkonfigurieren. In diesem Lernprogramm sollten Sie jedoch mit einer leeren Zeichenfläche beginnen, um direkt zu erlernen, wie ein Layout strukturiert wird.

  3. Klicken Sie auf der Kachel Leeres Vollbild auf Erstellen.

    Schaltfläche "Erstellen" auf der Kachel "Leeres Vollbild"

  4. Wenn das Fenster Erste Schritte angezeigt wird, dann klicken Sie auf Überspringen.

    ArcGIS Experience Builder wird mit der Karte in der Mitte der Zeichenfläche geöffnet. Geben Sie Ihrer Experience einen aussagekräftigeren Titel.

  5. Klicken Sie auf dem Menüband auf Unbenannte Experience, und geben Sie Housing Availability ein.

    App-Titel

    Als Nächstes sollten Sie sicherstellen, dass die gesamte Zeichenfläche zu sehen ist.

  6. Klicken Sie rechts unten auf dem Bildschirm auf die Schaltfläche Breite an aktuelles Fenster anpassen.

    Schaltfläche "Breite an aktuelles Fenster anpassen"

  7. Wenn der Bereich Widget einfügen noch nicht sichtbar ist, dann klicken Sie auf der Werkzeugleiste im Seitenbereich auf die Schaltfläche Einfügen.

    Schaltfläche "Einfügen" auf der Werkzeugleiste im Seitenbereich

  8. Führen Sie im Bereich Widget einfügen einen Bildlauf nach unten zum Abschnitt Layout durch.

    Mit Layout-Widgets können Sie Gruppen mehrerer Widgets in Ihrer App anordnen. Das saubere Festlegen der Größe und Position von Widgets ist zumeist einfacher, wenn sie sich in einem Layout-Widget befinden.

  9. Ziehen Sie das Widget Spalte auf die Zeichenfläche.

    Zur Zeichenfläche hinzugefügtes Widget "Spalte"

  10. Klicken Sie auf der Symbolleiste des Widgets Spalte auf die Schaltfläche zum Positionieren, und wählen Sie Vollständige Höhe aus.

    Schaltflächen "Position" und "Vollständige Höhe"

  11. Klicken Sie erneut auf die Schaltfläche zum Positionieren, und klicken Sie auf Links fangen.

    Nachdem die Spalte positioniert wurde, können Sie die Größe der Karte anpassen. Da eines der Ziele Ihres Projekts darin besteht, dass das Hauptaugenmerk der App auf der Karte liegt, sollten Sie dafür sorgen, dass sie die gesamte Zeichenfläche ausfüllt.

  12. Klicken Sie auf das Widget Karte, um es auszuwählen. Klicken Sie auf der Symbolleiste der Karte auf die Schaltfläche zum Positionieren, und wählen Sie Vollständige Größe aus.

    Schaltflächen "Position" und "Vollständige Größe"

    Die Karte wird vergrößert und füllt die gesamte Zeichenfläche aus, wobei ein Teil von ihr hinter der Spalte verborgen ist. Als Nächstes sollten Sie in den Einstellungen der Eigenschaften der Karte die Standardausdehnung der Karte definieren.

  13. Klicken Sie im Bereich Karte unter Ursprüngliche Ansicht auf Benutzerdefiniert und dann auf Ändern.

    Option "Benutzerdefiniert" und Schaltfläche "Ändern"

    Das Fenster Ursprüngliche Ansicht ändern wird angezeigt.

  14. Zoomen Sie auf Ihre Community oder ein anderes Gebiet der Vereinigten Staaten, das Sie interessiert, zum Beispiel Manhattan Island in New York City.

    Auf Manhattan Island zentrierte Karte

  15. Klicken Sie auf OK.

    Nehmen Sie einige weitere Änderungen an der Konfiguration des Widgets Karte vor.

  16. Deaktivieren Sie im Bereich Karte unter Werkzeuge die Option Suchen.

    Option "Suchen" deaktiviert

    Später fügen Sie das Widget Suche hinzu, das mehr Kontrolle ermöglicht.

  17. Wählen Sie im unteren Teil des Bereichs Karte unter Werkzeuglayout unter Groß und mittelgroß die zweite Option aus.

    Zweite Option unter "Werkzeuglayout" für großen und mittelgroßen Bildschirm ausgewählt

    Die Navigationssteuerelemente der Karte werden in die untere rechte Ecke der Karte verschoben. Zuvor waren sie hinter der Spalte verborgen.

    Als Letztes sollten Sie Pop-ups deaktivieren. Später in diesem Lernprogramm werden Sie Widgets hinzufügen, in denen Informationen zur Anzahl der Wohneinheiten der einzelnen Typen in jedem Zählbezirk angezeigt werden. Diese Informationen machen die Pop-ups überflüssig.

  18. Aktivieren Sie unten im Bereich Karte unter Optionen die Option Pop-up aktivieren.

    "Pop-ups aktivieren" aktiviert

  19. Klicken Sie auf der Werkzeugleiste des Builders auf die Schaltfläche Speichern.

    Schaltfläche "Speichern" auf der Builder-Werkzeugleiste

  20. Schließen Sie die Browser-Registerkarte Map Viewer und die Browser-Registerkarte "Esri Maps for Public Policy".

In diesem Lernprogramm haben Sie bisher eine Webkarte gefunden, entsprechend Ihren Anforderungen modifiziert und in ArcGIS Experience Builder in eine Web-App konvertiert.


Widgets hinzufügen und konfigurieren

Nachdem Sie die Karte konfiguriert haben, können Sie einige Widgets hinzufügen, damit der Benutzer die Daten besser verstehen und erkunden kann. Sie werden Diagramm-, Text-, Such- und Menü-Widgets hinzufügen.

Ein Diagramm-Widget hinzufügen

In der leeren Spalte können Sie ein Kreisdiagramm hinzufügen. Danach verbinden Sie das Diagramm mit den Daten in der Karte, damit in ihm die Zusammensetzung des Wohnraums im ausgewählten Zählbezirk angezeigt wird.

  1. Öffnen Sie bei Bedarf Ihre Housing Availability-App in ArcGIS Experience Builder erneut.

    Karte und Spalte

  2. Klicken Sie im Bereich Widget einfügen auf die Schaltfläche Suchen, und geben Sie chart ein.

    Suchleiste im Bereich "Widget einfügen"

  3. Ziehen Sie in den Suchergebnissen das Widget Diagramm auf die Spalte.

    In der Spalte wird ein leeres Diagramm-Widget angezeigt. Der Rest der Spalte ist transparent, da sie standardmäßig keine Hintergrundfarbe hat.

    Leeres Diagramm-Widget

    Als Nächstes sollten Sie das Diagramm so konfigurieren, dass in ihm die Informationen zur Wohnsituation aus der Karte angezeigt werden.

  4. Klicken Sie im Bereich Diagramm auf Daten auswählen.

    Schaltfläche "Daten auswählen"

  5. Erweitern Sie im Bereich Daten auswählen den Eintrag Housing map, und klicken Sie auf Tract.

    "Tract" mit den Zählbezirksdaten im Bereich "Daten auswählen"

  6. Klicken Sie im Bereich Diagramm unter Tract auf Standard, und wählen Sie Ausgewählte Features aus.
  7. Klicken Sie unter Diagrammtyp auf Diagramm auswählen, und wählen Sie im Bereich Diagrammtyp die Option Kreisdiagramm aus.

    "Tract" auf "Ausgewählte Features" festgelegt und "Diagrammtyp" auf "Kreis" festgelegt

    Für diese Daten ist ein Kreisdiagramm geeignet, da sie in drei Kategorien (selbstgenutzt, gemietet, leerstehend), die zusammenaddiert 100 Prozent der Wohneinheiten ergeben, eingeteilt wurden.

  8. Legen Sie im Bereich Diagramm unter Daten die folgenden Parameter fest:
    • Wählen Sie für Kategorietyp den Typ Nach Feld aus.
    • Wählen Sie für Statistik die Option Summe aus.
    • Aktivieren Sie für Zahlenfelder die Felder Vacant Housing Units, Owner-Occupied Housing Units und Renter-Occupied Housing Units.
    • Wählen Sie für Sortieren nach die Option Kategorieachse aus.

    Parameter für "Daten"

    Im Diagramm wird die Warnung Keine Daten gefunden angezeigt. Diese Warnung wird angezeigt, da Sie festgelegt haben, dass ausgewählte Features im Diagramm angezeigt werden sollen, aktuell aber keine Features ausgewählt sind.

  9. Klicken Sie auf der Werkzeugleiste des Builders auf Live-Ansicht.

    Schaltfläche "Live-Ansicht"

    Im Live-Ansichtsmodus können Sie wie ein Benutzer mit Ihrer Karte interagieren. Sie können Widgets weder auswählen noch verschieben.

  10. Kicken Sie auf der Karte auf einen Zählbezirk.

    Nachdem ein Zählbezirk ausgewählt wurde, wird das Kreisdiagramm blau dargestellt und die Warnung verschwindet. Beenden Sie den Live-Ansichtsmodus, damit Sie mit dem Konfigurieren des Widgets Diagramm fortfahren können.

  11. Deaktivieren Sie die Live-Ansicht. Klicken Sie auf das Widget Diagramm.

    Der Bereich Diagramm wird wieder angezeigt. Sie sollten dem Diagramm eine Legende zum Erläutern der drei Kategorien hinzufügen.

  12. Klicken Sie im Bereich Diagramm neben Allgemein auf den Pfeil, um diesen Abschnitt einzublenden.

    Pfeil zum Erweitern des Abschnitts "Allgemein"

  13. Aktivieren Sie Legende. Wählen Sie für Legendenposition die Option Unten aus.

    "Legende" aktiviert und "Legendenposition" auf "Unten" festgelegt

    Als Nächstes sollten Sie dem Diagramm die Farben hinzufügen, die den Farben auf der Karte entsprechen.

  14. Blenden Sie den Abschnitt Intervalle ein. Wählen Sie unter Farbmodus den Modus Nach Kategorie aus, und klicken Sie auf die Schaltfläche "Einstellungen".

    Option "Nach Kategorie" und Schaltfläche "Kategorieeinstellungen"

  15. Klicken Sie im Bereich Segmentfarbe auf die Farbe neben B25002_003E, und klicken Sie auf Mehr.

    Schaltfläche "Mehr" im Fenster "Farbauswahl"

  16. Geben Sie unter Hex den Wert #aa7b7b ein, und drücken Sie die Eingabetaste.

    Auf "#aa7b7b" festgelegte Farbe

    Die Farbe wechselt zu einem gedeckten Rot.

  17. Legen Sie für B25003_002E (selbst genutzte Wohneinheiten) die gelbe Farbe mit dem Wert #d3c268 fest. Legen Sie für B25003_003E (gemietete Wohneinheiten) die blaue Farbe mit dem Wert #6b99b5 fest.

    Das Diagramm und seine Legende stimmen jetzt mit den Farben der Karte überein. Wenn Ihr ausgewählter Zählbezirk gelb ist, dann ist das größte Segment im Kreisdiagramm ebenfalls gelb.

    Diagramm und Legende mit den Farben Rot, Gelb und Blau

    Nach dem Konfigurieren des Diagramms mit den Farben auf der Karte ist es besser lesbar und kann auch als Legende der Karte dienen.

  18. Aktivieren Sie die Live-Ansicht, und klicken Sie auf verschiedene Zählbezirke, um die Veränderungen im Diagramm zu beobachten.
    Hinweis:

    Bei einigen Zählbezirken werden nur ein oder zwei Segmente angezeigt, da in ihnen nur ein oder zwei Wohnungstypen vorkommen.

Eine Ansicht für eine leere Auswahl konfigurieren

Im Widget Diagramm wird in bestimmten Situationen weiterhin die Warnung Keine Daten gefunden angezeigt. Deshalb sollten Sie einen Zählbezirk auswählen, der als Standard-Feature dient. Wenn die Web-App zum ersten Mal geöffnet wird, werden im Diagramm die Daten für das Standard-Feature angezeigt.

  1. Klicken Sie auf der Karte auf ein Gebiet ohne Zählbezirk, zum Beispiel Central Park, oder auf eine Wasserfläche.

    Im Diagramm wird die Ansicht Keine Daten gefunden angezeigt. Diese Ansicht des Diagramms wird auch beim erstmaligen Öffnen der Web-App angezeigt. Dieses Problem kann durch Konfigurieren einer Ansicht für eine leere Auswahl gelöst werden.

  2. Klicken Sie auf der Werkzeugleiste im Seitenbereich auf die Schaltfläche Daten. Klicken Sie im Bereich Daten auf die Kachel Housing map.

    Kachel "Housing map" im Bereich "Daten"

  3. Klicken Sie unter Wird verwendet auf die Kachel Tract.
  4. Aktivieren Sie unten im Bereich das Kontrollkästchen Ansicht für leere Auswahl.

    Das Widget Diagramm wird mit Segmenten in Rot, Blau und Gelb angezeigt. Mit dieser Einstellung wird sichergestellt, dass das angezeigte Diagramm nicht leer ist, wenn kein Feature ausgewählt ist.

  5. Klicken Sie neben dem Kontrollkästchen auf die Schaltfläche Einstellungen.

    "Ansicht für leere Auswahl" aktiviert und Schaltfläche "Einstellungen"

    Das Fenster Ansicht für leere Auswahl wird angezeigt. Hier können Sie entscheiden, welcher Zählbezirk angezeigt werden soll, wenn auf der Karte kein Zählbezirk ausgewählt ist. In den folgenden Schritten wählen Sie den Zählbezirk 94 in New York County, New York, aus. Wenn Sie Ihre Karte auf einer anderen Stadt zentriert haben, dann wählen Sie stattdessen einen Zählbezirk im dortigen Gebiet aus.

  6. Klicken Sie auf der Registerkarte Filter auf Hinzufügen und dann auf Klauselsatz.

    Option "Klauselsatz" im Menü "Hinzufügen"

    Zwei leere Klauseln werden angezeigt.

  7. Klicken Sie noch einmal auf Hinzufügen und dann auf Klausel.

    Jetzt sind drei Klauseln vorhanden. Die erste Klausel sollten Sie verwenden, um die Daten nach Bundesstaat einzugrenzen.

  8. Klicken Sie für die erste Klausel auf OBJECTID, und wählen Sie State aus. Wählen Sie im zweiten Menü den Eintrag ist aus.
  9. Klicken Sie neben dem dritten Menü auf die Schaltfläche Quellentyp auswählen, und wählen Sie Eindeutig aus.

    Option "Eindeutig" im Menü "Quellentyp auswählen"

    Jetzt können Sie aus einer Liste aller eindeutigen Werte im Feld State auswählen.

  10. Klicken Sie auf das dritte Menü. Geben Sie in der Suchleiste den Begriff new ein, und wählen Sie New York oder Ihren gewünschten Bundesstaat aus.

    New York im dritten Menü

  11. Konfigurieren Sie die zweite Klausel mit dem Wortlaut County ist New York County bzw. mit Ihrem gewünschten Landkreis. Wenn der Landkreis im dritten Menü nicht angezeigt wird, dann klicken Sie auf Weitere suchen, um weitere Suchergebnisse zu erhalten.
    Tipp:

    Denken Sie daran, den Quellentyp auf Eindeutig festzulegen.

  12. Konfigurieren Sie die dritte Klausel mit dem Wortlaut NAME ist Census Tract 94 bzw. mit einem Zählbezirk in Ihrem gewünschten Gebiet.
  13. Stellen Sie sicher, dass das Steuerelement oberhalb der Klauseln auf Und festgelegt ist.

    Drei fertige Klauseln

    Wenn Und ausgewählt ist, muss ein Feature alle drei Klauseln erfüllen. Die Tabelle enthält eine Zeile für das eine Feature, das durch die drei Klauseln ausgewählt wurde. Im Kreisdiagramm werden dann die Ergebnisse für diesen Zählbezirk angezeigt, wenn auf der Karte kein Zählbezirk ausgewählt ist.

  14. Klicken Sie auf Änderungen übernehmen.
    Hinweis:

    Diese Standarddiagrammansicht wird auch beim erstmaligen Öffnen der Web-App angezeigt. Die Ansicht ohne Daten wird weiterhin angezeigt, wenn ein leerer Teil der Karte ausgewählt ist.

Das Aussehen des Diagramms ändern

Um das Widget Diagramm fertigzustellen, sollten Sie noch einige seiner Darstellungseigenschaften anpassen. Zuerst sollten Sie die Schaltflächen oben im Widget entfernen. Diese stellen Funktionen bereit, die in Ihrer App nicht benötigt werden. Sie sollten sie entfernen, damit sie nicht von der Botschaft der Karte ablenken.

  1. Deaktivieren Sie die Live-Ansicht, und wählen Sie das Widget Diagramm aus.
  2. Blenden Sie im Bereich Diagramm den Abschnitt Werkzeuge ein. Deaktivieren Sie Auswahl.

    "Auswahl" deaktiviert

    Zwei der Schaltflächen verschwinden aus dem Widget Diagramm.

  3. Klicken Sie auf die Registerkarte Aktion und dann auf die Registerkarte Datenaktion. Deaktivieren Sie Datenaktion aktivieren.

    "Datenaktion aktivieren" deaktiviert

    Die dritte Schaltfläche verschwindet aus dem Diagramm. Als Nächstes sollten Sie die Hintergrundfarbe des Widgets Diagramm ändern.

  4. Klicken Sie auf die Registerkarte Inhalt, und blenden Sie den Abschnitt Darstellung ein. Klicken Sie auf die Hintergrundfarbe und dann auf Mehr.
  5. Geben Sie #000000 als HEX-Wert ein. Geben Sie für A den Wert 75 ein.

    Auf 75 Prozent deckendes Schwarz eingestellte Farbe

    A steht für Alpha und steuert die Deckkraft (Opazität) der Farbe. Die Karte ist jetzt hinter dem Widget Diagramm teilweise sichtbar. Der Text ist allerdings fast unsichtbar. Sie sollten ihn in Weiß darstellen lassen.

  6. Klicken Sie neben Textelemente auf die Schaltfläche "Einstellungen".

    Schaltfläche "Einstellungen" für Textelemente

  7. Klicken Sie im Bereich Textelemente neben Legendenbeschriftung auf die Schaltfläche "Bearbeiten".
  8. Klicken Sie auf das schwarze Quadrat. Wählen Sie unter Standardfarben die Farbe Weiß aus.

    Weiße Farbe im Fenster "Farbauswahl" für Textfarbe

  9. Blenden Sie im Bereich Diagramm den Abschnitt Intervalle ein. Legen Sie für den Umriss die Farbe Schwarz fest.

    Auf Schwarz festgelegte Umrissfarbe

    Das fertige Diagramm-Widget enthält weißen Text auf dunklem Hintergrund.

    Fertiges Diagramm-Widget

Ein Text-Widget hinzufügen

Als Nächstes fügen Sie den Text hinzu, der den Kontext für die Karte liefert. Dazu gehören ein Titel und die Quellenangaben. Dabei sollten Sie verschiedene Teile des Textes formatieren, um die Lesbarkeit zu verbessern, und einige Links hinzufügen, unter denen die Benutzer Ihrer App weitere Informationen zu den auf der Karte angezeigten Daten finden können.

  1. Klicken Sie auf der Werkzeugleiste im Seitenbereich auf die Schaltfläche Einfügen. Löschen Sie im Bereich Widget einfügen die Suche. Ziehen Sie das Widget Text auf die Spalte unter dem Diagramm.

    Widget "Text" zum Widget "Spalte" hinzugefügt

    Das Widget Text wird mit einem kleinen Abstand automatisch unter dem Widget Diagramm positioniert.

  2. Doppelklicken Sie auf das Widget Text, kopieren Sie den folgenden Text, und fügen Sie ihn ein:

    Owned, Rented, or Vacant?

    Click a Census Tract to see housing information for that area.

    Housing in Tract, County, State. The median rent is $Rent. The median home value is $Value.

    Map by Lisa Berry, Esri. Data from U.S. Census Bureau's American Community Survey (ACS) 2015-2019 5-year estimates, Table B25002.

    Berücksichtigen Sie auch die Leerzeilen zwischen den Textzeilen. Der Sinn der dritten Textzeile wird sich später sicher erschließen, wenn Sie dynamische Elemente hinzufügen.

    Tipp:

    Verwenden Sie Strg+Umschalt+V oder Cmd+Umschalt+V, um den Text ohne Formatierung einzufügen.

    Als Nächstes sollten Sie die Höhe des Widgets Text ändern.

  3. Klicken Sie im Bereich Text auf die Registerkarte Style. Klicken Sie neben Höhe auf die Pfeilschaltfläche, und wählen Sie Auto aus.

    Option "Auto" im Menü "Höhe"

    Mit dieser Einstellung wird sichergestellt, dass das Text-Widget immer hoch genug für die Anzeige des gesamten Inhalts, aber nie zu hoch ist.

    Als Nächstes sollten Sie für Text und Hintergrund dieselben Farben wie im Diagramm-Widget auswählen.

  4. Klicken Sie im Bereich Text unter Hintergrund auf Benutzerdefiniert und dann auf die Farbe für die Füllung. Wählen Sie unter Zuletzt verwendete Farben das halbtransparente Schwarz aus, das Sie für den Hintergrund des Kreisdiagramms erstellt haben.
  5. Klicken Sie auf die Registerkarte Inhalt. Klicken Sie unter Textformat auf die Schaltfläche Schriftfarbe. Wählen Sie unter Standardfarben die Farbe Weiß aus.
  6. Klicken Sie unter Textformat auf die Schaltfläche Zentrieren.

    Auf "Weiß" festgelegte Textfarbe und auf "Zentrieren" festgelegte Ausrichtung

    Der Text des Diagramms wird jetzt in Weiß und zentriert angezeigt. Als Nächstes sollten Sie die erste Textzeile (den Titel Ihrer App) so formatieren, dass sie größer und fetter dargestellt wird.

  7. Markieren Sie die erste Textzeile. Klicken Sie auf der Werkzeugleiste "Text" auf die Schaltfläche Fett, und legen Sie die Größe auf 25 px fest.

    Erste Textzeile auf "fett" und "25 px" festgelegt

    Tipp:

    Wenn Werkzeugleiste "Text" nicht sichtbar ist, dann ändern Sie die Schriftarteigenschaften auf der Registerkarte Inhalt im Bereich Text.

    Als Nächstes sollten Sie für die Leser, die nicht wissen, was ein Zählbezirk ist, einen Link zu einer Ressource des U.S. Census Bureau einfügen.

  8. Markieren Sie in der zweiten Textzeile die Wörter Census Tract. Klicken Sie im Bereich Text auf der Registerkarte Inhalt unter Textformat auf die Schaltfläche Link.

    Schaltfläche "Link" in den Textformat-Optionen

  9. Wählen Sie im Bereich Link festlegen unter Link zu die Option URL aus. Geben Sie https://www2.census.gov/geo/pdfs/education/CensusTracts.pdf per Kopieren und Einfügen im Feld URL ein.
  10. Wählen Sie unter Öffnen in die Option Neues Fenster aus. Klicken Sie auf OK.

    Parameter für "Link festlegen"

  11. Formatieren Sie den Text Census Tract fett.

    Sie sollten auch einen Link zu weiteren Informationen zum American Community Survey einfügen. Ihre Datenvisualisierung wird als vertrauenswürdiger betrachtet, wenn sie auch Informationen dazu enthält, wie und durch wen die Daten erfasst wurden.

  12. Markieren Sie in der letzten Textzeile den Text American Community Survey (ACS), und erstellen Sie einen Link zur folgenden URL: https://www.census.gov/programs-surveys/acs/about.html.
  13. Formatieren Sie den Text American Community Survey (ACS) fett.

    Schaltfläche "Fett" auf der Werkzeugleiste "Text"

    Da das Widget Text den Titel der Karte enthält, sollten Sie es ganz oben in der Spalte platzieren.

  14. Ziehen Sie das Widget Diagramm unter das Widget Text.

    Sie sollten auch die Lücke zwischen den Elementen der Spalte entfernen.

  15. Klicken Sie auf den leeren unteren Teil der Spalte oder auf die Lücke zwischen dem Widget Text und dem Widget Diagramm, um die Spalte auszuwählen.
  16. Geben Sie im Bereich Spalte für Abstand den Wert 0 px ein.

    Auf "0 px" festgelegter Abstand

    Das Text- und das Diagramm-Widget werden jetzt wie ein zusammenhängendes Element angezeigt.

    Widgets "Text" und "Diagramm"

Hinzufügen von dynamischem Text

In der dritten Textzeile können Sie Informationen zur Wohnsituation einfügen, die mit jeder Änderung der Auswahl auf der Karte so wie im Diagramm aktualisiert werden. Als Sie das Kreisdiagramm konfiguriert haben, haben Sie auch die Felder gesehen, die in den Daten verfügbar waren. Einige dieser Felder sollten Sie im Widget Text anzeigen.

  1. Wählen Sie das Widget Text aus. Aktivieren Sie im Bereich Text die Option Mit Daten verbinden. Klicken Sie auf Daten auswählen.

    "Mit Daten verbinden" aktiviert und Schaltfläche "Daten auswählen"

  2. Erweitern Sie im Bereich Daten auswählen den Eintrag Housing map, und klicken Sie auf Tract.

    Jetzt hat das Text-Widget Zugriff auf die Wohnungsdaten in der Karte.

  3. Markieren Sie im Widget Text das Wort Tract.

    Diesen Text sollten Sie durch dynamischen Inhalt ersetzen.

  4. Klicken Sie auf der Werkzeugleiste des Widgets Text auf die Schaltfläche Dynamischer Inhalt.

    Text "Tract" ausgewählt und Schaltfläche "Dynamischer Inhalt"

  5. Klicken Sie im Fenster Dynamischer Inhalt auf das Feld NAME.

    Feld NAME im Fenster "Dynamischer Inhalt"

    Der markierte Text im Widget Text wird durch {NAME} ersetzt. Zwischen dem Feld und dem Komma wurde ein zusätzliches Leerzeichen eingefügt.

  6. Entfernen Sie das zusätzliche Leerzeichen.

    Feld {NAME} im Text-Widget

  7. Ersetzen Sie die folgenden Wörter durch die folgenden Felder:
    • Ersetzen Sie das Wort County durch das Feld County.
    • Ersetzen Sie das Wort State durch das Feld State.
    • Ersetzen Sie das Wort Rent durch das Feld Median Rent (Contract Rent for Renter-Occupied Housing Units Paying Cash Rent).
    • Ersetzen Sie das Wort Value durch das Feld Median Home Value (for Owner-Occupied Housing Units).
    Tipp:

    Um den vollständigen Namen eines Feldes anzuzeigen, zeigen Sie auf das Feld.

  8. Entfernen Sie alle zusätzlichen Leerzeichen.
  9. Formatieren Sie alle dynamischen Felder fett.

    Dritte Textzeile im Text-Widget mit dynamischem Inhalt

  10. Aktivieren Sie die Live-Ansicht, und klicken Sie auf verschiedene Zählbezirke auf der Karte.

    Der dynamische Text wird anhand der Wohnungsdaten für den ausgewählten Zählbezirk aktualisiert.

    Fertiges Text-Widget, in dem die Werte für einen ausgewählten Zählbezirk angezeigt werden

Ein Such-Widget hinzufügen

Am Anfang haben Sie die Suchleiste aus dem Widget Karten entfernt. Jetzt können Sie sie durch das Widget Suche ersetzen. Dieses Widget ermöglicht mehr Kontrolle über die Anpassung als das integrierte Werkzeug. Sie können es zum Beispiel an einer beliebigen Stelle platzieren und sein Aussehen modifizieren.

  1. Deaktivieren Sie die Live-Ansicht. Klicken Sie im Bereich Widget einfügen auf das Widget Suche, und ziehen Sie es auf die Karte.

    Such-Widget im Bereich "Widget einfügen"

  2. Platzieren Sie das Widget Suche in der Nähe der rechten oberen Ecke der Karte.

    Der Hinweistext des Widgets Suche lautet standardmäßig Suchen von Adressen oder Orten. Diesen Text sollten Sie umformulieren.

  3. Klicken Sie im Bereich Suche auf Neue Suchquelle, und wählen Sie die Locator-Quelle aus.

    Locator-Quelle im Bereich "Suche"

    Der Bereich Locator-Quelle festlegen wird angezeigt.

  4. Klicken Sie im Bereich Locator-Quelle festlegen auf Dienstprogramm auswählen.

    Dienstprogramm auswählen

  5. Wählen Sie im Bereich Dienstprogramm auswählen auf der Registerkarte Organisation unter Geokodierung den ArcGIS World Geocoding Service aus.

    ArcGIS World Geocoding Service auswählen

  6. Geben Sie im Bereich Locator-Quelle festlegen unter Suchoptionen unter Hinweis den Text Search for your area ein.

    "Hinweis" auf "Search for your area" festgelegt

    Der Hinweistext im Widget Suche wird geändert.

    Als Nächstes sollten Sie das Widget Suche mit einer Aktion mit dem Widget Karte verbinden.

  7. Klicken Sie im Bereich Suche auf die Registerkarte Aktion. Klicken Sie auf Trigger hinzufügen.
  8. Klicken Sie im Bereich Trigger auswählen auf Änderungen der Datensatzauswahl.

    "Änderungen der Datensatzauswahl" im Bereich "Trigger auswählen"

  9. Klicken Sie unter Widgets auf Karte. Klicken Sie unter Aktion auswählen auf Schwenken auf aus.

    "Schwenken auf" im Bereich "Aktion auswählen"

  10. Schließen Sie den Bereich Einstellungen der Aktion.

    Testen Sie die Suche, um sicherzustellen, dass die Aktion korrekt eingerichtet wurde.

  11. Aktivieren Sie die Live-Ansicht. Geben Sie im Widget Suche einen Ortsnamen ein. Klicken Sie in den Suchergebnissen auf einen der Ortsnamen.

    Suchleiste mit Ergebnissen

    Die Karte wird auf die ausgewählte Position gezoomt.

  12. Klicken Sie auf der Karte in der Nähe der Zoomsteuerelemente auf die Schaltfläche Startseite.

    Web-App mit den Widgets "Karte", "Text", "Diagramm" und "Suche"

  13. Deaktivieren Sie auf der Werkzeugleiste des Builders die Live-Ansicht, und klicken Sie auf Speichern.

Eine Seite hinzufügen

Ihre Datenvisualisierung ist nun fertig. Als Nächstes sollten Sie den zugehörigen Artikel, den Ihre Mitarbeiter geschrieben haben, hinzufügen. Sie könnten zwar einen Link zur Story im Widget Text einfügen, möchten aber lieber die Story auffälliger und wie einen Teil der Web-App gestalten. Deshalb fügen Sie der App eine zweite Seite hinzu, in der Sie die Story einbetten.

  1. Klicken Sie auf der Werkzeugleiste im Seitenbereich auf die Schaltfläche Seite.

    Schaltfläche "Seite" und Bereich "Seite"

  2. Klicken Sie im Bereich Seite auf die Schaltfläche Seite hinzufügen und dann auf die Option Leeres Vollbild.

    Schaltfläche "Seite hinzufügen" und Option "Leeres Vollbild"

    Eine neue Zeichenfläche wird angezeigt.

  3. Zeigen Sie im Bereich Seite auf Page 2, und klicken Sie auf die Schaltfläche Mehr. Klicken Sie auf Umbenennen.

    Option "Umbenennen" im Menü "Mehr" für "Page 2"

  4. Benennen Sie Page 2 in Story um. Benennen Sie Page in Map um.

    Seiten in "Map" und "Story" sind im Bereich "Seite" umbenannt

  5. Ziehen Sie im Bereich Widget einfügen das Widget Einbetten auf die Zeichenfläche.
  6. Klicken Sie auf der Symbolleiste des Widgets Einbetten auf die Schaltfläche zum Positionieren, und wählen Sie Vollständige Größe aus.

    Option "Vollständige Größe" im Menü "Position"

    In diesem Lernprogramm werden Sie die Story How the Age of Housing Impacts Affordability, die von Steven Aviles beim Esri Team für Policy-Karten geschrieben wurde, einbetten.

  7. Wählen Sie im Bereich Einbetten für Einbetten mit die Option URL aus.
  8. Fügen Sie den folgenden URL-Code ein: https://storymaps.arcgis.com/stories/ae7f226a5ffd4466acbe0c7a14deab0e.

    URL im Bereich "Einbetten"

    Die Story wird auf der Zeichenfläche angezeigt. Sie wurde mit ArcGIS StoryMaps erstellt.

Ein Menü-Widget hinzufügen

Als Nächstes sollten Sie ein Menü-Widget hinzufügen. Dies ermöglicht dem Benutzer das Wechseln zwischen den zwei Seiten Ihrer App. Um zu verhindern, dass Teile der Story durch das Menü verdeckt werden, sollten Sie zuerst eine Kopfzeile zur Seite hinzufügen.

  1. Klicken Sie auf der Werkzeugleiste im Seitenbereich auf die Schaltfläche Seite. Klicken Sie im Bereich Seite auf die Seite Story.

    Seite "Story" im Bereich "Seite"

  2. Aktivieren Sie im Bereich Story die Option Kopfzeile.

    Am oberen Rand der Seite erscheint eine blaue Leiste.

  3. Geben Sie für Höhe den Wert 60 px ein.
  4. Zeigen Sie auf die Kopfzeile, und klicken Sie auf Kopfzeile bearbeiten.

    Schaltfläche "Kopfzeile bearbeiten"

  5. Ziehen Sie im Bereich Widget einfügen das Widget Menü auf die Seitenkopfzeile.

    Widget "Menü" zur Kopfzeile hinzugefügt

  6. Fangen Sie das Widget Menü in der oberen rechten Ecke.
  7. Wählen Sie im Bereich Menü auf der Registerkarte Inhalt für Style die Option Pills aus.

    Widget "Menü" auf Style "Pills" festgelegt

    Die blaue Farbe der Kopfzeile und das Widget Menü stimmen nicht mit dem Rest Ihrer App überein. Anstatt die Farben an mehreren Stellen zu ändern, sollten Sie das Design der App ändern.

  8. Klicken Sie auf der Werkzeugleiste im Seitenbereich auf die Schaltfläche Design. Klicken Sie im Bereich Design auf Ink.

    Schaltfläche "Design" und Design "Ink"

    Nun wird die Kopfzeile in Weiß und der Menü-Pill-Selektor in einer dunkelgrauen Farbe dargestellt.

    Über das Widget Menü kann der Benutzer von der Story zur Karte wechseln. Dasselbe Menü-Widget sollten Sie auch auf der Seite mit der Karte hinzufügen, damit er auch von der Karte zur Story wechseln kann.

  9. Öffnen Sie den Bereich Seite, und klicken Sie auf die Seite Karte.

    Auf der Seite brauchen Sie keine Kopfzeile hinzuzufügen, da der Benutzer auf der Karte schwenken kann, um die Bereiche, die durch Widgets verdeckt sind, zu sehen.

  10. Ziehen Sie im Bereich Widget einfügen das Widget Menü auf die Seite. Fangen Sie es in der oberen rechten Ecke.
  11. Wählen Sie im Bereich Menü 2 unter Style die Option Pills aus.
  12. Verschieben Sie das Widget Suche nach unten, und platzieren Sie es unter dem Widget Menü.
  13. Aktivieren Sie die Live-Ansicht. Klicken Sie auf die Menüschaltflächen, um das Wechseln zwischen den beiden Seiten zu testen.

    Widget "Menü"

  14. Überprüfen Sie im Bereich Seite, ob die Schaltfläche Startseite erstellen neben der Seite Karte sichtbar ist.

    Schaltfläche "Startseite erstellen"

    Diese Schaltfläche zeigt an, welche Seite als Startseite dient. Sie wird beim erstmaligen Öffnen der App angezeigt.

  15. Klicken Sie auf Speichern.

Sie haben eine Web-App mit zwei Seiten, die eine Karte und eine Story enthalten, erstellt. Sie haben die Widgets Karte, Spalte, Diagramm, Text, Suche, Einbetten und Menü konfiguriert. Sie haben Widgets mit Aktionen und dynamischen Inhalten verbunden, um den Benutzern das Erkunden der Verfügbarkeit von Wohnraum zu erleichtern.


Die App für mobile Geräte optimieren

Bisher haben Sie vier der Ziele für die Web-App erreicht:

  • Der Fokus der App sollte in erster Linie auf der Karte liegen.
  • Die App sollte es den Benutzern ermöglichen, nach ihrer eigenen Adresse oder ihren eigenen Interessenbereichen zu suchen.
  • Die App sollte dynamische Texte und Diagramme enthalten, die den Benutzern die Erkundung und Interaktion mit den Daten ermöglichen.
  • Die Karte sollte mit einer journalistischen Story verknüpft sein.

Ein Ziel fehlt noch: Die App sollte auf einem mobilen Gerät genauso gut funktionieren wie auf dem Bildschirm eines Desktop-Computers.

Momentan sieht Ihre Web-App nur auf einem großen Bildschirm gut aus. Um das Projekt fertigzustellen, sollten Sie die Elemente so lange anpassen, bis die App auf allen Bildschirmgrößen gut aussieht.

Die Story-Seite für mobile Geräte optimieren

Damit die Story-Seite bei unterschiedlichen Bildschirmgrößen funktioniert, sollten Sie das Widget Menü von relativer Größenanpassung (die in Prozentsätzen definiert wird) auf absolute Größenanpassung (die in Pixeln definiert wird) umstellen.

  1. Öffnen Sie bei Bedarf Ihre Housing Availability-App in ArcGIS Experience Builder erneut. Aktivieren Sie die Live-Ansicht.
  2. Klicken Sie ggf. im Menü der App auf den Pill-Selektor Story, um die Seite Story anzuzeigen.
  3. Klicken Sie auf der Builder-Werkzeugleiste auf die Schaltfläche Seite für Geräte mit kleinem Bildschirm bearbeiten, um in den Modus mit kleinem Bildschirm zu wechseln.

    Schaltfläche "Seite für Geräte mit kleinem Bildschirm bearbeiten"

    Diese Ansicht emuliert, wie Ihre App auf einem mobilen Gerät angezeigt wird.

  4. Scrollen Sie durch die Story, um zu bestätigen, dass kein Text und keine Karte weggeschnitten ist.

    ArcGIS StoryMaps-Storys sind bereits für die Größenanpassung für mobile Geräte konfiguriert. Das Widget Menü auf der Seitenkopfzeile ist jedoch für den Text zu kurz.

    Seite "Story" auf einem kleinen Bildschirm

    Sie könnten ein benutzerdefiniertes Layout für kleine Bildschirme erstellen. In diesem Fall können Sie dieses Problem aber lösen, indem Sie die Art der Anpassung der Größe des Widgets Menü bei allen Bildschirmgrößen ändern. Lösungen, die bei allen Bildschirmgrößen funktionieren, sollten gegenüber benutzerdefinierten Lösungen für unterschiedliche Bildschirmgrößen bevorzugt werden, da bei ihnen die App in der Zukunft einfacher zu bearbeiten und zu pflegen ist.

  5. Klicken Sie auf der Builder-Werkzeugleiste auf die Schaltfläche Seite für Geräte mit großem Bildschirm bearbeiten.

    Die Schaltfläche "Seite für Geräte mit großem Bildschirm bearbeiten"

    Es ist notwendig, in den Modus mit großem Bildschirm zu wechseln, um Widgets neu zu konfigurieren.

  6. Deaktivieren Sie die Live-Ansicht. Klicken Sie auf Kopfzeile bearbeiten, und klicken Sie auf das Widget Menü.

    Menü-Widget auf der Zeichenfläche ausgewählt

  7. Klicken Sie im Bereich Menü auf die Registerkarte Style. Suchen Sie die Eigenschaft Breite.

    Die Eigenschaft Breite wird als Prozentsatz der Breite des Bildschirm definiert. Dadurch wird auf schmalen Bildschirmen die Breite zu klein. Sie sollten die Breite stattdessen in Pixeln definieren, damit Sie sicherstellen können, dass unabhängig von der Bildschirmgröße die Größe immer gleich bleibt.

  8. Klicken Sie neben Breite auf die Schaltfläche Einheit ändern, und wählen Sie px aus.

    Schaltfläche "Einheit ändern" und Option "px"

  9. Legen Sie die Breite auf 250 px fest.

    Auf 250 px festgelegte Breite

  10. Wechseln Sie in den Modus mit kleinem Bildschirm.

    Das Menü ist jetzt groß genug, um auf dem kleinen Bildschirm gelesen zu werden.

    Schaltfläche "Seite für Geräte mit kleinem Bildschirm bearbeiten"

Die Kartenseite für mobile Geräte optimieren

Als Nächstes sollten Sie die Kartenseite so anpassen, dass sie bei allen Bildschirmgrößen funktioniert. Einige Elemente sollten Sie auf absolute Größenanpassung umstellen. Sie können auch ein benutzerdefiniertes Layout für mobile Geräte konfigurieren.

  1. Klicken Sie im Bereich Seite auf die Seite Karte.

    Auf dieser Seite sind alle Widgets zu schmal. Die meisten Texte können nicht gelesen werden.

    Seite "Karte" auf einem kleinen Bildschirm

  2. Klicken Sie auf der Builder-Werkzeugleiste auf die Schaltfläche Seite für Geräte mit mittelgroßem Bildschirm bearbeiten, um in den Modus mit mittelgroßem Bildschirm zu wechseln.

    Die Schaltfläche "Seite für Geräte mit mittelgroßem Bildschirm bearbeiten"

    Diese Ansicht emuliert, wie Ihre App auf einem Tablet angezeigt wird. Es sieht zwar besser aus, die Legende des Diagramms und das Menü sind jedoch weggeschnitten. Deren Breite sollten Sie auf absolute Größenanpassung umstellen.

  3. Wechseln Sie in den Modus mit großem Bildschirm.
  4. Wählen Sie das Widget Menü aus. Legen Sie im Bereich Menü 2 auf der Registerkarte Style die Breite auf 250 px fest.
  5. Wählen Sie das Widget Suche aus. Legen Sie seine Breite auf 250 px fest.

    Auf 250 px festgelegte Breite des Such-Widgets

  6. Klicken Sie unter das Diagramm, um das Widget Spalte auszuwählen. Legen Sie seine Breite auf 300 px fest.
  7. Wechseln Sie in den Modus mit mittelgroßem Bildschirm.

    Bei dieser Bildschirmgröße sind die Layout-Änderungen wirksam.

    Seite "Karte" auf einem mittelgroßen Bildschirm

  8. Wechseln Sie in den Modus mit kleinem Bildschirm.

    Seite "Karte" auf einem kleinen Bildschirm

    Hier sind die Änderungen nicht wirksam. Die Karte ist fast vollständig hinter den Widgets Text und Diagramm verborgen. Nach Rücksprache mit Ihren Teammitgliedern haben Sie entschieden, dass das Diagramm für die mobile Version Ihrer Web-App nicht erforderlich ist. Deshalb blenden Sie es bei kleinen Bildschirmgrößen in der Ansicht aus. Dazu müssen Sie ein benutzerdefiniertes Layout für kleine Bildschirme erstellen.

  9. Klicken Sie neben der Zeichenfläche auf Benutzerdefiniert.

    Schaltfläche "Benutzerdefiniert"

  10. Klicken Sie im Pop-up-Fenster mit der Warnung auf OK.

    Jetzt können Sie Änderungen am Layout vornehmen, die sich nur dann auswirken, wenn die App auf kleinen Bildschirmen angezeigt wird. Sorgen Sie dafür, dass das Widget Diagramm angezeigt wird, wenn der Bildschirm groß ist, und nicht mehr angezeigt wird, wenn der Bildschirm klein ist.

  11. Klicken Sie auf das Widget Diagramm. Klicken Sie auf seiner Werkzeugleiste auf die Schaltfläche In ausstehende Liste verschieben.

    Schaltfläche "In ausstehende Liste verschieben"

    Das Widget Diagramm wird nicht mehr angezeigt.

    Es ist wichtig, dass Sie das Widget Diagramm nicht löschen. Auch wenn Sie im benutzerdefinierten Modus arbeiten, wird ein Widget, das Sie löschen, in allen Versionen der App gelöscht. Die ausstehende Liste ermöglicht Ihnen, Widgets aus der Ansicht zu entfernen, ohne sie zu löschen.

    Tipp:

    Wenn Sie das Widget Diagramm versehentlich gelöscht haben, klicken Sie auf die Schaltfläche Rückgängig auf der Builder-Werkzeugleiste. Wenn Sie Diagramm später wieder hinzufügen möchten, dann finden Sie es im Bereich Widget einfügen auf der Registerkarte Ausstehend.

    Als Nächstes sollten Sie die Größe und Position des Widgets Text ändern, damit es die Widgets Suche und Menü nicht mehr verdeckt.

  12. Klicken Sie auf das Widget Text. Ziehen Sie es aus der Spalte, und platzieren Sie es auf der Karte.

    Widget "Text" aus Widget "Spalte" heraus verschoben

  13. Verschieben Sie das Widget Spalte in die ausstehende Liste.

    Schaltfläche "In ausstehende Liste verschieben"

  14. Fangen Sie das Widget Text in der unteren linken Ecke.
  15. Klicken Sie im Bereich Text auf die Registerkarte Style. Legen Sie die Breite auf 90 Prozent und die Höhe auf 30 Prozent fest.

    Breite auf 90 Prozent und Höhe auf 30 Prozent festgelegt

    Mit dieser Größe wird verhindert, dass die Navigationssteuerelemente der Karte einen der Texte verdecken.

    Widget "Text" in der unteren linken Ecke der App

    Hinweis:

    Im benutzerdefinierten Modus können Sie die Größe und Position von Widgets ohne Auswirkungen auf andere Bildschirmgrößen anpassen. Änderungen an anderen Eigenschaften sind jedoch bei allen Bildschirmgrößen sichtbar. Wenn Sie zum Beispiel eine kleinere Schriftgröße für das Widget Text wählen, wird es bei allen Bildschirmgrößen kleiner angezeigt. Wenn eine kleinere Schriftgröße nur für kleine Bildschirme gelten soll, müssen Sie das Widget Text duplizieren, das Original-Widget in die ausstehende Liste verschieben und die Schriftgröße im neuen Widget ändern.

Fertigstellen und veröffentlichen

Um das Projekt fertigzustellen, müssen Sie die Web-App in der Vorschau anzeigen, veröffentlichen und freigeben.

  1. Klicken Sie auf der Werkzeugleiste des Builders auf die Schaltfläche Speichern.
  2. Wenn die Meldung Erfolgreich gespeichert angezeigt wird, klicken Sie auf die Schaltfläche Vorschau.

    Schaltfläche "Vorschau" und Meldung "Erfolgreich gespeichert"

    Im Browser wird ein neues Fenster mit Ihrer App geöffnet.

  3. Testen Sie die App, indem Sie die Karte, das Diagramm und die Story erkunden.
  4. Passen Sie die Größe des Browserfensters an, um das Layout der App bei unterschiedlichen Bildschirmgrößen zu testen.

    Seite "Karte" der fertigen Web-App

  5. Kehren Sie zur Experience Builder-Bearbeitungsregisterkarte zurück. Klicken Sie auf der Werkzeugleiste des Builders auf Veröffentlichen.

    Sie sollten auch die Freigabeeinstellungen der App aktualisieren, damit sie für die Öffentlichkeit zugänglich ist.

  6. Klicken Sie auf die Schaltfläche Mehr und dann auf Freigabeeinstellungen ändern.

    Schaltfläche "Mehr" und Option "Freigabeeinstellungen ändern"

    Die Elementseite wird für die Web-App angezeigt.

  7. Klicken Sie auf Freigeben.

    Schaltfläche "Freigeben"

  8. Klicken Sie auf Alle (öffentlich) und dann auf Speichern.

In diesem Lernprogramm haben Sie eine mehrseitige Web-App mit einer Karte und einer Story zur Wohnraumbelegung in den Vereinigten Staaten erstellt. Sie haben interaktive Widgets hinzugefügt, mit deren Hilfe die Leser ein besseres Verständnis der Daten erlangen können. Schließlich haben Sie noch das Layout verändert, um sicherzustellen, dass es auf Bildschirmen aller Größen funktioniert.

Jetzt können Sie und Ihre Teammitglieder Ihre Arbeit auf der Website Ihres Interessenverbandes Wohnungsbau einbetten oder Links zur Web-App in den sozialen Medien freigeben.

Weitere Lernprogramme finden Sie in der Lernprogrammgalerie auf Learn ArcGIS.