Handle marker icon/label updates

src/leaflet/icon/DynmapIcon.ts

@@ -47,6 +47,8 @@ export class DynmapIcon extends DivIcon {
 
 	// @ts-ignore
 	options: DynmapIconOptions;
+	_image?: HTMLImageElement;
+	_label?: HTMLSpanElement;
 
 	constructor(options: DynmapIconOptions) {
 		super(Object.assign(DynmapIcon.defaultOptions, options));
@@ -58,35 +60,35 @@ export class DynmapIcon extends DivIcon {
 		}
 
 		const div = markerContainer.cloneNode(false) as HTMLDivElement,
-			img = markerIcon.cloneNode(false) as HTMLImageElement,
-			label = markerLabel.cloneNode(false) as HTMLSpanElement,
-
 			url = `${window.config.url.markers}_markers_/${this.options.icon}.png`,
 			size = point(this.options.iconSize as PointExpression);
 
+		this._image = markerIcon.cloneNode(false) as HTMLImageElement;
+		this._label = markerLabel.cloneNode(false) as HTMLSpanElement;
+
 		const sizeClass = [size.x, size.y].join('x');
 
-		img.width = size.x;
+		this._image.width = size.x;
-		img.height = size.y;
+		this._image.height = size.y;
-		img.src = url;
+		this._image.src = url;
 
 		if(this.options.showLabel) {
-			label.classList.add('marker__label--show');
+			this._label.classList.add('marker__label--show');
 		}
 
-		label.classList.add(/*'markerName_' + set.id,*/ `marker__label--${sizeClass}`);
+		this._label.classList.add(/*'markerName_' + set.id,*/ `marker__label--${sizeClass}`);
 
 		if (this.options.isHtml) {
-			label.insertAdjacentHTML('afterbegin', this.options.label);
+			this._label.innerHTML = this.options.label;
 		} else {
-			label.textContent = this.options.label;
+			this._label.textContent = this.options.label;
 		}
 
 		// @ts-ignore
 		Icon.prototype._setIconStyles.call(this, div, 'icon');
 
-		div.appendChild(img);
+		div.appendChild(this._image);
-		div.appendChild(label);
+		div.appendChild(this._label);
 		div.classList.add('marker');
 
 		if(this.options.className) {
@@ -95,4 +97,36 @@ export class DynmapIcon extends DivIcon {
 
 		return div;
 	}
+
+	update(options: DynmapIconOptions) {
+		if(options.showLabel !== this.options.showLabel) {
+			this._label!.classList.toggle('marker__label--show', this.options.showLabel);
+			this.options.showLabel = options.showLabel;
+		}
+
+		if(options.icon !== this.options.icon) {
+			this._image!.src = `${window.config.url.markers}_markers_/${options.icon}.png`;
+			this.options.icon = options.icon;
+		}
+
+		const iconSize = point(options.iconSize || [16, 16] as PointExpression),
+			oldSize = point(this.options.iconSize as PointExpression);
+
+		if(iconSize.x !== oldSize.x || iconSize.y !== oldSize.y) {
+			this._image!.width = iconSize.x;
+			this._image!.height = iconSize.y;
+			this.options.iconSize = options.iconSize;
+		}
+
+		if(options.label !== this.options.label || options.isHtml !== this.options.isHtml) {
+			if (options.isHtml) {
+				this._label!.innerHTML = options.label;
+			} else {
+				this._label!.textContent = options.label;
+			}
+
+			this.options.isHtml = options.isHtml;
+			this.options.label = options.label;
+		}
+	}
 }

src/leaflet/marker/GenericMarker.ts

@@ -14,7 +14,7 @@
  *    limitations under the License.
  */
 
-import {MarkerOptions, Marker, Util, LatLngExpression} from 'leaflet';
+import {MarkerOptions, Marker, Util, LatLngExpression, Icon} from 'leaflet';
 
 export class GenericMarker extends Marker {
 	constructor(latLng: LatLngExpression, options: MarkerOptions) {
@@ -25,4 +25,8 @@ export class GenericMarker extends Marker {
 	_resetZIndex() {
 		//Don't change the zindex
 	}
+
+	getIcon(): Icon.Default {
+		return this.options.icon as Icon.Default;
+	}
 }

src/util/markers.ts

@@ -17,7 +17,7 @@
  *    limitations under the License.
  */
 
-import {LatLng, Marker} from "leaflet";
+import {Marker} from "leaflet";
 import {DynmapMarker} from "@/dynmap";
 import {DynmapIcon} from "@/leaflet/icon/DynmapIcon";
 import {DynmapProjection} from "@/leaflet/projection/DynmapProjection";
@@ -49,5 +49,19 @@ export const updateMarker = (marker: Marker | undefined, options: DynmapMarker,
 		marker.setLatLng(newLocation);
 	}
 
+	if(marker instanceof GenericMarker) {
+		const icon = marker.getIcon();
+
+		if(icon && icon instanceof DynmapIcon) {
+			icon.update({
+				icon: options.icon,
+				label: options.label,
+				iconSize: options.dimensions,
+				showLabel: false,
+				isHtml: options.isHTML,
+			});
+		}
+	}
+
 	return marker;
 };