1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
---
layout: tutorial_frame
title: CanvasCircles
---
<script type='text/javascript'>
var map = L.map('map', {
center: [0, 0],
zoom: 0
});
L.GridLayer.CanvasCircles = L.GridLayer.extend({
createTile: function (coords) {
var tile = document.createElement('canvas');
var tileSize = this.getTileSize();
tile.setAttribute('width', tileSize.x);
tile.setAttribute('height', tileSize.y);
var ctx = tile.getContext('2d');
// Draw whatever is needed in the canvas context
// For example, circles which get bigger as we zoom in
ctx.arc(tileSize.x/2, tileSize.x/2, 4 + coords.z*4, 0, 2*Math.PI, false);
ctx.fill();
return tile;
}
});
L.gridLayer.canvasCircles = function(opts) {
return new L.GridLayer.CanvasCircles(opts);
};
map.addLayer( L.gridLayer.canvasCircles() );
</script>
|
