OSM-Karten mit Waypoints in WordPress-Blogs einbauen

Wer einen Geocaching-Blog betreibt, der möchte vielleicht über kurz oder lang auch mal Kartenmaterial mit Wegpunkten veröffentlichen.

Eine solche Karte zu erstellen ist nicht sonderlich schwer, erfordert aber eine gewisse Menge an Handarbeit für die Erzegung der Wegpunkt-Dateien. In diesem Artikel beschreibe ich, was dafür zu tun ist.

Ihr benötigt dafür folgendes:

Ich werde zunächst beschreiben, wie man hiermit Karten einblenden kann und wie man Waypoints hinzufügt. Diese Beschreibung dient dazu, das Datenformat zu beschreiben. In einem weiten Artikel werde ich dann beschreiben, wie man diese Tätigkeit mit Hilfe von GSAK automatisieren kann.

Vorbereitung

Ich gehe davon aus, dass WordPress und das OSM plugin bereits installiert sind. Wie das funktioniert ist auf den entsprechenden Seiten ausführlich beschrieben. Die einzige Vorbereitung, die zusätzlich nötig ist besteht darin, die Icons, die als Marker auf der Karte verwendet werden sollen in der Dateistruktur zu hinterlegen, sie müssen nämlich über die gleiche URL wie der zugehörige Blog errreichbar sein. Ich habe dazu eine Verzeichnisstruktur unter wp-contents/uploads mit dem Namen icons/gc angelegt und die Icons dort abgelegt. Ich kann die Icons dann später unter der URL http://team-eclipse.de/wp-content/uploads/icons/gc/icon-T-green.png referenzieren.

Eine Karte in einen Blog einbetten

Mit der aktuellen Version des OSM-Plugins ist das Einbetten einer Karte in einen Blog-Artikel ein Kinderspiel geworden. Im Administrationsbereich gibt es unter „Einstellungen“ einen Eintrag „OSM“ mit dem man sich eine Karte konfigurieren und einen Code generieren lassen kann, den man nur noch in seinen Artikel einfügen muss.

Der folgende Code erzeugt dabei eine einfache Karte (das „*“ hinter der öffnenden eckigen Klammer muss entfernt werden):

[*osm_map lat="49.248" long="6.983" zoom="15"
width="600" height="450" control="scaleline,mouseposition"
theme="dark"]

 

Marker

Solange man keine oder nur einen Marker in die Karte setzen möchte reicht diese Konfigurationsmöglichkeit bequem aus, sollen mehrere Marker dargestellt werden benötigt man eine sogenannte „Marker-Datei“, das im Dateisystem auf dem Webserver verfügbar sein werden muss.

Diese Marker-Datei kann mit einem einfachen Texteditor erzeugt werden oder – falls man GSAK verwendet – mit meinem ExportWPOSM Plugin, welches die Marker-Datei für alle Caches in einem beliebigen Filter automatisch generiert. Hier soll zunächst aber nur die manuelle Erstellung der Marker-Datei beschrieben werden, eine Beschreibung des GSAK-Plugins folgt im nächsten Artikel.

 Das Format der Marker-Datei

Bei der Marker-Datei handelt es sich um eine einfache Textdatei, die ein bestimmtes Format haben muss. Auf eine fest definierte Kopfzeile folgen eine Reihe von Zeilen, die die einzelnen Marker definiert.

Kopfzeile

Die Kopfzeile enthält festgelegte Spaltennamen, die durch Tabulatoren voneinander getrennt sind. Diese Zeile ist in jeder Marker-Datei identisch und lautet (‚→‘ bezeichnet dabei ein Tabulatorzeichen):

lat→lon→title→description→icon→iconSize→iconOffset

 Marker-Zeilen

Die nun folgenden Marker-Zeilen enthalten die benötigten Informationen, die zur Darstellung einer Markierung in der Karte benötigt werden, wobei jede Zeile einem Marker entspricht. Welche Daten hier eingetragen werden müssen ist in der Kopfzeile definiert. Wie auch die Kopfzeile müssen die einzelnen Datenfelder durch Tabulator-Zeichen getrennt werden. Die einzelnen Datenfelder sind:

  • lat, lon: Breitengrad und Längengrad im Dezimalformat. Positive Zahlen bezeichen nördliche Breite/östliche Länge, negative Zahlen südliche Breite/westliche Länge.
  • title:  Wenn man auf einen Marker klickt, wird ein kleines Fenster eingeblendet mit weiteren Informationen zur dargestellten Position. Der Text an dieser Stelle wird dabei als Überschrift für das Fenster verwendet.
  • description: weiterer Text, der unterhalb des Titels im der Marker-Box eingeblendet wird. Wie auch der Titel kann dieser Text HTML-Elemente enthalten. So kann der Text beispielsweise formatiert werden oder Hyperlinks entalten.
  • icon: Die URL zum Icon, das für den Marker verwendet werden soll. Die Icon-Datei muss sich auf dem gleichen Server befinden wie der Blog-Artikel.
  • iconSize: Größe des Icons in Pixeln. Format x,y (also 32,30 für ein Icon, das 32 Pixel breit und 30 Pixel hoch ist)
  • iconOffset: Standardmäßig wird das Icon mit der linken oberen Ecke an den mit lat und lon definierten Koordinaten ausgerichtet. Mit diesem Eintrag kann diese Ausrichtung verändert werden. Handelt es sich beispielsweise um ein Icon  der Größe 32,30 und soll das Icon so ausgerichtet sein, dass mit dem Pixel in der Mitte des unteren Randes an die Koordinaten ausgerichtet sein soll, dann gibt man hier -16,-30 an (d.h. das Icon wird um 16 Pixel nach links verschoben und um 30 Pixel nach oben).

 Ein Beispiel

Das klingt alles viel komplizierter als es eigentlich ist. Deshalb will ich das Ganze einfach mal an einem Beispiel illustrieren. Wir nehmen wieder die OSM-Karte von oben und fügen einen Eintrag für eine Marker-Datei hinzu:

[*osm_map lat="49.248" long="6.983" zoom="15"
width="600" height="450" control="scaleline,mouseposition"
marker_file="http://team-eclipse.de/wp-content/uploads/2012/04/demo2.txt"
theme="dark"]

Die Marker-Datei demo2.txt könnt ihr euch hier als Beispiel runterladen.

Im nächsten Artikel zeige ich dann, wie man die Erzeugung der Marker-Datei mit dem GSAK-Plugin ExportWPOSM vereinfachen kann.