visgl / react-map-gl

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

[Bug] draw polygon don't work with projection globe #2091

Open 383bd03d opened 1 year ago

383bd03d commented 1 year ago

Description

Unexpected behaviour when projection is globe - polygon is not closed by clicking on vertex or same issue after flyTo animation

Expected Behavior

No response

Steps to Reproduce

https://visgl.github.io/react-map-gl/examples/draw-polygon with projection "globe"

Environment

Logs

No response

383bd03d commented 1 year ago

It starts working after a bit updating useControl:

export default function DrawControl(props: DrawControlProps) {
  useControl<MapboxDraw>(
    () => new MapboxDraw(props),
    ({map}: {map: MapRef}) => {
      map.on('draw.create', props.onCreate);
      map.on('draw.update', props.onUpdate);
      map.on('draw.delete', props.onDelete);
      map.getMap().setProjection("globe");
    },
    ({map}: {map: MapRef}) => {
      map.off('draw.create', props.onCreate);
      map.off('draw.update', props.onUpdate);
      map.off('draw.delete', props.onDelete);
    },
    {
      position: props.position
    }
  );

  return null;
}

by:

map.getMap().setProjection("globe");

But still don't work if use flyTo before start draw polygon

383bd03d commented 1 year ago

I think the error occurs when changing the projection from zoom 0 to the moment when the map becomes flat

383bd03d commented 1 year ago

Also this error does not occur when using pure mapbox gl

Pessimistress commented 1 year ago

mapbox-gl switches between globe and mercator projection under the hood based on zoom level. Unfortunately this behavior is not exposed to third party libraries. The same applies to a lot of mapbox's recent features including terrain, globe, etc. I can try to match it by looking into their source code, but there is no guarantee that it will continue to work with their future releases. You can find a related discussion here.

383bd03d commented 1 year ago

This bug related to react-map-gl, not to mapbox-gl, because "Also this error does not occur when using pure mapbox gl"

Pessimistress commented 1 year ago

Let me clarify. Yes, I understand that this is a problem in react-map-gl. It's not easy to fix because mapbox-gl does not expose any API that notifies react-map-gl when it switches projection modes under the hood.