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.
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%.
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:
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 😉