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