@mapcomponents/react-maplibre 0.1.66 → 0.1.67

package/dist/setupTests.d.ts

@@ -1,11 +1,11 @@
 export var uuid_regex: string;
 export namespace mockMapLibreMethods {
-    const on: jest.Mock<any, any>;
-    const off: jest.Mock<any, any>;
-    const addControl: jest.Mock<any, any>;
-    const removeControl: jest.Mock<any, any>;
-    const fitBounds: jest.Mock<any, any>;
-    const hasControl: jest.Mock<boolean, []>;
+    const on: jest.Mock<any, any, any>;
+    const off: jest.Mock<any, any, any>;
+    const addControl: jest.Mock<any, any, any>;
+    const removeControl: jest.Mock<any, any, any>;
+    const fitBounds: jest.Mock<any, any, any>;
+    const hasControl: jest.Mock<boolean, [], any>;
     function getCanvas(): HTMLCanvasElement;
     function getContainer(): {
         style: {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@mapcomponents/react-maplibre",
-	"version": "0.1.66",
+	"version": "0.1.67",
 	"main": "index.js",
 	"license": "MIT",
 	"module": "dist/index.esm.js",
@@ -23,69 +23,76 @@
 		"@emotion/css": "11.10.5",
 		"@emotion/react": "11.10.5",
 		"@emotion/styled": "11.10.5",
+		"@fontsource/material-icons": "^4.5.4",
+		"@fontsource/roboto": "^4.5.8",
 		"@mapbox/mapbox-gl-draw": "^1.3.0",
 		"@mapbox/mapbox-gl-sync-move": "0.3.0",
 		"@mui/icons-material": "5.11.0",
-		"@mui/material": "5.11.0",
-		"@mui/styles": "5.11.0",
+		"@mui/material": "5.11.6",
+		"@mui/styles": "5.11.2",
 		"@turf/turf": "^6.5.0",
-		"d3": "^7.7.0",
+		"d3": "^7.8.2",
 		"jspdf": "^2.5.1",
 		"maplibre-gl": "^2.4.0",
 		"mui-color": "^2.0.0-beta.2",
 		"react-draggable": "^4.4.5",
-		"react-i18next": "^11.14.3",
+		"react-i18next": "^12.1.4",
 		"react-moveable": "^0.45.1",
-		"three": "^0.147.0",
+		"storybook-source-link": "^2.0.4",
+		"three": "^0.149.0",
 		"uuid": "^9.0.0",
 		"wms-capabilities": "^0.6.0",
 		"xmldom": "^0.6.0"
 	},
 	"peerDependencies": {},
 	"devDependencies": {
-		"@babel/preset-react": "^7.16.7",
+		"@babel/preset-react": "^7.18.6",
 		"@bahmutov/cy-rollup": "^2.0.0",
-		"@cypress/react": "^6.2.0",
-		"@cypress/webpack-preprocessor": "^5.14.0",
-		"@rollup/plugin-alias": "^3.1.9",
-		"@rollup/plugin-babel": "^5.3.1",
-		"@rollup/plugin-commonjs": "^21.0.3",
-		"@rollup/plugin-node-resolve": "^13.1.3",
-		"@rollup/plugin-url": "^6.1.0",
-		"@storybook/addon-actions": "^6.4.19",
-		"@storybook/addon-docs": "^6.4.20",
-		"@storybook/addon-essentials": "^6.4.19",
-		"@storybook/addon-links": "^6.4.19",
-		"@storybook/addons": "^6.4.19",
-		"@storybook/node-logger": "^6.4.19",
-		"@storybook/react": "^6.4.19",
+		"@cypress/react": "^7.0.2",
+		"@cypress/webpack-preprocessor": "^5.16.1",
+		"@rollup/plugin-alias": "^4.0.3",
+		"@rollup/plugin-babel": "^6.0.3",
+		"@rollup/plugin-commonjs": "^24.0.1",
+		"@rollup/plugin-node-resolve": "^15.0.1",
+		"@rollup/plugin-url": "^8.0.1",
+		"@storybook/addon-actions": "^6.5.16",
+		"@storybook/addon-docs": "^6.5.16",
+		"@storybook/addon-essentials": "^6.5.16",
+		"@storybook/addon-links": "^6.5.16",
+		"@storybook/addon-storysource": "^6.5.16",
+		"@storybook/addons": "^6.5.16",
+		"@storybook/builder-webpack5": "^6.5.16",
+		"@storybook/manager-webpack5": "^6.5.16",
+		"@storybook/node-logger": "^6.5.16",
+		"@storybook/react": "^6.5.16",
 		"@storybook/testing-react": "^1.3.0",
-		"@storybook/theming": "^6.4.19",
-		"@svgr/rollup": "^6.2.1",
-		"@testing-library/react": "^12.1.2",
-		"@types/enzyme": "^3.10.11",
+		"@storybook/theming": "^6.5.16",
+		"@svgr/rollup": "^6.5.1",
+		"@testing-library/react": "^13.4.0",
+		"@types/enzyme": "^3.10.12",
 		"@types/expect": "^24.3.0",
-		"@types/jest": "^29.2.5",
-		"@types/mapbox__mapbox-gl-draw": "^1.2.3",
+		"@types/jest": "^29.4.0",
+		"@types/mapbox__mapbox-gl-draw": "^1.3.3",
 		"@types/mapbox__point-geometry": "^0.1.2",
 		"@types/mapbox__vector-tile": "^1.3.0",
-		"@types/react": "^17.0.43",
-		"@types/react-dom": "^17.0.14",
-		"@types/uuid": "^8.3.4",
-		"@typescript-eslint/eslint-plugin": "^5.36.1",
-		"@typescript-eslint/parser": "^5.36.1",
-		"@wojtekmaj/enzyme-adapter-react-17": "^0.6.7",
+		"@types/react": "^18.0.27",
+		"@types/react-dom": "^18.0.10",
+		"@types/three": "^0.148.1",
+		"@types/uuid": "^9.0.0",
+		"@typescript-eslint/eslint-plugin": "^5.49.0",
+		"@typescript-eslint/parser": "^5.49.0",
+		"@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
 		"avj": "^0.0.0",
 		"babel-jest": "^26.6.0",
 		"babel-plugin-inline-react-svg": "^2.0.1",
-		"babel-plugin-styled-components": "^2.0.6",
+		"babel-plugin-styled-components": "^2.0.7",
 		"babel-preset-react-app": "^10.0.1",
-		"cypress": "^10.9.0",
+		"cypress": "^12.4.1",
 		"enzyme": "^3.11.0",
-		"eslint": "^8.23.0",
-		"eslint-config-prettier": "^8.5.0",
-		"eslint-plugin-react": "^7.31.1",
-		"glob": "^7.2.0",
+		"eslint": "^8.32.0",
+		"eslint-config-prettier": "^8.6.0",
+		"eslint-plugin-react": "^7.32.1",
+		"glob": "^8.1.0",
 		"jest": "26.6.0",
 		"jest-circus": "26.6.0",
 		"jest-environment-jsdom-sixteen": "^2.0.0",
@@ -93,24 +100,24 @@
 		"jest-resolve": "26.6.0",
 		"jest-watch-typeahead": "0.6.1",
 		"node-fetch": "^3.3.0",
-		"postcss": "^8.4.12",
-		"prettier": "2.7.1",
-		"react": "^17.0.2",
+		"postcss": "^8.4.21",
+		"prettier": "2.8.3",
+		"react": "^18.2.0",
 		"react-app-polyfill": "^3.0.0",
-		"react-dev-utils": "^12.0.0",
-		"react-dom": "^17.0.2",
+		"react-dev-utils": "^12.0.1",
+		"react-dom": "^18.2.0",
 		"rollup": "^2.70.1",
 		"rollup-plugin-delete": "^2.0.0",
 		"rollup-plugin-import-css": "^3.0.3",
 		"rollup-plugin-peer-deps-external": "^2.2.4",
 		"rollup-plugin-postcss": "^4.0.2",
 		"rollup-plugin-typescript2": "^0.31.2",
-		"showdown": "^2.0.3",
-		"ts-jest": "^27.1.4",
-		"typedoc": "^0.22.13",
-		"typedoc-plugin-missing-exports": "^0.22.6",
+		"showdown": "^2.1.0",
+		"ts-jest": "^29.0.5",
+		"typedoc": "^0.23.24",
+		"typedoc-plugin-missing-exports": "^1.0.0",
 		"typedoc-twilio-theme": "^1.0.1",
-		"typescript": "^4.6.3"
+		"typescript": "^4.9.4"
 	},
 	"jest": {
 		"roots": [

package/rollup.config.js

@@ -1,56 +1,57 @@
-import peerDepsExternal from "rollup-plugin-peer-deps-external";
-import resolve from "@rollup/plugin-node-resolve";
-import commonjs from "@rollup/plugin-commonjs";
-import typescript from "rollup-plugin-typescript2";
+import peerDepsExternal from 'rollup-plugin-peer-deps-external';
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import typescript from 'rollup-plugin-typescript2';
 
-import babel from "@rollup/plugin-babel";
-import url from "@rollup/plugin-url";
-import external from "rollup-plugin-peer-deps-external";
+import babel from '@rollup/plugin-babel';
+import url from '@rollup/plugin-url';
+import external from 'rollup-plugin-peer-deps-external';
 
-import css from "rollup-plugin-import-css";
-import del from "rollup-plugin-delete";
-import svgr from "@svgr/rollup";
+import css from 'rollup-plugin-import-css';
+import del from 'rollup-plugin-delete';
+import svgr from '@svgr/rollup';
 
 import pkg from "./package.json";
 
 const config = {
-  input: pkg.source,
-  output: [{ file: pkg.module, format: "esm", sourcemap: true }],
-  plugins: [
-    svgr({
-      svgo: false,
-    }),
-    url(),
-    babel({
-      exclude: "node_modules/**",
-      babelHelpers: "bundled",
-      presets: ["@babel/preset-react"],
-    }),
-    external(),
-    peerDepsExternal(),
-    resolve(),
-    commonjs(),
-    typescript({
-      useTsconfigDeclarationDir: true,
-      tsconfig: "tsconfig.json",
-    }),
-    css(),
-    del({ targets: ["build/*"] }),
-  ],
-  external: [
-    "prop-types",
-    "d3",
-    "@emotion/react",
-    "@emotion/styled",
-    "@babel/helpers",
-    "jspdf",
-    ...Object.keys(pkg.dependencies),
-    ...Object.keys(pkg.peerDependencies),
-    ...Object.keys(pkg.devDependencies),
-  ],
-  inlineDynamicImports: true,
-  onwarn: function (warning, warn) {
-    warn(warning);
-  },
+	input: pkg.source,
+	output: [{ file: pkg.module, format: 'esm', sourcemap: true }],
+	plugins: [
+		svgr({
+			svgo: false,
+		}),
+		url(),
+		babel({
+			exclude: 'node_modules/**',
+			babelHelpers: 'bundled',
+			presets: ['@babel/preset-react'],
+		}),
+		external(),
+		peerDepsExternal(),
+		resolve(),
+		commonjs(),
+		typescript({
+			useTsconfigDeclarationDir: true,
+			tsconfig: 'tsconfig.json',
+		}),
+		css(),
+		del({ targets: ['build/*'] }),
+	],
+	external: [
+		'!maplibre-gl',
+		'prop-types',
+		'd3',
+		'@emotion/react',
+		'@emotion/styled',
+		'@babel/helpers',
+		'jspdf',
+		...Object.keys(pkg.dependencies),
+		...Object.keys(pkg.peerDependencies),
+		...Object.keys(pkg.devDependencies),
+	],
+ inlineDynamicImports: true,
+	onwarn: function (warning, warn) {
+		warn(warning);
+	},
 };
 export default config;

package/src/@types/assets/index.d.ts

@@ -0,0 +1,20 @@
+declare module "*.svg" {
+  import React = require('react');
+  export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
+  const src: string;
+  export default src;
+}
+declare module "*.jpg" {
+  const content: string;
+  export default content;
+}
+
+declare module "*.png" {
+  const content: string;
+  export default content;
+}
+
+declare module "*.json" {
+  const content: string;
+  export default content;
+}

package/src/components/MapLibreMap/MapLibreMap.stories.js

@@ -17,6 +17,10 @@ const storyoptions = {
 			},
 		},
 	},
+
+  parameters: {
+    sourceLink: 'components/MapLibreMap/MapLibreMap.tsx'
+	}
 };
 export default storyoptions;
 
@@ -24,7 +28,7 @@ const Template = (args) => {
 	return (
 		<MapComponentsProvider>
 			<MapLibreMap
-				options={args.options}
+				options={{ ...args.options }}
 				style={{
 					position: "absolute",
 					height: "100vh",
@@ -61,6 +65,8 @@ const StyleChangeTemplate = (args) => {
 					onClick={() =>
 						setActiveStyle("https://wms.wheregroup.com/tileserver/style/osm-bright.json")
 					}
+					variant="contained"
+					sx={{marginRight:'5px'}}
 				>
 					OSM-Bright
 				</Button>
@@ -68,6 +74,7 @@ const StyleChangeTemplate = (args) => {
 					onClick={() =>
 						setActiveStyle("https://wms.wheregroup.com/tileserver/style/osm-fiord-color.json")
 					}
+					variant="contained"
 				>
 					OSM-Fiord-Color
 				</Button>

package/src/components/MapLibreMap/MapLibreMap.tsx

@@ -1,6 +1,6 @@
 import React, { useRef, useEffect, useContext, FC,	RefObject } from "react";
 
-import MapContext from "../../contexts/MapContext";
+import MapContext, { MapContextType } from "../../contexts/MapContext";
 import MapLibreGlWrapper from "./lib/MapLibreGlWrapper";
 
 import { MapOptions as MapOptionsType } from "maplibre-gl";
@@ -59,35 +59,38 @@ const defaultProps: MapLibreMapProps = {
  * @category Map components
  */
 const MapLibreMap: FC<MapLibreMapProps> = (props: MapLibreMapProps) => {
-	const map: any = useRef<MapLibreGlWrapper>(null);
+	const map = useRef<MapLibreGlWrapper>();
 	const mapContainer = useRef<HTMLDivElement>();
 
-	const mapContext: any = useContext<MapContextType>(MapContext);
+	const mapContext = useContext<MapContextType>(MapContext);
 
 	const mapIdRef = useRef(props.mapId);
 	const initializedRef = useRef(false);
 	const currentStyle = useRef(props.options?.style);
 
 	useEffect(() => {
-		let mapId = mapIdRef.current;
+		const mapId = mapIdRef.current;
 
 		return () => {
 			mapContext.removeMap(mapId);
-			map.current?.remove?.();
-			map.current = null;
+			map.current?.map?.remove?.();
+			map.current = undefined;
 		};
 	}, []);
 
 	useEffect(() => {
 		if (initializedRef.current) return;
 
+		console.log(mapContainer.current);
+		
 		if (mapContainer.current) {
 			initializedRef.current = true;
 			map.current = new MapLibreGlWrapper({
 				mapOptions: {
 					style: '',
-					container: mapContainer.current,
 					...props.options,
+					...(props?.options?.style?{}:{style:defaultProps?.options?.style}),
+					container: mapContainer.current,
 				},
 				onReady: (map: any, wrapper: any) => {
 					map.once("load", () => {
@@ -108,8 +111,7 @@ const MapLibreMap: FC<MapLibreMapProps> = (props: MapLibreMapProps) => {
 			currentStyle.current = props.options.style;
 			map.current.map.setStyle(props.options.style);
 		}
-		// @ts-ignore: props.options is either passed or populated with default values
-	}, [props.options.style])
+	}, [props?.options?.style])
 
 	return <div ref={mapContainer as RefObject<HTMLDivElement>} className="mapContainer" style={props.style} />;
 };

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

@@ -9,6 +9,7 @@ import {
 	CustomLayerInterface,
 	SourceSpecification,
 	ControlPosition,
+	StyleImageMetadata,
 } from '!maplibre-gl';
 import { Map as MapType, Style } from 'maplibre-gl';
 
@@ -39,6 +40,34 @@ type ViewportState = {
  * @class
  */
 
+interface MapLibreGlWrapper extends MapType {
+	addImage: (
+		id: string,
+		image:
+			| HTMLImageElement
+			| ImageBitmap
+			| ImageData
+			| {
+					width: number;
+					height: number;
+					data: Uint8Array | Uint8ClampedArray;
+			  }
+			| StyleImageInterface,
+		key?: Partial<StyleImageMetadata> | string | undefined,
+		componentId?: string | undefined
+	) => this;
+	addLayer: (
+		layer:
+			| (LayerSpecification & {
+					source?: string | SourceSpecification | undefined;
+			  })
+			| (CustomLayerInterface & {
+					source?: string | SourceSpecification | undefined;
+			  }),
+		beforeId?: string | undefined,
+		componentId?: string | undefined
+	) => this;
+}
 class MapLibreGlWrapper {
 	registeredElements: {
 		[key: string]: {
@@ -90,42 +119,21 @@ class MapLibreGlWrapper {
 	initRegisteredElements: (componentId: string, force?: boolean | undefined) => void;
 	addNativeMaplibreFunctionsAndProps: () => void;
 	map: MapType;
-	style: object;
+	style: Style;
 
 	styleJson: object;
-	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,
+	addSource: (id: string, source: SourceSpecification, componentId?: string | undefined) => this;
+	addControl: (
+		control: IControl | unknown,
+		position?: ControlPosition | undefined,
 		componentId?: string | undefined
-	) => void;
+	) => this;
 	on: (
 		type: keyof MapLayerEventType | keyof MapEventType | string,
 		layerId: string | ((ev: unknown) => void),
 		handler?: ((ev: MapEventType & unknown) => Map | void) | string,
 		componentId?: string | undefined
-	) => Map | undefined;
+	) => this;
 	cleanup: (componentId: string) => void;
 
 	constructor(props: {
@@ -367,7 +375,7 @@ class MapLibreGlWrapper {
 		 */
 		this.addLayer = (layer, beforeId, componentId) => {
 			if (!self.map.style) {
-				return;
+				return this;
 			}
 			if (componentId && typeof componentId === 'string' && typeof layer.id !== 'undefined') {
 				self.initRegisteredElements(componentId);
@@ -379,7 +387,7 @@ class MapLibreGlWrapper {
 			}
 
 			self.map.addLayer(layer, beforeId);
-			return self.map;
+			return this;
 		};
 
 		/**
@@ -393,7 +401,7 @@ class MapLibreGlWrapper {
 		 */
 		this.addSource = (sourceId, source, componentId) => {
 			if (!self.map.style) {
-				return;
+				return this;
 			}
 			if (componentId && typeof componentId === 'string' && typeof sourceId !== 'undefined') {
 				self.initRegisteredElements(componentId);
@@ -401,7 +409,7 @@ class MapLibreGlWrapper {
 			}
 
 			self.map.addSource(sourceId, source);
-			return self.map;
+			return this;
 		};
 
 		/**
@@ -411,18 +419,21 @@ class MapLibreGlWrapper {
 		 * @param {*} image
 		 * @param {*} ref
 		 * @param {string} componentId
-		 * @returns {undefined}
 		 */
-		this.addImage = (id, image, componentId) => {
+		this.addImage = (id, image, meta, componentId) => {
 			if (!self.map.style) {
-				return;
+				return this;
+			}
+			if (typeof meta === 'string' && typeof componentId === 'undefined') {
+				return self.addImage(id, image, undefined, meta);
 			}
 			if (componentId && typeof componentId === 'string' && typeof id !== 'undefined') {
 				self.initRegisteredElements(componentId);
 				self.registeredElements[componentId].images.push(id);
 			}
 
-			self.map.addImage(id, image);
+			self.map.addImage(id, image, meta as Partial<StyleImageMetadata> | undefined);
+			return this;
 		};
 
 		/**
@@ -456,7 +467,7 @@ class MapLibreGlWrapper {
 			// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 			// @ts-ignore
 			self.map.on(..._arguments);
-			return self.map;
+			return this;
 		};
 
 		/**
@@ -473,7 +484,7 @@ class MapLibreGlWrapper {
 			}
 
 			self.map.addControl(control as IControl, position);
-			return self.map;
+			return this;
 		};
 
 		/**
@@ -675,7 +686,6 @@ class MapLibreGlWrapper {
 		initializeMapLibre();
 	}
 }
-
 export default MapLibreGlWrapper;
 
 export type { LayerState, ViewportState };

package/src/components/MlCenterPosition/MlCenterPosition.tsx

@@ -42,7 +42,7 @@ const MlCenterPosition = (props: MlCenterPositionProps) => {
 		navigator.geolocation.getCurrentPosition(getLocationSuccess, getLocationError);
 	};
 
-	const getLocationSuccess = useCallback((location) => {
+	const getLocationSuccess = useCallback((location:GeolocationPosition) => {
 		mapHook.map?.map.setCenter?.([location.coords.longitude, location.coords.latitude]);
 	}, [mapHook.map]);
 

package/src/components/MlFollowGps/MlFollowGps.tsx

@@ -93,7 +93,7 @@ const MlFollowGps = (props: MlFollowGpsProps) => {
 	const initiallyCentered = useRef(false);
 
 	const getLocationSuccess = useCallback(
-		(pos) => {
+		(pos:GeolocationPosition) => {
 			if (!mapHook.map) return;
 
 			if ((!props.centerUserPosition && !initiallyCentered.current) || props.centerUserPosition) {
@@ -127,12 +127,12 @@ const MlFollowGps = (props: MlFollowGpsProps) => {
 		if (!userLocationGeoJson) {
 			return undefined;
 		}
-		let radius = 0.02;
-		let bearing1 = deviceOrientation - 15;
-		let bearing2 = deviceOrientation + 15;
+		const radius = 0.02;
+		const bearing1 = deviceOrientation - 15;
+		const bearing2 = deviceOrientation + 15;
 		const options = { steps: 65 };
-		let arc = lineArc(userLocationGeoJson, radius, bearing1, bearing2, options);
-		let copy = arc;
+		const arc = lineArc(userLocationGeoJson, radius, bearing1, bearing2, options);
+		const copy = arc;
 		copy.geometry.coordinates.push(userLocationGeoJson.geometry.coordinates);
 		copy.geometry.coordinates.slice(0, 0);
 		return copy;
@@ -144,7 +144,7 @@ const MlFollowGps = (props: MlFollowGpsProps) => {
 
 	useEffect(() => {
 		if (isFollowed) {
-			let _handleOrientation = handleOrientation;
+			const _handleOrientation = handleOrientation;
 			window.addEventListener("deviceorientation", _handleOrientation);
 			return () => {
 				window.removeEventListener("deviceorientation", _handleOrientation);
@@ -159,7 +159,7 @@ const MlFollowGps = (props: MlFollowGpsProps) => {
 		if (!mapHook.map) return;
 
 		if (isFollowed) {
-			let _watchId = navigator.geolocation.watchPosition(getLocationSuccess, getLocationError);
+			const _watchId = navigator.geolocation.watchPosition(getLocationSuccess, getLocationError);
 
 			return () => {
 				navigator.geolocation.clearWatch(_watchId);