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:

/uploads/osm/theme

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

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

GIMP
WordPress OSM plugin download

Posted in tutorial
Tags:

Leave a Reply

Your email address will not be published. Required fields are marked *

*