In einem anderen Artikel habe ich bereits beschrieben, wie man mit Hilfe der Opensource JavaScript-Bibliothek OpenLayers GPX-Tracks einer OSM-Karte überlagern kann um diese auf einer Webseite einzubetten. In Form des OSM-Plugins bietet sich für Nutzer eines WordPress-Blogs eine sehr vereinfachte Integration von OSM-Karten mit verschiedenen Layern, sowie Markern durch die Angabe von Shortcodes an.
Das erwähnte Plugin wird mit einem ftp-Client (z.B. FileZilla) in das Verzeichnis /wp-content/plugins der WordPress-Installation übertragen und anschließend im Plugin-Menu aktiviert.
Die Funktionen des Plugins stehen nun zur Verfügung und können im Text durch die Platzierung von Shortcodes der Form [osm_map ...] eingefügt werden. Argumente des [osm_map]-Präfix sind z.B.:
Für allgemeine Angaben zur Karte:
- width…die Breite der Karte [osm_map … width=”450″]
- height…die Höhe der Karte [osm_map … height=”600″]
- lat…Breitengrad des Kartenzentrums [osm_map … lat=23.6565]
- long…Längengrad des Kartenzentrums [osm_map … long=”32″]
- zoom…Zoomstufe der Karte [osm_map … zoom=”13″]
- type…Kartentyp (Osmarender, Mapnik, CycleMap, GoogleStreet, GooglePhysical,
GoogleSatellite, GoogleHybrid, All, AllOsm, AllGoogle, Ext) [osm_map … type=”All”] if it is set to all, LayerSchwith is enabled - map_border…Kartenrahmen [osm_map … map_border=”medium solid blue”]
Für das Hinzufügen eines Tracks:
- gpx_file…Absolute url des gpx-files [osm_map … gpx_file=”http://www.Domain.com/blog/sample.gpx”]
- gpx_colour…Farbe der gpx-Route [osm_map … gpx_colour=”black”]
- gpx_file_list…Entsprechende Angabe für mehrere Routen [osm_map … gpx_file=”http://www.Domain.com/blog/sample01.gpx,http://www.Domain.com/blog/sample02.gpx”]
- gpx_colour_list…Entsprechende Angabe für mehrere Routen [osm_map … gpx_colour_list=”black,green”]
- kml_file…Absolute url kml-file [osm_map … kml_file=”http://www.Domain.com/blog/sample.kml”]
- kml_colour…Farbe der Route [osm_map … kml_colour=”black”]
Für das Hinzufügen eines einzelnen Markers:
- marker…Hinzufügen eines Markers [osm_map … marker=”33.54,85.333,Customfieldname”]
- marker_name…Definiert ein Bildchen für den Marker. [osm_map … marker_name=”../../../uploads/BikeLogo.png”]
- m_txt_n…Definiert einen zeilenweisen Text, der beim Klicken auf den Marker erscheint. [osm_map … m_txt_01=”Waldquelle” m_txt_02=<”a href=’www.domain.de’>Bild</a>”]
- marker_file…Alternativ zur direkten Texteingabe mit
m_txtkann hier die url eines Textfiles angegeben werden: [osm_map … marker_file=”http://cyberleaf.bplaced.net/wp-content/uploads/textfile.txt”] - marker_height…Definiert die Höhe des Markers. [osm_map … marker_height=”23″]
- marker_width…Definiert die Breite des Markers. [osm_map … marker_width=”23″]
- marker_focus…Definiert die Orientierung des Markers (0…center, 1…left bottom, 2…left top, 3…right
top, 4…right bottom). [osm_map … marker_focus=”1″]
Geht man im Dashboard von WordPress auf Einstellungen und wählt den Punkt OSM an, gelangt man zu einem Dialog und kann sich den Shortcode sogar interaktiv generieren lassen.
Um Probleme bei der Angabe von Pfaden besser auf die Spur zu kommen, sollte im Browser die Javascript-Konsole angeschaltet werden. Relative Pfadangaben beziehen sich auf den Installationsort des osm-plugins (also /wp-content/plugins/osm, bzw. /wp-content/plugins/osm/icons für marker_name)
Am Ende noch ein Beispiel:
Hat man die nötigen Dateien im Dashboard über den Punkt Mediathek->Datei hinzufügen hochgeladen, kann das folgende Stück Code auf der Seite eingebunden werden:
[osm_map lat="50.834" long="14.051" zoom="16" width="600" height="450" ov_map=”0″ marker_file="http://cyberleaf.bplaced.net/wp-content/uploads/2012/10/marker_001.txt"] |
und nachfolgenden Angaben in der Datei marker_001.txt:
lat lon title description icon iconSize iconOffset 50.834 14.052 Großvaterstuhl Blick auf den Großvaterstuhl <br><img src="http://cyberleaf.bplaced.net/wp-content/uploads/2012/10/picture_001.jpg" width="500" height="634" alt="GStuhl"> http://cyberleaf.bplaced.net/wp-content/uploads/2012/10/marker_001.png 50,63 0,-20 |
Als Ausgabe erhält man:
Weitere Informationen zum OSM-Plugin finden sich auf der Homepage des Plugins.
Im Beispiel wird ein schönes Stück unserer sächsischen Heimat dargestellt. Leider fehlt der Programmcode dafür. Ich habe folgendes geschrieben:
Karte (import=”exif_m” import=”osm_l” ) mit verorteten Fotos
[osm_map lat=\"52.29\" lon=\"8.907\" zoom=\"12\" width=\"600\" height=\"450\" marker=\"52.29788,8.90413\" marker_name=\"marker_blue.png\" import=\"exif_m\" import=\"osm_l\"]
Versuch 2 (import=”osm” import_osm_line_color=”red”)
[osm_map Lat=\"52\" Long=\"8\" zoom=\"1\" width=\"900\" height=\"550\" import=\"osm\" import_osm_line_color=\"red\" map_border=\"thin solid red\" theme=\"ol_orange\" control=\"mouseposition,scaleline\"]
Versuch 3 (import=”exif_m”)
[osm_map lat=\"52\" lon=\"8.0\" zoom=\"4\" width=\"300\" height=\"300\" control=\"mouseposition,scaleline\" map_border=\"2px solid orange\" theme=\"ol_orange\" marker_name=\"mic_coldfoodcheckpoint_01.png\" import=\"exif_m\"]
Die beiden oberen Karten werden richtig angezeigt. In der dritten Karte fehlen die Symbole für die Fotos. Die Fotos haben im EXIF-Header Positionsinfos und können unter “geohack” angezeigt werden. Sie sind in der Mediathek zu sehen.
Was ist falsch??
WordPress 3.9.1
OSM Version 2.8.1 | Von MiKa
Für einen Tipp wäre ich sehr dankbar.
Hallo Steffen, habe den Programmcode und auch den Inhalt des Marker-Files hinzugefügt, hatte leider übersehen, dass diese Angaben bisher fehlten. Hoffe der Code hilft erstmal weiter. Ist schon einige Jahre her, dass ich mit dem Plugin herumgespielt habe, ich erinnere mich aber, dass ich Probleme hatte Optionen zu den Markern explizit anzugeben. Durch die Auslagerung der Angaben in ein Marker-File funktionierte es dann. Auch auf den Hinweis zu den Pfadangaben achten und die Ausgabe der Javascript-Konsole des Browsers beobachten. Wenn Du nicht weiterkommst melde Dich nochmal.
Gruß, Thomas