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:
xxxxxxxxxx
<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="https://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.2/leaflet.min.js"></script>
<script src="L.CanvasOverlay.js"></script>
<script src="https://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("https://{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>
Modified http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js to a secure url
Modified http://www.sumbera.com/gist/data.js to a secure url
https://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js
https://www.sumbera.com/gist/data.js