User:Kollege

Karte mit Sachen drauf

Ziel war es, eine Karte (!Werbung) zu bauen, auf der man eine Radtour dokumentieren kann.

Nach einigem Experimentieren bin ich bei Laeflet gelandet. Die Möglichkeiten sind nicht so umfangreich wie bei Openlayers, allerdings ist es leichter zu handhaben und mit Hilfe von Plugins kann man schöne Effekte einbauen. Ich habe mich für den Markercluster und das Label-Plugin entschieden. Das MarkerCluster-Plugin fasst in verschiedenen Zoomstufen eine größere Anzahl von Markern zusammen. Sehr schönes Plugin, Karten mit vielen Markern erscheinen sehr viel aufgeräumter. Mit dem Label-Plugin stattet man verschiedene Elemente mit Labeln aus, die entweder statisch oder mit MouseOver-Effekt versehen sind. Praktisch zum Beispiel als kurze Vorabinformation, was beim Klicken auf das Element als Inhalt zu erwarten ist.

Als Rohmaterial stehen mir ein GPS-Track als gpx-Datei und eine größere Menge von Fotos im jpg-Format zur Verfügung.

Zur Aufbereitung dieses Materials und für verschiedene andere Aufgaben verwende ich folgende Werkzeuge (Ubuntu/Gnome):

gedit, Nautilus, Josm, gpsbabel, exiftool, awk, gimp

Ausser den ersten beiden (Editor und Dateimanager) stehen alle Werkzeuge auch für andere Betriebssysteme zur Verfügung.

Als erstes habe ich mit Nautilus (+Plugin) die Fotos auf eine für eine private Webseite sinnvolle Größe reduziert. Sind die Bilder nicht bereits von der Kamera mit den Koordinaten des Aufnahmeortes versehen, muss das jetzt mit Hilfe des GPS-Tracks (und z.B. Josm) nachgeholt werden. Jetzt kann man noch den rohen GPS-Track bearbeiten (Josm), denn so, wie er aus dem GPS-Grät kommt, erzeugt er später auf der Webseite möglicherweise seltsame Effekte.

Ist das geschehen, wandeln wir die gpx-Datei (track.gpx) in Javascript-Code (track.js) um.

gpsbabel -t -i gpx -f /PfadzuDatei/track.gpx -o xcsv,style=/PfadzuDatei/Styledatei -F /PfadzuDatei/track.js

Mit der Styledatei sagen wir gpsbabel, wie die ausgeworfene Datei track.js aussehen soll. Styledatei (in Editor kopieren und abspeichern):

FIELD_DELIMITER COMMA
RECORD_DELIMITER NEWLINE
PROLOGUE var etappe1 = [
EPILOGUE ];
OFIELD LAT_DECIMAL, "", "[%09.6f"
OFIELD LON_DECIMAL, "", " %09.6f]"
OFIELD CONSTANT,"", ""

Jetzt widmen wir uns wieder den Bildern. Auf der Karte sollen Marker erscheinen, die beim Anklicken Popups mit unseren Bildern zeigen sollen. Dazu müssen wir die Information, wo welches Bild erscheinen soll, aus den Exifdaten der Bilder extrahieren und in entsprechenden Javascript-Code schreiben. Der Befehl:

exiftool -q -r -t -f -S -n -GPSPosition -fileName "." > pics.csv

liest die Angaben zur GPS-Position und den jeweiligen Dateinamen jedes einzelnen Bildes in einem Verzeichnis aus den Exifdaten und schreibt sie in eine Datei (pics.csv). Alle Angaben aus dieser Datei werden anschliessend mit

awk 'BEGIN{print "var BilderPunkte = ["; OFS=","} {print "[" $1, $2, "\"img src=\047" $3 "\047 />\"],"} END{print "];"}' pics.csv > pics.js

umformatiert und in die Javascript-Datei pics.js geschrieben.

Bei Bedarf kann man jetzt mit dem Befehl

exiftool -all= "."

die Exifdaten aller Bilder aus dem Verzeichnis löschen.

Man kann jetzt den Javascript-Code, so wie er in den Dateien track.js und pics.js zu sehen ist, an entsprechender Stelle in die eigentliche HTML-Datei (index.html) kopieren. Bei längeren Tracks und vielen Bildern ist es jedoch sinnvoll, diese langen Koordinaten-Listen in externen Dateien zu lagern und in die Indexdatei zu verlinken.

Kommentare zu den Elementen der Kartenseite finden sich dort im Quelltext.

viel Spaß beim Nachbauen