kristin-henry-sf · May 11, 2017 20:09
diff --git a/README.md b/README.md
diff --git a/d3v4Canvas.jpg b/d3v4Canvas.jpg
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
 	<title>Map of parking meters in San Francisco, built with d3.js with leaflet.js</title>
 	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
    
    <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
    <script src="L.CanvasLayer.js"></script>
    <script src="http://d3js.org/d3.v4.min.js"></script>
     
 </head>
 <body>

 <h1>Leaflet + Canvas</h1>
 <div id="mapid" style="width: 800px; height: 600px"></div>

 	
 <script>

 // initialize Leaflet map, and set initial zoom and coordinatess
 var mymap = L.map('mapid').setView([37.77139, -122.44486], 13);

 //-----------------------------------------------------------
 // NOTE: You'll need to get your own access Token from Mapbox
 //       Dev account sign up is easy and free, with some dev Tokens included
 //		 https://www.mapbox.com/help/define-access-token/
 //-----------------------------------------------------------
 // add basemap layer
 L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
    maxZoom: 18,
    id: 'mapbox.light',
    accessToken: 'pk.eyJ1Ijoia3Jpc3RpbmhlbnJ5IiwiYSI6ImNqMWdxMjd5aDAwM28zM2xtaGV2azYwcjYifQ.NTJiOqcnhP-_3etf4aZYmQ'
 }).addTo(mymap);







 // drawing on canvas layer from https://github.com/Sumbera/gLayers.Leaflet
 //var data = [[37.77139, -122.44486]];
 var data = dataset;

 var canvasLayer = L.canvasLayer()
            .delegate(this) // -- if we do not inherit from L.CanvasLayer we can setup a delegate to receive events from L.CanvasLayer
            .addTo(mymap);
      
 function onDrawLayer(info) {
    //console.log("draw ")
    //console.log(info.zoom)
    var dotSize = 10/info.zoom
    var alpha = .9;  //0.2 + (info.zoom/100)*3;
    //console.log(alpha)
    var ctx = info.canvas.getContext('2d');
    ctx.clearRect(0, 0, info.canvas.width, info.canvas.height);
    


    for (var i = 0; i < dataset.length; i++) {

    	var d = dataset[i];
    	//console.log(d)
    	if (info.bounds.contains([d.loc[0], d.loc[1]])) {
    		ctx.fillStyle = "rgba(" + d.color[0] + "," + d.color[1] + "," + d.color[2] + "," + alpha + ")";
    		
            dot = info.layer._map.latLngToContainerPoint([d.loc[0], d.loc[1]]);
            
            ctx.beginPath();
            ctx.arc(dot.x, dot.y, dotSize, 0, Math.PI * 2);
            ctx.fill();
            ctx.closePath();
        }

        
    }
 };




 function strToLocation(s){
 		var arr = s.slice(1,-1).split(',');
 		arr[0] = parseFloat(arr[0]);
 		arr[1] = parseFloat(arr[1]);
 		return arr;
 	}


 	capColors = {
 		"Grey": {"hex":'#999', "rgb": [153, 153, 153]},
 		"Green": {"hex": '#FF0', "rgb": [31, 168, 31]},
 		"Yellow": {"hex":'yellow', "rgb": [255, 255, 0]},
 		"Black": {"hex": 'black', "rgb": [20, 20, 20]},
 		"Red": {"hex": 'red', "rgb": [206, 8, 8]},
 		"Brown": {"hex": 'brown', "rgb": [112, 86, 20]},
 		"Purple": {"hex": 'purple', "rgb": [61, 20, 112]},
 		"Undefined": {"hex": '#ccc', "rgb": (204, 204, 204)}

 	}

 	function getCapColor(d){
 		return capColors[d['CAP_COLOR']];
 	}

 // Get data
 var datafile = "Parking_meters_sm.csv"; 
 var dataset = [];
 d3.csv(datafile, function(data){

 		ids = d3.map(data, function(d){return d['RATEAREA'];}).keys()
 		console.log(ids);

 		caps = d3.map(data, function(d){return d['CAP_COLOR']}).keys();
 		console.log(caps)


 		data.forEach(function(d) {

 			d.loc = strToLocation(d['LOCATION']);
 			
 			try{
 				d.LatLng = new L.LatLng(d.loc[0], d.loc[1]);
 			} catch(err) {
 				console.log('error', d.LatLng, err)
 			}


 			d.color = getCapColor(d).rgb
 			

 			//d.color = getColor(d, ids);
 			//var i = ids.indexOf(d['RATEAREA'])

 			//console.log(d.loc, d.color)
 		})

 		dataset = data;
 		canvasLayer.drawLayer();


 })




 </script>
 </body>
 </html>
diff --git a/L.CanvasLayer.js b/L.CanvasLayer.js
 /*
  Generic  Canvas Layer for leaflet 0.7 and 1.0-rc, 
  copyright Stanislav Sumbera,  2016 , sumbera.com , license MIT
  originally created and motivated by L.CanvasOverlay  available here: https://gist.github.com/Sumbera/11114288  
  
 */

 // -- L.DomUtil.setTransform from leaflet 1.0.0 to work on 0.0.7
 //------------------------------------------------------------------------------
 L.DomUtil.setTransform = L.DomUtil.setTransform || function (el, offset, scale) {
    var pos = offset || new L.Point(0, 0);

    el.style[L.DomUtil.TRANSFORM] =
        (L.Browser.ie3d ?
            'translate(' + pos.x + 'px,' + pos.y + 'px)' :
            'translate3d(' + pos.x + 'px,' + pos.y + 'px,0)') +
        (scale ? ' scale(' + scale + ')' : '');
 };

 // -- support for both  0.0.7 and 1.0.0 rc2 leaflet
 L.CanvasLayer = (L.Layer ? L.Layer : L.Class).extend({ 
    // -- initialized is called on prototype 
    initialize: function (options) {
        this._map    = null;
        this._canvas = null;
        this._frame  = null;
        this._delegate = null;
        L.setOptions(this, options);
    },

    delegate :function(del){
        this._delegate = del;
        return this;
    },

    needRedraw: function () {
        if (!this._frame) {
            this._frame = L.Util.requestAnimFrame(this.drawLayer, this);
        }
        return this;
    },
    
    //-------------------------------------------------------------
    _onLayerDidResize: function (resizeEvent) {
        this._canvas.width = resizeEvent.newSize.x;
        this._canvas.height = resizeEvent.newSize.y;
    },
    //-------------------------------------------------------------
    _onLayerDidMove: function () {
        var topLeft = this._map.containerPointToLayerPoint([0, 0]);
        L.DomUtil.setPosition(this._canvas, topLeft);
        this.drawLayer();
    },
    //-------------------------------------------------------------
    getEvents: function () {
        var events = {
            resize: this._onLayerDidResize,
            moveend: this._onLayerDidMove
        };
        if (this._map.options.zoomAnimation && L.Browser.any3d) {
            events.zoomanim =  this._animateZoom;
        }

        return events;
    },
    //-------------------------------------------------------------
    onAdd: function (map) {
        this._map = map;
        this._canvas = L.DomUtil.create('canvas', 'leaflet-layer');
        this.tiles = {};

        var size = this._map.getSize();
        this._canvas.width = size.x;
        this._canvas.height = size.y;

        var animated = this._map.options.zoomAnimation && L.Browser.any3d;
        L.DomUtil.addClass(this._canvas, 'leaflet-zoom-' + (animated ? 'animated' : 'hide'));


        map._panes.overlayPane.appendChild(this._canvas);

        map.on(this.getEvents(),this);
        
        var del = this._delegate || this;
        del.onLayerDidMount && del.onLayerDidMount(); // -- callback
        this.needRedraw();
    },
    
    //-------------------------------------------------------------
    onRemove: function (map) {
        var del = this._delegate || this;
        del.onLayerWillUnmount && del.onLayerWillUnmount(); // -- callback
   

        map.getPanes().overlayPane.removeChild(this._canvas);
 
        map.off(this.getEvents(),this);
        
        this._canvas = null;

    },

    //------------------------------------------------------------
    addTo: function (map) {
        map.addLayer(this);
        return this;
    },
    // --------------------------------------------------------------------------------
    LatLonToMercator: function (latlon) {
        return {
            x: latlon.lng * 6378137 * Math.PI / 180,
            y: Math.log(Math.tan((90 + latlon.lat) * Math.PI / 360)) * 6378137
        };
    },

    //------------------------------------------------------------------------------
    drawLayer: function () {
        // -- todo make the viewInfo properties  flat objects.
        var size   = this._map.getSize();
        var bounds = this._map.getBounds();
        var zoom   = this._map.getZoom();

        var center = this.LatLonToMercator(this._map.getCenter());
        var corner = this.LatLonToMercator(this._map.containerPointToLatLng(this._map.getSize()));
   
        var del = this._delegate || this;
        del.onDrawLayer && del.onDrawLayer( {
                                                layer : this,
                                                canvas: this._canvas,
                                                bounds: bounds,
                                                size: size,
                                                zoom: zoom,
                                                center : center,
                                                corner : corner
                                            });
        this._frame = null;
    },
    // -- L.DomUtil.setTransform from leaflet 1.0.0 to work on 0.0.7
    //------------------------------------------------------------------------------
    _setTransform: function (el, offset, scale) {
        var pos = offset || new L.Point(0, 0);

        el.style[L.DomUtil.TRANSFORM] =
 			(L.Browser.ie3d ?
 				'translate(' + pos.x + 'px,' + pos.y + 'px)' :
 				'translate3d(' + pos.x + 'px,' + pos.y + 'px,0)') +
 			(scale ? ' scale(' + scale + ')' : '');
    },

    //------------------------------------------------------------------------------
    _animateZoom: function (e) {
        var scale = this._map.getZoomScale(e.zoom);
        // -- different calc of offset in leaflet 1.0.0 and 0.0.7 thanks for 1.0.0-rc2 calc @jduggan1 
        var offset = L.Layer ? this._map._latLngToNewLayerPoint(this._map.getBounds().getNorthWest(), e.zoom, e.center) :
                               this._map._getCenterOffset(e.center)._multiplyBy(-scale).subtract(this._map._getMapPanePos());

        L.DomUtil.setTransform(this._canvas, offset, scale);


    }
 });

 L.canvasLayer = function () {
    return new L.CanvasLayer();
 };
diff --git a/Parking_meters_sm.csv b/Parking_meters_sm.csv
diff --git a/thumbnail.png b/thumbnail.png
diff --git a/TileLayer.Grayscale.js b/TileLayer.Grayscale.js
 /*
 * L.TileLayer.Grayscale is a regular tilelayer with grayscale makeover.
 */

 L.TileLayer.Grayscale = L.TileLayer.extend({
 	options: {
 		enableCanvas: true,
 		quotaRed: 3,
 		quotaGreen: 4,
 		quotaBlue: 1,
 		quotaDividerTune: 0,
 		quotaDivider: function() {
 			return this.quotaRed + this.quotaGreen + this.quotaBlue + this.quotaDividerTune;
 		}
 	},

 	initialize: function (url, options) {
 		var canvasEl = document.createElement('canvas');
 		if( !(canvasEl.getContext && canvasEl.getContext('2d')) ) {
 			options.enableCanvas = false;
 		}

 		L.TileLayer.prototype.initialize.call(this, url, options);
 	},

 	_loadTile: function (tile, tilePoint) {
 		tile.setAttribute('crossorigin', 'anonymous');
 		L.TileLayer.prototype._loadTile.call(this, tile, tilePoint);
 	},

 	_tileOnLoad: function () {
 		if (this._layer.options.enableCanvas && !this.canvasContext) {
 			var canvas = document.createElement("canvas");
 			canvas.width = canvas.height = this._layer.options.tileSize;
 			this.canvasContext = canvas.getContext("2d");
 		}
 		var ctx = this.canvasContext;

 		if (ctx) {
 			this.onload  = null; // to prevent an infinite loop
 			ctx.drawImage(this, 0, 0);
 			var imgd = ctx.getImageData(0, 0, this._layer.options.tileSize, this._layer.options.tileSize);
 			var pix = imgd.data;
 			for (var i = 0, n = pix.length; i < n; i += 4) {
 				pix[i] = pix[i + 1] = pix[i + 2] = (this._layer.options.quotaRed * pix[i] + this._layer.options.quotaGreen * pix[i + 1] + this._layer.options.quotaBlue * pix[i + 2]) / this._layer.options.quotaDivider();
 			}
 			ctx.putImageData(imgd, 0, 0);
 			this.removeAttribute("crossorigin");
 			this.src = ctx.canvas.toDataURL();
 		}

 		L.TileLayer.prototype._tileOnLoad.call(this);
 	}
 });

 L.tileLayer.grayscale = function (url, options) {
 	return new L.TileLayer.Grayscale(url, options);
 };
	<!DOCTYPE html>
	<html>
	<head>
	<title>Map of parking meters in San Francisco, built with d3.js with leaflet.js</title>
	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />

	<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
	<script src="L.CanvasLayer.js"></script>
	<script src="http://d3js.org/d3.v4.min.js"></script>

	</head>
	<body>

	<h1>Leaflet + Canvas</h1>
	<div id="mapid" style="width: 800px; height: 600px"></div>


	<script>

	// initialize Leaflet map, and set initial zoom and coordinatess
	var mymap = L.map('mapid').setView([37.77139, -122.44486], 13);

	//-----------------------------------------------------------
	// NOTE: You'll need to get your own access Token from Mapbox
	// Dev account sign up is easy and free, with some dev Tokens included
	// https://www.mapbox.com/help/define-access-token/
	//-----------------------------------------------------------
	// add basemap layer
	L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
	attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
	maxZoom: 18,
	id: 'mapbox.light',
	accessToken: 'pk.eyJ1Ijoia3Jpc3RpbmhlbnJ5IiwiYSI6ImNqMWdxMjd5aDAwM28zM2xtaGV2azYwcjYifQ.NTJiOqcnhP-_3etf4aZYmQ'
	}).addTo(mymap);







	// drawing on canvas layer from https://github.com/Sumbera/gLayers.Leaflet
	//var data = [[37.77139, -122.44486]];
	var data = dataset;

	var canvasLayer = L.canvasLayer()
	.delegate(this) // -- if we do not inherit from L.CanvasLayer we can setup a delegate to receive events from L.CanvasLayer
	.addTo(mymap);

	function onDrawLayer(info) {
	//console.log("draw ")
	//console.log(info.zoom)
	var dotSize = 10/info.zoom
	var alpha = .9; //0.2 + (info.zoom/100)*3;
	//console.log(alpha)
	var ctx = info.canvas.getContext('2d');
	ctx.clearRect(0, 0, info.canvas.width, info.canvas.height);



	for (var i = 0; i < dataset.length; i++) {

	var d = dataset[i];
	//console.log(d)
	if (info.bounds.contains([d.loc[0], d.loc[1]])) {
	ctx.fillStyle = "rgba(" + d.color[0] + "," + d.color[1] + "," + d.color[2] + "," + alpha + ")";

	dot = info.layer._map.latLngToContainerPoint([d.loc[0], d.loc[1]]);

	ctx.beginPath();
	ctx.arc(dot.x, dot.y, dotSize, 0, Math.PI * 2);
	ctx.fill();
	ctx.closePath();
	}


	}
	};




	function strToLocation(s){
	var arr = s.slice(1,-1).split(',');
	arr[0] = parseFloat(arr[0]);
	arr[1] = parseFloat(arr[1]);
	return arr;
	}


	capColors = {
	"Grey": {"hex":'#999', "rgb": [153, 153, 153]},
	"Green": {"hex": '#FF0', "rgb": [31, 168, 31]},
	"Yellow": {"hex":'yellow', "rgb": [255, 255, 0]},
	"Black": {"hex": 'black', "rgb": [20, 20, 20]},
	"Red": {"hex": 'red', "rgb": [206, 8, 8]},
	"Brown": {"hex": 'brown', "rgb": [112, 86, 20]},
	"Purple": {"hex": 'purple', "rgb": [61, 20, 112]},
	"Undefined": {"hex": '#ccc', "rgb": (204, 204, 204)}

	}

	function getCapColor(d){
	return capColors[d['CAP_COLOR']];
	}

	// Get data
	var datafile = "Parking_meters_sm.csv";
	var dataset = [];
	d3.csv(datafile, function(data){

	ids = d3.map(data, function(d){return d['RATEAREA'];}).keys()
	console.log(ids);

	caps = d3.map(data, function(d){return d['CAP_COLOR']}).keys();
	console.log(caps)


	data.forEach(function(d) {

	d.loc = strToLocation(d['LOCATION']);

	try{
	d.LatLng = new L.LatLng(d.loc[0], d.loc[1]);
	} catch(err) {
	console.log('error', d.LatLng, err)
	}


	d.color = getCapColor(d).rgb


	//d.color = getColor(d, ids);
	//var i = ids.indexOf(d['RATEAREA'])

	//console.log(d.loc, d.color)
	})

	dataset = data;
	canvasLayer.drawLayer();


	})




	</script>
	</body>
	</html>
	/*
	Generic Canvas Layer for leaflet 0.7 and 1.0-rc,
	copyright Stanislav Sumbera, 2016 , sumbera.com , license MIT
	originally created and motivated by L.CanvasOverlay available here: https://gist.github.com/Sumbera/11114288

	*/

	// -- L.DomUtil.setTransform from leaflet 1.0.0 to work on 0.0.7
	//------------------------------------------------------------------------------
	L.DomUtil.setTransform = L.DomUtil.setTransform \|\| function (el, offset, scale) {
	var pos = offset \|\| new L.Point(0, 0);

	el.style[L.DomUtil.TRANSFORM] =
	(L.Browser.ie3d ?
	'translate(' + pos.x + 'px,' + pos.y + 'px)' :
	'translate3d(' + pos.x + 'px,' + pos.y + 'px,0)') +
	(scale ? ' scale(' + scale + ')' : '');
	};

	// -- support for both 0.0.7 and 1.0.0 rc2 leaflet
	L.CanvasLayer = (L.Layer ? L.Layer : L.Class).extend({
	// -- initialized is called on prototype
	initialize: function (options) {
	this._map = null;
	this._canvas = null;
	this._frame = null;
	this._delegate = null;
	L.setOptions(this, options);
	},

	delegate :function(del){
	this._delegate = del;
	return this;
	},

	needRedraw: function () {
	if (!this._frame) {
	this._frame = L.Util.requestAnimFrame(this.drawLayer, this);
	}
	return this;
	},

	//-------------------------------------------------------------
	_onLayerDidResize: function (resizeEvent) {
	this._canvas.width = resizeEvent.newSize.x;
	this._canvas.height = resizeEvent.newSize.y;
	},
	//-------------------------------------------------------------
	_onLayerDidMove: function () {
	var topLeft = this._map.containerPointToLayerPoint([0, 0]);
	L.DomUtil.setPosition(this._canvas, topLeft);
	this.drawLayer();
	},
	//-------------------------------------------------------------
	getEvents: function () {
	var events = {
	resize: this._onLayerDidResize,
	moveend: this._onLayerDidMove
	};
	if (this._map.options.zoomAnimation && L.Browser.any3d) {
	events.zoomanim = this._animateZoom;
	}

	return events;
	},
	//-------------------------------------------------------------
	onAdd: function (map) {
	this._map = map;
	this._canvas = L.DomUtil.create('canvas', 'leaflet-layer');
	this.tiles = {};

	var size = this._map.getSize();
	this._canvas.width = size.x;
	this._canvas.height = size.y;

	var animated = this._map.options.zoomAnimation && L.Browser.any3d;
	L.DomUtil.addClass(this._canvas, 'leaflet-zoom-' + (animated ? 'animated' : 'hide'));


	map._panes.overlayPane.appendChild(this._canvas);

	map.on(this.getEvents(),this);

	var del = this._delegate \|\| this;
	del.onLayerDidMount && del.onLayerDidMount(); // -- callback
	this.needRedraw();
	},

	//-------------------------------------------------------------
	onRemove: function (map) {
	var del = this._delegate \|\| this;
	del.onLayerWillUnmount && del.onLayerWillUnmount(); // -- callback


	map.getPanes().overlayPane.removeChild(this._canvas);

	map.off(this.getEvents(),this);

	this._canvas = null;

	},

	//------------------------------------------------------------
	addTo: function (map) {
	map.addLayer(this);
	return this;
	},
	// --------------------------------------------------------------------------------
	LatLonToMercator: function (latlon) {
	return {
	x: latlon.lng * 6378137 * Math.PI / 180,
	y: Math.log(Math.tan((90 + latlon.lat) * Math.PI / 360)) * 6378137
	};
	},

	//------------------------------------------------------------------------------
	drawLayer: function () {
	// -- todo make the viewInfo properties flat objects.
	var size = this._map.getSize();
	var bounds = this._map.getBounds();
	var zoom = this._map.getZoom();

	var center = this.LatLonToMercator(this._map.getCenter());
	var corner = this.LatLonToMercator(this._map.containerPointToLatLng(this._map.getSize()));

	var del = this._delegate \|\| this;
	del.onDrawLayer && del.onDrawLayer( {
	layer : this,
	canvas: this._canvas,
	bounds: bounds,
	size: size,
	zoom: zoom,
	center : center,
	corner : corner
	});
	this._frame = null;
	},
	// -- L.DomUtil.setTransform from leaflet 1.0.0 to work on 0.0.7
	//------------------------------------------------------------------------------
	_setTransform: function (el, offset, scale) {
	var pos = offset \|\| new L.Point(0, 0);

	el.style[L.DomUtil.TRANSFORM] =
	(L.Browser.ie3d ?
	'translate(' + pos.x + 'px,' + pos.y + 'px)' :
	'translate3d(' + pos.x + 'px,' + pos.y + 'px,0)') +
	(scale ? ' scale(' + scale + ')' : '');
	},

	//------------------------------------------------------------------------------
	_animateZoom: function (e) {
	var scale = this._map.getZoomScale(e.zoom);
	// -- different calc of offset in leaflet 1.0.0 and 0.0.7 thanks for 1.0.0-rc2 calc @jduggan1
	var offset = L.Layer ? this._map._latLngToNewLayerPoint(this._map.getBounds().getNorthWest(), e.zoom, e.center) :
	this._map._getCenterOffset(e.center)._multiplyBy(-scale).subtract(this._map._getMapPanePos());

	L.DomUtil.setTransform(this._canvas, offset, scale);


	}
	});

	L.canvasLayer = function () {
	return new L.CanvasLayer();
	};
	/*
	* L.TileLayer.Grayscale is a regular tilelayer with grayscale makeover.
	*/

	L.TileLayer.Grayscale = L.TileLayer.extend({
	options: {
	enableCanvas: true,
	quotaRed: 3,
	quotaGreen: 4,
	quotaBlue: 1,
	quotaDividerTune: 0,
	quotaDivider: function() {
	return this.quotaRed + this.quotaGreen + this.quotaBlue + this.quotaDividerTune;
	}
	},

	initialize: function (url, options) {
	var canvasEl = document.createElement('canvas');
	if( !(canvasEl.getContext && canvasEl.getContext('2d')) ) {
	options.enableCanvas = false;
	}

	L.TileLayer.prototype.initialize.call(this, url, options);
	},

	_loadTile: function (tile, tilePoint) {
	tile.setAttribute('crossorigin', 'anonymous');
	L.TileLayer.prototype._loadTile.call(this, tile, tilePoint);
	},

	_tileOnLoad: function () {
	if (this._layer.options.enableCanvas && !this.canvasContext) {
	var canvas = document.createElement("canvas");
	canvas.width = canvas.height = this._layer.options.tileSize;
	this.canvasContext = canvas.getContext("2d");
	}
	var ctx = this.canvasContext;

	if (ctx) {
	this.onload = null; // to prevent an infinite loop
	ctx.drawImage(this, 0, 0);
	var imgd = ctx.getImageData(0, 0, this._layer.options.tileSize, this._layer.options.tileSize);
	var pix = imgd.data;
	for (var i = 0, n = pix.length; i < n; i += 4) {
	pix[i] = pix[i + 1] = pix[i + 2] = (this._layer.options.quotaRed * pix[i] + this._layer.options.quotaGreen * pix[i + 1] + this._layer.options.quotaBlue * pix[i + 2]) / this._layer.options.quotaDivider();
	}
	ctx.putImageData(imgd, 0, 0);
	this.removeAttribute("crossorigin");
	this.src = ctx.canvas.toDataURL();
	}

	L.TileLayer.prototype._tileOnLoad.call(this);
	}
	});

	L.tileLayer.grayscale = function (url, options) {
	return new L.TileLayer.Grayscale(url, options);
	};