https://jlharchitect.com/lib/map/TileLayer.Grayscale.js?c=1

1/*
2 * L.TileLayer.Grayscale is a regular tilelayer with grayscale makeover.
3 */
4
5L.TileLayer.Grayscale = L.TileLayer.extend({
6	options: {
7		enableCanvas: true
8	},
9
10	initialize: function (url, options) {
11		var canvasEl = document.createElement('canvas');
12		if( !(canvasEl.getContext && canvasEl.getContext('2d')) ) {
13			options.enableCanvas = false;
14		}
15
16		L.TileLayer.prototype.initialize.call(this, url, options);
17	},
18
19	_loadTile: function (tile, tilePoint) {
20		tile.setAttribute('crossorigin', 'anonymous');
21		L.TileLayer.prototype._loadTile.call(this, tile, tilePoint);
22	},
23
24	_tileOnLoad: function () {
25		if (this._layer.options.enableCanvas && !this.canvasContext) {
26			var canvas = document.createElement("canvas");
27			canvas.width = canvas.height = this._layer.options.tileSize;
28			this.canvasContext = canvas.getContext("2d");
29		}
30		var ctx = this.canvasContext;
31
32		if (ctx) {
33			this.onload  = null; // to prevent an infinite loop
34			ctx.drawImage(this, 0, 0);
35			var imgd = ctx.getImageData(0, 0, this._layer.options.tileSize, this._layer.options.tileSize);
36			var pix = imgd.data;
37			for (var i = 0, n = pix.length; i < n; i += 4) {
38				pix[i] = pix[i + 1] = pix[i + 2] = (3 * pix[i] + 4 * pix[i + 1] + pix[i + 2]) / 8;
39			}
40			ctx.putImageData(imgd, 0, 0);
41			this.removeAttribute("crossorigin");
42			this.src = ctx.canvas.toDataURL();
43		}
44
45		L.TileLayer.prototype._tileOnLoad.call(this);
46	}
47});
48
49L.tileLayer.grayscale = function (url, options) {
50	return new L.TileLayer.Grayscale(url, options);
51};