@mapcomponents/react-maplibre 0.1.63 → 0.1.64

package/src/components/MapLibreMap/lib/MapLibreGlWrapper.ts

@@ -1,7 +1,23 @@
-import { Map, IControl, MapOptions as MapOptionsType,	 } from "!maplibre-gl";
-import { Map as MapType	 } from "maplibre-gl";
-
-type EventArgArray = [string, string | Function, Function?];
+import {
+	Map,
+	IControl,
+	MapOptions as MapOptionsType,
+	MapEventType,
+	MapLayerEventType,
+	StyleImageInterface,
+	LayerSpecification,
+	CustomLayerInterface,
+	SourceSpecification,
+	ControlPosition,
+} from '!maplibre-gl';
+import { Map as MapType, Style } from 'maplibre-gl';
+
+type WrapperEventArgArray = [string, (arg0: unknown) => void];
+type EventArgArray = [
+	keyof MapLayerEventType | keyof MapEventType,
+	string | ((arg0: unknown) => void),
+	((arg0: unknown) => void)?
+];
 type LayerState = {
 	id: string;
 	type: string;
@@ -22,52 +38,103 @@ type ViewportState = {
  *
  * @class
  */
+
 class MapLibreGlWrapper {
 	registeredElements: {
 		[key: string]: {
 			layers: [string?];
 			sources: [string?];
 			images: [string?];
-			controls: [IControl?];
+			controls: [(IControl | unknown)?];
 			events: [EventArgArray?];
-			wrapperEvents: [EventArgArray?];
+			wrapperEvents: [WrapperEventArgArray?];
 		};
 	};
 	baseLayers: [string?];
 	firstSymbolLayer: string | undefined;
-	eventHandlers: { layerchange: [Function?]; viewportchange: [Function?] };
+	eventHandlers: {
+		layerchange: {
+			handler: (ev: unknown) => void;
+			options?: object | string;
+		}[];
+		viewportchange: {
+			handler: (ev: unknown) => void;
+		}[];
+	};
 	wrapper: {
-		on: Function;
-		off: Function;
-		fire: Function;
-		layerState: [LayerState?];
+		on: (
+			eventName: string,
+			handler: (ev: unknown) => void,
+			options?: object | string,
+			componentId?: string
+		) => void;
+		off: (type: string, listener: (ev: unknown) => void) => void;
+		fire: (eventName: string, context?: unknown) => void;
+		layerState: LayerState[];
 		layerStateString: string;
 		oldLayerStateStrings: object;
-		buildLayerObject: Function;
-		buildLayerObjects: Function;
-		refreshLayerState: Function;
+		buildLayerObject: (layer: ReturnType<Style['getLayer']>) => LayerState;
+		buildLayerObjects: () => LayerState[];
+		refreshLayerState: () => void;
 		viewportState: ViewportState;
 		viewportStateString: string;
 		oldViewportStateString: string;
-		getViewport: Function;
-		refreshViewport: Function;
+		getViewport: () => {
+			center: { lng: number; lat: number };
+			zoom: number;
+			bearing: number;
+			pitch: number;
+		};
+		refreshViewport: () => void;
 	};
-	initRegisteredElements: Function;
-	addNativeMaplibreFunctionsAndProps: Function;
+	initRegisteredElements: (componentId: string, force?: boolean | undefined) => void;
+	addNativeMaplibreFunctionsAndProps: () => void;
 	map: MapType;
 	style: object;
 
 	styleJson: object;
-	addLayer: Function;
-	addSource: Function;
-	addControl: Function;
-	addImage: Function;
-	on: Function;
-	cleanup: Function;
-
-	constructor(props: { mapOptions: MapOptionsType; onReady: Function }) {
+	addLayer: (
+		layer:
+			| (LayerSpecification & {
+					source?: string | SourceSpecification | undefined;
+			  })
+			| (CustomLayerInterface & {
+					source?: string | SourceSpecification | undefined;
+			  }),
+		beforeId?: string | undefined,
+		componentId?: string | undefined
+	) => Map | undefined;
+	addSource: (id: string, source: SourceSpecification,componentId?: string | undefined) => Map | undefined;
+	addControl: (control: IControl | unknown, position?: ControlPosition | undefined,componentId?: string | undefined) => Map | undefined;
+	addImage: (
+		id: string,
+		image:
+			| HTMLImageElement
+			| ImageBitmap
+			| ImageData
+			| {
+					width: number;
+					height: number;
+					data: Uint8Array | Uint8ClampedArray;
+			  }
+			| StyleImageInterface,
+		componentId?: string | undefined
+	) => void;
+	on: (
+		type: keyof MapLayerEventType | keyof MapEventType | string,
+		layerId: string | ((ev: unknown) => void),
+		handler?: ((ev: MapEventType & unknown) => Map | void) | string,
+		componentId?: string | undefined
+	) => Map | undefined;
+	cleanup: (componentId: string) => void;
+
+	constructor(props: {
+		mapOptions: MapOptionsType;
+		onReady: (map: MapType, context: unknown) => void;
+	}) {
 		// closure variable to safely point to the object context of the current MapLibreGlWrapper instance
-		let self = this;
+		// eslint-disable-next-line @typescript-eslint/no-this-alias
+		const self = this;
 
 		// element registration and cleanup on a component level is experimental
 		this.registeredElements = {};
@@ -98,21 +165,21 @@ class MapLibreGlWrapper {
 			 */
 			on: (
 				eventName: string,
-				handler: Function,
+				handler: (ev: unknown) => void,
 				options?: object | string,
 				componentId?: string
 			) => {
 				if (!self.eventHandlers[eventName]) return;
 
-				if (typeof options === "string") {
+				if (typeof options === 'string') {
 					componentId = options;
 					options = {};
 				}
 
 				self.eventHandlers[eventName].push({ handler, options });
 
-				let _arguments: EventArgArray = [eventName, handler];
-				if (componentId && typeof componentId === "string") {
+				const _arguments: WrapperEventArgArray = [eventName, handler];
+				if (componentId && typeof componentId === 'string') {
 					self.initRegisteredElements(componentId);
 					self.registeredElements[componentId].wrapperEvents.push(_arguments);
 				}
@@ -124,12 +191,12 @@ class MapLibreGlWrapper {
 			 * @param {function} handler
 			 * @returns {undefined}
 			 */
-			off: (eventName: string, handler: Function) => {
+			off: (eventName, handler) => {
 				if (!self.eventHandlers[eventName]) return;
 
 				self.eventHandlers[eventName] = self.eventHandlers[eventName].filter(
-					(item: any) => {
-						if (!Object.is(item.handler, handler)) {
+					(item: WrapperEventArgArray) => {
+						if (!Object.is(item[1], handler)) {
 							return item;
 						}
 						return false;
@@ -143,13 +210,17 @@ class MapLibreGlWrapper {
 			 * @param {object} context
 			 * @returns {undefined}
 			 */
-			fire: (eventName: string, context: object) => {
+			fire: (eventName, context) => {
 				if (!self.eventHandlers[eventName]) return;
 
-				var scope = context || window;
-				let event = new Event(eventName);
+				const scope = context || window;
+				const event = new Event(eventName);
 
-				self.eventHandlers[eventName].forEach(function (item: any) {
+				self.eventHandlers[eventName].forEach(function (
+					item:
+						| MapLibreGlWrapper['eventHandlers']['layerchange'][0]
+						| MapLibreGlWrapper['eventHandlers']['viewportchange'][0]
+				) {
 					item.handler.call(scope, event, self);
 				});
 			},
@@ -160,7 +231,7 @@ class MapLibreGlWrapper {
 			/**
 			 * Maps layerIds to layerState in JSON string form for quick deep comparisons
 			 */
-			layerStateString: "",
+			layerStateString: '',
 			/**
 			 * Previous Version of layerStateString
 			 */
@@ -171,7 +242,7 @@ class MapLibreGlWrapper {
 			 * @param {string} layer
 			 * @returns object
 			 */
-			buildLayerObject: (layer: any) => {
+			buildLayerObject: (layer: ReturnType<Style['getLayer']>) => {
 				//if (self.baseLayers.indexOf(layer.id) === -1) {
 				//let paint = {};
 				//let values = layer.paint?._values;
@@ -192,7 +263,7 @@ class MapLibreGlWrapper {
 				return {
 					id: layer.id,
 					type: layer.type,
-					visible: layer.visibility === "none" ? false : true,
+					visible: layer.visibility === 'none' ? false : true,
 					baseLayer: self.baseLayers.indexOf(layer.id) !== -1,
 					//paint,
 					//layout,
@@ -213,56 +284,53 @@ class MapLibreGlWrapper {
 			 * @returns array
 			 */
 			buildLayerObjects: () => {
-				// @ts-ignore
 				return self.map.style._order
 					.map((layerId: string) => {
-						return self.wrapper.buildLayerObject(
-							self.map.style._layers[layerId]
-						);
+						return self.wrapper.buildLayerObject(self.map.style._layers[layerId]);
 					})
-					.filter((n: string) => n);
+					.filter((n) => typeof n !== 'undefined');
 			},
 			/**
 			 * Updates layer state info objects
 			 */
 			refreshLayerState: () => {
 				self.wrapper.layerState = self.wrapper.buildLayerObjects();
-				if (
-					JSON.stringify(self.wrapper.layerState) !==
-					self.wrapper.layerStateString
-				) {
-					self.wrapper.fire("layerchange");
-					self.wrapper.layerStateString = JSON.stringify(
-						self.wrapper.layerState
-					);
+				if (JSON.stringify(self.wrapper.layerState) !== self.wrapper.layerStateString) {
+					self.wrapper.fire('layerchange');
+					self.wrapper.layerStateString = JSON.stringify(self.wrapper.layerState);
 				}
 			},
 			/**
 			 * Object containing information on the current viewport state
 			 */
 			viewportState: {
-				center:{lng:0,lat:0},
+				center: { lng: 0, lat: 0 },
 				zoom: 0,
-				bearing:0,
-				pitch:0
+				bearing: 0,
+				pitch: 0,
 			},
 			/**
 			 * The same data as viewportState in JSON string form for quick deep comparisons
 			 */
-			viewportStateString: "{}",
+			viewportStateString: '{}',
 			/**
 			 * Previous version of viewportStateString
 			 */
-			oldViewportStateString: "{}",
+			oldViewportStateString: '{}',
 			getViewport: () =>
-				typeof self.map.getCenter === "function"
+				typeof self.map.getCenter === 'function'
 					? {
 							center: (({ lng, lat }) => ({ lng, lat }))(self.map.getCenter()),
 							zoom: self.map.getZoom(),
 							bearing: self.map.getBearing(),
 							pitch: self.map.getPitch(),
-						}
-					: {},
+					  }
+					: {
+							center: { lng: 0, lat: 0 },
+							zoom: 0,
+							bearing: 0,
+							pitch: 0,
+					  },
 			refreshViewport: () => {
 				self.wrapper.viewportState = self.wrapper.getViewport();
 			},
@@ -274,13 +342,10 @@ class MapLibreGlWrapper {
 		 * @param {string} componentId
 		 * @param {boolean} force
 		 */
-		this.initRegisteredElements = (
-			componentId: string,
-			force: boolean | undefined
-		) => {
+		this.initRegisteredElements = (componentId: string, force?: boolean | undefined) => {
 			if (
-				typeof self.registeredElements[componentId] === "undefined" ||
-				(typeof force !== "undefined" && force)
+				typeof self.registeredElements[componentId] === 'undefined' ||
+				(typeof force !== 'undefined' && force)
 			) {
 				self.registeredElements[componentId] = {
 					layers: [],
@@ -299,26 +364,22 @@ class MapLibreGlWrapper {
 		 * @param {object} layer
 		 * @param {string} beforeId
 		 * @param {string} componentId
-		 * @returns {undefined}
 		 */
-		this.addLayer = (layer: any, beforeId: string, componentId: string) => {
+		this.addLayer = (layer, beforeId, componentId) => {
 			if (!self.map.style) {
 				return;
 			}
-			if (
-				componentId &&
-				typeof componentId === "string" &&
-				typeof layer.id !== "undefined"
-			) {
+			if (componentId && typeof componentId === 'string' && typeof layer.id !== 'undefined') {
 				self.initRegisteredElements(componentId);
 				self.registeredElements[componentId].layers.push(layer.id);
 
-				if (typeof layer.source === "object") {
+				if (layer?.source && typeof layer?.source !== 'string') {
 					self.registeredElements[componentId].sources.push(layer.id);
 				}
 			}
 
 			self.map.addLayer(layer, beforeId);
+			return self.map;
 		};
 
 		/**
@@ -330,20 +391,17 @@ class MapLibreGlWrapper {
 		 * @param {string} componentId
 		 * @returns {undefined}
 		 */
-		this.addSource = (sourceId: string, source: any, componentId: string) => {
+		this.addSource = (sourceId, source, componentId) => {
 			if (!self.map.style) {
 				return;
 			}
-			if (
-				componentId &&
-				typeof componentId === "string" &&
-				typeof sourceId !== "undefined"
-			) {
+			if (componentId && typeof componentId === 'string' && typeof sourceId !== 'undefined') {
 				self.initRegisteredElements(componentId);
 				self.registeredElements[componentId].sources.push(sourceId);
 			}
 
 			self.map.addSource(sourceId, source);
+			return self.map;
 		};
 
 		/**
@@ -355,23 +413,16 @@ class MapLibreGlWrapper {
 		 * @param {string} componentId
 		 * @returns {undefined}
 		 */
-		this.addImage = (id: string, image: any, ref: any, componentId: string) => {
+		this.addImage = (id, image, componentId) => {
 			if (!self.map.style) {
 				return;
 			}
-			if (typeof ref === "string" && typeof componentId === "undefined") {
-				return self.addImage.call(self, id, image, undefined, ref);
-			}
-			if (
-				componentId &&
-				typeof componentId === "string" &&
-				typeof id !== "undefined"
-			) {
+			if (componentId && typeof componentId === 'string' && typeof id !== 'undefined') {
 				self.initRegisteredElements(componentId);
 				self.registeredElements[componentId].images.push(id);
 			}
 
-			self.map.addImage(id, image, ref);
+			self.map.addImage(id, image);
 		};
 
 		/**
@@ -381,15 +432,14 @@ class MapLibreGlWrapper {
 		 * @param {string} layerId
 		 * @param {function} handler
 		 * @param {string} componentId
-		 * @returns {undefined}
 		 */
 		this.on = (
-			type: string,
-			layerId: string,
-			handler: Function,
-			componentId: string
+			type: keyof MapLayerEventType | keyof MapEventType,
+			layerId: string | ((ev: unknown) => void),
+			handler: (ev: MapEventType & unknown) => Map | void,
+			componentId?: string
 		) => {
-			if (typeof handler === "string" && typeof layerId === "function") {
+			if (typeof handler === 'string' && typeof layerId === 'function') {
 				return self.on.call(self, type, undefined, layerId, handler);
 			}
 
@@ -398,13 +448,15 @@ class MapLibreGlWrapper {
 				_arguments = [type, handler];
 			}
 
-			if (componentId && typeof componentId === "string") {
+			if (componentId && typeof componentId === 'string') {
 				self.initRegisteredElements(componentId);
 				self.registeredElements[componentId].events.push(_arguments);
 			}
 
-			// @ts-ignore:
+			// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+			// @ts-ignore
 			self.map.on(..._arguments);
+			return self.map;
 		};
 
 		/**
@@ -414,13 +466,14 @@ class MapLibreGlWrapper {
 		 * @param {string} position
 		 * @param {string} componentId
 		 */
-		this.addControl = (control: any, position: any, componentId: string) => {
-			if (componentId && typeof componentId === "string") {
+		this.addControl = (control, position, componentId) => {
+			if (componentId && typeof componentId === 'string') {
 				self.initRegisteredElements(componentId);
 				self.registeredElements[componentId].controls.push(control);
 			}
 
-			self.map.addControl(control, position);
+			self.map.addControl(control as IControl, position);
+			return self.map;
 		};
 
 		/**
@@ -429,68 +482,60 @@ class MapLibreGlWrapper {
 		 * @param {string} componentId
 		 */
 		this.cleanup = (componentId: string) => {
-			if (
-				self.map.style &&
-				typeof self.registeredElements[componentId] !== "undefined"
-			) {
+			if (self.map.style && typeof self.registeredElements[componentId] !== 'undefined') {
 				// cleanup layers
-				self.registeredElements[componentId].layers.forEach((item: any) => {
+				self.registeredElements[componentId].layers.forEach((item: string) => {
 					if (self.map.style.getLayer(item)) {
 						self.map.style.removeLayer(item);
 					}
 				});
 
 				// cleanup sources
-				self.registeredElements[componentId].sources.forEach((item: any) => {
+				self.registeredElements[componentId].sources.forEach((item: string) => {
 					if (self.map.style.getSource(item)) {
 						self.map.style.removeSource(item);
 					}
 				});
 
 				// cleanup images
-				self.registeredElements[componentId].images.forEach((item: any) => {
+				self.registeredElements[componentId].images.forEach((item: string) => {
 					if (self.map.hasImage(item)) {
 						self.map.style.removeImage(item);
 					}
 				});
 
 				// cleanup events
-				self.registeredElements[componentId].events.forEach((item: any) => {
+				self.registeredElements[componentId].events.forEach((item: EventArgArray) => {
+					// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 					// @ts-ignore
 					self.map.off(...item);
 				});
 
 				// cleanup controls
-				self.registeredElements[componentId].controls.forEach((item: any) => {
-					self.map.removeControl(item);
+				self.registeredElements[componentId].controls.forEach((item: IControl | unknown) => {
+					self.map.removeControl(item as IControl);
 				});
 
 				// cleanup wrapper events
-				self.registeredElements[componentId].wrapperEvents.forEach(
-					(item: any) => {
-						self.wrapper.off(...item);
-					}
-				);
+				self.registeredElements[componentId].wrapperEvents.forEach((item: WrapperEventArgArray) => {
+					self.wrapper.off(...item);
+				});
 
 				self.initRegisteredElements(componentId, true);
 			}
 		};
 
 		// add style prop functions that require map._update to be called afterwards
-		let updatingStyleFunctions = [
-			"moveLayer",
-			"removeLayer",
-			"removeSource",
-			"setPaintProperty",
-			"setLayoutProperty",
+		const updatingStyleFunctions = [
+			'moveLayer',
+			'removeLayer',
+			'removeSource',
+			'setPaintProperty',
+			'setLayoutProperty',
 		];
 		updatingStyleFunctions.forEach((item) => {
 			this[item] = (...props: any[]) => {
-				if (
-					self.map &&
-					self.map.style &&
-					typeof self.map.style[item] === "function"
-				) {
+				if (self.map && self.map.style && typeof self.map.style[item] === 'function') {
 					self.map.style[item](...props);
 				}
 				return self.map._update ? self.map._update(true) : undefined;
@@ -498,13 +543,13 @@ class MapLibreGlWrapper {
 		});
 
 		// add style prop functions
-		let styleFunctions = [
-			"getLayer",
-			"getSource",
-			"listImages",
-			"getPaintProperty",
-			"getLayoutProperty",
-			"removeImage",
+		const styleFunctions = [
+			'getLayer',
+			'getSource',
+			'listImages',
+			'getPaintProperty',
+			'getLayoutProperty',
+			'removeImage',
 		];
 		styleFunctions.forEach((item) => {
 			this[item] = (...props: any[]) => {
@@ -517,57 +562,55 @@ class MapLibreGlWrapper {
 
 		this.addNativeMaplibreFunctionsAndProps = () => {
 			//	add MapLibre-gl functions
-			Object.getOwnPropertyNames(Object.getPrototypeOf(this.map)).forEach(
-				(item) => {
-					if (typeof this[item] === "undefined") {
-						this[item] = (...props: any[]) => self.map[item](...props);
-					}
+			Object.getOwnPropertyNames(Object.getPrototypeOf(this.map)).forEach((item) => {
+				if (typeof this[item] === 'undefined') {
+					this[item] = (...props: any[]) => self.map[item](...props);
 				}
-			);
+			});
 
 			//	add MapLibre-gl properties
 			Object.keys(this.map).forEach((item) => {
-				if (typeof this[item] === "undefined") {
+				if (typeof this[item] === 'undefined') {
 					this[item] = self.map[item];
 				}
 			});
 		};
 
 		// add functions that are missing on the MapLibre instances prototype
-		let missingFunctions = [
-			"getZoom",
-			"setZoom",
-			"getCenter",
-			"setCenter",
-			"getBearing",
-			"setBearing",
-			"getPitch",
-			"setPitch",
-			"jumpTo",
-			"flyTo",
-			"panTo",
-			"panBy",
-			"panBy",
-			"zoomTo",
-			"zoomIn",
-			"zoomOut",
-			"getPadding",
-			"setPadding",
-			"rotateTo",
-			"resetNorth",
-			"resetNorthPitch",
-			"snapToNorth",
-			"cameraForBounds",
-			"fitBounds",
-			"fitScreenCoordinates",
-			"getFreeCameraOptions",
-			"setFreeCameraOptions",
-			"easeTo",
-			"stop",
+		const missingFunctions = [
+			'getZoom',
+			'setZoom',
+			'getCenter',
+			'setCenter',
+			'getBearing',
+			'setBearing',
+			'getPitch',
+			'setPitch',
+			'jumpTo',
+			'flyTo',
+			'panTo',
+			'panBy',
+			'panBy',
+			'zoomTo',
+			'zoomIn',
+			'zoomOut',
+			'getPadding',
+			'setPadding',
+			'rotateTo',
+			'resetNorth',
+			'resetNorthPitch',
+			'snapToNorth',
+			'cameraForBounds',
+			'fitBounds',
+			'fitScreenCoordinates',
+			'getFreeCameraOptions',
+			'setFreeCameraOptions',
+			'easeTo',
+			'stop',
 		];
 		missingFunctions.forEach((item) => {
 			this[item] = (...props: any[]) => {
-				if (typeof self.map[item] === "function") {
+				if (typeof self.map[item] === 'function') {
 					return self.map[item].call(self.map, ...props);
 				}
 				return undefined;
@@ -575,24 +618,24 @@ class MapLibreGlWrapper {
 		});
 
 		// initialize the MapLibre-gl instance
-		let initializeMapLibre = async () => {
+		const initializeMapLibre = async () => {
 			// if mapOptions style URL is given and if it is not a mapbox URL fetch the json and initialize the mapbox object
 			if (
-				typeof props.mapOptions.style === "string" &&
-				props.mapOptions.style.indexOf("mapbox://") === -1
+				typeof props.mapOptions.style === 'string' &&
+				props.mapOptions.style.indexOf('mapbox://') === -1
 			) {
 				await fetch(props.mapOptions.style)
 					.then((response) => {
 						if (response.ok) {
 							return response.json();
 						} else {
-							throw new Error("error loading map style.json");
+							throw new Error('error loading map style.json');
 						}
 					})
 					.then((styleJson) => {
 						styleJson.layers.forEach((item: any) => {
 							self.baseLayers.push(item.id);
-							if (!self.firstSymbolLayer && item.type === "symbol") {
+							if (!self.firstSymbolLayer && item.type === 'symbol') {
 								self.firstSymbolLayer = item.id;
 							}
 						});
@@ -605,28 +648,27 @@ class MapLibreGlWrapper {
 			}
 
 			self.map = new Map(props.mapOptions) as MapType;
-			//@ts-ignore
-			window._map = self.map;
+			window['_map'] = self.map;
 
 			self.addNativeMaplibreFunctionsAndProps();
 			self.wrapper.refreshViewport();
-			self.wrapper.fire("viewportchange");
+			self.wrapper.fire('viewportchange');
 
-			self.map.on("load", () => {
+			self.map.on('load', () => {
 				self.addNativeMaplibreFunctionsAndProps();
 			});
 
-			self.map.on("move", () => {
+			self.map.on('move', () => {
 				self.wrapper.viewportState = self.wrapper.getViewport();
-				self.wrapper.fire("viewportchange");
+				self.wrapper.fire('viewportchange');
 			});
-			self.map.on("idle", () => {
+			self.map.on('idle', () => {
 				self.wrapper.refreshLayerState();
 			});
-			self.map.on("data", () => {
+			self.map.on('data', () => {
 				self.wrapper.refreshLayerState();
 			});
-			if (typeof props.onReady === "function") {
+			if (typeof props.onReady === 'function') {
 				props.onReady(self.map, self);
 			}
 		};