38 lines
838 B
Markdown
38 lines
838 B
Markdown
|
---
|
||
|
|
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>
|