search

visgl / react-map-gl

React friendly API wrapper around MapboxGL JS
http://visgl.github.io/react-map-gl/
Other
7.78k stars 1.35k forks source link

Polygon positions do not update on zoom in/out. #1004

Closed JeffreyMcJeffFace closed 4 years ago

JeffreyMcJeffFace commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

Do you have a code sandbox that reproduces this issue?

JeffreyMcJeffFace commented 4 years ago

Sandbox here:

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

Enter your token in app.js

Pessimistress commented 4 years ago

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

JeffreyMcJeffFace commented 4 years ago

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 commented 4 years ago

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

JeffreyMcJeffFace commented 4 years ago

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.

chrome project

Pessimistress commented 4 years ago

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

Pessimistress commented 4 years ago

Published react-map-gl-draw@0.17.2. Website updated.

JeffreyMcJeffFace commented 4 years ago

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

Many thanks!