# Worldmap marker icon alignment

**URL:** <https://discourse.nodered.org/t/worldmap-marker-icon-alignment/74156>\
**Category:** General\
**Created:** [25 January 2023 06:20 UTC](https://discourse.nodered.org/t/worldmap-marker-icon-alignment/74156 "2023-01-25T06:20:42Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![rmwiseman](https://avatars.discourse-cdn.com/v4/letter/r/e47c2d/32.png) [@rmwiseman](https://discourse.nodered.org/u/rmwiseman)\
**Post date:** [25 January 2023 06:20 UTC](https://discourse.nodered.org/t/worldmap-marker-icon-alignment/74156/1 "2023-01-25T06:20:42Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![rmwiseman](https://avatars.discourse-cdn.com/v4/letter/r/e47c2d/32.png) [@rmwiseman](https://discourse.nodered.org/u/rmwiseman)\
**Post date:** [25 January 2023 08:09 UTC](https://discourse.nodered.org/t/worldmap-marker-icon-alignment/74156/2 "2023-01-25T08:09:17Z")

</div>

**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":

```auto
<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:

```auto
(() => {
    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);
})();

```

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [25 January 2023 09:16 UTC](https://discourse.nodered.org/t/worldmap-marker-icon-alignment/74156/3 "2023-01-25T09:16:32Z")

</div>

> [@rmwiseman](#):
>
> Does such a thing exist?

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.

---

<div class="post-metadata">

**Author:** ![rmwiseman](https://avatars.discourse-cdn.com/v4/letter/r/e47c2d/32.png) [@rmwiseman](https://discourse.nodered.org/u/rmwiseman)\
**Post date:** [25 January 2023 09:21 UTC](https://discourse.nodered.org/t/worldmap-marker-icon-alignment/74156/4 "2023-01-25T09:21:56Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [25 January 2023 09:25 UTC](https://discourse.nodered.org/t/worldmap-marker-icon-alignment/74156/5 "2023-01-25T09:25:53Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![rmwiseman](https://avatars.discourse-cdn.com/v4/letter/r/e47c2d/32.png) [@rmwiseman](https://discourse.nodered.org/u/rmwiseman)\
**Post date:** [25 January 2023 09:55 UTC](https://discourse.nodered.org/t/worldmap-marker-icon-alignment/74156/6 "2023-01-25T09:55:07Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [25 January 2023 09:59 UTC](https://discourse.nodered.org/t/worldmap-marker-icon-alignment/74156/7 "2023-01-25T09:59:59Z")

</div>

should just be a single number eg 64 or 32

---

<div class="post-metadata">

**Author:** ![rmwiseman](https://avatars.discourse-cdn.com/v4/letter/r/e47c2d/32.png) [@rmwiseman](https://discourse.nodered.org/u/rmwiseman)\
**Post date:** [25 January 2023 10:08 UTC](https://discourse.nodered.org/t/worldmap-marker-icon-alignment/74156/8 "2023-01-25T10:08:35Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [25 January 2023 11:30 UTC](https://discourse.nodered.org/t/worldmap-marker-icon-alignment/74156/9 "2023-01-25T11:30:04Z")

</div>

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

```

---

<div class="post-metadata">

**Author:** ![rmwiseman](https://avatars.discourse-cdn.com/v4/letter/r/e47c2d/32.png) [@rmwiseman](https://discourse.nodered.org/u/rmwiseman)\
**Post date:** [25 January 2023 12:06 UTC](https://discourse.nodered.org/t/worldmap-marker-icon-alignment/74156/10 "2023-01-25T12:06:29Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [26 March 2023 12:07 UTC](https://discourse.nodered.org/t/worldmap-marker-icon-alignment/74156/11 "2023-03-26T12:07:25Z")

</div>

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