GIS IQ Blog
  • Schule
  • Hochschule
  • Forschung
Kategorien
  • Forschung
  • Hochschule
  • Schule
Themen
ArcGIS Case Studies Digitale Bildung Dozierende eduGISchat Events GeoDev KarriereMitGIS Kartografie Lehrerhandreichungen Open Data Praktikum Projekte Ressourcen Schüler Smart Campus Smart Community Sommercamps Story Map Studierende Tutorial Unterricht Wettbewerb
  • Schule
  • Hochschule
  • Forschung
News
  • Hochschule

Interaktive Webanwendungen mit Story Maps erstellen

  • 6. Juni 2013
  • Jan Wilkening
Total
0
Shares
0
0
0
0
0
0

Im vergangenen Blogpost zur ArcGIS API for Javascript habe ich euch die Einstiegsseite und das Einbinden eigener Widgets vorgestellt.

Heute geht es um das Erstellen individueller Webanwendungen auf der Basis von Vorlagen, die heruntergeladen, konfiguriert und anschließend auf dem eigenen Webserver veröffentlicht werden können.

Wollt ihr einen interaktiven Reiseführer mit Fotos von eurem Wohnort erstellen? Oder ein interaktives Exkursionsprotokoll? Dafür eignen sich die sogenannten Story Maps von Esri. Ich zeige euch, wie ihr in wenigen Schritten eure eigene Story Map erstellen und veröffentlichen könnt.

 Die Story Map Template Gallery von Esri

Esri bietet eine Galerie von Vorlagen. Zu jeder dieser Vorlagen gibt es spezielle Beispielanwendungen, die als Ideen für eigene Themen in eurer lokalen Umgebung dienen können. Je nach Datengrundlage und Zweck der Karte sind unterschiedliche Vorlagen sinnvoll. Sollen zum Beispiel Fotos mit Karten verknüpft werden, bieten sich das Storytelling Shortlist Template und das Storytelling Map Tour Template an.Das Storytelling Shortlist Template gibt Übersicht über verschiedene Plätze in einer Stadt oder Region geben – von interessanten Museen über die besten Restaurants bis hin zu architektonischen Highlights. Über Reiter (Tabs) könnt ihr zwischen verschiedenen Themen wechseln. Auf Basis dieser Vorlage wurden bereits Story Maps für Los Angeles und München erstellt. Hier ein Screenshot der Anwendung für San Diego.

 

Mit dem Storytelling Map Tour Template werden die einzelnen Fotos etwas größer dargestellt und die Vorlage bietet mehr Platz für eigene Schrift.
Wie aber sieht der HTML- und Javascript-Code dieser Templates aus? Wie kann ich den Code für meine eigenen Anwendung anpassen? Das ist mit den Story Maps einfacher als vielleicht erwartet. Ich zeige das am Beispiel des Storytelling Shortlist Template. Die Vorgehensweise für das Storytelling Map Tour Template ist übrigens sehr ähnlich.

Herunterladen des Quellcodes

Zunächst gehe ich auf die Galerie der Story Map Templates und klicke dann beim Storytelling Shortlist Template auf Details und Download. Anschließend kann ich über Download Source Code den Quellcode herunterladen und erhalte ein ZIP-Archiv für mein lokales Dateisystem. Dieses ZIP-Archiv enthält neben dem Quellcode auch Readme-Dateien, die die einzelnen Schritte zur eigenen Webanwendung genau dokumentieren (auf Englisch).

Erstellen der Webkarte in ArcGIS Online

Um meine Webanwendung zu erstellen, muss ich also erst eine Webkarte auf ArcGIS Online erzeugen. Dort wähle ich die geeignete Hintergrundkarte (zum Beispiel grauer Hintergrund) aus und füge die Punkte, die ich in meiner Karte mit Fotos hinterlegen möchte, als Textdatei (mit Koordinaten) oder Shapefile zur Webkarte hinzu. Jede Textdatei wird in der Webkarte ein eigener Punktlayer und anschließend ein eigener Reiter (Tab) in der Webanwendung. Es ist also sehr sinnvoll, zu jedem Thema eine einzelne Datei hochzuladen.Die Datei benötigt eine gewisse Struktur, um vom Code, der die Webanwendung aufbaut, richtig interpretiert werden zu können. Das ist im Detail in der Readme-Datei beschrieben. Wichtig ist das Feld IMAGE_URL, in dem die URL zum Foto eingetragen werden muss, das mit dem Punkt auf der Karte verknüpft werden soll. Diese URL kann also auch die Adresse eines frei zugänglichen Fotodiensts im Internet sein, wenn die Bilder nicht auf dem eigenen Webserver liegen.

In dieser Webkarte lege ich außerdem den Kartenausschnitt fest, der am Anfang sichtbar sein soll (zum Beispiel Ausdehnung der ganzen Stadt), und erstelle Lesezeichen. Beim Klick auf diese Lesezeichen zentriert die Karte auf diesen Kartenausschnitt (zum Beispiel ein Stadtviertel).

Anpassung des Quellcodes

Wenn die Webkarte in ArcGIS Online soweit fertig ist, muss ich nur noch die index.html-Datei auf meinem lokalen Dateisystem entsprechend konfigurieren, damit die Einstellungen meiner Webkarte übernommen werden. Dazu gibt es in der HTML-Datei die gesondert gekennzeichnete config section. Hier gebe ich beim Parameter var WEBMAP_ID die ID meiner soeben erstellten Webkarte an.
Diese finde ich, wenn ich meine Webkarte im Browser aufrufe: Die WEBMAP_ID ist der Abschnitt hinter dem “=” in der URL http://www.arcgis.com/home/webmap/viewer.html?webmap={WEBMAP_ID}.
Ansonsten kann natürlich in der index.html auch noch mehr konfiguriert werden – Farbschema, Text für Bezeichnungen, Größe der Fenster usw. Wenn alle gewünschten Einstellungen getroffen sind, kann ich den ZIP-Ordner entpacken und auf meinen Webserver kopieren (bei IIS ist der Pfad zum Beispiel C:inetpubwwwroot). Somit ist die Webanwendung auf der Grundlage des Storytelling Templates veröffentlicht und für jeden über das Web zugänglich.
– Jan Wilkening, Technical Sales Team Education
Total
0
Shares
Share 0
Tweet 0
Pin it 0
Jan Wilkening

Nachdem ich 2007 mein Geographie-Studium in Bonn mit einer der ersten Diplomarbeiten zum Thema Geomarketing abgeschlossen hatte, zog es mich an die Universität Zürich. Dort habe ich mich in meiner Dissertation mit kartenbasierten Entscheidungen unter Zeitdruck beschäftigt und Statistik- und GIS-Kurse geleitet. Ab 2012 arbeitete bei der Esri Deutschland GmbH als Solution Engineer. Seit meiner Berufung zum Professor für Geodatenanalyse an der Hochschule Würzburg-Schweinfurt im Jahr 2019 unterstütze ich nebenberuflich das Education Team von Esri.

Voriger Artikel
  • Hochschule
  • Schule

Lernen und Lehren mit GIS – in der Schule, in der Ausbildung, im Studium und danach

  • 4. Juni 2013
  • Susanne Tschirner
Weiterlesen
Nächster Artikel
  • Hochschule
  • Schule

Esri Education GIS Conference @ EMEAUC

  • 10. Juni 2013
  • Grischa Gundelsweiler
Weiterlesen
Dir könnte auch gefallen
Weiterlesen
  • Hochschule
  • Schule

Komm mit in den Nationalpark Wattenmeer -Sommercamp für Lehramtsstudierende 2023

  • Team Education
  • 16. März 2023
Header für den Beitrag zu den Analysen im neuen Map Viewer
Weiterlesen
  • Hochschule
  • Schule

Neuer Map Viewer in Lehre und Unterricht – jetzt auch mit Analysen

  • Klaus Nakel
  • 1. März 2023
Weiterlesen
  • Hochschule

Für Studierende: WWF Mapathon Berlin (28.-31. März 2023)

  • Daniela Wingert
  • 27. Februar 2023
Titelbild der Esri MOOCs
Weiterlesen
  • Forschung
  • Hochschule

Esri MOOCs – erweitern euren GIS-Horizont

  • Team Education
  • 9. Februar 2023
Weiterlesen
  • Forschung
  • Hochschule

Geoinformatik Ingenieure – Computer Vision richtig lernen!

  • Team Education
  • 31. Januar 2023
Weiterlesen
  • Hochschule

„Digital Twins“ und GIS in der Hochschullehre? Das sind die Gründe dafür!

  • Daniela Wingert
  • 10. Januar 2023
Weiterlesen
  • Hochschule

Wettbewerb: Esri Young Scholar Award 2023

  • Team Education
  • 10. Januar 2023
Weiterlesen
  • Hochschule

Praktikum bei Esri: Python und ArcGIS

  • Gastautor
  • 15. Dezember 2022
GIS IQ Blog
  • Über uns
  • Impressum
  • Datenschutz
Lernen. Forschen. Entwickeln. Mit GeoIntelligenz!

Gib dein Suchwort ein und drücke Enter.