Schlagwort-Archiv: QGIS

Titel Berlins neue Skyline

Werkstattbericht: Wie unsere interaktive 3D-Karte von Berlin entstanden ist

Genau vor einem Jahr, zum Mauerfall-Jubiläum, hatten wir mit „Wer kam, wer ging, wer heute hier wohnt“ Wanderungsdaten ausgewertet, um zu zeigen, wie sich die Berliner in den vergangenen 25 Jahren verändert haben. Jetzt zeigen wir mit „Berlins neuer Skyline“, wie sich Berlin selbst in diesem Zeitraum verändert hat – und wie es in Zukunft aussehen soll.

Inspiriert von dem Stück „Reshaping New York“ der New York Times begannen wir bereits vor mehr als einem Jahr mit der ersten Daten-Recherche. Unsere erste Idee: Wir benötigen einen aktuellen Datensatz mit allen Berliner Gebäuden mit jeweiliger Höhe und Baujahr.

Rund eine Million Punkte mit Geschosszahlen in römischen Ziffern

Rund eine Million Punkte mit Geschosszahlen in römischen Ziffern

Zwar gibt es mit dem aktuellen Automatisierten Liegenschaftskataster (ALK) einen Datensatz aller Gebäude Berlins mit entsprechenden Höhen. Den Datensatz konnten wir in Form einer DVD direkt bei der Berliner Senatsumweltbehörde bekommen. Google, Open Street Maps o.ä. verfügen auch über die Gebäude in Berlin. Wir wollten allerdings den wirklich aktuellsten und offiziellen Stand der Stadt. Dieser stellte sich aber als äußerst sperrig heraus. So waren etwa die Höhenangaben in römischen Ziffern in einer Punktwolke in dem Shapefile hinterlegt (siehe Screenshot). Darüber hinaus handelt es sich bei dem Datensatz um Grundflächen, die entsprechenden extrudiert werden – was ein sehr schematisches Bild der Stadt abgegeben hätte (z.B. besteht der Fernsehturm lediglich aus einem rund 300 Meter hohen Zylinder).

Noch problematischer war, an das Gebäudealter zu kommen. Für viele Städte gibt es solche Datensätze, wie etwa für die Niederlande. Weltweit sind bereits mehrere Visualisierungen zum Gebäudealter in Städten entstanden. Berlinweit gibt es einen solchen nicht. Über eine Datenbank der bulwiengesa kommt man nur an die Baujahre von Großprojekten. Wenn man die Baujahre der entsprechenden Angebote auf Wohnungsportalen scrapt, bekommt man nur ein sehr unvollständiges Bild.

Eigenes Tool, um das Gebäudealter zu digitalisieren

Eigenes Tool, um das Gebäudealter zu digitalisieren

Berlin stellt nur einen handgezeichneten Plan mit Stand 1992/93, in dem Gebäude innerhalb des S-Bahn-Rings nach bestimmten Altersklassen eingezeichnet sind, im WMS-Format zur Verfügung. Dafür programmierte Moritz Klack ein Tool, das an den jeweiligen Mittelpunkten der aktuellen Gebäude die entsprechende Farbe der Rasterdatei findet und speichert. Mit einem weiteren Tool konnten diese Ergebnisse überprüft und kleine Fehler korrigiert werden. Letztendlich war uns der Datensatz nicht exakt genug, um damit weitere Aussagen treffen zu können. Wir planen aber ein Crowdsourcing-Projekt mit diesen Daten.

Bei der weiteren Recherche stießen wir auf das 3D-Modell der Senatsumweltbehörde. Darin sind sowohl die exakten Gebäudestrukturen als auch die Alterseinteilung „vor 1990 gebaut“, „nach 1990 gebaut“, „geplant“ und „vorgeschlagen“ enthalten. Also alle wichtigen Informationen für unsere interaktive Anwendung. Der Nachteil: Es handelte sich nur um die Gebäude innerhalb des sogenannten „Planwerk Innere Stadt“, etwa einem Drittel innerhalb des Berliner S-Bahn-Rings. Außerdem handelte es sich bei den Daten um ein proprietäres AutoCAD-Format in einer riesigen Datenmenge vor.

Original 3D-Modell der Stadt Berlin in Sketchup

Original 3D-Modell der Stadt Berlin in Sketchup

Auf Anfrage erhielten wir von der Stadt ein aktuelles Modell mit Stand September 2015, was uns sehr wichtig war, da sich die Planungen in Berlin ständig ändern. Um die Datenmenge zu verkleinern, entfernten wir in einem ersten Schritt unnötige Details wie Grünflächen. Dafür importierten wir das AutoCAD-Format der Stadt in die 3D-Software Sketchup und exportierten diese wiederum im OBJ-Format.

Um das rund 800 MB große Stadtmodell ins Web zu bringen, arbeiteten wir mit Jan Marsch von OSM Buildings zusammen. Er gehört zu den bekanntesten Experten auf diesem Gebiet und schaffte es, die Datenmenge drastisch zu reduzieren. Außerdem entwickelte er exklusiv für uns neue Features wie etwa 3D-Labels, die nun auch von allen benutzt werden können. In unserem Fall erstellte er aus den von uns bereitgestellten OBJ-Dateien GeoJSON. Den technischen Prozess beschreibt er in einem eigenen Blogbeitrag. Wer selbst ein solches 3D-Projekt umsetzen möchte, kann den Code bei Github einsehen und nutzen.

Dieses GeoJSON wiederum brachten wir bei uns auf eigene Kacheln, wie es bei interaktiven Karten üblich ist, um die Ladegeschwindigkeit deutlich zu erhöhen. Diesen Prozess beschreiben Christopher Möller und Moritz Klack in einem eigenen Blogbeitrag. Außerdem konnten wir mit diesem Dateiformat nun Geo-Berechnungen in QGIS vornehmen. So fanden wir heraus, welche Fläche in Berlins Innenstadt bereits bebaut ist – und weiter bebaut werden könnte. Diese Information gibt es nicht von der Stadt.

Weiteres 3D-Modell Berlins als Open Data

Weiteres 3D-Modell Berlins als Open Data

Zwischenzeitlich veröffentlichte die Stadt ein weiteres 3D-Modell als Open Data, diesmal von der Senatsverwaltung für Wirtschaft, Technologie und Forschung. Dieses deckt in hohem Detailgrad (LoD2) die gesamte Stadt ab und enthält sogar realistische Texturen für die Gebäude. Allerdings kam es für unsere Geschichte aufgrund des fehlenden Gebäudealters nicht in Betracht. Im Rahmen eines Hackdays wurden aber interessante Projekte damit verwirklicht.

 

Das Intro-Video als Sprite für Canvid

Das Intro-Video als Sprite für Canvid

Wie bei vielen unseren Projekten war die mobile Version zuerst fertig. Um dort Videos automatisch entsprechend der Stelle im Text abspielen lassen zu können, nutzten wir die Bibliothek Canvid von Gregor Aisch und Moritz Klack. Diese wird auch öfters bei der New York Times eingesetzt, um das Autoplay-Verbot von Videos auf iOS-Geräten zu umgehen. Dafür werden Videos per ffmpeg in einzelne Frames zerlegt und mit ImageMagick zu einem großen Sprite zusammengebaut.

Früh war uns klar, dass wir uns bei der Geschichte darauf konzentrieren, wo Berlin in die höhe wächst, wo Wolkenkratzer gebaut wurden und noch gebaut werden – wo also das Stadtbild nachhaltig verändert wird. Dafür ergibt die Darstellung in 3D in unseren Augen absolut Sinn. Für geringere Ladezeiten und höhere Performance – nicht alle Browser und Rechner unterstützen die WebGL-Technik – zeigten wir Videos mit einer optionalen interaktiven Version. Diese ruckelte doch ganz ordentlich auf dem einen oder anderen Rechner. Allerdings gab es nach dem Launch keinerlei Kritik an der Performance.

3D-Daten interaktiv fürs Web aufzubereiten ist äußerst umfangreich. Wir haben dabei selbst viel über Formate und neue Web-Technologien gelernt und freuen uns sehr darüber, dass die Geschichte bei den Lesern bisher – betrachtet man etwa die hohen Sharing-Zahlen auf Facebook – sehr gut ankommt.

 

 

 

Werkstattbericht: Wie unsere Web-Reportage zum Mauerfall-Jubiläum entstanden ist

Vor einem Monat haben wir mit „Die Narbe der Stadt“ unter mauerweg.morgenpost.de eine umfangreiche Web-Reportage veröffentlicht. Hier wollen wir nun kurz beschreiben, wie wir die Geschichte umgesetzt haben.

Web-Reportage "Die Narbe der Stadt"

Screenshot der Web-Reportage „Die Narbe der Stadt“

Die Web-Reportage besteht aus zwei Abschnitten. Zuerst können unsere Leser erstmals Luftbilder vom April 1989, kurz vor dem Fall der Mauer, interaktiv erkunden. So kann sich der Betrachter ganz nah ins geteilte Berlin zoomen und bewegen, ähnlich wie bei „Google Maps“. Dem Nutzer zeigt sich eine nie dagewesene Perspektive auf die Stadt kurz vor dem Fall der Mauer.Dann beschreibt Reporterin Uta Keseling, was sie auf ihrer zehntätigen Radwanderung auf dem rund 160 Kilometer langen Mauerweg erlebt hat.

Was ist von der Mauer geblieben? Sind die Folgen der Teilung noch spürbar? Wie geht es den Menschen an der „Narbe der Stadt“? Das sind die Fragen, die die Reportage beantwortet. Etwa drei Wochen lang haben wir die rund 11.000 Wörter umfassende Geschichte fürs Web umgesetzt – aufbereitet in Text, Fotos, Karten und Videos.

Das Feedback auf die zehnteilige Reportage war überaus positiv. Sie wurde häufig geteilt und war mehrere Tage der meistabgerufene Artikel auf morgenpost.de. Gerade wurden wir damit für den Deutschen Reporterpreis nominiert.

Im Fokus: Text und Navigation

Von Anfang an haben wir den Fokus auf den Text gelegt. Er sollte von allen Elementen absolut im Zentrum stehen und maximal gut lesbar sein – auf Smartphones, Tablets, Laptops und Desktop-Rechnern. Dafür haben wir das Photoshop-Design von David Wendler per CSS im Code umgesetzt. Ein kleiner Trick: Um den Text auf manchen Browsern feiner darzustellen, haben wir die CSS-Regel -webkit-font-smoothing: antialiased; genutzt.

Flowtype sorgt für eine optimale Text-Darstellung

Flowtype sorgt für eine optimale Text-Darstellung

Um auf allen Bildschirmgrößen eine gut zu lesende Schriftgröße anzubieten, haben wir das Plugin „Flowtype.js“ benutzt. Damit werden immer zwischen 45 und 75 Zeichen pro Zeile – laut webtypography.net die ideale Anzahl von Zeichen – und die Schriftgröße responsive angepasst.

Da es sich um eine sehr lange Reportage handelt, geben wir dem Leser eine mit Leaflet umgesetzte Navigations-Karte und einen „Kilometerstand“ an die Hand. Die Berlinkarte zeigt dem Leser beim Scrollen immer genau an, von welcher Stelle die Reporterin gerade berichtet – und wie viele Kilometer noch vor ihr liegen. Jeder Abschnitt kann als Lesezeichen gespeichert und geteilt werden.

Begleitelemente: Fotos und Videos

Die Reporterin brachte jede Menge Instagram-Fotos von ihrer Reise mit. Da die Geschichte in der Ich-Perspektive geschrieben ist und viele persönliche Eindrücke und Anekdoten enthält, wollten wir unsere Fotoredaktion nicht zum Nachfotografieren schicken. Die Handy-Fotos waren authentisch und unterstrichen unserer Meinung nach die sehr persönliche Reportage. Um zu sehen, wie es an den jeweiligen Orten früher aussah, haben den Fotos der Reporterin Archivaufnahmen an die Seite gestellt. Video-Reporter Max Boenke steuerte Stills und Interviews bei. Letzte zeigten etwa die emotionalen Reaktionen von Zeitzeugen.

Technisch gesehen war es wichtig, dass nicht alle Elemente auf einmal laden, wenn der Nutzer die Seite aufruft. Vor allem mobil muss die Größe von Geschichten beschränkt werden. Alle Multimedia-Elemente sollten also dynamisch nachgeladen werden, sobald sie im Blickfeld des Nutzers erscheinen. Das Konzept nennt sich Lazy-Loading und es gibt etliche Plugins für Javascript, die sich darum kümmern. Wir haben uns für Lazy Load XT“ entschieden.

Interaktive Karte aus Luftbildern

Von Anfang an war uns klar: Wir brauchen einen außergewöhnlichen Einstieg in das Thema. Bei der Recherche entdeckten wir im Berliner Geodaten-Verzeichnis „FIS-Broker“ Luftbilder vom Mauerstreifen, die der West-Berliner Senat im April 1989 aus einem Flugzeug aufnehmen ließ. Seit etwa einem Jahr stehen Geodaten in Berlin als Open Data zur Verfügung. Die Daten (insgesamt 90 GB, mehr als 700 hochauflösendem TIFF-Dateien) haben wir persönlich mit einer Festplatte bei der Berliner Senatsverwaltung für Stadtentwicklung abgeholt.

Luftbilder gab's per Festplatte von der Berliner Behörde

Luftbilder gab’s per Festplatte von der Berliner Behörde

Mit dem Image Composite Editor von Microsoft (Danke für den Tipp, Achim Tack und Patrick Stotz von mappable.info) haben wir die vielen Luftaufnahmen zu einem großen Bild zusammengestitcht. Das dauerte beinahe 48 Stunden. Um aus diesem Bild eine interaktive Karte zu erstellen, musste es erst georeferenziert, also bestimmten Pixeln Koordinaten (in unserem Fall 50 willkürlich gewählte Punkte innerhalb West-Berlins) zugewiesen werden. Das wiederum haben wir mit der Open-Source-Software QGIS gemacht.

Auch dieser Rechenvorgang dauerte mehr als einen Tag. Als Ergebnis erhielten wir eine zwölf Gigabyte große GeoTIFF-Datei. Aus dieser wiederum mussten wir einzelne Kacheln, sogenannte Tiles, für verschiedene Zoomstufen erstellen, da ja nicht immer die gesamte Datei geladen werden kann. Dafür nutzten wir die Software Tilemill.

Dem zusammengefügten Luftbild werden Koordinaten mitgegeben

Dem Luftbild werden Koordinaten mitgegeben

Die Schwierigkeit dabei: Bei Tilemill dürfen lediglich 4GB große Dateien hochgeladen werden. Wir mussten unser GeoTIFF also vierteilen. Dafür nutzten wir das Command-Line-Tool GDAL. Bsp.: gdal_translate -srcwin 0 0 40933.5 16531.67 luftbild-original.tif luftbild-1.tif .

In Tilemill setzten wir diese vier Daten wieder zusammen und exportierten sie im .mbtiles-Format nach Mapbox. Von dort kommen auch die aktuellen Satellitenbilder, mit denen die Luftbilder verglichen werden können. Eingebaut in die Anwendung haben wir die Karte dann mit Leaflet.

Über Kritik, Hinweise, Anregungen, Fragen zu den einzelnen Arbeitsschritten freuen wir uns hier in den Kommentaren, per Mail, bei Twitter oder Facebook

Ein Beitrag von Julius Tröger und Moritz Klack