mapbox / mapbox/mapbox-gl-draw

Map rendering after 【draw.add】 will cause layer flicker

Open
#1,037 0 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

auto-triaged bug
Dominant language
JavaScript
Stars
1.1k
Forks
612
Avg merge
8d 9h
Merged PRs (30d)
5

Description

hello,mapbox-gl-draw developer.

In the process of developing the drawing function, I used the method `draw.add`. After using the button to trigger the `add` function, click on the map with the mouse, and the layer will flash quickly.
I checked the source code and found that the render method in `src/render.js` performed `setData` twice.
I have a little question about this, why do we need to use two sources to control the rendering process of editing?
Finally, I still hope that there can be a solution, so that the layer does not flicker.
(Sorry, my English is not very good, but I still hope to get your reply, thank you)

click this =>[codepen demo](https://codepen.io/wuhaoyuan/pen/MWbrGWb)

Steps to reproduce the problem:

1. Click the add button to add a surface layer A
2. Wait a while, after confirming that the layer is loaded, move the mouse to the map, click on the map to trigger the render event of the map
3. You can see that layer A flashes quickly

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 with src/render.js and reproduce the issue using the linked CodePen and the listed draw.add steps. Inspect the two setData calls during the map render event; done means the added layer no longer visibly flickers after the first map click.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.