React-leaflet: How to use with leaflet-grayscale?

[josdejong]

Thanks or writing react-leaflet, works like a charm!

I was trying to use leaflet-grayscale within react-leaflet, but I have no clue how to translate L.titleLayer.grayscale(url, options) to an equivalent React syntax.

var map = L.map('map').setView([25, -4], 3);
L.tileLayer.grayscale('http://tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: 'Map data &copy; <a href="http://openstreetmap.org/">OpenStreetMap</a> contributors',
  maxZoom: 14, minZoom: 2
}).addTo(map);

Any ideas?

[PaulLeCam]

Hi, please refer to the creating custom components section of the documentation.

[josdejong]

Ok thanks, will fiddle around with it.

[stefangordon]

Hey @josdejong, saw your issue when I was looking for tips on how to do the same thing. I got a custom component working with leaflet-bing, might help you http://www.stefangordon.com/display-bing-tiles-in-react-leaflet/

[josdejong]

Thanks @stefangordon, good to know.

I solved it by applying a simple css grayscale transform using a regular, colored tile set:

.leaflet-tile-pane {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}