Adding geotag to WordPress and OpenStreetMap with WP OSM Plugin V2.9.4

Adding a geolocation to a post / page was introduced to the WordPress OSM Plugin many years ago – there are sites like and Hamburgs Brücken wich use it with hundreads of geocoded posts. The latests version of WP OSM Plugin added a sidebar widget at your edit post area to directly set the geolocation without dealing with custom fields by yourself:

WP OSM  Plugin geotag

WP OSM Plugin geotag

If you want to, there is also the possibility to define an icon to the post which is later on shown in the overall map.

Beside the geolocation widget the latest version brings also some new icons, find them here.

And many thanks to Andrea for italian tranlsation!

Veröffentlicht unter announcement

Change the OpenStreetMap Style and controls in WordPress plugin OSM

If the webdesign of your homepage is dominated by a specific color you might want to change the style for your OpenStreetMap in your WordPress Blog. If your Map is embedded with the WordPress OSM plugin you just have to copy a directory, replace the color of the icons and put the directory to your blog uploads folder. This article shows how to do this with GIMP.

The feature to add your private style to the OSM plugin has been added to version 1.2.2. As preperation you have to copy the “ol” folder from wp-content/plugins/osm/themes/ to your local machine. The files in this folder are loaded by your map – if you want another style you simply have to modify them, but keeping the size an name of the png files.

Modify the controls of your OpenStreetMap map with GIMP

Since there is just one color in the controls of the OSM map we can choose the easy way to modify the color. Just by “Adjust Hue / Lightness / Saturation” – find some details on this at the GIMP docu. All I did for this sample was to set Hue to 150 and Lightness to 50.

Farbe der controls für OpenStreetMap ändern

Change the color of OSM map controls by setting Hue to 150 and Lightness to 50 in GIMP.

At this point the icon is colored orange, but since it is stored as png I would like to add some transparancy by reducing the Opacity. For all icons I set the Layer Opacity to 80%.

OpenStreetMap Style ändern

Opacity for OSM map icons.

If you want to change an icon with several colors you will like the GIMP feature rotate colors that is explained here.

Upload the theme folder and generate the OSM plugin shortcode

Once you have modified all the icons you simply upload them to your WordPress folder:


and generate the OSM shortcode in the backend (settings =>OSM) of your WordPress Blog:

WordPress OpenStreetMap style

Set WordPress OpenStreetMap style for OSM plugin map

OpenStreetMap with orange controls and default controls

After you uploaded the the folder as mentioned above you will get the orange controls like in this map:

default blue control if you choose “default theme”:

default dark controls if you choose “dark theme”:


Thanks to Uwe for the feedback about Osmarender Service and to the reader of this article for accepting german screenshots in an english article ;-)

WordPress OSM plugin download

Veröffentlicht unter tutorial Getagged mit:

Loading three GPX files and a marker with html-text

There has been a request to display GPX files and a html marker with WP OSM Plugin. These steps are required:

  1. Optimze your GPX tracks
  2. Add a custom field called OSM_marker_text with your html text
  3. Generate the OSM Shortcode and modify it

In detail it’s like this:

Optimze your GPX tracks

Usually your tracks are quite huge with data you do not need but take a lot time to load your page. The free tool gpsbabel optimizes it:

gpsbabel -i gpx -f Input.gpx -x simplify,crosstrack,error=0.001k -o gpx -F Output.gpx

The argument: simplify,crosstrack,error=0.001k delets all points which are closer than 1 meter.

Add a custom field called OSM_marker_text with your html text

At the meta box for custom fields you should create a new customfield.

HTML text for WP OSM Plugin marker

HTML text for WP OSM Plugin marker

In this exampel the html text in the custom field is:

<font color="red">Variante basse</font><br><font color="green">Tivano trail</font><br><font color="blue">Muro di Sormano</font>

Generate the OSM Shortcode and modify it

There is a metabox when you create your post or page. Adjust the map and add a single marker to the map. In addition you will have to modified shortcode to get this:

[*osm_map lat="45.893" lon="9.271" zoom="13" width="100%" height="600" control="mouseposition,scaleline" map_border="thin solid grey" theme="dark" gpx_file_list="../../../../wp-content/uploads/osm_map/VARIANTE_BASSA_V2.gpx,../../../../wp-content/uploads/osm_map/TIVANO_TRAIL_V2.gpx,../../../../wp-content/uploads/osm_map/MURO_DI_SORMANO_V2.gpx" gpx_colour_list="red,green,blue" marker="45.893,9.271,OSM_marker_text" marker_name="mic_cycling_icon.png"]

* <= asterix has to be removed

Veröffentlicht unter tutorial

V 2.9.1 releases with individual icons for your post / page with geotag

With the WP OSM Plugin you can add an geotag (lat and lon) and an icon to your post. This information can be used to show an widget in your blog or to show a map with all geotagged posts and the related icon.

If you click on the icon in the map you will get the excerpt and a link to the post or page. If you did not set an icon but only the geotag, the standard icon will be used. You have to set the geotag and the  icon when you create the post or page like this (Benutzerdefiniert Felder = custom field):

WordPress OSM Plugin geotag

WordPress OSM Plugin geotag

The map with all geotagged posts / pages of this site looks like this:

The map shows the standard icon mic_shark_icon.png whenever a geotag is set but no icon is defined via OSM_geo_icon. The the icon for OSM_geo_icon has to be an icon from this page.

The WP OSM shortcode in detail – red is the map information, blue ist the information about the standard icon and green is the information about the geotagged posts / pages:

[*osm_map lat="51.0" lon="10.51" zoom="4" width="95%" height="500" control="mouseposition,scaleline" map_border="thin solid orange" theme="ol_orange" type="CycleMap" marker_name="../../../uploads/sites/2/2013/11/mic_shark_icon.png" marker_height="37" marker_width="32" marker_focus="5" import="osm_l" import_osm_line_color="orange"]

lat=”51.0″ lon=”10.51″ zoom=”4″ … center and zoomlevel of the map
width=”95%” height=”500″ … size of the map
control=”mouseposition,scaleline” … adds some control to the map
map_border=”thin solid orange” … adds a orange border around the map
theme=”ol_orange” … adds orange controls
type=”CycleMap” … map type
marker_name=”../../../uploads/sites/2/2013/11/mic_shark_icon.png” … standard icon address
marker_height=”37″ … standard icon size (not needed if the icon is from this page)
marker_width=”32″ … standard icon size (not needed if the icon is from this page)
marker_focus=”5″ … standard icon center (not needed if the icon is from this page)
import=”osm_l” … displays all geotagged posts/pages with a geotag
import_osm_line_color=”orange” … draws a line between geotagged posts/pages

Note 1.) You need not marker_height, marker_width, marker_focus if you set a marker from the OSM Plugin like: marker_name=”wpttemp-yellow.png”
Note 2) You must not save any individual marker in the plugin folder as they are deleted at the update!

Veröffentlicht unter announcement

WordPress OSM Plugin mit OpenSeaMap released als V2.9

2013_OpenSeaMap_Logo_01Seit 2009 können OpenStreetMap Karten in einem WordPress Blog mit dem WP OSM plugin als “slippy map” eingebunden werden. Dh in der Karte kann gezoomt und auch im Fenster verschoben werden. Zusätzlich gibt es die Möglichkeit, persönliche Daten – wie zB Marker oder GPX routen – einzubinden.
Seit der Version 1.3 des WP OSM plugin ist es nun möglich, auch per shortcode eine OpenSeaMap Karte – gemeinnsam mit Tracks, Fotos oder Markern in der Karte – in einem WP Blog einzubinden. Der Beitrag zeigt das Einbinden mit wenigen Schritten. Weiterlesen ›

Veröffentlicht unter announcement

Dealing with icons in KML files for WP OpenStreetMap Plugin OSM

If you want to display individual information in your map then KML files are a good choice. There are several KML generators and it’s easy to integrate it into your WordPress Site.

Note, you must not display any icons which are protected by copyright! There icons integrated in WP OSM plugin and you should use them in your KML file with style-tag like this:

  <Style id="style1">
        <hotSpot x="16" y="0" xunits="pixels" yunits="pixels" />

Using this icon you simple refer to the style at the placemark-tag with styleUrl:

    <Snippet>About Primosten&amp;nbsp;Mooring in Primosten&amp;nbsp;Primosten Gallery</Snippet>
    <description><![CDATA[<a href="" target="_blank">About Primosten</a>&nbsp;<div><a href="" target="_blank">Mooring in Primosten</a>&nbsp;</div><div><a href="" target="_blank">Primosten Gallery</a></div>]]></description>

Sample looks like this:

[*osm_map lat=”43.544567″ lon=”15.831299″ zoom=”9″ width=”100%” height=”550″ map_border=”thin solid grey” theme=”dark”  kml_file=” route 2015.kml” control=”scaleline,scale,mouseposition”]

If you miss any icons just post it to get them with the next OSM plugin version.

PS: KML-sample was taken from


Veröffentlicht unter Allgemein Getagged mit: , , ,

WordPress OpenStreetMap Plugin OSM V2.8.1 released

The latest version of the WordPress OSM Plugin addressed several improvements of existing features:

  • show the excerpt for geotagged posts in the pop up
  • hide the map widget at the blogarchive view
  • add the OSRM routing service in the popup
  • some bugfixes (see Roadmap for details).

Display a map with all geotagged posts:

If you geotagged your posts of pages with WP OSM Plugin, you can display all your posts in a map:

[*osm_map lat=”52.795″ lon=”23.51″ zoom=”3″ width=”100%” height=”450″ control=”mouseposition,scaleline” map_border=”medium solid orange” theme=”ol_orange” marker_name=”wpttemp-yellow.png” import=”osm_l” import_osm_cat_incl_name=”announcement” import_osm_line_color=”orange”]

The arguments of this map more detailled:

  • lat=”52.795″ and lon=”23.51″ … center of the map
  • zoom=”3″ width=”100%” height=”450″ … adjust the map
  • control=”mouseposition,scaleline” … show some controls on the bottom of the map
  • map_border=”medium solid orange” … border around the map
  • theme=”ol_orange” … the arrows to navigate in the map
  • marker_name=”wpttemp-yellow.png” … icon used to mark the posts on the map
  • import_osm_cat_incl_name=”announcement” … filter the geotagged posts for “announcement” only
  • import=”osm_l”… mark them in the map with link to the posts
  •  import_osm_line_color=”orange” … connect all geotagged posts with an orange line

Widget for geotagged posts.

Since OSM Plugin V2.8 there is a widget to show a map if the post/page is geotagged. This map is not shown anymore if there are more than one posts/pages displayed. Thanks to writeln for info on this issue.

OSRM – Routing Service link in the popup

At Settings / Einstellungen of your WordPress Blog you will find OSM with another OSM Shortcode generator. There you can create a shortcode like this automatically:

[*osm_map lat=”38.716″ lon=”-9.137″ zoom=”16″ width=”600″ height=”450″ marker=”38.71612,-9.13619″ marker_name=”wpttemp-red.png” map_border=”thin solid green” control=”scaleline” m_txt_01=”Fa. Muster” m_txt_02=”MyStreet” m_txt_03=”8899 City” m_txt_04=”My Country” marker_routing=”osrm” theme=”dark” type=”Mapnik”]

Your feedback is welcome in the forum (EN / DE) and if you like the OSM plugin, rate it here.

Veröffentlicht unter announcement

Feedback requested to improve WP OSM Plugin documentation

The feedback for the WordPress OpenStreetMap Plugin OSM is pretty good – thanks for that! The only point that is addressed for improvements is the documentation. There is no doubt, that’s the reason why you find also great articles about the plugin out there:

The WP OSM Plugin is free, there is no business plan to make money – it’s just a contribution to the great OpenStreetMap Project! There is no marketing plan for the OSM plugin, requirementsmanagements is handled in the Forum (DE / EN). Unfortunately the attention to the documentation is not as big as it should be …






Veröffentlicht unter Feedback

Hamburgs Brücken mit WP OSM Plugin – Feedback

Hamburgsbruecken Logo

Sehr gern möchte ich mich jetzt auch einmal zu Wort melden; der Beitrag könnte aber etwas länger sein, da ich sowohl bei einem selbstgehosteten WordPress-Blog als auch mit einem Plug In ein absoluter Anfänger bin und leider null komma null Ahnung von HTML oder Ähnlichem haben. Ich schreibe einfach drauf los …

Erster Versuch: OpenStreetMap im gehosteten Beitrag als Link einbinden

Ich veröffentliche auf täglich eine andere Brücke aus Hamburg und stelle sie mit einem kleinen Text vor. Auf Anregung eines Lesers bekam ich den Tipp, doch eine Karte mit einzubinden. Damals hatte ich noch auf gebloggt und ich fragt rum, wie das ginge. Der – mein Retter in der Not – gab mir den Tipp, es mit OpenStreetMap zu probieren, weil das am einfachsten ist. Gesagt getan, ich habe also in einem extra Tab im Browser OSM aufgerufen, den Ort gesucht, in dem ich in dem Straßenfeld den Suchbegriff eingegeben habe, dann auf Marker setzen, Link kopieren und habe dann den HTML Link in den Beitrag eingefügt.

Der Frust war groß, weil in der freien WP Version die Karte nicht angezeigt wird, sondern nur ein Link. Also bekam ich wieder einmal den Hinweis, ein eigenes Blog zu starten und mittels Plug-In (das erste Mal, das ich das Wort hörte) die Karte einzufügen. Und wer hat mir dazu geraten? Natürlich der

Eigener Blog und erster Kontakt mit WordPress Plugins
Mitte März war es soweit, ich habe mir ein eigenes Blog eingerichtet, sämtliche Beiträge importiert und das WP OSM Plugin von MiKa installiert. hat mir dann wieder gesagt, dass ich OSM Shortcode auswählen muss, dann den Markertyp und in der Karte zoomen und den Link dann in den Beitrag kopieren.

Ok … ahnungslos wie ich bin fragte ich, ob es denn nicht einfacher ginge, z.B. indem ich einfach nur die Straße eingebe oder so. Da hat der @cupofcoffee sich mit Mika in Verbindung gesetzt und herausgekommen ist das OSM Plugin 2.7.1 (

Der @cupofcoffee hat dann noch eine “Anleitung für Dummies” (also für mich) geschrieben und ich konnte loslegen. Es gab ein paar kleine Startschwierigkeiten, da ich mich ja wie gesagt so gar nicht mit HTML auskenne und demzufolge beim Link die eckige Klammer nicht mit kopiert hatte ( :-) ) Naja, Anfängerfehler halt.

Der OSM Plugin workflow integriert in das Beitragschreiben
Ich habe also die Anweisung befolgt und nun geht es ratzfatz mit der Karte: Ich schreibe meinen Bericht, gehe unten auf “geotag” statt “shortcode”, zoome in der Karte auf den korrekten Standort, klicke drauf, kopiere den Koordinatenwert, gebe in das benutzerdefinierte geotag_Feld den Wert ein, ebenso den Link zum Icon und gebe nun den Shortcode für die Karte ein. Und prompt erscheint im Beitrag die korrekte Karte.

Hamburgsbruecken Ubersichtskarte

Was aber am schönsten ist: durch den mir von @cupofcoffee mitgeteilten Code habe ich jetzt auch auf meinem Blog eine Extra-Seite, eine Übersichtskarte.


Veröffentlicht unter Feedback

WordPress OpenStreetMap Plugin OSM with widget for geotag released

The WP OSM Plugin 2.7.1 focused on geotagging your posts and pages including the possibility to add a specific icon to your post and page. The latest version adds a widget to this feature, it automatically adds a map with the geotag position and the icon of the post / page. The overall feature list of this release is:

  • Widget for geotagged posts / pages
  • Set the map sice with percentage (responsive for smartphones and table screens)
  • Add some new icons
  • Fix a warning if geotags are filtered by category

OpenStreetMap Widget for posts and pages

If you want to geotag your posts / pages you have set a geolocation and optional choose an icon for this post by adding custom fields OSM_geo_data and OSM_geo_icon – this is explained here. As soon as you have geotagged at least one post/page you can use the widget to display it in your post/page. Post / pages without geotag to not show the widget. You have to add the widget ad Design => widget.

OpenStreetMap Plugin Widget for WordPress

OpenStreetMap Plugin Widget for WordPress

If you defined a marker to your post / page with OSM_geo_icon the marker in the widget reaplaces the marker of the widget settings. The center of the map is automatically the the geotag location of the post / page.

Responsive maps in your post / page

Up to now the size was fixed to pixel. If you set the arguments to width=”300″, the width of the map was 300 pixel, regardless of the width that is available for the map. Instead of pixel you can set the size by percentage just by adding % add the end of the number: eg width=”95%”.

Additional icons shipped with the plugin

Let us know, if you want any other markers from map icons collection to be added.

Looking forward your feedback (Forum EN / DE) and if you like the WP OSM Plugin, do not forget to rate here.

THANKS to Beta-Tester!

This version was driven by two Beta-Tester. Thanks a lot for the patience and the professional feedback to:






Veröffentlicht unter announcement