Global Navigation

Sachen machen mit Open Data und Fidel - Episode 2

Veröffentlicht am Donnerstag, 17. Dezember 2015 um 10.41 Uhr
Von Fidel Thomet

Web-Apps mit offenen Geodaten

Sachen machen mit Open Data und Fidel

In unserem Open Data Katalog stellen wir zahlreiche Geodaten zur Verfügung. Dazu zählen einerseits Basiskarten wie aktuelle und historische Stadtpläne oder Luftbilder. Andererseits bieten wir unterschiedlichste Vektordaten an. Wie beispielsweise Standorte der städtischen Amtshäuser oder das Zürcher Velowegnetz. 

In unserer Werkstatt beschreiben wir die entsprechenden Datenformate genauer und erklären die ersten Schritte im Umgang mit ihnen.

Doch: Wie lassen sich die Basiskarten und Vektordaten in Webseiten integrieren?

Diese Frage möchte ich in dieser zweiten Episode anhand eines einfachen Anwendungsbeispiels klären. Bei der Entwicklung des Baumradars, auf das ich im letzten Beitrag eingegangen bin, habe ich dazu einige Erfahrungen gemacht, die ich hier mit Ihnen teilen möchte.

...

Anwendungsbeispiel

Bechreibung

Anwendungsbeispiel: Webmap mit Denkmalschutzobjekten und dem Stadtplan von 1900.

Dieses einfache Beispiel zeigt die heutigen Denkmalschutzobjekte auf einem Stadtplan von 1900 und verdeutlicht die Dichte an geschützten Objekten in der Zürcher Altstadt.

Im Folgenden werde ich aufzeigen, wie einfach die Erstellung einer solchen Webmap ist. Dabei gehe ich auf die Herangehensweise und das Vorgehen ein.

Für diejenigen, die im Detail wissen wollen wie es gemacht wird, haben wir den dokumentierten Code des Anwendungsbeispiels auf Github abgelegt.

Daten und Formate

Der als Basiskarte verwendete Stadtplan von 1900 kann über einen Web Map Tile Service (WMTS) abgerufen werden. Diese Schnittstelle erlaubt das Herunterladen von Kartenausschnitten (Tiles), die in der App zur angezeigten Karte zusammengesetzt werden.

Für die Positionen der denkmalgeschützten Objekte ruft die App eine GeoJSON-Datei aus dem Datenkatalog ab und zeichnet sie über die Basiskarte.

Vorgehen

Das Erstellen einer solchen App ist eigentlich recht einfach. Die Programmbibliothek OpenLayers spezialisiert sich auf die Darstellung von Karten in Webseiten. Mit nur wenigen Angaben lassen sich der WMTS und die GeoJSON-Daten einbetten.

Ein paar Stolpersteine gibt es jedoch und diese können schnell zu schwer überwindbaren Hindernissen werden: Die von uns angebotenen WMTS arbeiten mit den Schweizer Landeskoordinaten LV03. Das entspricht der international wenig verbreiteten Projektion EPSG:21781. Damit OpenLayers die Karten darstellen kann, muss diese Projektion zuerst mit Proj4js, einer weiteren Bibliothek, definiert werden.

Das weitere Vorgehen unterteilt sich in drei Etappen. Zunächst muss der Container für die Karte eingerichtet werden, dann wird die Basiskarte per WMTS eingebunden und abschliessend werden die Vektordaten geladen und eingebettet.

Schritt 1: Karten-Container einrichten

Der Container bietet die Grundlage für die Darstellung der Geodaten und die Interaktion mit der Karte. Er wird in OpenLayers mit wenigen Zeilen Code erstellt. Dabei sind Eigenschaften wie Kartenmitte und Zoomstufen zu definieren. Auch die zuvor definierte Projektion EPSG:21781 muss an dieser Stelle angegeben werden.

Schritt 2: WMTS einbinden

Für die Basiskarte müssen als erstes die WMTS-Capabilities geladen werden. Darin sind die verfügbaren Kartenebenen und deren Konfiguration beschrieben. Um die Karte aus dem Anwendungsbeispiel einzubetten, muss in OpenLayers eine neue Ebene erstellt werden und der Stadtplan von 1900 als Bildquelle angegeben werden. Danach ist die Ebene dem im ersten Schritt erstellten Container hinzuzufügen.

Die beiden Layer: Stadtplan 1900 und Denkmalschutzobjekte als Punkte.

Links: Schrtitt 2 (Basiskarte als WMTS einbinden). Rechts: Schritt 3 (GeoJSON einbetten)

Schritt 3: GeoJSON einbetten

Die Koordinaten der Denkmalschutzobjekte werden der GeoJSON-Datei entnommen. Da die städtischen Server kein CORS erlauben, kann diese Datei nicht direkt aus dem Datenkatalog bezogen werden. Eine Option wäre das Herunterladen und anschliessend das lokale Einbinden der Datei. Sollten sich dann aber die Daten im Katalog ändern, würden diese nicht automatisch übernommen. Darum empfiehlt sich die Verwendung eines CORS-Proxy. Hängt man den Proxy http://ogd-cors.flaneur.io/ vor die URL der GeoJSON-Datei, lässt sich diese problemlos beziehen.

Sind die Daten geladen, müssen sie als Datenquelle angegeben werden. Da die Geokoordinaten in einer anderen Projektion als beim WMTS vorliegen, ist zusätzlich anzugeben, dass sie nach EPSG:21781 zu transponieren sind. Ausserdem lässt sich das Aussehen der einzuzeichnenden Objekte bestimmen. Wie beim WMTS wird abschliessend die gerade erstellte Ebene dem Karten-Container hinzugefügt.

Et voilà! Nach diesen drei Schritten lassen sich Zürichs denkmalgeschützten Objekte auf dem Stadtplan von 1900 erforschen.

Fazit

Mit nur wenig Aufwand lassen sich mit OpenLayers WMTS und GeoJSON-Daten in interaktive Web-Apps verwandeln. Ich hoffe mit diesem Blogpost die paar Stolpersteine aus dem Weg geräumt zu haben.

Der Code der Beispiel-App ist ausführlich dokumentiert und frei verfügbar. Er zeigt, wie die drei Schritte im Detail technisch umgesetzt werden und lässt sich leicht anpassen oder mit anderen Daten füllen. Wir freuen uns auf spannende Anwendungen.

Hinweise

Kommentare:

Aus technischen Gründen ist die Kommentarfunktion dieses Blogs derzeit ausser Betrieb (weitere Infos)Ihre Kommentare nehmen wir aber gerne per Mail (opendata@zuerich.ch) oder über Twitter (@opendatazurich) entgegen und publizieren sie dann manuell.

Frohe Festtage!

Das war unser letzter Blogpost im 2015. Wir wünschen allen frohe Weihnachtstage und einen guten Start in ein erfolgreiches neues Jahr! 

Weitere Informationen