Mapbox-gl-js: Make markers anchored at their center by default

[jensstalder]

https://www.mapbox.com/mapbox-gl-js/example/custom-marker-icons/

The images are anchored on the top left!!!!????

That makes them unusable.

If they were centered it would make 100000% more sense.

[tmcw]

Hello!

Custom marker icons can be anchored any number of ways by using margins. This example doesn't do any modification of the anchor, and you're right - they would make more sense if they were anchored at the center. I'll make a note to fix the example.

Thanks for the issue - in the future, please spare the extra zeros, exclamation marks, and question marks: we can understand the intent of the issues without extra hyperbole.

• Tom

[jensstalder]

^^ cool

So your saying something like that?

el.style.marginLeft = '-'+(imagewidth/2)+'px';

[tmcw]

@jensstalder yes, exactly. Setting negative margins will shift the anchor point of the marker.

[jensstalder]

ok cool.

[mourner]

Also note that there will be an offset option in the next release: https://github.com/mapbox/mapbox-gl-js/pull/2885

[1ec5]

I think this is an issue with the library, not the example. I think the default should be at the center, for consistency with symbols. The proper anchor of course depends on the image content (since a pushpin could be drawn to face in any direction), so #2885 is a welcome addition. But the most common marker images would either have a natural anchor at the center or the bottom-center, not the top-left, and I think it’s important for the various APIs for implementing a marker to have consistent behavior.

[andrewharvey]

I think this is an issue with the library, not the example. I think the default should be at the center, for consistency with symbols. The proper anchor of course depends on the image content (since a pushpin could be drawn to face in any direction), so #2885 is a welcome addition. But the most common marker images would either have a natural anchor at the center or the bottom-center, not the top-left, and I think it’s important for the various APIs for implementing a marker to have consistent behavior.

Spot on @1ec5. I agree.

One case for defaulting to the center is the userLocation marker proposed in #4479. In that PR if someone wants to change the marker dot style, eg. make it bigger or smaller, it's quite easy to override the default CSS, however the offset is hardcoded at https://github.com/mapbox/mapbox-gl-js/pull/4479/files#diff-8c498cf163efa60ad84199c531ab7c5aR283.

I understand that a workaround is to use a margin property in the marker css, but it just doesn't feel as simple or clean as defaulting to the center.