Posts Tagged: postgresql

I made a web map!

For my project “Berliner Chöre” I use Leaflet.js to display a mobile friendly interactive map of Berlin. I decided against an “ordinarily” looking map, because I was interested in learning how to make and style my own map. I got my inspiration from this project, which aims to map bathing sites in Berlin.

I use Mapbox to host the tile layers. There are other hosts or one can also self-host. MapBox explains tile layers as follows:

A map is made of layers. Layers can be images, lines, and markers. Each layer can be placed on top of each other to build combinations and mashups. Understanding layers is core to mastering web maps.[1]

To build those layers and style them Mapbox developed TileMill, which is a free and open source software. (FYI: in case TileMill won’t start for the first time, try to update it.)

The Agenda for creating your own map and use it in your web app looks like this:

  1. import your city’s Open Street Map (OSM) data into a database
  2. setup the map in TileMill
  3. export the map to Mapbox
  4. integrate it into to my website with Leafletjs.

I’m going to explain each of the steps, but I also assume that you already have basic knowledge in web development. Btw., I’m on a Mac!

Import Berlin’s OSM data into PostgreSQL and PostGIS

First, I added PostGIS to my PostgreSQL database and set it up for my geo data. “PostGIS (/ˈpstɪs/ post-jis) is an open source software program that adds support for geographic objects to the PostgreSQL object-relational database.” [2]

brew update
brew install postgis
psql 
create database my_db;
\connect my_db
create extension postgis;
\quit

I then installed osm2psql via this binary package. “osm2psql is a command-line based program that converts OpenStreetMap data to postGIS-enabled PostgreSQL databases.” [3]

For populating the database with data, I downloaded the berlin-latest.osm.pbf file and ran this command to import the data to my database:

osm2psql -cGs -d my_db -S /usr/local/share/osm2pgsql/default.style ~/Downloads/berlin-latest.osm.pbf

Setup the map in TileMill 

The next step is to use the geo data in my database in TileMill and style the data according to my taste. TileMill uses Carto CSS to style maps, which is a styling language every similar to CSS. Luckily, I found Aaron Lindman’s Toner for TileMill, which offers (besides very cool looking Carto CSS styles) also a very quick setup!

Simply download it here and configure the setup by changing configure.py.sample to configure.py and open it in your favourite editor. Then change the name of the map and the database and saved+closed the file.

...
config["name"] = "Toner for Tilemill Test"
...
config["postgis"]["dbname"]   = "my_db"
...

After running the make.py from the terminal, I opened up TileMill and there it is, my new map project!

Use the map in Mapbox

To use the map, use TileMill’s export function to create a MBTiles file. I configured the zoom level between 11-16, because I’m currently on Mapbox’s free plan and only have 100MB for map hosting. Click on the map to set the center of the map and press Shift and drag through the map to select your map’s boundaries.

TileMill

If you haven’t signed up for a Mapbox account yet, now is the time. Afterwards, upload the .mbtiles file via Menu > Data > Uploads > Select A File and then click on the uploaded map and Create project.

Mapbox

Mapbox will redirect you to your new map project. Just click on save and the map is ready!

Website integration with Leafletjs

Using your created map is now very easy. Simply go through the Quick Start Guide on on Leafletjs. For the map’s id and accessToken, go back to your map project’s page on mapbox.com and find info panel. The HTML code snippet to embed the map contains those information. In Rails, I would recommend to use e.g. Figaro to set those information as environment variables.


Sources: 

https://www.mapbox.com/tilemill/docs/guides/osm-bright-mac-quickstart/
https://github.com/aaronlidman/Toner-for-Tilemill
http://leafletjs.com/examples/quick-start.html

 

Coding Da Vinci – Der Kultur-Hackathon

Als Lina mich im April fragte, ob ich mit ihr und Anne an einem Hackathon teilnehmen möchte, war ich zuerst einmal perplex, dass Lina gerade das Wort “Hackathon” verwendet hat. Sie ist nämlich mit Herz und Seele Kunsthistorikerin, stolze Besitzerin eines alten Knochens, den sie Handy nennt, und schleppt aus Spaß dicke Bücher in ihrem Jutebeutel durch die Stadt. Aber neulich hat sie auch eine Hausarbeit geschrieben, bei der ich ihr technisch beraten habe, und es ging um den Einsatz von Virtual Reality bei Sanierungsarbeiten der alten Landmauer in Istanbul. Ich merkte, dass es an mir war mein veraltetes Bild der Kunstgeschichte zu entstauben und sagte ihr deshalb bei dem Projekt zu.

Das Ziel von Coding Da Vinci ist es Kulturinstitutionen mit Entwicklern, Designern und Interessierten zusammenzubringen, damit sie gemeinsam aus frei nutzbaren Kulturdaten neue Anwendungen, mobile Apps, Dienste, Spiele und Visualisierungen entwickeln. CDV fand 2014 zum ersten Mal statt und entstanden sind damals nützliche wie witzige Projekte, basierend auf 26 Datensets von 16 Institutionen. Dieses Jahr nahmen 33 Kulturinstitutionen teil und die Datensets haben sich auf 47 fast verdoppelt.

Nach einigen Überlegungen entschieden sich Anne und Lina für die 200 Karteikarten der Fotografin Giesela Dutschmann, die fast 40 Jahre lang für das Ostberliner Fotoarchiv tätig war und die städtebauliche Entwicklung der DDR dokumentiert hatte. Daraus wählten sie wiederum 75 Fotos aus, die insgesamt 27 Gebäude zum Inhalt hatten. Sich durch die 200 Karteikarten durchzuarbeiten war mühselig und nahm den ersten Teil der insgesamt 10 Wochen andauernden Hackathon-Sprint in Anspruch. Ich gönnte mir währenddessen eine große und zwei kleine Reisen, und als ich wieder im sommerlichen Berlin war, lagen die ausgewählten Bilder samt Metadaten bereits in unserem gemeinsamen Google Drive und ich legte los, um zunächst einmal Importierfunktionen für diese Daten zu programmieren.

Nach und nach entstand eine Webseite, die nicht nur die von den Kunsthistorikerinnen aufgearbeiteten Daten verständlich darstellte, sondern ihnen auch die Möglichkeit bot weitere Fotos hochzuladen, Metadaten hinzuzufügen, neue Gebäude und Touren anzulegen und mit Beschreibungstexten zu versehen. Bald inspirierte uns das Gerüst auf der Einführungsseite zu einem Logo; das Ockergelb der FDJ gab der Seite Farbe; und Helvetica Neue wurde zur Hauptschriftart, weil sie der Schriftart Super Grotesk sehr ähnlich aussieht, welche als die meist verwendete Schriftart in der DDR gilt.

Eine Woche vor der großen Projektpräsentation hat mein Team, mittlerweile mit Christian zu viert, dann noch einen echten Wochenend-Hackathon in meinem Wohnzimmer veranstaltet. Zwei Tage lang haben wir bis spät in den Abend hinein für unsere Seite “Wiederaufbau Ost-Berlin” Texte recherchiert und Bugs beseitigt. Jede Menge Koffein und Kuchen wurden zum Aufputschen missbraucht, das Team wuchs noch mehr zusammen und wir fühlten uns unaufhaltsam!

Heute gab es dann im wunderschönen Jüdischen Museum Berlin die Abschlusspräsentationen aller diesjährigen Coding Da Vinci Projekten. Bei über 35 Grad Hitze galt es alle 20 Projektvorträge und die anschließende Preisverleihung durchzuhalten. Trotz des extremen Wetters waren sehr viele Teams und Zuschauer erschienen (manche sind sogar extra hierfür nach Berlin angereist!), die Stimmung war von Beginn an enthusiastisch! Ein Team nach dem anderen stellten sie ihre oft sehr innovative Ergebnisse vor. Mir persönlich hat das Projekt “Großstadtziegel“, bei dem man einem in einem Ziegel verbauten Smartphone eine (Lebens)Geschichte erzählt, diese shared und den “Ziegel” dann weitergibt, am besten gefallen (obwohl es streng genommen nicht direkt die bereitgestellten Open Data verwendete).

Großartig fand ich außerdem Thomas Tursic, der seine zwei Kinder beim Projekt “Nürnberger Lebkuchen” involvierte, und ein Candy-Crush ähnliches Spiel mit ihnen gemeinsam entwickelte, bei dem man ganz nebenbei 100 Jahre alte Originalrezepte von Nürnberger Lebkuchen kennenlernt. Das Projekt durfte auch den Preis Funniest Hack einheimsen.

Übrigens wurde während der Abschlussveranstaltung soviel getwittert, dass #codingdavinci zeitweilig zu den Top Topics von Twitter Deutschland gehörte!


Nach der Siegerehrung war auch beim Team “Wiederaufbau Ost-Berlin” die Stimmung bombe! Wir waren sehr stolz darauf, dass wir während der 10 Wochen nicht schlapp gemacht haben, obwohl jeder von uns nebenbei noch Studium und Beruf zu bewältigen hatte. Jeder von uns hat wichtige Dinge insbesondere für das weitere Berufsleben gelernt – Lina und Anne wissen nun, was CSS, Git, responsive, usw. bedeuten ;), mir hat es sehr viel Spaß gemacht mit den beiden zusammenzuarbeiten und ständig ihre Begeisterung für die Kunstgeschichte zu spüren. Ich habe mich deshalb sehr gefreut, mit meinen Programmierkenntnissen ebenfalls einen kleinen Teil zur Vermittlung der Kunst und der Architektur beigetragen zu haben.

Quelle Titelbild: Coding Da Vinci