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_txt
kann 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.