Greyscale support

[jpmeijers]

In a single project I am trying to use both the Fallback tile layer as well as the Grayscale tile layer (https://github.com/Zverik/leaflet-grayscale). Unfortunately I can't manage to use both at the same time. Does anyone have an idea how to do this?

[ghybs]

Hi,

Hum looks like trying to combine both will require customizing how the greyscale plugin uses its source image, at least.

Unfortunately I will not be able to provide support for that, but feel free to implement it yourself. Should you need help along the road, feel free to ask on Stack Overflow!

[ghybs]

Proposed solution on Stack Overflow: https://stackoverflow.com/questions/56208960/leaflet-tile-provider-with-fallback-and-grey-scale

Demo

Basically:

• Apply a className on the Tile Layer
• Define a grayscale filter on images under element with this className

JavaScript:

L.tileLayer.fallback(urlTemplate, {
  className: 'toGrey'
}).addTo(map);

CSS:

.toGrey img {
  filter: grayscale(1);
}