diff --git a/src/leaflet/icon/GenericIcon.ts b/src/leaflet/icon/GenericIcon.ts index 62ca0f3..4595be2 100644 --- a/src/leaflet/icon/GenericIcon.ts +++ b/src/leaflet/icon/GenericIcon.ts @@ -79,8 +79,7 @@ export class GenericIcon extends Layer implements Icon { div.appendChild(this._image); div.classList.add('marker', 'leaflet-marker-icon'); - - this._image.classList.toggle('icon--auto', !this.options.iconSize); + div.classList.toggle('marker--auto-size', !this.options.iconSize); if(this.options.iconSize) { const size = point(this.options.iconSize as PointExpression); @@ -145,9 +144,9 @@ export class GenericIcon extends Layer implements Icon { } this.options.iconSize = options.iconSize; + this._container!.classList.toggle('marker--auto-size', !this.options.iconSize); if(this._image) { - this._image.classList.toggle('icon--auto', !this.options.iconSize); const iconSize = this.options.iconSize ? point(options.iconSize || [16, 16] as PointExpression) : undefined; // @ts-ignore this._image!.width = iconSize ? iconSize.x : 'auto'; diff --git a/src/scss/leaflet/_markers.scss b/src/scss/leaflet/_markers.scss index 034be59..4e24a14 100644 --- a/src/scss/leaflet/_markers.scss +++ b/src/scss/leaflet/_markers.scss @@ -190,20 +190,26 @@ background: var(--background-marker); padding: 0.2rem; display: none; - margin-left: 0.2rem; width: max-content; max-width: 30rem; + position: absolute; + left: calc(100% + 0.2rem); @at-root .leaflet-pane--show-labels .marker__label { display: block !important; } } - .marker__icon { - &.icon--auto { + &.marker--auto-size { + .marker__icon { margin-top: -50%; margin-left: -50%; } + + .marker__label { + margin-top: -50%; + left: calc(50% + 0.2rem); + } } &:hover, &:focus {