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

Handle marker icon/label updates

Browse Source
This commit is contained in:
James Lyne 2020-12-18 18:01:37 +00:00
parent efc1191369
commit cad535365b
3 changed files with 66 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
src/leaflet/icon/DynmapIcon.ts
View File

@ -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;
img.height = size.y;
img.src = url;
this._image.width = size.x;
this._image.height = size.y;
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(label);
div.appendChild(this._image);
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;
}
}
}

6
src/leaflet/marker/GenericMarker.ts
View File

@ -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;
}
}

16
src/util/markers.ts
View File

@ -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;
};