From b69a1b3a3f400d6b0a263e85808321cc4e324e37 Mon Sep 17 00:00:00 2001
From: James Lyne <jim+github@not-null.co.uk>
Date: Wed, 23 Feb 2022 00:47:22 +0000
Subject: [PATCH] Make iconSize optional for GenericIcon, and center it if
 missing

---
 src/leaflet/icon/GenericIcon.ts | 34 +++++++++++++++++++--------------
 src/scss/leaflet/_markers.scss  |  7 +++++++
 2 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/src/leaflet/icon/GenericIcon.ts b/src/leaflet/icon/GenericIcon.ts
index 92ec86a..9fc17f6 100644
--- a/src/leaflet/icon/GenericIcon.ts
+++ b/src/leaflet/icon/GenericIcon.ts
@@ -72,21 +72,25 @@ export class GenericIcon extends Layer implements Icon<GenericIconOptions> {
 		}
 
 		const div = markerContainer.cloneNode(false) as HTMLDivElement,
-			url = useStore().state.currentMapProvider!.getMarkerIconUrl(this.options.icon),
-			size = point(this.options.iconSize as PointExpression);
+			url = useStore().state.currentMapProvider!.getMarkerIconUrl(this.options.icon);
 
 		this._image = markerIcon.cloneNode(false) as HTMLImageElement;
-
-		this._image.width = size.x;
-		this._image.height = size.y;
 		this._image.src = url;
 
 		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');
 
+		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) {
 			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);
 		}
 
-		const iconSize = point(options.iconSize || [16, 16] as PointExpression),
-			oldSize = point(this.options.iconSize as PointExpression);
+		this.options.iconSize = options.iconSize;
 
-		if(this._image && (iconSize.x !== oldSize.x || iconSize.y !== oldSize.y)) {
-			this._image!.width = iconSize.x;
-			this._image!.height = iconSize.y;
-			this.options.iconSize = 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';
+			// @ts-ignore
+			this._image!.height = iconSize ? iconSize.y : 'auto';
 		}
 
 		if(this._label && (options.label !== this.options.label || options.isHtml !== this.options.isHtml)) {
diff --git a/src/scss/leaflet/_markers.scss b/src/scss/leaflet/_markers.scss
index 1231666..034be59 100644
--- a/src/scss/leaflet/_markers.scss
+++ b/src/scss/leaflet/_markers.scss
@@ -199,6 +199,13 @@
 		}
 	}
 
+	.marker__icon {
+		&.icon--auto {
+			margin-top: -50%;
+			margin-left: -50%;
+		}
+	}
+
 	&:hover, &:focus {
 		z-index: 1000;