search

AlexLavoie42 / Nuxt-Mapbox

Elegant Mapbox integration with Nuxt
81 stars 11 forks source link

Custom Marker not correctly position when zoom in zoom out #66

Closed AIRGG closed 9 months ago

AIRGG commented 10 months ago

Hello, I'm using your example playground custom marker TestMarker.vue I only change the backround image, but why when I try to zoom in & zoom out, it change position not correctly

I'm use same lat long for default marker & custom marker before zoom in out

this is when I try to zoom in out, the custom marker change the position not correct, not like default marker After zoom in out

I don't know why they are different, I have try to fix from few reference but still not working, can you help me please? Thanks https://github.com/mapbox/mapbox-gl-js/issues/4048 https://github.com/mapbox/mapbox-gl-js/issues/9086

AlexLavoie42 commented 10 months ago

Could you please create a reproduction by creating a fork of the playground and sharing a link?

The default marker has some extra reactivity logic so if the latlng is changing somehow I could see this happening.

AIRGG commented 10 months ago

Hello, thank you for replying, I try to fork your playground but I don't know why TestMarker.vue is not working, I'm not familiar with that, here if you want to take a look https://stackblitz.com/edit/github-5xk4pi?file=playground%2Fpages%2Findex.vue

so for alternative I create the minimum reproduction in here https://github.com/AIRGG/nuxt3-mapbox-issue-66

for the first load as you can see, default marker & custom marker have same lat long but the custom marker is miss aligned

then I do the scenario full zoom in first, drag the 'default marker' to make it aligned with 'custom marker' then I do the zoom out, then you can see the custom marker is miss aligned

make full zoom in first & make 2 marker aligned when zoom out

is there anything wrong? because when I make 2 'default marker' it perfect aligned when zoom in zoom out

AlexLavoie42 commented 9 months ago

I've done some testing, and I can not get the 2 markers to ever align. The only way I can manage to have them align is if I drag the marker, so I will assume that is what you are doing here.

The issue is caused by the new marker image having a different anchor from the default. You can verify this by removing the custom image, and seeing that the 2 markers are aligned at all times.

If you set anchor to bottom like so, the markers will be aligned for the most part right away. image image image