How can I fill color the tile leaflet?

Question

This cite uses tiles from here, but in the initial state they are gray.

How can I fill tiles to make them look like in the example?

I use this code:

map = L.map('map', {zoomControl: false}).setView([..., ...], 15);
L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png"', {}).addTo(map);

Images:

needful: original - light all:

Answer 1

You can use the ColorFilter plug-in with ['grayscale:100%'].

See some Demos.

Answer 2

There are a few approaches to this problem:

• Search for a different tile provider which serves the desired colour scheme
• Serve your own tiles after creating your own rendering style
• Change the saturation of the tiles on the client side using 2d canvas
• Substitute colours in the tiles on the client side using 2d canvas
• Apply CSS colour filters to the tiles (by specifying a CSS class name for the tilelayer)
• Change the saturation and substitute colours in the tiles on the client side using WebGL

The map at coinmap.org (the site mentioned in the question) uses a CSS filter (filter:saturate(4)) on all the tiles (on the CSS selector .map .leaflet-tile-pane)