Center symbol with modifier fields while maintaining consistent size

[slutske22]

Hi Mans,

Thank you for this wonderful library. I am struggling to understand the documentation, and some of the methods surrounding getting consistent symbol sizes, while keeping the main symbol centered. It seems that when adding modifier fields, the central symbol is pushed over to the side:

One thing that does indeed solve this is using the square: true property in the style object:

However, if 2 symbols are side by side, and the only difference is the modifier field, using this property results in inconsistent sizing in say, a leaflet map:

I have been digging through the docs, and the methods getAnchor and getOctagonalAnchor seem like they'd return some information I can use to manually offset the center of the image without needing to use square: true, but I really am not understanding what these values return.

Here is a codesandbox demonstrating these issues in leaflet. There are a few variations there.

How can one use the getAnchor or getOctagonalAnchor methods to get an actual pixel offset to center the symbol in the center of a container which wraps the svg/img/canvas element?

[spatialillusions]

Hi,

If you check under examples there are two examples, one for divIcons in Leaflet and one for imageIcons.

In your case, what you want to do is something like this:

const marker2 = L.marker(point2, {
  icon: L.divIcon({
    html: symbol2.asSVG(),
    iconSize: [symbol2.getSize().width, symbol2.getSize().height],
    iconAnchor: [symbol2.getOctagonAnchor().x, symbol2.getOctagonAnchor().y],
    className: "mil-marker"
  })
}).addTo(map);

Thanks for making a codesandbox!