React dnd with react-map-gl v7

[mintothejoo]

Hi! Thanks for the great work on this project! I've been an avid user and had some questions with the new updates!

Pre-v7 of react-map-gl I was able to apply react-dnd's draggable component like so:

const [, drag, preview] = useDrag<
  DragItem,
  void,
  { handlerId: Identifier | null }
>({
...
});

<div
  ref={drag}
>
  <MapMarker
    id={id}
    markerInfo={markerInfo}
    height={height}
    width={width}
  />
</div>

This makes the marker draggable but different from the actual draggable properties we have in this library. Basically I made it draggable outside of the map into another component using react-dnd.

This worked before the v7 upgrade and was trying to diagnose what the change was.
After some comparison, seems like the way divs are rendered are different:
Before -> had class: "overlays" and each marker was rendered under this div.

Currently -> Rendered under a class="mapbox-gl-canvas-container" and it seems to lose the draggable="true" properties as it renders

I'm assuming it's something to do with the new way markers are being rendered with v6, but can't seem to pinpoint what the issue is 🤔

Anyone familiar with this file https://github.com/visgl/react-map-gl/blob/master/src/components/marker.ts able to help out? Would appreciate the help loads!!!

Let me know if there's also more info needed, don't know what the conventions are with writing these posts

[Pessimistress]

In v7 react-map-gl no longer implements its own marker. The Marker component just creates a native Marker instance under the hood.

I think your best bet is to render your own draggable component outside of the map like so:

<>
  <Map />
  <MyDraggableMarker />
</>

And you can convert between screen coordinates and geo coordinates by calling MapRef.project and MapRef.unproject.

[mintothejoo]

Thanks! I've used this method and the issue here is every map interaction (zoom / move) I have to update the x,y coordinates for each marker, because it's React I have to store it in some kind of state for each marker to update the x,y positioning and this slows down the app way too much.

I guess there's no easy way out of this right? 😅