Skip to content

Instantly share code, notes, and snippets.

@Sumbera

Sumbera/L.CanvasOverlay.js

Last active February 3, 2023 09:47
Show Gist options
  • Star 26 You must be signed in to star a gist
  • Fork 6 You must be signed in to fork a gist
  • Save Sumbera/11114288 to your computer and use it in GitHub Desktop.
Save Sumbera/11114288 to your computer and use it in GitHub Desktop.
Download ZIP
Leaflet Canvas Overlay
Raw
README.md

UPDATE July 2016 , moved and updated to here: UPDATE July 2016 , moved and updated to here: https://github.com/Sumbera/gLayers.Leaflet

Leaflet Full view Canvas Overlay - straightforward full screen canvas overlay that calls custom user function for drawing. Mostly extracted from here added resize and few other parameters for callback Compare to same data SVG rendering here

	//Example:
	L.canvasOverlay()
	   .params({data: points})     // optional add any custom data that will be passed to draw function
           .drawing(drawingOnCanvas)   // set drawing function
           .addTo(leafletMap);         // add this layer to leaflet map
            

	//Custom drawing function:
		function drawingOnCanvas(canvasOverlay, params) {
	            var ctx = params.canvas.getContext('2d');
	            params.options.data.map(function (d, i) {
	              // canvas drawing goes here
	            });
	        };
	        
	// parameters passed to custom draw function :
	 {
                                canvas   : <canvas>,
                                bounds   : <bounds in WGS84>
                                size     : <view size>,
                                zoomScale: <zoom scale is  1/resolution>,
                                zoom     : <current zoom>,
                                options  : <options passed >
             };

Other useful full view Leaflet Canvas sources here:

Raw
index.html
<!doctype html>
<html>
<head>
<title>Many Points with leaflet Canvas</title>
<meta charset="utf-8">
<style>
#map {
position: absolute;
height: 100%;
width: 100%;
background-color: #333;
}
</style>
</head>
<body>
<div id="map"></div>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
<script src="L.CanvasOverlay.js"></script>
<script src="http://www.sumbera.com/gist/data.js" charset="utf-8"></script>
<script>
var points = data; // data loaded from data.js
var leafletMap = L.map('map').setView([50.00, 14.44], 9);
L.tileLayer("http://{s}.sm.mapstack.stamen.com/(toner-lite,$fff[difference],$fff[@23],$fff[hsl-saturation@20])/{z}/{x}/{y}.png")
.addTo(leafletMap);
L.canvasOverlay()
.drawing(drawingOnCanvas)
.addTo(leafletMap);
function drawingOnCanvas(canvasOverlay, params) {
var ctx = params.canvas.getContext('2d');
ctx.clearRect(0, 0, params.canvas.width, params.canvas.height);
ctx.fillStyle = "rgba(255,116,0, 0.2)";
for (var i = 0; i < data.length; i++) {
var d = data[i];
if (params.bounds.contains([d[0], d[1]])) {
dot = canvasOverlay._map.latLngToContainerPoint([d[0], d[1]]);
ctx.beginPath();
ctx.arc(dot.x, dot.y, 3, 0, Math.PI * 2);
ctx.fill();
ctx.closePath();
}
}
};
</script>
</body>
</html>
Raw
L.CanvasOverlay.js
/*
UPDATE July 2016 , moved and updated to here: https://github.com/Sumbera/gLayers.Leaflet
Generic Canvas Overlay for leaflet,
Stanislav Sumbera, April , 2014
- added userDrawFunc that is called when Canvas need to be redrawn
- added few useful params fro userDrawFunc callback
- fixed resize map bug
inspired & portions taken from : https://github.com/Leaflet/Leaflet.heat
License: MIT
*/
L.CanvasOverlay = L.Class.extend({
initialize: function (userDrawFunc, options) {
this._userDrawFunc = userDrawFunc;
L.setOptions(this, options);
},
drawing: function (userDrawFunc) {
this._userDrawFunc = userDrawFunc;
return this;
},
params:function(options){
L.setOptions(this, options);
return this;
},
canvas: function () {
return this._canvas;
},
redraw: function () {
if (!this._frame) {
this._frame = L.Util.requestAnimFrame(this._redraw, this);
}
return this;
},
onAdd: function (map) {
this._map = map;
this._canvas = L.DomUtil.create('canvas', 'leaflet-heatmap-layer');
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('moveend', this._reset, this);
map.on('resize', this._resize, this);
if (map.options.zoomAnimation && L.Browser.any3d) {
map.on('zoomanim', this._animateZoom, this);
}
this._reset();
},
onRemove: function (map) {
map.getPanes().overlayPane.removeChild(this._canvas);
map.off('moveend', this._reset, this);
map.off('resize', this._resize, this);
if (map.options.zoomAnimation) {
map.off('zoomanim', this._animateZoom, this);
}
this_canvas = null;
},
addTo: function (map) {
map.addLayer(this);
return this;
},
_resize: function (resizeEvent) {
this._canvas.width = resizeEvent.newSize.x;
this._canvas.height = resizeEvent.newSize.y;
},
_reset: function () {
var topLeft = this._map.containerPointToLayerPoint([0, 0]);
L.DomUtil.setPosition(this._canvas, topLeft);
this._redraw();
},
_redraw: function () {
var size = this._map.getSize();
var bounds = this._map.getBounds();
var zoomScale = (size.x * 180) / (20037508.34 * (bounds.getEast() - bounds.getWest())); // resolution = 1/zoomScale
var zoom = this._map.getZoom();
// console.time('process');
if (this._userDrawFunc) {
this._userDrawFunc(this,
{
canvas :this._canvas,
bounds : bounds,
size : size,
zoomScale: zoomScale,
zoom : zoom,
options: this.options
});
}
// console.timeEnd('process');
this._frame = null;
},
_animateZoom: function (e) {
var scale = this._map.getZoomScale(e.zoom),
offset = this._map._getCenterOffset(e.center)._multiplyBy(-scale).subtract(this._map._getMapPanePos());
this._canvas.style[L.DomUtil.TRANSFORM] = L.DomUtil.getTranslateString(offset) + ' scale(' + scale + ')';
}
});
L.canvasOverlay = function (userDrawFunc, options) {
return new L.CanvasOverlay(userDrawFunc, options);
};
Raw
LICENSE.TXT
L.CanvasOverlay.js : http://blog.sumbera.com/2014/04/20/leaflet-canvas/
Licensed under MIT
Copyright (c) 2014 Stanislav Sumbera,
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files
(the "Software"), to deal in the Software without restriction, including without limitation the rights to use,
copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software,
and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE
OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
---------------------------------------------------------------------------------------------------------------------------------------
L.CanvasOverlay.js is using portions, modifications and ideas from Leaflet.heat
https://github.com/Leaflet/Leaflet.heat
Licensed under:
-------------------------------------------------------------
Copyright (c) 2014, Vladimir Agafonkin
All rights reserved.
Redistribution and use in source and binary forms, with or without modification, are
permitted provided that the following conditions are met:
1. Redistributions of source code must retain the above copyright notice, this list of
conditions and the following disclaimer.
2. Redistributions in binary form must reproduce the above copyright notice, this list
of conditions and the following disclaimer in the documentation and/or other materials
provided with the distribution.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION)
HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR
TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
@5chdn
Copy link

5chdn commented May 2, 2016 •
edited

Hi Stanislav.

Is it possible you set this up on github?

I use this class quite frequent and now after upgrading leaflet to v1.0.0rc1 i ran into an issue. I'm getting a TypeError: callback is undefined in leaflet-src.js:3293 (which is here).

Here's a minimal jsfiddle: 6mw0wbh4.

Strange enough, I'm getting TypeError: obj is undefined in leaflet-src.js:90 (which is here) after removing the map.setView() line.

JSFiddle: hy2ghxqy.

I'm undecided whether this is an issue with leaflet or with the canvas overlay class. Could you help me figuring out what's causing this?

Cheers
5chdn

@5chdn
Copy link

5chdn commented May 3, 2016

Ok, the issue with leaflet 1.0 is the layer has to extend L.Layer not L.Class. Patched it here.

@Sumbera
Copy link
Author

Sumbera commented May 18, 2016

I think you can leave L.Class and only bring there methods v 1.0 requires, in this way it will be compatible with both 0.7 and 1.0, I tried this on other example here http://bl.ocks.org/sumbera/7e8e57368175a1433791

@Sumbera
Copy link
Author

Sumbera commented Jul 14, 2016 •
edited

new refactored version with breaking changes that works on both Leaflets 0.7 and 1.0-rc available here : UPDATE July 2016 , moved and updated to here: https://github.com/Sumbera/gLayers.Leaflet

@ilblog
Copy link

ilblog commented Jul 31, 2017

BUG: this_canvas = null should be this._canvas

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment