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:
Adding a geolocation to a post / page was introduced to the WordPress OSM Plugin many years ago – there are sites like Fotomobil.at 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
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!
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.
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%.
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:
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
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
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:
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!
Seit 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 ›
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: