Preview: WordPress OpenStreetMap Plugin OSM with OpenLayers 3 for GPX with Waypoints

WordPress 4.2 will be released very soon and the WP OSM Plugin is prepared quite well and will release with V3.2 by the end of next week. Main work of the last weeks is to bring whole functionality to OpenLayers 3 library and improve performance and usability.

Handling of KML and GPX files will be improved and GPX files also support waypoints. A map with 3 GPX files and 2 waypoints in each of them will be integrated with this shortcode:

[*osm_map_v3 map_center="52.862,5.437" zoom="9" width="100%" height="500" map_border="medium solid blue" file_list="../../../../wp-content/uploads/osm_map/OpenStreetMap_GPX_red.gpx,../../../../wp-content/uploads/osm_map/OpenStreetMap_GPX_green.gpx,../../../../wp-content/uploads/osm_map/OpenStreetMap_GPX_blue.gpx" file_color_list="red,green,blue"]

This shortcode generates the following map. Click on the waypoints to get the names:

> Let us know if you want to make Beta-tests! <



Veröffentlicht unter announcement Getagged mit: , , ,

blumax GPS Logger in Ubuntu 14.04 Linux als GPX Datei auslesen und komprimieren

Auf Reisen sind GPS Logger eine feine Sache, man kann damit Fotos georeferenzieren oder Routen aufzeichnen und in einer Karte darstellen. Der blumax GPS Logger ist viele Jahr alt und wird mit dem Standard Chipsatz auch unter Ubuntue 14.04 zum Auslesen der GPS Daten als GPX-file unterstützt.

blumax 4043 GPS Logger

blumax 4043 GPS Logger

Der Schalter am GPS-Logger muß in der Stellung >LOG< sein

Kommando zum Auslesen unter Linux Ubuntu ohne löschen:

sudo gpsbabel -t -w -i mtk -f /dev/ttyUSB0 -o gpx -F MyFile.gpx

Kommando zum Auslesen und löschen:

sudo gpsbabel -t -w -i mtk,erase -f /dev/ttyUSB0 -o gpx -F out.gpx

Für eine Reise von Bagdogra nach Darjeeling in Indien sieht ein einzelner trackpoint im 1.6 MB großen GPX file so aus:

  <trkpt lat="26.699590668999999" lon="88.319783779000005">

Für die Darstellung in der Karten werden aber nur lat und lon benötigt und rot verursacht lediglich ladezeit, daher werden diese Bereich gelöscht:

cat Input.gpx | grep -v -E '<speed>|<fix>|<ele>|<time>' > Output.gpx

Damit sinkt die Filegröße von 1.6MB auf 607kB. Mit GPSBabel werden nun Punkte aus dem File entfernt die Näher als 10m aneinander liegen:

gpsbabel -i gpx -f Input_grep.gpx -x position,distance=10m -o gpx -F Outpu.gpx

Damit wird die Datei nochmals von 607kB auf 268kB optimiert und sieht in der OpenStreetMap Karte wie folgt aus:

WP OSM Plugin shortcode:

[*osm_map_v3 map_center="26.881,88.28" zoom="11" width="60%" height="630" map_border="medium solid red" file_list="../../../../wp-content/uploads/sites/2/2015/04/India_Bagdogra_Darjeeling_opt_01.gpx" file_color_list="red"]]
Veröffentlicht unter tutorial Getagged mit: , , , , , , ,

WordPress OpenStreetMap Plugin OSM released with basemap and OpenSeaMap in OpenLayers 3

The version WP OSM Plugin V3.1.1 supports to set markers in OpenSeaMap and basemap with OpenLayers 3 technology. Of course OpenStreetMap is included as well 😉


[*osm_map_v3 map_center="45.63,13.62" zoom="11" width="100%" height="450" map_border="2px solid red" marker_latlon="45.63083,13.62928" marker_name="mic_orange_sailing_1.png" type="OpenSeaMap"]

BaseMap for Austria:

[*osm_map_v3 map_center=”47.8,13.045″ zoom=”16″ width=”100%” height=”450″ map_border=”2px solid grey” marker_latlon=”47.79784,13.04535″ marker_name=”mic_black_pinother_02.png” type=”basemap_at”]


[*osm_map_v3 map_center="47.8,13.045" zoom="16" width="100%" height="450" map_border="2px solid grey" marker_latlon="47.79784,13.04535" marker_name="mic_black_pinother_02.png"]


Veröffentlicht unter announcement Getagged mit: , ,

Preview to WordPress OpenStreetMap Plugin OSM V3.2 with OpenLayers 3

The WordPress OpenStreetMap Plugin OSM is based on OL (OpenLayers) and includes version 2 and 3. Up to OSM version 3.1 only the geotag widget used the latest technology of OL3. The upcomming version 3.2 will provide the new library also for simple markers like a POI at  Casa die Giulietta in Verona / Italy. The new library is prepared for mobile devices – on sample ist to rotate the map. On the mobile device simple with two fingers on the screen or with [Alt]+[Shift]+drag:

You get this:

Rotate stamen and OpenStreetMap with OpenLayers 3

Rotate stamen and OpenStreetMap with OpenLayers 3



Veröffentlicht unter Allgemein

V3.1: Map icons collection with cc0 instead of cc-by and openlayers 3 geotag widget

This latest version of WP OSM Plugin brings three features:

There are two new shortcodes added to the plugin kml_file_list and kml_colour_list. A sample looks like this:

[*osm_map lat=”38.713″ lon=”-9.136″ zoom=”16″ width=”95%” height=”300″ control=”scaleline” map_border=”thin solid orange” theme=”ol_orange”  kml_file_list=”../../../../wp-content/uploads/osm_map/OSM_01_red.kml, ../../../../wp-content/uploads/osm_map/OSM_01_black.kml”]

Up to OSM-Plugin version 3.0 all icons were cc-by, we have replaced them with cc0 icons:

mic_black_empty_01.png mic_blue_empty_01.pngmic_brown_car_01.png














Please help to make this collection grow and post us a link to cc0 collection with svg icons. Also feel free to send us an cc0 if you want it to be integrated.

In this post you can also see on the right site the geotag widget using Openlayers 3.

Feedback is welcome!

 [WordPress OSM Plugin DOWNLOAD]

Veröffentlicht unter Allgemein

Icon preview V1 for maps with markers in WP OSM Plugin

The following markers are based on OpenStreetMap icons and they are used as Point of Interrest (POI) with WP OSM Plugin. All are modified with the free tool inkscape in SVG:





mic_blue_information_01.png mic_blue_mobilephonetower_01.png










Contact us if you want to support / help to generate a set of icons for the WordPress OSM Plugin.




Veröffentlicht unter Allgemein Getagged mit: , , , ,

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="../../../plugins/osm/icons/mic_blue_empty_01.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=”../../../plugins/osm/icons/mic_blue_empty_01.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