Custom layers: how do I refresh only the custom layer?
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 12.4k
- Forks
- 2.4k
- PR merge metrics
- No merged PRs in 30d
Description
mapbox-gl-js version:0.53.1
Question
When using a custom layer with a webgl shader, I implemented the render method of the layer object:
class CustomLayer {
render(gl, matrix) {
/** drawing to the context **/
// this rerenders all the layers
this.map.triggerRepaint();
}
}
I can see using the Chrome performance tool that all the layers are redrawing.
https://docs.mapbox.com/mapbox-gl-js/example/add-3d-model/

For an animated custom layer on top of a static map, redrawing all layers at each frame seems aggressive. How could I refresh only the custom layer?
My use case: I coded a shader that runs at 60fps 4% CPU outside of Mapbox with low GPU activity, but I end up having to slow it down to only 15fps, 40% CPU when used as a layer in Mapbox due to the map under being fairly complex.
Links to related documentation
I mostly use this section of the documentation: https://docs.mapbox.com/mapbox-gl-js/example/custom-style-layer/
Thank you!
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 with the custom-style-layer and add-3d-model examples, then trace the CustomLayer.render call and this.map.triggerRepaint() behavior described in the issue. Done means establishing whether selective custom-layer refresh is supported and documenting the appropriate behavior or required API change.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- computer-graphics, frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100