mapbox / mapbox/leaflet-image

Support layers that generate canvases

Open
#102 0 comments 0 reactions 0 assignees View on GitHub

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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.