Projekt VollbehrGIS - Dokumentation

Das Projekt VollbehrGIS wurde im Rahmen des Praktikanten-Programms 2018 realisiert. Dabei geht es um die Georeferenzierung und Visualisierung ausgewählter Landschaftsmalereien des Malers Ernst Vollbehr, archiviert durch das Leibniz-Institut für Länderkunde. In diesem Fall handelt es sich um die Bilder der ehemals deutschen Kolonie Deutsch-Ostafrika.

Das Leibniz-Institut für Länderkunde ist im Besitz von knapp 900 Landschaftsmalerein Ernst Vollbehrs, die der Künstler während seiner zahlreichen Reisen durch die ganze Welt entstanden. Eine komplette Übersicht des Archiv-Bestandes sind im Werksverzeichnis zu finden.

Inhaltsverzeichnis

 Webkarte

Funktionen der Karte genutzte Plugins/Tutorials für Leaflet Lizenz
Georeferenzierung klassifiziert mit eigener Signatur, beschrieben in Legende Leaflet Tutorial Interactive Chloropleth Map Leaflet Lizenz
Layer-Control-Panel in der rechten oberen Ecke
  • neutrale Basemap / Basemap mit Gelände
  • Deutsch-Ostafrika als Polygon
  • Deutsch-Ostafrika als historischer Kartenscan
  • Reiseroute ein-/ausblendbar
Leaflet Tutorial Layer Groups and Layer Control
Leaflet Documentation ImageOverlay
Leaflet Lizenz
Marker-Punkte in Clustern je nach Zoomstufe Leaflet Markerclusters
Leaflet Markercluster Layersupport
MIT
Sidebar zur Darstellung der Metadaten und Vergrößerung des Bildes Leaflet Sidebar MIT
Lightbox in Verbindung mit den Bildern Fancybox 3 CC BY-NC 3.0
Beschriftungen der Bilder nach Ernst Vollbehr (Deutschlands Kolonien Band I)
Searchbar zum Durchsuchen der Marker (nur erster Begriff zählt) Leaflet Search Control MIT
Time-Slider Leaflet Slider L.Slider Lizenz
Animierte/Kurvige Reiseroute Leaflet.Polyline.SnakeAnim
Leaflet Curve
Beerware
MIT
Gallerie-Ansicht mit Zoom auf Marker / Lightbox jQuery & jQuery UI
Leaflet Easybutton
MIT
Easybutton Lizenz
Code-Ansicht mit Synthax-Highlighting PrismJS Prism Lizenz

 Basemaps

Zur Verfügung gestellt durch Leaflet Providers (verschiedene Basemaps)

Terrain: Esri World Topo Map
Attribution: Tiles © Esri — Esri, DeLorme, NAVTEQ, TomTom, Intermap, iPC, USGS, FAO, NPS, NRCAN, GeoBase, Kadaster NL, Ordnance Survey, Esri Japan, METI, Esri China (Hong Kong), and the GIS User Community

Neutral: CartoDB Positron
Attribution: © OpenStreetMap © CartoDB

Satellite: Esri WorlImagery
Attribution: Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community

zurück zum Anfang

 Literatur und andere Quellen

  1. Schuberth, Konrad: "Ernst Vollbehr - Maler zwischen Hölle und Paradies". Eine illustrierte Biographie. Halle (Saale): Mitteldeutscher Verlag, 2017.
  2. Thomsen, Hermann: "Deutsches Land in Afrika". Von Hermann Thomsen. Mit Bildern von Ernst Vollbehr. München : Verlag der Deutschen Alpenzeitung, 1911.
  3. Böhmer, Rudolf: "Deutschlands Kolonien/ 1. - Deutsch-Ostafrik, Deutsch-Südwestafrika". 100 farbige Bilder mit Erläuterungen von Ernst Vollbehr. Text von Rudolf Böhmer. Berlin-Charlottenburg : Hinz & Küster, 1936.

 Genutzte Karten zur Georeferenzierung

zurück zum Anfang

 Workflow

Die Daten, die in Javascript ausgelesen und als GeoJSON übergeben bzw, verarbeitet werden, sind als CSV-Datei hinterlegt und zusammengefügt aus 3 verschiedenen Datenerhebungen, d.h. Datenbanken werden zusammengebracht, weshalb Attribute mehrmals auftauchen können.

 ArcGIS Georeferenzierung und Export

Mithilfe von ArcMap kann man die Geodatenbank, die alle drei Tabellen miteinander verknüpft, ergänzen oder bearbeiten. Die .gdb-Komponenten sind zum einen die Punkt-Shapfile, die die Position der Bilder repräsentiert, die OPAC-Tabelle, die alle heruntergeladenen Metadaten aus dem OPAc-System beinhaltet und die weitere Tabelle mit allen individuellen eigenen erhobenen Daten - in diesem Fall sind das die Bildbeschreibungen und die Reihenfolge aus dem Buch Deutschlands Kolonien Band I.

Die Daten sind im Koordinatensystem GCS_WGS_1984 projiziert, um schlussendlich die korrekten Koordinaten zu exportieren, mit denen Leaflet arbeiten kann.

Tabellen-Aufbau

Shapefile: Erstellt man einen neuen Punkt, müssen folgende Attribute in der Attributtabelle ergänzt werden.

OPAC Metadaten: Die OPAC Daten werden über den Onlinekatalog der Geographische Zentral Bibliothek (GZB) eingeholt. Wie dieser Schritt funktioniert, wird weiter unten beschrieben. Wichtig ist, dass auch hier die Signatur aufgeführt wird und die heruntergeladenen Daten überarbeitet werden (siehe OPAC Metadaten)!

Eigene Daten: Bei den eigenen Daten, muss abermals die Signatur auftauchen, damit die Einträge entsprechend bei der Zellenverbindung zugeordnet werden können. Ansonsten kann jedes weitere beliebige Attribut hinzugefügt werden. Dieses muss dann jedoch auch ebenfalls in der JAvaScript-Datei, in der die Umwandlung von CSV in GeoJSON geschieht, hinzugefügt werden. Wie dies geschieht, wird unter Website Code Snippets erklärt.

Tabellen verbinden

Die Tabellen verbindet man ganz einfach in ArcMap, indem man auf die Shapefile rechts-klickt, und Verbinden... aufruft. Ein Fenster öffnet sich, in dem man die Tabellen und übereinstimmenden Attribute (Signatur) einstellen kann. Dieser Vorgang muss für beide Tabellen vorgenommen werden. Danach kann man die Attributtabelle der Shapefile öffnen und es sind alle Eigenschaften aller Tabellen darin zu sehen.

Diese Tabellenverbindung existiert nur in ArcMap. Lädt man die Geodatenbank wieder neu in ArcMap, muss man die Verbindung erneut einstellen.

Tabelle exportieren

Damit die Daten weiterverwendet werden können, sind zwei Dinge wichtig:

Die Daten können in ArcMap ganz einfach in der richtigen Kodierung mit der richtigen Spaltentrennung und Koordinaten-Schreibweise exportiert werden. Folgende Schritte sind notwendig:
  1. Verbundene Attributtabelle öffnen
  2. Im Menü (erster Icon in der Symbolleiste) der Attributtabelle auf Alle auswählen klicken. Nun sind alle Zeilen blau hinterlegt.
  3. Im Menü auf Exportieren... klicken
  4. Unter Ausgabetabelle auf das Ordner-Symbol klicken und im nun extra geöffneten Fenster unter Speichern als: Textdatei auswählen. Gewünschten Speicherort und Dateiname setzen und exportieren.

Tipps zur Georeferenzierung

Um sich besser im ArcGIS orientieren zu können, bietet es sich an eine Grundlagen Karte einzubinden. ArcMap bietet eine solche Funktion über Daten hinzufügen an (siehe Bild rechts). Auch können Shapefiles (Boundaries, Roads, Rivers, PopPlaces, etc.), bspw. von Natural Earth Data die Orientierung unterstützen.

Zur Georeferenzierung sollte man verschiedene Quellen zur Hilfe nehmen. Im Beispiel von Deutsch-Ostafrika waren historische Karten sehr von Vorteil die verschiedenen Stämme und alten Ortsnamen ausfindig zu machen. Auch sind die Reisetagebücher von Ernst Vollbehr selbst, sowie seinen Reisepartnern teilweise sehr detailliert beschrieben und geben Aufschluss auf die Ortschaften, wo das Bild entstanden sind.
Ein Beispiel für die Notwendigkeit der Literatur-Recherche sind die Porträts der verschiedenen Stammesmitgliedern ("Mshambaa", "Fimbo"), dessen Stämme im tiefen Tansania auftraten. Der Künstler hat bei seinem Aufenthalt auf der Plantage in Mkuse jedoch auf einer vielbelaufenem Weg auf Eingeborene gewartet und diese dann dort porträtiert. Hätte man also die Bilder den Stammespositionen zugeordnet, wäre der Reiseverlauf, den man eventuell nachvollziehen möchte, somit verfälscht.

Auch kann es vorkommen, dass es schwer wird, alte Namen, die in den Tagebüchern aufkommen, wiederzufinden. So stellte sich heraus, dass die von Vollbehr erwähnte Usukuma Eingeborenen auch Sukuma oder Wasukuma genannt wurden. Letzteres konnte man auf der Karte der Völkergruppen wiederfinden. Ein anderes Beispiel ist die Useguha-Region. Recherchen erwähnen diesen Ort auch als Usegua oder Usigua.

Koordinaten in Attributtabelle speichern

Leaflet braucht die Koordinaten der Punkte - diese werden jedoch nicht automatisch in der Attributtabelle aufgeführt. Dazu wird die ArcMap Toolbox benötigt. Unter Data Management Tools > Features > XY-Koordinaten hinzufügen werden zwei neue Spalten in der Tabelle generiert (POINT_X, POINT_Y) und die Koordinaten dain gespeichert.

Wird die Position eines oder mehrerer Features geändert, muss die Funktion XY-Koordinaten hinzufügen wieder durchgeführt werden, damit die Koordinaten in der Tabelle aktualisiert werden.

 OPAC Metadaten einholen

Die Geographische Zentral Bibliothek (GZB) führt alle Vollbehr-Gemälde auf. Über die (erweiterte) Suchfunktion und Suchfiltern in der linken Spalte der Suchergebnisse kann man seinen Datensatz wie gewünscht zusammenstellen. In diesem Fall waren es alle Ergebnisse von "Vollbehr" mit dem Typ Malerei und dem Geographischen Schlagwort "Tansania".

Anschließend setzt man die Ergebnis-Anzahl (Ergebnisse pro Seite) auf alle, damit beim Export keine Daten auf weiteren Seiten fehlen. Über den Reiter Drucken/Speicher... > Eigenen Report für Download erstellen kann man eine Tabelle mit den gewünschten Metadaten-Attributen erstellt und exportiert werden, indem man die Attribute der Liste im rechten Feld hinzufügt und anschließend über Anzeigen (Tabelle) abermals über den Reiter Drucken/Speichern... die Möglichkeit zum Download als Excel-Datei findet. Die Reihenfolge der Spalten entspricht der Reihenfolge der Attribute im rechten Feld im Fenster "Anzeige definieren".

Die Tabellenattribute sind folgende:

OPAC-Daten formatieren

Die OPAC Daten müssen auf jeden Fall überarbeitet werden, da es sonst Schwierigkeiten mit einigen Funktionen im Javascript sowie der CSV-Ausgabe gibt. Die Suchen & Ersetzen Funktion ist hierbei essentiell!

  1. leere Felder mit "-" ausfüllen: Falls man die spätere CSV Datei wieder in Excel öffnen möchte, werden leere Felder ignoriert und die Spalten können verrutschen. Um dem entgegen zu wirken und auch verschiedene JavaScript-Funktionen zu erleichtern, wird stattdessen ein Bindestrich als Inhalt gesetzt.
  2. Eckige Klammern löschen: besonders beim Erscheinungsjahr können diese Auftreten und behindern den Leaflet Slider die Bilder nach Jahr zu ordnen. Aber auch im Titel sieht eine solche Formatierung nicht schön aus.
  3. ca. vor dem Erscheinungsjahr entfernen: Auch hier kollidiert eine solche Formatierungmit dem Leaflet Slider.
  4. Anführungszeichen entfernen: ganz wichtig! Die Anführungszeiten machen es schwer bei der die später konvertierten JSON Objekte in Funktionen zu übergeben und können die komplette Homepage stilllegen!
  5. (Geographisches Schlagwort) entfernen: hinter jedem Geographischem Schlagwort ist dieser Vermerk zu sehen und behindert die Datenübersicht und spätere Filterfunktionen und muss deswegen entfernt werden
  6. ; - Semikolons: Die später exportierte CSV-Datei wird mit Semikolons getrennt. In Javascript werden die Spalten über Semikolons ermittelt und ausgelesen. Tauchen mehr Semikolons auf, kann das eine korrekte Ausgabe behindern und ebenfalls die komplette Homepage lahmlegen. Bei den Thesaurusdeskriptoren und Geographischen Schlagworten tauchen diese immer auf, und sollten durch Kommas (,) ersetzt werden. Aber auch bei der Bildbeschriftung kam es vor, dass entweder das Semikolon durch ein Komma ersetzt oder einfach entfernt werden sollte.
  7. Umlaute und ß: Auch hier sollten Umlaute und ß überprüft werden, da die Daten beim Import falsch kodiert werden könnten.
zurück zum Anfang

 Website JS-Functions

In diesem Abschnitt werden die JavaScript-Funktionen noch einmal näher erklärt und beschrieben, damit ihre Notwendigkeit erklärt werden kann und etwaige Probleme vorab eliminiert werden können. Im Dokument sind ebenfalls Kommentare (englisch) hinterlassen.

header.php

In der Header-Datei wird die Datei ab Zeile 77 eingelesen und nach den Erscheinungsjahren sortiert.


        var file = "src/VollbehrGIS.txt"; 
        var DOAgeoJSON = csvTojson(file); //file converted to GeoJSON
    
        // sort features in relation to year 
        DOAgeoJSON.features.sort((a,b)=>a.properties.time - b.properties.time);
        

csvtojson.js - function csvTojson

Diese Funktion liest eine CSV-Datei ein und wandelt sie in eine GeoJSON-Featurecollection um, die anschließend von Leaflet verwendet werden kann.
Nachdem die Datei erfolreich eingelesen ist, wird der Text in Zeilen aufgesplittet, anschließend die Zellen - durch Semikolons getrennt - herausgefiltert.


        function csvTojson(file){
            var features = [];
            var rawFile = new XMLHttpRequest();
            rawFile.open("GET", file, false);
            rawFile.onreadystatechange = function ()
            {
                if(rawFile.readyState === 4)
                {
                    if(rawFile.status === 200 || rawFile.status == 0)
                    {
                        // all lines in csv seperated
                        var allText = rawFile.responseText;
                        var lines = allText.split("\n");
                    
                        // console log to check column position 
                        var columns = lines[0].split(";");
                        console.log(columns);

                        //create feature GeoJSON per line
                        for (i=1; i < lines.length; i++) {
                            var parts = lines[i].split(";");

                            var lat = parts[5];
                            var lon = parts[4];

                            //set description into blockquote styling if existing
                            var description; 
                            if (parts[18] == "-"){
                                description = ""
                            } else {
                                description = "<br /><blockquote>";
                                description += parts[18];
                                description += "</blockquote><small>Ernst Vollbehr, Deutschlands Kolonien Band I</small>";
                            }
                            // geoJSON feature construction
                            var feature = {
                                type: "Feature",
                                geometry: {
                                    type: "Point",
                                    coordinates: [Number(lon), Number(lat)] // reverse order!
                                }, properties: {
                                    name: parts[3], // picture title
                                    time: parts[10], // year, LeafletSlider needs 'time' property
                                    imgPath: "BILDER/" + parts[1] + ".jpg",
                                    signature: parts[1],
                                    quality: parts[2],
                                    desc: description,
                                    order: parts[19],
                                    OPAClink: "http://ifl.wissensbank.com/fastlink.html?tid=" + parts[9],
                                    OPACtitel: parts[8],
                                    format: parts[11],
                                    tech: parts[13],
                                    beschriftung: parts[12]
                                }}
                            // put feature into array
                            features.push(feature);                   
                        }}}}
            rawFile.send(null);
            //console.log(features[23]);
            var featureColl =  { 
                "type": "FeatureCollection",
                "features": features 
            };
            return featureColl;}
        

Neues Tabellenattribut als neues property hinzufügen

Um ein neues Tabellen-Attribut hinzuzufügen, muss man lediglich die Spalten-Position (beginnend bei 0) wissen. Diese kann man ganz einfach herausfinden, indem man die Konsole des Browsers nach Laden der Webkarte öffnet. Die erste Zeile der Tabelle wird mit dem Befehl console.log(columns); ausgegeben und sieht nach Ausklappen des Arrays kann man rechts sehen.

Dann fügt man nach der geöffneten und vor der geschlossenen, geschwungenen Klammer von properties (}, properties: {) ein neues Feld hinzu und besetzt es mit parts[Spalten-Position], zum Beispiel: country: parts[20],

Die Konsole kann man entweder öffnen, indem man irgendwo auf der Website rechts-klickt und Element untersuchen aufruft, dann zur Konsole navigiert, oder im erweiterten Menü des Browsers unter Web-Entwickler-Tools die (Web-)Konsole sucht.

galleryView.js - function galleryView

Eine GeoJSON FeatureCollection wird eingelesen und der Inhalt für die Sidebar in Galerie-Ansicht zusammengestellt.
Die FeatureCollection durchläuft eine Schleife für jedes Element und erzeugt ein Zusatz zum Inhalt (Content) des Sidebar-Divs. Zum Schluss wird der gesamte Inhalt übergeben.

galleryView.js - ZoomToMarker function

Da durch die Galerie-Ansicht nicht dynamisch auf den gesuchten Marker zugegriffen wird, wird hier etwas getrickst.
Die übergebenen Daten (Lat, Lng, Titel, Bildpfad) werden benötigt, um die Karte auf die gewünschte Stelle zu zoomen und einen unsichtbaren Marker zu erstellen, um mit dem geöffneten PopUp den Marker anzuzeigen.

zurück zum Anfang

 Zukünftige Erweiterungen

Wie mit jedem Projekt hat man mehr Ideen als Zeit oder Möglichkeiten erlauben. Die Realisierung und Gewährleistung bestimmter Funktionen muss bei begrenzter Zeit priorisiert werden. Dazu gehören folgende Ideen und Bugs: