leaflet#layerGroup TypeScript Examples

The following examples show how to use leaflet#layerGroup. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: map.component.ts    From dayz-server-manager with MIT License 5 votes vote down vote up
public constructor(
        public label: string,
        public layer: LayerGroup = layerGroup(),
        public markers: MarkerWithId[] = [],
    ) {}
Example #2
Source File: map.component.ts    From dayz-server-manager with MIT License 5 votes vote down vote up
public constructor(
        public label: string,
        public layer: LayerGroup = layerGroup(),
        public markers: MarkerWithId[] = [],
    ) {}
Example #3
Source File: LiveAtlasLayerGroup.ts    From LiveAtlas with Apache License 2.0 4 votes vote down vote up
export default class LiveAtlasLayerGroup extends LayerGroup {
	declare options: LiveAtlasLayerGroupOptions;
	declare _layers: any;

	private _zoomLimitedLayers: Set<Layer>; //Layers which are zoom limited and should be checked on zoom
	private _markerPane?: HTMLElement;

	private _zoomEndCallback = () => this._updateLayerVisibility();

	constructor(options: LiveAtlasLayerGroupOptions) {
		super([], options);
		Util.setOptions(this, options);

		this._zoomLimitedLayers = new Set();
	}

	onAdd(map: LeafletMap) {
		map.on('zoomend', this._zoomEndCallback, this);

		this._map = map;
		this._markerPane = map.getPane(`${this.options.id}-markers`) || map.createPane(`${this.options.id}-markers`);

		this._markerPane.classList.toggle('leaflet-pane--show-labels', this.options.showLabels);

		this._markerPane.style.zIndex = (401 + this.options.priority).toString();

		this._updateLayerVisibility(true);

		return this;
	}

	onRemove(map: LeafletMap) {
		super.onRemove(map);
		map.off('zoomend', this._zoomEndCallback, this);

		return this;
	}

	clearLayers(): this {
		this._zoomLimitedLayers.clear();
		return super.clearLayers();
	}

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

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

	update(options: LiveAtlasLayerGroupOptions) {
		if(this.options.showLabels !== options.showLabels) {
			this.eachLayer((layer) => {
				//Create labels if they are now always visible
				//TODO: This will be slow when many markers exist. Is it worth doing?
				if(layer instanceof GenericMarker) {
					if(options.showLabels) {
						(layer as GenericMarker).createLabel();
					} else {
						(layer as GenericMarker).removeLabel();
					}
				}
			});

			this.options.showLabels = options.showLabels;
		}

		if(this._markerPane) {
			this._markerPane.classList.toggle('leaflet-pane--show-labels', options.showLabels);
		}

		if(options.minZoom !== this.options.minZoom || options.maxZoom !== this.options.maxZoom) {
			this.options.minZoom = options.minZoom;
			this.options.maxZoom = options.maxZoom;

			this._updateLayerVisibility();
		}

		if(options.priority !== this.options.priority) {
			this.options.priority = options.priority;

			if(this._markerPane) {
				this._markerPane.style.zIndex = (401 + this.options.priority).toString();
			}
		}
	}

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

	//Returns if this layer group has zoom limits defined
	private _isZoomLimited() {
		return this.options.maxZoom !== undefined || this.options.minZoom !== undefined;
	}

	//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);
	}

	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 _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)
	}
}