Worldmap marker icon alignment

General
1

Built-in markers seems to be aligned so that they point to their location, but is there a way of specifying which part of an icon should be at the precise location of the marker?

Some image icons might need to be centred at the location, but others might need to have the bottom middle of the image at the location. As far as I can tell, if you provide an image as a marker, the default positioning has the top left corner at the location.

I was looking for something like an iconAlign or iconPosition property, which would have a value like bottom (meaning bottom middle) or top right.

Does such a thing exist?

Thanks!

2

UPDATE:

I've managed to do this using left and right CSS properties for .leaflet-marker-icon but this only works because my icons are all the same size. And because I'm using worldmap in a dashboard, it's a bit of a palaver to add the CSS. Perhaps there's an easier way, but here's what I've got at the moment, which I've included in a dashboard template node that is "Added to site <head> section":

<script type="text/javascript">
(function () {
const doc = document.querySelector(`iframe`).contentDocument;
const style = doc.createElement("style");
style.textContent = `.leaflet-marker-icon {
left: -11.5px;
top: -32px;
}`;
doc.head.append(style);
})();
</script>

My icons are 23px wide and 32px high, and the "point" is at the bottom in the middle. The closure is to avoid const clashes.

UPDATED UPDATE:

More reliable version, which makes sure the IFRAME is definitely there before continuing:

(() => {
    const interval = setInterval(() => {
        const iframe = document.querySelector("iframe");
        if (iframe) {
            clearInterval(interval);
            const doc = iframe.contentDocument;
            const style = doc.createElement("style");
            // Icons are 23px wide and 32px high, so shift it left by half the width and up by the full height
            style.textContent = ".leaflet-marker-icon { left: -11.5px; top: -32px; }";
            doc.head.append(style);
        }
    }, 500);
})();
3

no - the closest is msg.payload.iconSize where you can set the size of the icon in pixels - but a) it assumes it is square and b) assumes the middle to be the location.

4

That's interesting because (a) it let me use "23x32" as the value for iconSize, and (b) it seems to be using the top left hand corner as the location.

5

hah - yes - not enough error checking in the code :slight_smile: ... If invalid (not a number) it will just go to 0,0

6

If I don't specify an iconSize, it stretches my image to be 32×32 pixels. Does a zero iconSize mean that the icon won't be (re)sized? Is that what I should use instead of the string I've got, then?

UPDATE:

After a little experimentation...

0 means no icon is shown!

null means the icon is stretched to 32×32 pixels.

"" (any string, I guess) means the icon is not (re)sized.

7

should just be a single number eg 64 or 32

8

Thanks, got it. But to avoid my image being resized (it's not square), I'll have to use a string for the time being.

9

Another hack would be to convert your images to 64x64 so the middle is where you need it to be..
eg using imagemagik

convert input.png -background none -gravity North -extent 64x64 output.png
10

Thanks! I did consider that but hadn't got as far as trying to work out the combination of switches. Much appreciated. :slight_smile:

11

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.