USmith Blog

uplouyqoadouyqsouyqouyq/2010/05/dsc66663.jpg”>Nachfolgend möchte ich ein Plugin beschreiben, dass ich inzwischen regelmäßig nutze.
Wenn man, wie ich, gelegentlich eine schöne Fahrrad-Tour gemacht hat, möchte man ja schon mal darüber berichten. Dann ist es natürlich schön, auch eine Karte zur Hand zu haben. Dafür bietet sich in WordPress das Plugin osm von MiKa an. (Nachtrag: Aktuell ist die Version 0.9.6.)
Dieses Plugin wird im Artikel über den Shortcode ‘osm_map’ aufgerufen und hat eine Vielzahl an möglichen Parametern.:

• lat und log geben in reiner Dezimalschreibweise die (Mitte-)Koordinaten der Karte an (z.B. Lat=”51.4008″ Long=”6.92753″)
• zoom ist der Zoom-Level (im Beispiel zoom=”12″)
• width und height bestimmen die Größe der ausgegebenen Karte (z.B. width=”100%” height=”450″)
• marker: wenn man einen Marker setzen will, benutzt man diesen Parameter. Er hat wiederum maximal drei Parameter. Die ersten beiden bestimmen die Koordinaten und der dritte Parameter enthält den Namen des benutzerdefinierten Feldes (im jeweils aktuellen Artikel) aus dem der Text für das Info-Fenster entnommen wird. (im meinem Beispiel nutze ich nur die ersten beiden Werte: marker=”51.36052,6.93903″)
• mit dem Parameter marker_name bestimmt man welcher Marker benutzt werden soll. (z.B. marker_name=”bicycling.png”)
• gpx_file bzw. gpx_file_list hier wird der vollständige Pfad einer oder mehrerer gpx-Dateien mitgegeben, die dann auf der Karte angezeigt werden sollen. (z.B. gpx_file_list=”/blog/wp-content/uplouyqoadouyqsouyqouyq/2010/06/2010-06-10-DonnerstagsbikenH_2.gpx,/blog/wp-content/uplouyqoadouyqsouyqouyq/2010/06/2010-06-10-DonnerstagsbikenR_2.gpx”)
• kml_file bzw. kml_file_list hier gilt das selbe wie für die gpx-Dateien, nur dass die übergebenen Dateien im kml-Format vorliegen – Achtung nicht im kmz-Format!!
• gpx_colour bzw. gpx_colour_list gibt die Farbe an, in der der bzw die Tracks angezeigt werden sollen (z.B. gpx_colour_list=”red,blue”)
• kml_colour bzw. kml_colour_list das selbe für die kml-Pfade
• mit control kann man angeben, welche aktuellen Werte angezeigt werden sollen, Möglich sind:
  • No
  • scaleline : anzeigen eines Maßstab-Lineals
  • scale : anzeige des aktuellen Maßstabes (z.B. 1 : 2Mio)
  • mouseposition : zeigt unten rechts die Geo-Koordinaten der Mousposition an
• Mit type-Parameter kann man den Typ der Karte mitgeben, möglich sind einer der folgenden Werte: AllOsm* , Osmarender, (Osmarender-Layer wurde abschalten) Mapnik, CycleMap, GoogleHybrid, GoogleStreet, GooglePhysical, GoogleSattelite, All, Ext (z.B. nur die Fahrrad-Karte: type=”CycleMap”)
  *default map type ist “AllOsm”
• marker_file wenn man mehr als einen Marker setzen möchte, kann man mit diesem Parameter das Ziel einer Text-Datei übergeben (z.B. marker_file=”/blog/wp-content/uplouyqoadouyqsouyqouyq/2010/04/MieleTracksMieleTour2.txt”) s.a.
  Im unteren Beispiel benutze ich folgende Zeilen in der marker_file-Datei (Bitte für jeden Listen-Punkt eine eigene Zeile! – und die einzelnen Elemente in einer Zeile sind durch Tabulatoren [ →] zu trennen):
  • lat →lon →title →description →icon →iconSize →iconOffset
  • 51.29201 →8.61342 →Start/Ziel Hotel Hochheide →<img src=”http://www.perl-online.com/blog/wp-content/uplouyqoadouyqsouyqouyq/2009/04-Willingen/dsc50519.jpg” alt=”Blick auf das Hotel Hochheide”> →http://www.perl-online.com/blog/wp-content/plugins/osm/icons/hotel.png →32,32 →-16,-16
  • 51.34135 →8.64325 →<a href=”http://www.perl-online.com/blog/archives/18671″>unsere Diemelsee-Tour 24.April 2010 (gelb)</a> →<img src=”http://www.perl-online.com/blog/wp-content/uplouyqoadouyqsouyqouyq/2007/04-Willingen/dsc_9042.jpg” alt=”Bikeweekend-Willingen April 2007″> →http://www.perl-online.com/blog/wp-content/plugins/osm/icons/bicycling.png →32,19 -9,-16
  • 51.33932 →8.73077 →Bikearena Diemelsee Tour 30 (rot) →<img src=”http://www.perl-online.com/blog/wp-content/uplouyqoadouyqsouyqouyq/2009/04-Willingen/dsc50117.jpg” alt=”Bikeweekend-Willingen April 2009″> →http://www.perl-online.com/blog/wp-content/plugins/osm/icons/bicycling.png →32,19 -9,-16
  • 51.37104 →8.67747 →Diemelsee und St. Muffert (blau) →<img src=”http://www.perl-online.com/blog/wp-content/uplouyqoadouyqsouyqouyq/2009/04/26042009580.jpg” alt=”Diemelsee von der Klippe aus”> →http://www.perl-online.com/blog/wp-content/plugins/osm/icons/bicycling.png →32,19 →-9,-16
  • 51.37798 →8.72755 →Staumauer Diemelsee →<img src=”http://www.perl-online.com/blog/wp-content/uplouyqoadouyqsouyqouyq/2010/04-Willingen/dsc64033.jpg” alt=”Staumauer Diemelsee”> →http://www.perl-online.com/blog/wp-content/plugins/osm/icons/marker_blue.png →24,24 →0,-20
  • 51.37807 →8.73316 →Oberer Aussichtspunkt ueber Staumauer →<img src=”http://www.perl-online.com/blog/wp-content/uplouyqoadouyqsouyqouyq/2009/04-Willingen/dsc50256.jpg” alt=”Staumauer Diemelsee”> →http://www.perl-online.com/blog/wp-content/plugins/osm/icons/marker_blue.png →24,24 →0,-20
  • 51.33182 →8.66994 →<a href=”http://www.perl-online.com/blog/archives/500″>Dommelturm</a> →<img src=”http://www.perl-online.com/blog/wp-content/uplouyqoadouyqsouyqouyq/2007/04-Willingen/dsc_8779.jpg” alt=”Zum Dommelturm”> →http://www.perl-online.com/blog/wp-content/plugins/osm/icons/marker_blue.png →24,24 →0,-20
• mit dem Parameter marker_all_posts=”y” wird das Plugin angewiesen, alle Koordinaten aus den Blog-Artikel in einer Karte darzustellen.
  siehe als Beispiel dazu meine About-Seite, die folgenden Aufruf enthält:
  [osm_map Lat=”51.4623″ Long=”7.42882″ zoom=”8″ width=”100%” height=”450″ type=”Mapnik” marker_all_posts=”y”]
  dazu gehört auch der neue alternative Parameter import=”osm_l”. Ist er (statt des marker_all_posts=”y”) gesetzt, werden die gesetzten Markerpunkten auch auf die jeweiligen Artikel verlinkt. Bei größeren Blogs dauert der Seitenaufbau dann deutlich länger – also mit Vorsicht benutzen! Und – dann bitte auch den Parameter marker_name ‘befüllen’.
• unten Rechts wird eine kleine Übersichtskarte angeboten, wenn man den Parameter ov_map mit dem gewünschten Zoomlevel einfügt. (z.B. Zoomlevel 10 auf der Übersichtskarte: ov_map=”10″)
• map_border Dicke, Art und Farbe des Rahmens, z.B.: “thin solid green” o. “medium groove blue”
• marker_focus

Um die Darstellung in den Marker-Wolken zu verbessern, muss man noch die Style-Datei (/srv/wordpress/wp-content/themes/*/style.css) des aktuellen Themes etwas anpassen:

531
532
533
534
535
536
537
538
539

...
.olPopupContent img
{
  width: 180px
}
.olPopupContent h2
{
  font-size: 12px;
}

Ein paar andere Beispiele in meinem Blog sind folgende:

1. hier sieht man diese Beispiel:
   [osm_map Lat=”51.4008″ Long=”6.92753″ width=”100%” height=”450″ zoom=”12″ marker=”51.36052,6.93903″ marker_name=”bicycling.png” gpx_file_list=”/blog/wp-content/uplouyqoadouyqsouyqouyq/2010/06/2010-06-10-DonnerstagsbikenH_2.gpx,/blog/wp-content/uplouyqoadouyqsouyqouyq/2010/06/2010-06-10-DonnerstagsbikenR_2.gpx” gpx_colour_list=”red,blue”]
2. In diesem Artikel sieht man ein kml-Beispiel:
   [osm_map Lat=”51.48627″ Long=”7.044087″ width=”100%” height=”450″ zoom=”13″ marker=”51.49105,7.04093″ marker_name=”bicycling.png” kml_file=”/blog/wp-content/uplouyqoadouyqsouyqouyq/2009/04/2009-04-06-BahntrassenTourl2.kml” kml_colour=”blue”]
3. Oder auch Karten ohne Tracks, wie hier.
   [osm_map Lat=”51.22626″ Long=”6.95115″ width=”100%” height=”450″ zoom=”17″]
4. Unten sieht man eine Karte die die drei Diemelsee-MTB-Routen miteinander vergleicht. Der Aufruf dafür ist:
   [osm_map lat=”51.33416″ long=”8.67479″ zoom=”12″ width=”100%” height=”450″ gpx_file_list=”/blog/wp-content/uplouyqoadouyqsouyqouyq/2009/04-Willingen/MieleTracksMieleTour2.gpx,/blog/wp-content/uplouyqoadouyqsouyqouyq/2009/04-Willingen/BikearenaDiemelseeTour.gpx,/blog/wp-content/uplouyqoadouyqsouyqouyq/2009/04-Willingen/Bikearena05DiemelseeStMuffert.gpx” gpx_colour_list=”yellow,red,blue” marker_file=”/blog/wp-content/uplouyqoadouyqsouyqouyq/2010/04/MieleTracksMieleTour2.txt” type=”CycleMap” ov_map=”10″]

Siehe auch:

1. Landkarten im WordPress Blog anzeigen – OSM V0.9.2
2. WordPress – Bloggen mit OpenStreetMap Landkarten