The first thing to understand is, you are using a Tile service. That means, you request existent, already generated image tiles from a remote server. You can't modify the appeal of the requested images, until they are stored on your local server, and you modify them with an image processor (or regenerate them from vector data with a new colour scheme).
Fortunately, modern browsers support a CSS property called
filter. Filters can be applied for any element with basic CSS syntax. You can grab the image class on client side (in the example below I have used Leaflet, so the name of the image class is
leaflet-tile), and apply a filter to it.
- Only modern browsers support the CSS
filter class. Be sure to have an appropriate browser. To check compatibility, you can use this website.
filter class is in an experimental state. For browsers with blink or webkit engines (like Chrome, Safari, or Opera), you have to use the
-webkit prefix. For browsers with gecko engine (like Firefox), no prefix is needed. Currently, IE browsers do not support the
- Learn how to use the
filter class, if you don't know it yet. There is a great source from the Mozilla Developer Network here.
- This method can only be applied on maps with only one tile layers. If you have more, than one tile layers, be sure to find out how to add a custom class to the layer, the filters should be applied on.
I have created a basic example with tripled brightness, and doubled contrast. You can alter those values appropriately to fine-tune the result for your specific needs.