Tutorial: Statische Themenkarte

In diesem kleinen Tutorial beschreibe ich den Weg, auf dem ich mit Hilfe verschiedener Werkzeuge statische Themenkarten erstellen kann. Als Beispiel dient eine Karte der Rettungsdienststandorte im Kreis Mettmann. Das fertige Ergebnis ist ganz unten auf dieser Seite zu sehen. Die Karte ist für die statische Einbindung in einer festen Größe (oder als Druckvorlage) gedacht. In der mobilen Version meiner Webseite verliert sie ihre Tooltip-Funktion und wird sie automatisch verkleinert, wodurch sie nicht so gut aussieht. Für dynamisch veränderbare Karten sind andere Lösungen besser.

Schritt 1: Standortdaten aus OSM holen

Der wichtigste Bestandteil einer Themenkarte zum Rettungsdienst sind die Standortdaten eben jener Rettungsdienste. Also hole ich mir diese als erstes aus OSM. Dazu nutze ich die Overpass-API bzw. den Webdienst http://overpass-turbo.eu/. Mit diesem kann man sich sehr komfortabel eine komplexe Datenabfrage zusammenbauen.

Allzu komplex ist es in unserem Fall aber nicht einmal: Benötigt wird zunächst einmal die Fläche des Kreises Mettmann. Um nicht versehentlich unnötige Daten zu laden, beschränke ich die Suche per {{bbox}} auf den aktuellen Kartenausschnitt, den ich dazu natürlich erst einmal grob ausrichte. Beim Kreis Mettmann ist das Risiko unnötiger Daten gering, aber bei der Karte für Essen habe ich festgestellt, dass es in den Niederladen auch noch einen Ort gleichen Namens gibt. Innerhalb der gewünschten Fläche werden dann alle Feuerwachen (amenity=fire_station), Rettungswachen (emergency=ambulance_station) und Wasserwacht-Stationen (emergency=lifeguard_base) abgefragt. Dabei kommen alle Foren des Taggings - also egal ob Knoten, Weg oder Relation - in Betracht. Das Ergebnis lasse ich mir in einer Form ausgeben, dass ich es über die Exportfunktion als .osm-Datei speichern kann.

Schritt 2: Grenzen aus OSM holen

Der zweite Schritt geschieht ebenfalls wieder mit Overpass. Diesmal sind die Grenzen dran, denn der Kreis Mettmann soll ja einen deutlich sichtbaren Umriss bekommen und alles um ihn herum schwächer dargestellt werden.

Die Abfrage dazu ist denkbar einfach: Im Kartenausschnitt alle Grenzrelationen für administrative Grenzen auswählen und ausgeben. Wichtig sind dabei zwei Dinge: Erstens sollte der Kartenausschnitt großzügig gewählt werden, damit auch sicher für alle umliegenden Gebiete Grenzen geladen werden. Zweitens kann die Datenmenge recht groß werden (bei mir waren es für Mettmann mehr als 20 MB, was zu einer entsprechenden Warnung führt), so dass erstens der Timeout der Abfrage groß genug sein sollte und zweitens beim Export unbedingt die Option "Rohdaten direkt von Overpass API" verwendet werden sollte. Das Ergebnis dieses Exports kommt in eine weitere .osm-Datei.

Schritt 3: Kartendesign entwerfen

Nun ist es an der Zeit, Maperitive zu starten, um endlich etwas zu sehen zu bekommen. Das Laden der in Schritt 1 und 2 erzeugten Daten wird aber noch nicht viel bewirken, da die Standardregeln für diese Daten keine besondere Formatierung erzeugen. In der Themenkarte soll jedoch der Kreis Mettmann eine gut sichtbare Grenze bekommen, die einzelnen Städte des Kreises ebenfalls (dezentere) Grenzen bekommen, alle Gebiete außerhalb des Kreises abgedeckt werden und natürlich die Standorte der Rettungsdienste gut sichtbar markiert werden.

Die dazu passende Regeldatei selektiert zunächst einmal alle Standorte als Punkte oder Flächen sowie ferner als weitere Flächen den Kreis Mettmann, alle umliegenden Kreise sowie alle Städte und Gemeinden. Anschließend werden für die Standorte rote, grüne bzw. blaue Punkte als Markierung definiert. Der Kreis Mettmann bekommt eine durchscheinende dunkle Füllung, damit die Hintergrundkarte etwas zurücktritt. Alle anderen Kreise bekommen eine nur ganz schwach transparente Füllung in einer der Designfarben der Homepage und außerdem dicke schwarze Ränder. Die Städte innerhalb der Kreise schließlich bekommen halbtransparente, gestrichelte Grenzen.

Nach dem Laden und Anwenden dieser Regeln produziert Maperitive das gewünschte Kartenbild. Für diesen muss jetzt nur noch der gewünschte Ausschnitt festgelegt werden, um diesen im gewünschten Maßstab zu exportieren.

Schritt 4: Kartenerstellung automatisieren

Um mir bei kommenden Aktualisierungen der Karte ein paar Klicks zu sparen und vor allem immer genau denselben Kartenausschnitt zu bekommen, habe ich mir noch ein Maperitive-Skript geschrieben, das alles etwas einfacher macht. Es setzt nacheinander die Karte auf die einfache OSM-Karte zurück, lädt die Standorte und Grenzen, zoomt grob in die richtige Gegend, wendet die Regeln an, setzt den Kartenausschnitt und exportiert das Ergebnis im Maßstab 1:140.000. Die Maße des Kartenausschnitts sind so gewählt, dass bei diesem Maßstab genau die Breite in Pixeln herauskommt, die ich für meine Webseite haben möchte.

Schritt 5: Webseite mit Tooltips bauen

Nun muss das Ergebnis noch in eine Webseite verpackt und vor allem mit Tooltips versehen werden. Dazu nutze ich jQuery mit dem Plugin qtip2. Das macht es nämlich sehr einfach, per HTML und CSS gestaltete Tooltips mit einer HTML-Image-Map zu verknüpfen.

Als erstes werden daher die nötigen JavaScript-Bibliotheken geladen. Dann kommt das CSS-Styling für die Tooltips, gefolgt von den Tooltips selber. Diese müssen jeweils eine eindeutige ID bekommen. Die Inhalte habe ich alle von Hand erzeugt, da die OSM-Daten leider nicht konsistent genug sind, um sie automatisch zu generieren. Nach den Tooltips folgt die eigentliche Karte und ihre Image-Map. Auch die Koordinaten der Map musste ich von Hand raussuchen, da Maperitive keine entsprechende Liste der Punkte exportiert. Entscheidend ist in der Map auch wieder die ID der jeweiligen Einträge, denn das anschließende JavaScript macht auf dieser Basis die nötige Verknüpfung zu den Tooltips: Jeder "area" aus der Map wird ein Tooltip angehangen, dessen Inhalt genau das Element ist, dass die ID der Area verlängert um ein "-tooltip" hat. Bei späteren Updates brauche ich dann nur die Map und die Menge der Tooltips anzupassen, während das JavaScript unverändert bleiben kann.

Fertig!