Einführung

Dieses Material dient der Einführung in das Erstellen von Storymaps. Es liefert einen Überblick über die grundlegende Handhabung des web-basierten Tools ArcGIS-Storymap.

Für ausführlichere Erklärungen (in Englisch) von ArcGIS StoryMaps und all deren Funktionen, verweisen wir auf die Sammlung „Getting Started with Storymaps“ von ArcGIS.

In dieser Anleitung wird sich mit den Grundlagen der Erstellung von einer Storymap über ArcGIS auseinandergesetzt. Dabei wird besonders auf den immersiven Block des Sidecars eingegangen.

Startseite und Erstellen einer neuen Story

Abbildung 1 zeigt die Startseite des web-basierten Tools „ArcGIS StoryMaps“. Zum Einstieg ist dies auch die einzige relevante Seite. Auf der Seite „Storys“ unter dem Reiter „Eigene Storys“ erhaltet ihr einen Überblick über eure eigenen Storymaps (sowohl die veröffentlichten, als auch unveröffentlichte Entwürfe).

Abbildung 1: Startseite ArcGIS StoryMaps

Unter den anderen Reitern könnt ihr eure favorisierten Storymaps, als auch alle veröffentlichten Storys von euren Gruppen oder Organisationen (bspw. Goethe Universität Frankfurt) finden.

Abbildung 2: Neue Story erstellen

Hier ist jedoch nur der Button „Neue Story“ wichtig. Wird dieser ausgewählt erscheint das folgende Menü, bei welchen für die Anleitung „Neu erstellen“ ausgewählt wurde. Mit mehr Erfahrung kann natürlich auch direkt das erwünschte Format ausgewählt werden.

Es öffnet sich eine neue Seite und die neue Storymap kann beginnen.

Im Folgenden wird neben einer neuen Storymap auch die Storymap „Der Campus Westend“ als Beispiel für eine fertige Storymap herangezogen. Zur Veranschaulichung des Besprochenen bietet es sich an, die Storymap parallel im Browser offen zu haben.

Die Geschichte hinter der Karte

Die Storymap „Der Campus Westend“ erzählt die Geschichte des heutigen Zentralcampus der Goethe Universität Frankfurt. Von den Anfängen des Areals als psychiatrische Einrichtung im 19. Jahrhunderts, über die Errichtung des Poelzig-Baus (auch I.G. Farben Haus genannt) 1931 als Hauptsitz der Interessensgemeinschaft Farbenindustrie AG und deren Verbindung zum NS-Regime, sowie der Nutzung des Baus als Hauptquartier der US-Streitkräfte nach dem 2. Weltkrieg, bis zur Umwandlung zum Universitätsstandort wird die Vergangenheit des Ortes präsentiert. Neben der Geschichte und der heutigen Nutzung von universitären Gebäuden wird zudem auf die Integration von Kunst im öffentlichen Raum und die Rolle des Campus bei der Stadtentwicklung eingegangen.

Abbildung 3: Kopfleiste

Zunächst wollen wir uns mit der Kopfleiste beschäftigen, welche ganz oben am Browserfenster angedockt ist. Über das auswählen des Pfeils ganz links, kehrt man zurück Startseite mit dem Überblick der eigenen Storys. Daneben erhalt man die Auskunft über den Status der Storymap. Da es sich hierbei um eine unveröffentlichte Story handelt, ist in rot „Entwurf“ zu lesen. Nach Veröffentlichung wird dieses durch grünes „Veröffentlicht“ ersetzt. Rechts daneben sind zwei gebogene Pfeile, über welche Bearbeitungsschritte rückgängig gemacht bzw. wieder hergestellt werden können. Schließlich ist auf der linken Seite noch zu entnehmen, ob der aktuelle Stand der Storymap gespeichert wurde. Nach Änderungen speichert sich die Story automatisch.

Auf der rechten Seite der Kopfleiste sind drei Reiter. Wir wollen uns nun zunächst mit dem Reiter „Entwerfen“ beschäftigen und später auf die Reiter „Vorschau“ und „Veröffentlichen“ eingehen. Unter „…“ können weitere Einstellungen für die Storymap angepasst werden, welche im Rahmen dieser Anleitung jedoch nicht relevant sind und daher nicht behandelt werden.

Abbildung 4: Menü „Entwerfen“

Nach dem Auswählen des Reiters „Entwerfen“ öffnet sich ein Seitenmenü, über das sich das Design der Titelseite und das Design-Schema der ganzen Storymap einstellen lassen.

Hier können zudem eine Navigationsleiste und ein Quellenverzeichnis ein- bzw. ausgestellt werden. Die Navigationsleiste wird oben an der Story verankert und erleichtert die Navigation zwischen unterschiedlichen Themen (Überschriften) in der Story. Das Quellenverzeichnis wird am Ende der Storymap eingefügt und hilft bei einer übersichtlichen Angabe der Quellen.

Falls gewollt, kann hier auch ein Logo hochgeladen werden, welches in der Kopfzeile und auf dem Cover angezeigt wird. Hierfür sollten (falls vorhanden) auch ein Link und ein Alternativtext für das Logo angegeben werden. In unserem Beispiel „Der Campus Westend“ wurde kein Logo hinzugefügt.

Storymaps beginnen mit einem Cover, welches der Einstieg in und gleichzeitig die Vorschau für die Storymap auf der Plattform ist.

Abbildung 5: Leeres Cover einer Storymap

Das Cover besteht aus verschiedenen Elementen, die in der folgenden Tabelle aufgeführt werden:

Für unser Beispiel sieht das Cover wie folgt aus:

Abbildung 6: Cover der Storymap „Der Campus Westend“

Abbildung 7: Vorschau der Storymaps „Der Campus Westend“ auf der Startseite von ArcGIS StoryMaps

Es lässt sich erkennen, dass zudem das Datum der Veröffentlichung / der letzten Bearbeitung automatisch eingefügt wird.

Nach dem Cover soll nun der Inhalt der Storymap gestaltet werden. Hierfür ist der „Inhaltsblock hinzufügen“-Button (+-Button) das wichtigste Werkzeug. Der Button erscheint automatisch direkt unter dem Cover.

Abbildung 8: „Inhaltsblock hinzufügen“-Button

An dieser Stelle kann entweder Text direkt eingegeben werden oder es wird ein neuer Inhaltsblock hinzugefügt über das Klicken des Buttons. Bei Letzterem öffnet sich ein Menü, über das das Inhaltsformat gewählt wird. In den folgenden Unterkapiteln werden ausgewählte grundlegende Formate genauer.

Abbildung 9: Menü um Inhaltsblock hinzuzufügen

Wird über das Menü „Inhalte hinzufügen“ Text ausgewählt, oder bereits geschriebener Text markiert, öffnet sich unter dem Textfeld ein weiteres Menü:

Abbildung 10: Text-Menü

Über das linke Drop-Down-Menü wird ausgewählt, um welche Textart es sich handelt. Dabei wird zwischen Absatz und Überschrift, sowie Aufzählung, Nummerierte Liste und Zitat unterschieden. Bei den Überschriften kann zwischen drei Ebenen ausgewählt werden, wobei nur Überschriften der Ebene 1 in der Navigationsleiste angezeigt werden. Über AA wird zwischen zwei Schriftgrößen gewechselt. Über das rechte Drop-Down-Menü, kann die Bündigkeit des Textes festgelegt werden. Dabei wird zwischen rechts- und linksbündig und in der Mitte zentriert unterschieden.

Abbildung 11: Beispiele für Textarten

Die Auswahlmöglichkeiten „B“ und „I“ stehen für bold und italic und lassen den ausgewählten Text fett oder kursiv erscheinen. Daneben sind die drei Punkte, welche für weitere Optionen stehen. Diese beinhalten durchgestrichenen Text und hoch- oder tiefgestellte Zeichen.

Abbildung 12: Menü um Farben anzupassen

Über die Palette wird die Farbe des Textes angepasst. Bei der Auswahl der Farbe sollte auf die Lesbarkeit geachtet werden. Hierfür hilft ArcGIS Storymaps und gibt ganz unten im Farbauswahl-Menü Auskunft über die Lesbarkeit.

Über die Kette können Verlinkungen zu einer Überschrift oder zu einer anderen Webseite geschaffen werden. Hierfür muss der Text ausgewählt sein. Im Text erscheint die Verlinkung als Linie unter dem Text. Durch das Anklicken im Erstellungsmodus kann die Verlinkung bearbeitet oder gelöscht werden. Bei einer fertigen Storymap springt die Story durch das Klicken der Verlinkung zu der verlinkten Überschrift oder es öffnet sich die verlinkte Webseite.

Abbildung 13: Verlinkungen im Text

Ist der Absatz fertig, entsteht durch das Drücken der Entertaste direkt ein neuer Absatz mit einem „Inhaltsblock hinzufügen“-Button.

Das wohl zentralste Element einer Storymap ist deren Einsatz von Karten. Wird über den „Inhaltsblock hinzufügen“-Button eine Karte hinzugefügt, öffnet sich automatisch diese Seite:

Abbildung 14: Seite „Eine neue Karte hinzufügen“

Da wir uns in dieser Anleitung mit den Grundlagen der Erstellung von Storymaps beschäftigen, lassen wir die unterschiedlichen Reiter außer Acht und wählen direkt „+ Neue Express-Karte“. Daraufhin öffnet sich diese zentrale Seite:

Abbildung 15: Eine neue Karte erstellen

Auf der linken Seite ist ein Menü angedockt, über welches dargestellte Features auf der Karte auflistet sind und Kartenoptionen eingestellt werden können.

Kartenoptionen

Abbildung 16: Kartenoptionen

Über den rechten Reiter „Optionen“ kann zum einen die Grundkarte auf die darzustellenden Inhalte angepasst werden. Es kann zwischen verschiedenen thematischen Karten, wie beispielsweise Humangeographie, Bilddaten und Topografisch gewählt werden. Welche Grundkarte am besten zu deiner Storymap passt, kannst du selbst entscheiden. Für unser Beispiel „Der Campus Westend“ wurde die Navigations-Grundkarte gewählt.

Zum anderen können hier Konfigurationen getroffen werden, welche die Interaktion der Storymap-Betrachter*innen beeinflusst.

Dargestellte Features

Der linke Reiter „Dargestellte Features“ liefert einen Überblick über die auf der Karte dargestellten Elemente. Über das Ordner-Symbol lassen sich Gruppierungen erstellen. Durch Drag-and-Drop können einzeln Elemente einer Gruppe hinzugefügt oder aus dieser entfernt werden. Wird ein Element ausgewählt, öffnet sich ein Dialogfenster über welches das jeweilige Element bearbeitet werden kann.

Abbildung 17: links: Dargestellte Feature; rechts: Dialogfenster

Abbildung 18: Kartenfeld

Beim Erstellen einer Karte ist der Ausgangskartenausschnitt eine Weltkarte. Der Kartenausschnitt kann durch die Bottons + und – am rechts unten im Maßstab verändert werden (dies ist auch über Scrolling per Maus möglich), zudem kann durch Ziehen der Maus der Ausschnitt verschoben werden.

Der Kartenausschnitt, der zuletzt vorm Speichern bzw. Platzieren der Karte im Kartenfeld angezeigt wird, wird annähernd dem Kartenausschnitt entsprechen, der bei der implementierten Karte in der Storymap angezeigt wird.

Bei einer platzierten Karte erscheint über den Zoom-Buttons ein Home-Botton, der den Kartenausschnitt nach Interaktionen auf den Ausgangszustand zurückbringt.

Abbildung 19: Werkzeugleiste

Die Werkzeugleiste über dem Kartenfeld bzw. Seitenmenü ist in verschiedene Segmente unterteilt.

Linkes Segment

Hier kann über die zwei linken Buttons zwischen Gruppen- und Einzelauswahl gewechselt werden. Die beiden rechten Buttons sind zum Rückgängigmachen und Wiederherstellen von Aktionen.

Rechtes Segment

Über die jeweiligen Buttons können im Kartenfeld ein Pfeil oder Doppelpfeil eingezeichnet oder ein Textfeld eingefügt werden. Daneben ist ein Suchfeld, über das nach einer bestimmten Position gesucht werden kann. Hierbei kann von direkten Adressen, über Einrichtungen (Bsp. Goethe-Universität Frankfurt Campus Westend), bis zu Ländern und Kontinenten alles gesucht werden. Es werden Vorschläge angezeigt, die ausgewählt werden können, oder die Eingabe wird durch die Enter-Taste bestätigt.

Mittleres Segment

Dieses Segment liefert die meisten Möglichkeiten die Karte zu gestalten, da hier die Features erstellt werden können, welche im Seitenmenü aufgelistet werden. Hier werden nun von links nach rechts die Features genauer beschrieben.

Punkt hinzufügen: Durch das Auswählen dieser Funktion kann anschließend ein verschiebbarer Punkt auf der Karte hinzugefügt werden. Im Seitenmenü öffnet sich das Dialogfenster. Hier kann der Punkt durch ein Bild, der Name und eine Beschreibung genauer definiert werden. Zudem kann der Style, die Größe und Farbe des Punktes angepasst werden.

Nummerierter Punkt: Siehe „Punkt hinzufügen“, nur dass hier nur die Farbe des Symbols auf der Karte angepasst werden kann.

Linie hinzufügen: Nach dem Auswählen dieser Funktion kann auf dem Kartenfeld durch Klicken die gewünschten Punkte ausgewählt und verbunden werden. Eine Linie wird durch die Entertaste beendet.

Abbildung 23: Beispiel für Linie in Karten

Anschließend erscheinen die ausgewählten Punkte als große Punkte. Sie können nach Belieben verschoben werden. Die kleinen Punkte können genutzt werden, um den Linienverlauf zu verfeinern. Werden sie verschoben, werden sie zu großen Punkten und zwischen ihnen und den benachbarten großen Punkten entstehen neue kleine Punkte. Einzelne große Punkte können durchs Auswählen und die Entf-Taste gelöscht werden, ohne dass die ganze Linie zu verloren geht.

Freihandlinie: Wird mit gedrückter Maus die gewünschte Linie entlanggefahren (das Loslassen der Maustaste beendet die Linie), erscheint diese wie die Linien zuvor und kann genauso bearbeitet werden.

Bei Linien kann nur die Farbe angefasst werden.

Bereiche: Bereiche werden analog zu Linien erstellt, nur dass diese automatisch eine Fläche eingrenzen, welche auf der Karte eingefärbt wird.

Abbildung 26: Beispiel für Bereiche in Karten

Wenn die Karte fertig ist, wird sie über den Button „Karte platzieren“ rechts unten in die Storymap eingefügt.

Abbildung 27: Platzierte Karte

Anschließend kann die Karte über die Leiste oben in der Mitte angepasst werden. Über den Stift links kann die Karte selbst bearbeitet und über die Tonne rechts gelöscht werden. Über die Symbole in der Mitte lassen sich die Position in der Storymap und die Größe der Karte anpassen. Über die Optionen (Zahnrad) kann ein Alternativtext eingegeben werden, welcher zur Barrierefreiheit der Storymap beiträgt. Unter der Karte kann eine Bildunterschrift bzw. ein Titel eingegeben werden.

Wie bei M01-1: Überblick Storymap-Formate aufgeführt, kann ein Sidecar verschiedene Layouts haben. Es öffnet sich das rechts dargestellte Menü, wo dieses festgelegt werden kann.

Abbildung 28: Layoutauswahl für Sidecar

In dieser Anleitung wurde sich für die Option eines verankerten Sidecars entschieden. Nun wird das Template, bei dem auf der linken Seite die Story, wie bisher weitergeführt werden kann.

Abbildung 29: Leeres Sidecar

Auf der rechten Seite können Medien, wie Karten oder Bilder, hinzugefügt werden. Bei Karten öffnet sich erneut das „Eine Karte hinzufügen“-Menü. Von hier wird wie bei anderen Karten weitergemacht.

Abbildung 30: Kartenaktionen

Im Sidecar lassen sich Kartenaktionen hinzufügen. Hierfür wird Text markiert und das Blitzsymbol gewählt. Die Karte öffnet sich und es kann ein Feature ausgewählt werden, welches sich mit dem Text verknüpft. Zudem kann auch der dargestellte Kartenausschnitt für die Kartenaktion bearbeitet werden. Anschließend erscheint die Kartenaktion wie eine Verlinkung im Text.

Abbilung 31: Ausgestaltetes Sidecar der Storymap „Der Campus Westend

Auf der linken Seite wird angezeigt, welche Folie gerade aufgerufen ist. Durchs Anklicken kann einfach zwischen den Folien gewechselt werden. Dies ist auch bei der fertigen Map möglich. Auch durchs scrollen kann zwischen den Folien gewechselt werden.

Alternativ kann beim Erstellen der Storymap über die untenstehende Leiste zwischen den Folien gewechselt werden. Hier kann auch durch Verschieben die Reihenfolge der Folien nachträglich angepasst werden.

Neue Folien können über den +-Button rechts unten hinzugefügt werden. Über das Drop-Down-Menü kann die angezeigte Folie gelöscht werden, das Layout des Sidecars verändert oder das ganze Sidecar dupliziert oder gelöscht werden.

Sollte die ursprüngliche Reihenfolge nicht mehr passen, so können Elemente über Tastenbefehle ausgeschnitten und wieder eingefügt werden. Alternativ können Elemente über die sechs Punkte an deren linken unteren Seite verschoben werden.

Auch bei einer Storymap sollten die Inhalte mit Quellen belegt werden. Während der Story eignen sich Kurzbelege oder Verlinkungen, jedoch sollte am Ende einer Storymap ein Quellenverzeichnis auftauchen.

ArcGIS Storymaps stellt hierfür ein Template zur Verfügung, welches wie oben beschrieben über das Ausklapp-Menü „Entwerfen“ eingefügt werden kann.

Abbildung 32: Leeres Quellenverzeichnis

Hier können überschaubar die einzelnen Kurzbelege aufgeschlüsselt oder auch einzelne Inhalte bzw. Folien mit Quellangaben ergänzt werden.

Für Internetquellen gilt wie üblich, dass das Datum des letzten Aufrufs anzugeben ist.

Abbildung 33: Auswahl der Endgeräte bei Vorschau einer Story

Über den Reiter Vorschau in der Kopfleiste kann sich angesehen werde, wie die veröffentlichte Storymap aussehen wird. Unten rechts erscheint ein Menü, über das zwischen den Ansichten auf verschiedenen Endgeräten gewechselt werden kann.

Für Storymaps, die z.B. für Führungen im Gelände genutzt werden sollen, ist es hilfreich öfter bereits während des Erstellens zu überprüfen, wie die Story auf mobilen Endgeräten dargestellt wird.

Ist eine Storymap fertig, kann bzw. muss diese veröffentlicht werden. Hierfür wird der Reiter „Veröffentlichen“ gewählt und es öffnet sich eine neue Seite, auf der Details zur veröffentlichten Story (Bild, Titel, Beschreibung) festgelegt bzw. das Cover angepasst werden können.

Zudem lassen sich Zugangsberechtigungen einstellen. Nur bei für Alle veröffentlichten Storymaps lassen diese sich anschließend über einen Link teilen.

Abbildung 34: Veröffentlichungsoptionen

Ist alles angepasst, wird Veröffentlichen ausgewählt und fertig ist die Storymap.

Abbildung 35: Optionen bei einer veröffentlichten Story

Soll die Storymap später bearbeitet werden, kann dies über die den Reiter mit den drei Punkten ausgewählt werden. Wird die Story bearbeitet muss sie anschließend erneut veröffentlicht werden. Über die Freigabe-Option in der Mitte kann auch der Link für die Storymap aufgerufen werden.