DEPRICATED – IS NOT COVERED ANYMORE
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:
/uploads/osm/theme
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
Thanks to Uwe for the feedback about Osmarender Service and to the reader of this article for accepting german screenshots in an english article 😉
Hello, here you describe only how to change icons but you do not describe how to change map style. Can you please update your tutorial according to the title?
Hello AB,
this article is not uptodate anymore. You can change the tiles (map source) in the backend of the plugin when you create a post/page.
On this site choose the menu “HowTo” and then “Display different map types” …
Br,
MiKa