Support layers that generate canvases
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 380
- Forks
- 140
- PR merge metrics
- No merged PRs in 30d
Description
I followed the instructions on http://leafletjs.com/examples/extending/extending-2-layers.html to make my own canvas layer. Sadly this layer does not get drawn when creating the image. It would be nice if this kind of layers could be drawn too.
```javascript
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.beginPath();
ctx.arc(tileSize.x/2, tileSize.x/2, 4 + coords.z*4, 0, 2*Math.PI, false);
ctx.fill();
return tile;
}
});
```
Here is a fiddle:
https://jsfiddle.net/y0d7jpn4/2/
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by locating the image-generation path that handles Leaflet layers and compare it with the canvas layer example in the issue and linked fiddle. Trace how returned canvas tiles are discovered and rendered, then verify that a custom L.GridLayer.Canvas layer appears in the generated image without breaking existing layer types.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100