leaflet#Layer TypeScript Examples

addHiddenLayer(layer: Layer, name: string, position: number) {
		if(this.layerControl.hasLayer(layer)) {
			this.layerControl.removeLayer(layer);
		}

		if(typeof position !== 'undefined') {
			this.layerControl.addOverlayAtPosition(layer, name, position);
		} else {
			this.layerControl.addOverlay(layer, name);
		}
	}

updateMarkerLayer = (marker: Layer | undefined, options: LiveAtlasMarker, converter: Function): Layer => {
	switch(options.type) {
		case LiveAtlasMarkerType.POINT:
			return updatePointLayer(marker as GenericMarker, options as LiveAtlasPointMarker, converter);
		case LiveAtlasMarkerType.AREA:
			return updateAreaLayer(marker as LiveAtlasPolygon | LiveAtlasPolyline, options as LiveAtlasAreaMarker, converter);
		case LiveAtlasMarkerType.LINE:
			return updateLineLayer(marker as LiveAtlasPolyline, options as LiveAtlasLineMarker, converter);
		case LiveAtlasMarkerType.CIRCLE:
			return updateCircleLayer(marker as LiveAtlasPolyline | LiveAtlasPolygon, options as LiveAtlasCircleMarker, converter);
	}
}

createMarkerLayer = (options: LiveAtlasMarker, converter: Function): Layer => {
	switch(options.type) {
		case LiveAtlasMarkerType.POINT:
			return createPointLayer(options as LiveAtlasPointMarker, converter);
		case LiveAtlasMarkerType.AREA:
			return createAreaLayer(options as LiveAtlasAreaMarker, converter);
		case LiveAtlasMarkerType.LINE:
			return createLineLayer(options as LiveAtlasLineMarker, converter);
		case LiveAtlasMarkerType.CIRCLE:
			return createCircleLayer(options as LiveAtlasCircleMarker, converter);
	}
}

private static _isLayerVisible(layer: Layer, currentZoom: number) {
		let minZoom = -Infinity,
			maxZoom = Infinity;

		if((layer as any).options && (layer as any).options.minZoom !== undefined) {
			minZoom = (layer as any).options.minZoom;
		}

		if((layer as any).options && (layer as any).options.maxZoom !== undefined) {
			maxZoom = (layer as any).options.maxZoom;
		}

		return currentZoom >= minZoom && currentZoom <= maxZoom;
	}

private _updateLayerVisibility(onAdd?: boolean) {
		if(!this._map) {
			return;
		}

		const zoom = this._map.getZoom();

		//The whole group is zoom limited
		if(this._isZoomLimited()) {
			const visible = zoom >= (this.options.minZoom || -Infinity) && zoom <= (this.options.maxZoom || Infinity);

			this.eachLayer((layer) => {
				//Per marker zoom limits take precedence, if present
				if(this._zoomLimitedLayers.has(layer)) {
					LiveAtlasLayerGroup._isLayerVisible(layer, zoom) ? this._addToMap(layer) : this._removeFromMap(layer);
				} else { //Otherwise apply group zoom limit
					visible ? this._addToMap(layer) : this._removeFromMap(layer);
				}
			}, this);
		//Group isn't zoom limited, but some individual markers are
		} else if(this._zoomLimitedLayers.size) {
			this._zoomLimitedLayers.forEach((layer) => {
				LiveAtlasLayerGroup._isLayerVisible(layer, zoom) ? this._addToMap(layer) : this._removeFromMap(layer);
			});
		//Nothing is zoom limited, but we've just been added to the map
		} else if(onAdd) {
			this.eachLayer((layer: Layer) => this._addToMap(layer), this._map);
		}
	}

addLayer(layer: Layer) {
		const id = this.getLayerId(layer);

		this._layers[id] = layer;

		if (layer instanceof Marker) {
			layer.options.pane = `${this.options.id}-markers`;
		} else if (layer instanceof Path) {
			layer.options.pane = `vectors`;
		}

		const zoomLimited = LiveAtlasLayerGroup._isLayerZoomLimited(layer);

		if (zoomLimited) {
			this._zoomLimitedLayers.add(layer);
		}

		if (this._map) {
			//If layer is zoom limited, only add to map if it should be visible
			if (zoomLimited) {
				if (LiveAtlasLayerGroup._isLayerVisible(layer, this._map.getZoom())) {
					this._addToMap(layer);
				}
			} else {
				this._addToMap(layer);
			}
		}

		return this;
	}

addLayer(layer: Layer, showInControl: boolean, name: string, position: number) {
		this.map.addLayer(layer);

		if(showInControl) {
			if(this.layerControl.hasLayer(layer)) {
				this.layerControl.removeLayer(layer);
			}

			if(typeof position !== 'undefined') {
				this.layerControl.addOverlayAtPosition(layer, name, position);
			} else {
				this.layerControl.addOverlay(layer, name);
			}
		}
	}

_removeLayerListeners(map: Map) {
		// Remove listeners for begin and end of load from all layers
		map.eachLayer((layer: Layer) => {
			if(!(layer instanceof TileLayer)) {
				return;
			}

			this.removeLoader((layer as any)._leaflet_id);

			layer.off('loading', this._handleLoading, this);
			layer.off('load', this._handleLoad, this);
		});

		// Remove layeradd/layerremove listener from map
		map.off('layeradd', this._layerAdd, this);
		map.off('layerremove', this._layerRemove, this);
	}

_addLayerListeners(map: Map) {
		// Add listeners for begin and end of load to any layers already
		// on the map
		map.eachLayer((layer: Layer) => {
			if(!(layer instanceof TileLayer)) {
				return;
			}

			if(layer.isLoading()) {
				this.addLoader((layer as any)._leaflet_id);
			}

			layer.on('loading', this._handleLoading, this);
			layer.on('load', this._handleLoad, this);
		});

		// When a layer is added to the map, add listeners for begin and
		// end of load
		map.on('layeradd', this._layerAdd, this);
		map.on('layerremove', this._layerRemove, this);
	}

_handleBaseLayerChange (e: LeafletEvent) {
		// Check for a target 'layer' that contains multiple layers, such as
		// L.LayerGroup. This will happen if you have an L.LayerGroup in an
		// L.Control.Layers.
		if (e.layer && e.layer.eachLayer && typeof e.layer.eachLayer === 'function') {
			e.layer.eachLayer((layer: Layer) => {
				this._handleBaseLayerChange({ layer: layer } as LeafletEvent);
			});
		}
	}

constructor(baseLayers?: LayersObject, overlays?: LayersObject, options?: LayersOptions) {
		// noinspection JSUnusedGlobalSymbols
		super(baseLayers, overlays, Object.assign(options, {
			sortLayers: true,
			sortFunction: (layer1: Layer, layer2: Layer, name1: string, name2: string) => {
				const priority1 = this._layerPositions.get(layer1) || 0,
					priority2 = this._layerPositions.get(layer2) || 0;

				if(priority1 !== priority2) {
					return priority1 - priority2;
				}

				return ((name1 < name2) ? -1 : ((name1 > name2) ? 1 : 0));
			}
		}));
		this._layerPositions = new Map<Layer, number>();
	}

hasLayer(layer: Layer): boolean {
		// @ts-ignore
		return !!super._getLayer(Util.stamp(layer));
	}

removeLayer(layer: Layer) {
		this.map.removeLayer(layer);
		this.layerControl.removeLayer(layer);
	}

private _layerPositions: Map<Layer, number>;

removeLayer(layer: Layer): this {
		this._zoomLimitedLayers.delete(layer);
		return super.removeLayer(layer);
	}

//Returns if the given layer has its own zoom limits defined
	private static _isLayerZoomLimited(layer: Layer) {
		return ((layer as any).options && (layer as any).options.minZoom !== undefined)
			&& ((layer as any).options && (layer as any).options.maxZoom !== undefined);
	}

removeLayer(layer: Layer): this {
		this._layerPositions.delete(layer);
		return super.removeLayer(layer);
	}

private _addToMap(layer: Layer) {
		this._map.addLayer(layer)

		//Create marker label immediately if labels are visible by default
		if(layer instanceof GenericMarker && this.options.showLabels) {
			(layer as GenericMarker).createLabel();
		}
	}

private _removeFromMap(layer: Layer) {
		this._map.removeLayer(layer)
	}

private _zoomLimitedLayers: Set<Layer>;

addOverlay(layer: Layer, name: string): this {
		this._layerPositions.set(layer, 0);
		return super.addOverlay(layer, name);
	}

addOverlayAtPosition(layer: Layer, name: string, position: number): this {
		this._layerPositions.set(layer, position);
		return super.addOverlay(layer, name);
	}

export class GenericIcon extends Layer implements Icon<GenericIconOptions> {
	declare options: GenericIconOptions;
	declare createShadow: (oldIcon?: HTMLElement) => HTMLElement;

	private _image?: HTMLImageElement;
	private _label?: HTMLSpanElement;
	private _container?: HTMLDivElement;
	private _labelCreated: boolean = false;
	private _onHover: EventListener = () => {
		this.createLabel();
	};

	constructor(options: GenericIconOptions) {
		super(options as LayerOptions);
		Util.setOptions(this, Object.assign(defaultOptions, options));
	}

	createIcon(oldIcon: HTMLElement) {
		if (oldIcon) {
			DomUtil.remove(oldIcon);
		}

		const div = markerContainer.cloneNode(false) as HTMLDivElement;
		this._image = markerIcon.cloneNode(false) as HTMLImageElement;

		div.appendChild(this._image);
		div.classList.add('marker', 'leaflet-marker-icon');

		if(this.options.className) {
			div.classList.add(this.options.className);
		}

		//Create label lazily on hover
		this._image.addEventListener('mouseover', this._onHover);

		this._container = div;
		this.update();

		return div;
	}

	createLabel() {
		if(!this._container || this._labelCreated) {
			return;
		}

		this._image?.removeEventListener('mouseover', this._onHover);
		this._label = markerLabel.cloneNode(false) as HTMLSpanElement;

		this.update();

		this._container!.appendChild(this._label);
		this._labelCreated = true;
	}

	removeLabel() {
		if(!this._container || !this._labelCreated) {
			return;
		}

		this._label!.remove();
		this._label = undefined;
		this._labelCreated = false;
	}

	update(options?: GenericIconOptions) {
		if(options) {
			this.options.iconUrl = options.iconUrl;
			this.options.iconSize = options.iconSize;
			this.options.iconAnchor = options.iconAnchor;
			this.options.isHtml = options.isHtml;
			this.options.label = options.label;
		}

		if(!this._container) {
			return;
		}

		this._container!.classList.toggle('marker--auto-size', !this.options.iconSize);

		if(this._image) {
			const iconSize = this.options.iconSize ? point(this.options.iconSize as PointExpression) : undefined,
				iconAnchor = this.options.iconAnchor ? point(this.options.iconAnchor as PointExpression) : undefined,
				marginLeft = iconAnchor ? -iconAnchor.x : iconSize ? -(iconSize.x / 2) : 0,
				marginTop = iconAnchor ? -iconAnchor.y : iconSize ? -(iconSize.y / 2) : 0;

			if(iconSize) {
				this._image.width = iconSize.x;
				this._image.height = iconSize.y;
			} else {
				this._image.removeAttribute('width');
				this._image.removeAttribute('height');
			}

			this._container.style.marginLeft = marginLeft ? `${marginLeft}px` : '';
			this._container.style.marginTop = marginTop ? `${marginTop}px` : '';
			this._container.style.height = iconSize ? `${iconSize.y}px` : 'auto';

			if(this._image.src !== this.options.iconUrl) {
				this._image.src = this.options.iconUrl;
			}
		}

		if(this._label) {
			if (this.options.isHtml && this._label.innerHTML !== this.options.label) {
				this._label.innerHTML = this.options.label;
			} else if(this._label.textContent !== this.options.label) {
				this._label.textContent = this.options.label;
			}
		}
	}
}

export class PlayerIcon extends Layer implements Icon<PlayerIconOptions> {
	declare options: PlayerIconOptions;
	declare createShadow: (oldIcon?: HTMLElement) => HTMLElement;

	private readonly _player: LiveAtlasPlayer;
	private _container?: HTMLDivElement;
	private _playerImage?: HTMLImageElement;
	private _playerInfo?: HTMLSpanElement;
	private _playerName?: HTMLSpanElement;

	private _currentName?: string;

	private _playerHealth?: HTMLMeterElement;
	private _playerArmor?: HTMLMeterElement;
	private _playerYaw?: HTMLDivElement;

	private _currentYaw = 0;

	constructor(player: LiveAtlasPlayer, options: PlayerIconOptions) {
		super(options as LayerOptions);
		Util.setOptions(this, options);
		this._player = player;
	}

	createIcon() {
		// Reuse detached icon if it exists
		if (this._container) {
			this.update();
			return this._container;
		}

		this._currentName = undefined;
		this._container = document.createElement('div');
		this._container.classList.add('marker', 'marker--player', 'leaflet-marker-icon');

		this._playerInfo = document.createElement('div');
		this._playerInfo.className = 'marker__label';

		this._playerName = document.createElement('span');
		this._playerName.className = 'player__name';

		if(this.options.compact) {
			this._container.classList.add('marker--compact');
		}

		if (this.options.imageSize != 'none') {
			this._playerImage = playerImage.cloneNode() as HTMLImageElement;
			this._playerImage.height = this._playerImage.width = getImagePixelSize(this.options.imageSize);

			this.updateImage();
			this._playerInfo.appendChild(this._playerImage);
		}

		this._playerInfo.appendChild(this._playerName);

		if (this.options.showHealth) {
			this._playerHealth = document.createElement('meter');
			this._playerHealth.className = 'player__health';
			this._playerHealth.hidden = true;
			this._playerHealth.max = 20;

			this._playerInfo.appendChild(this._playerHealth);
		}

		if (this.options.showArmor) {
			this._playerArmor = document.createElement('meter');
			this._playerArmor.className = 'player__armor';
			this._playerArmor.hidden = true;
			this._playerArmor.max = 20;

			this._playerInfo.appendChild(this._playerArmor);
		}

		if (this.options.showYaw) {
			this._container.classList.add('player--yaw');

			this._playerYaw = document.createElement('div');
			this._playerYaw.className = 'player__yaw';
			this._container.appendChild(this._playerYaw);
		}

		this._container.appendChild(this._playerInfo);
		this.update();

		return this._container;
	}

	updateImage() {
		getPlayerImage(this._player, this.options.imageSize).then(head => {
			this._playerImage!.src = head.src;
		}).catch(() => {});
	}

	update() {
		if(!this._container) {
			return;
		}

		if(this._player!.displayName !== this._currentName) {
			this._playerName!.innerHTML = this._currentName = this._player!.displayName;
		}

		if(this.options.showHealth) {
			if (this._player.health !== undefined) {
				this._playerHealth!.hidden = false;
				this._playerHealth!.value = this._player.health;
			} else {
				this._playerHealth!.hidden = true;
			}
		}

		if(this.options.showArmor) {
			if(this._player.armor !== undefined) {
				this._playerArmor!.hidden = false;
				this._playerArmor!.value = this._player.armor;
			} else {
				this._playerArmor!.hidden = true;
			}
		}

		if(this.options.showYaw) {
			if(this._player.yaw !== undefined) {
				// https://stackoverflow.com/a/53416030
				const delta = ((((this._player.yaw - this._currentYaw) % 360) + 540) % 360) - 180;

				this._currentYaw = this._currentYaw + delta;
				this._playerYaw!.style.setProperty('--player-yaw', `${this._currentYaw}deg`);
			}
		}
	}

	detach() {
		if(this._container && this._container.parentNode) {
			this._container = this._container.parentNode.removeChild(this._container);
		}
	}
}