Skirda/LiveAtlas
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fixed layout for marker icons with no iconSize

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/leaflet/icon/GenericIcon.ts
View File

@ -79,8 +79,7 @@ export class GenericIcon extends Layer implements Icon<GenericIconOptions> {
div.appendChild(this._image); div.appendChild(this._image);
div.classList.add('marker', 'leaflet-marker-icon'); div.classList.add('marker', 'leaflet-marker-icon');
div.classList.toggle('marker--auto-size', !this.options.iconSize);
this._image.classList.toggle('icon--auto', !this.options.iconSize);
if(this.options.iconSize) { if(this.options.iconSize) {
const size = point(this.options.iconSize as PointExpression); 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.options.iconSize = options.iconSize;
this._container!.classList.toggle('marker--auto-size', !this.options.iconSize);
if(this._image) { 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; const iconSize = this.options.iconSize ? point(options.iconSize || [16, 16] as PointExpression) : undefined;
// @ts-ignore // @ts-ignore
this._image!.width = iconSize ? iconSize.x : 'auto'; this._image!.width = iconSize ? iconSize.x : 'auto';

12
src/scss/leaflet/_markers.scss
View File

@ -190,20 +190,26 @@
background: var(--background-marker); background: var(--background-marker);
padding: 0.2rem; padding: 0.2rem;
display: none; display: none;
margin-left: 0.2rem;
width: max-content; width: max-content;
max-width: 30rem; max-width: 30rem;
position: absolute;
left: calc(100% + 0.2rem);
@at-root .leaflet-pane--show-labels .marker__label { @at-root .leaflet-pane--show-labels .marker__label {
display: block !important; display: block !important;
} }
} }
.marker__icon { &.marker--auto-size {
&.icon--auto { .marker__icon {
margin-top: -50%; margin-top: -50%;
margin-left: -50%; margin-left: -50%;
} }
.marker__label {
margin-top: -50%;
left: calc(50% + 0.2rem);
}
} }
&:hover, &:focus { &:hover, &:focus {