In my Nuxt app I'm using the very nice (albeit scarcely maintained) vue-mapbox library. I like its declarative style that is idiomatic for Vue.
I noted that your markers seem to be a bit off and get more accurate as the zoom level increases. Turns out that the marker image is positioned above the coordinates in an unexpected way: the image's center-center is aligned with the given coordinates. However one would expect the image's bottom-center to be aligned with the given coordinates. You can add an offset of e.g. [0, -20] to alleviate this problem. HTH!
Thank you for sharing!
In my Nuxt app I'm using the very nice (albeit scarcely maintained) vue-mapbox library. I like its declarative style that is idiomatic for Vue.
I noted that your markers seem to be a bit off and get more accurate as the zoom level increases. Turns out that the marker image is positioned above the coordinates in an unexpected way: the image's center-center is aligned with the given coordinates. However one would expect the image's bottom-center to be aligned with the given coordinates. You can add an
offsetof e.g.[0, -20]to alleviate this problem. HTH!Sorry for the late reply. Today I finally found the time to look into it.
Well, your solution fixed the problem perfectly! Thanks! 😃
Some devs on Slack recommend setting the anchor to a different value, but in my case, it didn't help.
Changelog: gist.github.com/mornir/9e85e65caba...