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

Make iconSize optional for GenericIcon, and center it if missing

Browse Source
This commit is contained in:
James Lyne 2022-02-23 00:47:22 +00:00
parent 50aba2dd7b
commit b69a1b3a3f
2 changed files with 27 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -72,21 +72,25 @@ export class GenericIcon extends Layer implements Icon<GenericIconOptions> {
} }
const div = markerContainer.cloneNode(false) as HTMLDivElement, const div = markerContainer.cloneNode(false) as HTMLDivElement,
url = useStore().state.currentMapProvider!.getMarkerIconUrl(this.options.icon), url = useStore().state.currentMapProvider!.getMarkerIconUrl(this.options.icon);
size = point(this.options.iconSize as PointExpression);
this._image = markerIcon.cloneNode(false) as HTMLImageElement; this._image = markerIcon.cloneNode(false) as HTMLImageElement;
this._image.width = size.x;
this._image.height = size.y;
this._image.src = url; this._image.src = url;
div.appendChild(this._image); div.appendChild(this._image);
div.style.marginLeft = `${-(size.x / 2)}px`;
div.style.marginTop = `${-(size.y / 2)}px`;
div.style.height = `${size.y}px`;
div.classList.add('marker', 'leaflet-marker-icon'); div.classList.add('marker', 'leaflet-marker-icon');
this._image.classList.toggle('icon--auto', !this.options.iconSize);
if(this.options.iconSize) {
const size = point(this.options.iconSize as PointExpression);
this._image.width = size.x;
this._image.height = size.y;
div.style.marginLeft = `${-(size.x / 2)}px`;
div.style.marginTop = `${-(size.y / 2)}px`;
div.style.height = `${size.y}px`;
}
if(this.options.className) { if(this.options.className) {
div.classList.add(this.options.className); div.classList.add(this.options.className);
} }
@ -139,13 +143,15 @@ export class GenericIcon extends Layer implements Icon<GenericIconOptions> {
this._image!.src = useStore().state.currentMapProvider!.getMarkerIconUrl(this.options.icon); this._image!.src = useStore().state.currentMapProvider!.getMarkerIconUrl(this.options.icon);
} }
const iconSize = point(options.iconSize || [16, 16] as PointExpression), this.options.iconSize = options.iconSize;
oldSize = point(this.options.iconSize as PointExpression);
if(this._image && (iconSize.x !== oldSize.x || iconSize.y !== oldSize.y)) { if(this._image) {
this._image!.width = iconSize.x; this._image.classList.toggle('icon--auto', !this.options.iconSize);
this._image!.height = iconSize.y; const iconSize = this.options.iconSize ? point(options.iconSize || [16, 16] as PointExpression) : undefined;
this.options.iconSize = options.iconSize; // @ts-ignore
this._image!.width = iconSize ? iconSize.x : 'auto';
// @ts-ignore
this._image!.height = iconSize ? iconSize.y : 'auto';
} }
if(this._label && (options.label !== this.options.label || options.isHtml !== this.options.isHtml)) { if(this._label && (options.label !== this.options.label || options.isHtml !== this.options.isHtml)) {

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

@ -199,6 +199,13 @@
} }
} }
.marker__icon {
&.icon--auto {
margin-top: -50%;
margin-left: -50%;
}
}
&:hover, &:focus { &:hover, &:focus {
z-index: 1000; z-index: 1000;