Fixed layout for marker icons with no iconSize

This commit is contained in:
James Lyne 2022-02-24 00:32:30 +00:00
parent 56b07aeaf7
commit 60d84d61a0
2 changed files with 11 additions and 6 deletions

View File

@ -79,8 +79,7 @@ export class GenericIcon extends Layer implements Icon<GenericIconOptions> {
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<GenericIconOptions> {
}
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';

View File

@ -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 {