search

mariusandra / pigeon-maps

ReactJS Maps without external dependencies
https://pigeon-maps.js.org/
MIT License
3.43k stars 142 forks source link

Markers drift / move when zooming out #195

Open hydrandt opened 9 months ago

hydrandt commented 9 months ago

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

image