React-map-gl: Polygon positions do not update on zoom in/out.

[zoenberger]

Expected behavior:

When a polygon is drawn on the map, I expect it to move and resize to maintain the same coordinates when the map is zoomed in or out.

Current behavior:

The drawn polygons maintain their location/size on the viewport as I zoom in/out using mouse scrollwheel. Moving the mouse on the viewport (i.e., drag map) will cause the polygons to update location.

This behavior can actually be observed on the example page:
[https://uber.github.io/react-map-gl/#/Examples/draw-polygon]

Note: Using NavigationControl to zoom in/out does cause map to update polygon positions appropriately.

On my current project, moving the mouse alone will NOT cause polygons to update. I have to drag map or hover on a marker, and this seems to force the polygons to update. (Trying to figure out how my implementation is different than the example app.)

[psmaAaron]

We're having the same issue.

I think it's partially to do witht eh rendered polygons being drawn as a SVG layer over the top of the map, ranter than being intergrated with Mapbox GL JS .

[Pessimistress]

Do you have a code sandbox that reproduces this issue?

[zoenberger]

Sandbox here:

https://codesandbox.io/s/reactmapgldraw-polygonreposition-ih25u

Enter your token in app.js

[Pessimistress]

I cannot reproduce this. What browser are you using? Do you see any console errors?

[zoenberger]

The behavior appears to be the same for me in:
Firefox 72.0.2
Chrome 79.0.3945.130
Edge 44.18362.449.0

I did not see any error/warnings in the console with any browser.

All three browsers appeared to behave with issue described when visiting: https://uber.github.io/react-map-gl/#/Examples/draw-polygon

[Pessimistress]

That is very strange. Can you record a GIF of what you see on the website example?

[zoenberger]

Two attachments:

chrome.gif is the react-map-gl demo site. Note that polygon does not reset until mouse moves.

the project.gif is my current project. The polygon does not reset until I drag map or hover on a marker.

[Pessimistress]

The issue is in react-map-gl-draw's Editor component. @xintongxia will put up a fix.

[Pessimistress]

Published [email protected]. Website updated.

[zoenberger]

Just updated my current project to 0.17.2 and behavior is corrected. Website looks good also.

Many thanks!