Markers drift / move when zooming out

[hydrandt]

I have already resolved this problem several times, and after a few months I always run into it again: Under some circumstances, when you put markers on the map, their position is good initially / when zoomed in, but they drift off as you zoom out, and are pointing to a completely different location.

Why is that? Is it because the offset that is passed to the marker is in pixels?

[hydrandt]

1. setting the width which is the same as the actual width of the marker you are using
2. fiddling with offset

resolves the drifting marker problem

unfortunately I don't understand why the value of the offset is what it is

I have a svg marker of width 30px, which renders with height of 46.2167. The offset is [0, 12]

<Marker
  key={specimen.id}
  offset={[0, 12]}
  width={30}
  anchor={[specimen.coordinates?.x, specimen.coordinates?.y]}
>
  <TreeMapIcon size={30} />
</Marker>