1

I wanted to know - but haven't found the solution elsewhere - whether it is possible to adjust the color theme of the CartoDB basemap "Dark Matter".

I'd only like to change the colors of the water and country areas as on some computer screens one unfortunately cannot see the differences between water and land. I would like to change the black color of the land to dark grey and the water color to a slightly brighter shade of grey in order to accentuate the contrast a bit more.

Is this possible? Or do I have to stick to the color theme that has been chosen by your cartographers?

3

Nope, there's no posibility to customize the Positron or Dark Matter basemaps.

These basemaps are offered by the CartoDB team and served like they are. There are no options available to users in order to edit them directly.

The project from which our basemaps where created is open source, which means that you can access it here, and even add some issues if you have suggestions!

What you can do is to add a data layer with the ocean geometry and put it below your data. You'll be able to style this data layer as you want by using CartoCSS. By following this approach and using Natural Earth Data layers I created this map.

2

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.

Basic considerations:

  • Only modern browsers support the CSS filter class. Be sure to have an appropriate browser. To check compatibility, you can use this website.
  • The 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 filter class.
  • 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.

2
  • Super interesting!
    – iriberri
    Jun 1 '15 at 13:49
  • For enhancing Positron, I found brightness(66%) contrast(400%) works well, leaving "white" more-or-less the same and darkening everything else.
    – Ed Staub
    Mar 20 '16 at 23:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.