TravelMap mit dem WP OSM Plugin

Das WP OSM Plugin nutzen wir sehr gerne in unseren Reiseberichten um z.B. eine Weltkarte mit beschrifteten PINs für unsere Reiseziele anzuzeigen. Das Plugin ist kostenlos und sehr flexibel anpassbar. Leider passiert es aber auch immer wieder, dass man eine Kleinigkeit ändert, und auf einmal irgendetwas nicht mehr wie erwartet funktioniert. In diesem Blog-Post gebe ich ein paar Tipps zur Einrichtung und Fehlerbehebungen, wenn etwas nicht funktioniert.

Erst einmal der Link zur Entwicklerseite dieses tollen Plugins mit guten Beispielen für den Anfang. Ihr findet die Beispiele oben im Menü unter Dokumentation. Diese Beispiele haben mir für den Anfang sehr gut geholfen.

Wenn Ihr diesen Blogpost gelesen habt, sollte Euch das einrichten einer OSM TravelMap/Weltkarte selbst mit vielen Zielen und beliebigen Icons für die PINs gut gelingen – und das alles mit einem kostenlosen Plugin, dank des tollen Entwicklerteams!

Travel-Map mit dem WP OSM Plugin

Zum Anzeigen einer OSM Karte mit mehreren Zielen (egal ob nur zwei, oder sehr viele) nehmt Ihr am Besten eine KML Datei als Basis. Diese lassen sich leicht händisch erstellen, auf dem Server ablegen und in der Konfiguration des OSM Plugins referenzieren.
Hier ein Beispiel zum Anzeigen einer Travel-Map mit mehreren Orten aus einer KML Datei, das wir als Basis für potentielle Fehler nutzen. Wenn Ihr dieses Beispiel mit der tutorial.kml auf Eure WordPress Seite übernehmt, solltet Ihr ohne Anpassungen dieselbe Weltkarte sehen können. Dies ist dann eine gute Basis für Eure Anpassungen:

[*osm_map_v3 map_center="38.713,-9.136" zoom="1" width="95%" height="450" map_border="thin solid orange" file_list="../../../../wp-content/uploads/osm/tutorial.kml" type="OpenTopoMap"]

Achtung, der ‚*‚ am Anfang muss sowohl von den Beispielen dieser Seite, als auch in den Beispielen auf der Entwicklerseite entfernt werden, bevor man das Beispiel auf die eigene WordPress Seite kopiert. Anstelle des Codes, wird dann dort die Open Street Map angezeigt. Falls auf Eurer Seite eine Karte ohne PINs angezeigt wird, habt Ihr die tutorial.kml vermutlich noch nicht in den Ordner „osm“ unter „uploads“ kopiert. Die Datei muss auch bei Euch geöffnet werden können, was Ihr mit der URL https://www.diekmann.mobi/wp-content/uploads/osm/tutorial.kml prüfen könnt, natürlich mit Eurer Webseite statt diekmann.mobi. Sollte es nicht gehen, prüft Groß- und Kleinschreibung und die Rechte auf Eurem Server.

So sieht dann die Weltkarte mit den Reisezielen aus:

Relative Pfadangabe des Tags file_list richtig setzen

Im Beispiel startet der Pfad mit „../../../../wp_content/uploads/“ und das ist richtig so. KML und andere Dateien legen wir also entsprechend darunter ab. Dies ist wichtig zu wissen, da das Plugin keine hilfreichen Fehlermeldungen ausgibt und man nicht unterscheiden kann, ob der Inhalt der KML Datei falsch ist oder der Pfad. Beides wird mit einer leeren Map angezeigt, was die Fehlersuche erschwert.
Wichtig: Absolute Pfadangaben gehen leider nicht mit https.

KML und WP OSM Plugin nutzen unterschiedliche GPS Notation

Um die Koordinaten eines Ortes herauszufinden, kann man Apps oder Internetseiten verwenden. Ich bin in Google über gpskoordinaten.de gestolpert. Die Seite hat zwar viel Werbung, tut aber ihren Zweck. Für KML Dateien muss man die Koordinaten jedoch ggü. des zum Kopieren angebotenen Strings (Text) vertauschen. Das kann in Apps oder anderen Internetseiten natürlich anders sein…

Wichtig ist, dass Ihr wisst, dass das WP OSM Plugin ab dem ersten falschen Eintrag in einer KML Datei, der nicht angezeigt werden kann, auch keine weiteren mehr anzeigt!

Korrektes Beispiel Tokyo in einer KML Datei:

 <Placemark>
    <name>Tokio!</name>
    <description>Die größte Stadt der Welt, leuchtend, bunt, lebendig.</description>
    <styleUrl>#Alle</styleUrl>
    <Point>
      <coordinates>139.7594549, 35.6828387</coordinates>
    </Point>
 </Placemark>

Tokyo zum Zentrieren in dem WP OSM Plugin mit der selben Schreibweise wie in der KML-Datei, führt zu einer leeren weißen Fläche statt einer Karte, die auf Tokyo zentriert ist:

[*osm_map_v3 map_center="139.7594549, 35.6828387" zoom="5" …

Erst wenn man die Koordinaten dreht, klappt es mit der TravelMap (natürlich auch mit größeren Zoom Stufen):

[*osm_map_v3 map_center="35.6828387, 139.7594549" zoom="5" …

Icons für die Reiseziele der OSM TravelMap

Im Tutorial, bzw. der tutorial.kml sind bereits ein paar Icons konfiguriert. Dies sind alles mitgelieferte Icons des WP OSM Plugins. Neben diesen gibt es noch sehr viele weitere. Wenn man jedoch grafisch begabt ist, kann man diese auch gegen eigene Icons austauschen. Bitte achtet aber darauf, dass es wirklich Eure, oder freie Icons sind, denn auf Open Street Map Karten dürfen keine geschützten Icons angezeigt werden.

Um die Icons zu ändern sehen wir uns mal dieses Beispiel aus der tutorial.kml an:

  <Style id="Ich">
    <IconStyle>
      <Icon>
        <href>../../../../wp-content/plugins/osm/icons/wpttemp-blue.png</href>
      </Icon>
        <scale>0.75</scale>
        <hotSpot x="0" y="0" xunits="pixels" yunits="pixels"/>
    </IconStyle>
  </Style>

Auch hier sind die relativen Pfadangaben („../../../../wp-content“) korrekt und sollten nicht verändert werden. Über die ID kann man freie Namen (hier „Ich“) vergeben und diese später im Placemark referenzieren:

  <Placemark>
    <name>Coimbatore</name>
    <description></description>
    <styleUrl>#Ich</styleUrl>
    <Point>
      <coordinates>76.9628425, 11.0018115</coordinates>
    </Point>
  </Placemark>

Um eigene Icons hinzuzufügen, kann man sie dann z.B. aus dem Uploads Ordner holen:

<Icon>
  <href>../../../../wp-content/uploads/osm/icons/mein_eigenes-blaues-icon.png</href>
</Icon>

Mit dem Plugin Autoptimize wird die TravelMap nicht angezeigt

Irgendwann kommt der Zeitpunkt, an dem man merkt, dass die Seite eigentlich ruhig ein wenig schneller laufen könnte. Nach einer kurzen Suche stößt man schnell auf das Plugin Autoptimize. Ungünstige JavaScript Einstellungen können jedoch dazu führen, dass Plugins wie das WP OSM Plugin nicht angezeigt werden!

Abhilfe schafft hier häufig eine von zwei möglichen Änderungen an den Einstellungen. Vermutlich liegt es daran, dass JavaScript zu spät verfügbar ist, da das Autoptimize Plugin versucht, blockierende Aufrufe zu verhindern indem es JavaScript später lädt. Alternativ kann man auch das Zusammenfassen von Java-Scripts komplett ausschalten, was jedoch einen leichten Geschwindigkeitsverlust verursachen würde. Aus diesem Grund empfehle ich erst die erste Lösungsmöglichkeit auszuprobieren, bevor zur Not die zweite Lösung genutzt wird.

Ich hoffe die Tipps haben Euch geholfen 🙂