Eine Reise auf einer Karte visualisieren

Ein zehntägiger Urlaub in Kroatien markierte gefühlt zu früh das Ende eines viel zu kurzen Sommers. Auch wenn es eher die mehrheitlich eher ruhig zuging, gab es mir die Möglichkeit, eine ewig alte Idee mal wieder aufzunehmen. Ich liebe Karten. Schon als Kind konnte ich mich stundenlang mit einem Atlas beschäftigen. Und auch meine Erinnerungen funktionieren nicht nur sehr chronologisch, sondern auch geographisch.

Die Idee, die eigene Reise auf einer Karte nachzuzeichnen, ist daher nicht neu und verfolgt mich schon eine ganze Weile. Mittlerweile habe ich drei unterschiedliche Ansätze ausprobiert, die alle ihre Vor- und Nachteile haben. Doch zunächst einmal stellt sich eine grundsätzliche Frage: Wo kriegt man eine Karte her, die man bearbeiten kann?

Das Kartenmaterial der Wahl

Die Antwort darauf ist eigentlich sehr schnell gefunden. Jeder von uns hat schon mal Google Maps benutzt. Es ist der de facto Standard, an den wir uns mittlerweile alle gewöhnt haben. Die Karten sind präzise, jeder kann mit dem UI umgehen und jeder noch so kleine POI¹ ist dort vermerkt, meist mit Bewertung, Fotos, Links und weiteren Informationen. Auf der Checkliste mit den Anforderungen sind quasi alle Punkte erfüllt.

Anforderungen? Ja welche eigentlich? Naja, wenn ich dran denke, meine Reisen auf einer interaktiven Karte aufzuzeichnen, dann ist es wie ein Tagebuch oder ein Journal, ich halte darin schließlich meine Erinnerungen fest. Da ich aber im Unterschied zu diesem Blog, das ich selbst administriere, und im Gegensatz zu meinem physischen Journal, in das ich selbst Karten malen oder kleben könnte, einem anderen Service vertrauen muss, um halbwegs die Funktionalität zu erreichen, gilt Folgendes:

• Langlebigkeit: Das Kartenmaterial selbst sollte noch abrufbar sein, wenn ich in ein paar Jahren mal wieder drauf schaue. Und nicht nur die Karte selbst sollte noch Laden, sondern auch die Marker und Infos über die Reise selbst. Macht man das also mit einem externen Service, sollte ich davon ausgehen können, dass der in ein paar Jahren auch noch online ist.
• Frei und am besten offen: Vendor Lock-In ist blöd. Besonders, wenn es um persönliche Erinnerungen geht. Wenn das Tool, mit dem man seine Karten aufhübscht, plötzlich nur noch im Abomodell zu kriegen ist und dann auch noch keine Exportschnittstelle anbietet, um seine Daten im Zweifel mal umzuziehen… na dann willkommen im Walled Garden, der das heutige Internet geworden ist.
• Intuitiv und hübsch anzuschauen: Es soll ja Spaß machen, sich mit den Karten zu beschäftigen, deswegen sollten sie gut aussehen und möglichst informativ sein. Satellitenbilder und POIs, die über die selbst hinzugefügten hinaus gehen, wären da schon nett.
• Viele Gestaltungsmöglichkeiten: Möchte man eine Reise nachzeichnen braucht man mindestens eimal Stecknadeln (Pins), die man mit möglichst mit Beschriftungen, Bildern und Links anreichern kann. Routen auf der Karte einzuzeichnen ist auch immer nett. Und für längere Reisen wären Links zu den einzelnen Artikeln praktisch.

Google hat die besten Karten, ist hübsch und wird mit einiger Wahrscheinlichkeit nicht übernächstes Jahr seinen Maps-Service einstellen. Allerdings ist es bei Google mit der Offenheit so eine Sache. Außerdem gehen alle Daten unweigerlich an den Kraken. Auch das „frei“ muss man mittlerweile in Anführungsstriche setzen.

Maps nur noch mit API-Key

Will man eine Karte von Google Maps nämlich auf seiner Website einbinden, ist die seit 2018 nicht mehr kostenlos. Der Dienst merkt nämlich, wenn eine Karte zu oft geladen wird und macht das irgendwann nurmehr widerwillig – mit Wasserzeichen und Einblendung.

Also muss man sich in der Google Cloud Console einen API-Key für sein Projekt generieren, damit Google zählen kann, wer da wie oft Kartenmaterial lädt². Allzu große Angst vor der dicken Rechnung braucht man allerdings nicht haben, wie die Pricing-Tabelle verrät: mit den 200 € Guthaben, die einem Google für seine Cloud-Services jeden Monat gutschreibt, müsste das eigene Blog schon viele Millionen Besucher zählen, um Kosten zu verursachen. Das einfache einbinden (Embed) von Karten ist weiterhin komplett kostenlos.

Zu Fuß per Javascript

Der erste Versuch ist schon sieben Jahre alt, maximal flexibel, macht genau das, was er soll und ist immer noch online. Für die Südostasienreise habe ich die Javascript-API von Google Maps bemüht. Dabei wird eine Karte eingebunden und nachträglich durch JS mit allen wichtigen Zusatzinfos versehen, die man sich so wünscht. Selbst die Gestaltung lässt sich frei über CSS anpassen³.

Die Lösung ist eigentlich total super, hat nur einen ganz gravierenden Haken: Das Javascript, das Google Maps erklärt, wo welcher Pin mit welchen Infos hin soll, muss bei jeder neuen Station von Hand erweitert und dann neu hochgeladen werden. Und das ist mit der Zeit wirklich mühsam.

Ja, natürlich hätte ich mir einen Editor schreiben können, der alle Koordinaten einzeln abruft und automatisiert in die Datei einfügt. Das wäre die echte Informatikerlösung gewesen und ist im Wesentlichen nichts anderes als das, was die ganzen Webdienste und WordPress-Plugins machen. Aber hey, ich saß auf gepackten Koffern und wollte nur kurz eine Karte einbetten. Also hat das Provisorium für die zwei Monate ausgereicht.

There is an App for that

Mein Editor für die automatische Generierung der Google-Daten wäre ein tolles kleines Software-Projekt gewesen. Ich habe ihn aber leider nie geschrieben. Damals, vor dem ganzen Insta-Craze, hätte ich damit vielleicht sogar noch ein bisschen Traction kriegen können, entweder als WordPress-Plugin oder als Webdienst.

Mittlerweile hatten die Idee natürlich auch andere. Was wahrscheinlich ganz gut ist, denn die sind mit Sicherheit auch bessere Programmierer als ich. So gibt also mittlerweile einige Websites, die einem HTML-Code oder JS generieren, dass man auf seiner Seite nutzen kann. Die sind aber leider meistens sehr begrenzt in der Funktionalität, nur über irgendwelche Freemium-Modelle vernünftig zu benutzen und ob die in zwei Jahren noch benutzbar sind, kann man auch nicht so wirklich vorhersagen.

Wird man dann seine mühevoll gestalteten Karten noch exportieren können? Fraglich. Vor allem, in welchem Format und wohin. KML⁴ hat sich da zwar als Standard herausgebildet, aber umfasst das dann auch die komplette Gestaltung?

OSM to the rescue!

Wenn man also nicht unbedingt Google benutzen möchte, den Open-Source-Gedanken gut findet, aber trotzdem nicht auf eine gewisse Seriosität nicht verzichten möchte, der landet sehr schnell bei Openstreetmap.org. Die Alternative zu Google Maps wird ähnlich der Wikipedia von freiwilligen Contributors gepflegt. Alles frei, alles open source.

Das merkt man leider natürlich auch an manchen Stellen. Das Kartenmaterial ist nicht ganz so präzise/aktuell wie bei Google, und die Tools muss man sich ein wenig zusammensuchen, denn anders als bei Google Maps liefert OSM „nur“ die Geodaten, die wiederum von den verschiedensten Projekten genutzt werden um spezielle Karten zu erstellen⁵. Zum Erstellen bzw. Anreichern eigener Karten gibt es uMap, das auf dem Kartenmaterial basiert. Also, es gibt im Gegensatz zu GMaps nicht ein uMap, sondern mehrere Instanzen des Service, die irgendwo gehostet werden (Konzernmonolith vs. open source)⁶.

Auch hier geht im Wesentlichen alles, was man typischerweise so braucht. Markieren, Labeln, verschiedene Icons und Farben. Nur das Hinzufügen von Routen geht nicht out of the box. Dazu muss man einen weiteren Dienst, wie den Open Route Service benutzen, und dann die erstellte Route dort exportieren und in uMap importieren⁷.

Das Einbinden der fertigen Karte funktioniert, wie schon bekannt, entweder über ein separates Plugin, oder einfach mit Embed-Code, der ein iFrame erzeugt. Das Resultat ist, ok-ish, aber auch trotz einiger Customizing-Einstellungen nicht so hübsch wie erhofft. Außerdem hat das Interface zum Erstellen klar verloren. Dafür weiß man wenigstens, dass man nicht auf der dunklen Seite der Macht unterwegs ist…

Das Ergebnis mit POI-Layer und importierten Routen, die man noch etwas weiter aufhübschen könnte:

See full screen

MyMaps von Google

So wahnsinnig zufriedenstellend ist das alles nicht. Die eierlegende Wollmilchsau scheint es nicht zu geben. Ein ganz netter Sweetspot ist allerdings dann doch wieder bei Google zu finden: MyMaps ist ein Maps-Feature, das aus irgendeinem Grund nie so richtig gepusht wurde, aber eigentlich sehr vieles richtig macht. Dabei ist der Edit-Modus nicht einmal nativ in der App zu finden, sondern nur über den Browser erreichbar.

Und so habe ich mich letztes Jahr gewundert, dass es den Karteneditor überhaupt noch gibt. Ich nutze den nämlich mittlerweile sehr intensiv, um Reisen zu planen. Dabei ist GMaps den Open-Source-Lösungen weit überlegen: Jeder Aussichtspunkt, jede Strandbar sind dort nämlich zu finden. Inklusive Beschreibung, Bewertung und Links. Eigene Infos, sowie Bilder sind kinderleicht hinzuzufügen.

Ja klar, man muss sich schon sehr mit dem anfreunden, was das Google-Interface so mitbringt, denn custom Styling und interaktive Layover kann man ohne eigenes Coding vergessen. Ich habe es bis heute ja nicht einmal hinbekommen, eine Mini-Map zu aktivieren, was bei uMaps ein einziger Klick im (zugegeben umständlichen) Menü ist. Aber dafür ist das Google-Interface aufgeräumt und hat die Basics drauf.

Ein Wort noch zu Routen: So schön der Gedanke auch ist, die gefahrenen Routen in die Karte einzuzeichnen, so nervig wird das mit der Zeit. Eine Einzelroute auf der MyMap kann maximal zehn Destinationen beinhalten, dann wird ein neuer Layer fällig. Und bei Ausflugsfahrten macht das die Karte sehr schnell unübersichtlich, weil die Wegpunkte (A,B,C…) ständig die eigentlichen POIs überlagern.

Also entweder ist man sparsam mit den eingezeichneten Routen und verbindet nur die Hauptorte, oder blendet die Routen am besten standardmäßig im Menü aus. Nützlich ist das Feature dennoch, gerade bei längeren Trips quer durch ein Land oder durch einen Kontinent.

Erstaunlicherweise ist der von Google erzeugte Embed-Code nicht einmal responsiv. Das lässt sich aber fix mit ein paar CSS-Handgriffen anpassen⁸. Das Ergebnis sieht dann so aus:

Fazit

Die ideale Lösung wäre sicherlich, sich seine Karte über die API komplett selbst zu konfigurieren. Denn mein Ansatz von vor sieben Jahren war immer noch der flexibelste. Die Daten per Hand in ein JS-File zu schreiben fällt jedoch raus. Viel zu aufwändig. Sich ein Tool zu bauen, welches das nach eigenem Gusto macht – auch dafür habe ich in letzter Konsequenz weder Zeit noch Lust aufgebracht.

Bleibt also nur, auf bestehende Dienste zurück zu greifen. Um lediglich Stecknadeln zu setzen und ein paar Worte zu schreiben, braucht man nicht einmal ein Drittanbieter-Plugin oder eine eigene Software. Das beherrschen Openstreetmaps uMaps und Google schon ganz gut.

Wie so oft, kommt es immer darauf an, was man von seiner Lösung erwartet und wie viel Aufwand und oder Geld man bereit ist, dafür zu investieren. Frei nach der 80/20-Regel ist MyMaps von Google für meine Zwecke schon ziemlich Pareto-effizient.

1. Point of Interest
2. wie man den API-Key konfiguriert und benutzt, ist hier gut beschrieben: https://kinsta.com/blog/wordpress-google-maps/
3. mit ein bisschen mehr Aufwand, hätte ich auch noch die Routen aufhübschen können, aber dazu hätte ich eben noch eine weitere API im JS bedienen müssen
4. https://en.wikipedia.org/wiki/Keyhole_Markup_Language
5. https://www.imrazor.de/howto/openstreetmap-als-google-maps-alternative-in-wordpress/
6. eine deutsche Version beispielsweise hier https://umap.openstreetmap.de/, eine französische hier http://umap.openstreetmap.fr/de
7. man könnte als Routenberechnungs-Service auch Google Maps verwenden und daraus ein KML exportieren
8. https://www.labnol.org/internet/embed-responsive-google-maps/28333/