Die Visualisierung von räumlichen Daten, also die Übertragung in ein sichtbares Bild, hilft dem Nutzer beim Erkunden und Verstehen räumlicher Strukturen und Prozesse und erhöht die Usability einer Website. Für die Umsetzung sind nicht immer kostenpflichte Tools notwendig, auch mithilfe von Open Source-Instrumenten lassen sich räumliche Daten komfortabel organisieren, verwalten, formatieren und nutzergerecht aufbereiten. Anhand eines Beispiels aus unserem Portfolio möchten wir Sie in die Arbeitsweise dieser Instrumente einführen.
Abbildung von Firmenstandorten
Grundlage ist eine einfache Excel-Tabelle mit Ihren Standortkoordinaten und zusätzlichen Informationen, die später auf der Website eingeblendet werden sollen. Ideal geeignet für diesen Ausgangspunkt ist OpenLayers, ein Projekt der „Open Source Geospatial Foundation“. Dabei handelt es sich um eine JavaScript-Bibliothek, die die Visualisierung von Daten aus unterschiedlichsten Quellen ermöglicht. Die aktuelle Version (derzeit 2.13.1) kann unter openlayers.org heruntergeladen werden.
Wir exportieren zunächst die Daten aus der XLS-Tabelle in eine TSV (Tab Separated Values)-formatierte Datei. Das Format ähnelt CSV (Comma Separated Values) und unterscheidet sich lediglich durch den Separator Tab <tab>. Diese Datei nennen wir beispielweise „data.txt“. Die erste Zeile benennt die verschiedenen Spalten.
Hier ein kleines Beispiel, wie so eine Datei aussieht. Die Tabs sind der Lesbarkeit halber mit „<tab>“ gekennzeichnet:
lat<tab>lon<tab>title<tab>description
50.833974<tab>12.925305<tab>DMK E-BUSINESS GmbH<tab>HAUPTSITZ CHEMNITZ<br/>Stefan-Heym-Platz 1<br/>09111 Chemnitz
52.388121<tab>13.122016<tab>DMK E-BUSINESS GmbH<tab>BÜRO POTSDAM<br/>August-Bebel-Straße 27<br/>14482 Potsdam
52.52192<tab>13.3804<tab>DMK E-BUSINESS GmbH<tab>BÜRO BERLIN<br/>Marienstraße 31<br/>10117 Berlin-Mitte
Nun brauchen wir noch die OpenLayers.js-Datei aus dem OpenLayers Archiv, die wir zuvor heruntergeladen haben, sowie die „theme“ und „img“-Ordner. Wir speichern alles in einem Unterordner „ol“ ab, zusammen mit der Datei „data.txt“. Jetzt fehlt nur noch unsere HTML-Seite. Hier ein kleines Beispiel:
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8"/>
<script src="https://maps.google.com/maps/api/js?v=3&sensor=false"></script>
<script type="text/javascript" src="ol/OpenLayers.js"></script>
<script type="text/javascript">
var map, layer, datalayer;
function init() {
map = new OpenLayers.Map('map');
var gmap = new OpenLayers.Layer.Google("Google");
map.addLayer(gmap);
datalayer = new OpenLayers.Layer.Text("Standorte", {
location : "./data.txt"
});
map.addLayer(datalayer);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.zoomToMaxExtent();
//Wenn Layer ist geladen, Zoom In
datalayer.events.register(
'loadend',
datalayer,
function(evt){ map.zoomToExtent(datalayer.getDataExtent());}
);
}
</script>
</head>
<body onload="init();">
<div id="map" style="width:640px;height:480px;"></div>
</body>
</html>
Abbildung von Dynamischen Geodaten
Um dieses Muster nun zu erweitern, pflegen wir die Daten in eine Datenbank ein. Mittels PHP lassen sich die Dateien für OpenLayers leicht formatieren und im TSV-Format ausgeben. Der JavaScript-Code muss sich dieses Mal jedoch anstelle von ./data.txt auf die PHP-Api-Url beziehen, z.B.: „./data.php“.
Mit dieser Struktur (DB → PHP → OpenLayers) lassen sich die Daten nun dynamisch pflegen und abbilden. Es gibt jedoch diverse Einschränkungen, beispielsweise lassen sich mit der Struktur nur Punktdaten darstellen. Um Konturen und komplexe Eigenschaften zu verwalten, benötigen wir mehr als eine spezialisierte Datenbank räumlicher Daten. Und hier kommt PostGreSQL mit der Extension PostGIS zur Hilfe: Mit dieser Datenbank können alle Typen räumlicher Daten verwaltet werden. Sogar sehr komplexe Anfragen lassen sich verarbeiten, etwa „Welche Straßen kreuzen die Grenze zwischen zwei Gemeinden?“, oder „Wie viele Straßenlaternen befinden sich außerhalb der Stadtgrenze?“.
Verknüpfung von externen dynamischen Geodaten
Um solche komplexen Daten zu visualisieren, müssen wir sie ebenfalls in OpenLayers verarbeiten. Und das geht so: Bisher haben wir unsere Daten aus Dateien exportiert. Eine elegantere Möglichkeit ist es, die Daten direkt aus der Datenbank anzuzapfen. Das geschieht mittels GeoServer, einer Open Source-Lösung, die die gängigen Transferprotokolle für Geo-Daten unterstützt (z.B. WMS, WFS oder GeoJSON, definiert vom „Open Geospatial Consortium“).
Damit können unsere Geodaten anschließend mit allen gängigen Karten-Providern wie Google Maps, OpenStreetMap oder MS Virtual Earth verknüpft werden. Die Open-Source-Lösung ist kostenlos und befindet sich momentan in der Version 2.5.1 (stable). Java-basiert, kann Geoserver auf fast allen Websites und Umgebungen eingesetzt werden. So können wir also auch komplexe Firmendaten anschaulich visualisieren und mit OpenStreetMap oder Virtual Earth verknüpfen – ein hilfreicher Service für potentielle Kunden.