@mapcomponents/deck-gl 0.0.7

package/src/contexts/DeckGlContext.tsx

@@ -0,0 +1,66 @@
+import React, { ReactNode, useEffect, useRef, useState } from 'react';
+import { useMap } from '@mapcomponents/react-maplibre';
+import { Deck, Layer } from '@deck.gl/core/typed';
+import { MapboxLayer } from '@deck.gl/mapbox/typed';
+
+export interface DeckGlContextType {
+	deckGl: Deck | undefined;
+	deckGlLayerArray: Layer[];
+	setDeckGlLayerArray: React.Dispatch<React.SetStateAction<Layer[]>>;
+}
+interface DeckGlContextProviderProps {
+	mapId: string;
+	children: ReactNode;
+}
+
+const layerId = 'deckgl-layer';
+const DeckGlContext = React.createContext({} as DeckGlContextType);
+
+const DeckGlContextProvider = ({ mapId, children }: DeckGlContextProviderProps) => {
+	const mapHook = useMap({ mapId });
+
+	const [deckGl, setDeckGl] = useState<Deck | undefined>(undefined);
+	const layerRef = useRef<MapboxLayer<Layer> | undefined>(undefined);
+	const [deckGlLayerArray, setDeckGlLayerArray] = useState([]);
+
+	useEffect(() => {
+		if (!mapHook.map) return;
+
+		const deck = new Deck({
+			gl: mapHook.map.painter.context.gl,
+			layers: [],
+		});
+
+		layerRef.current = new MapboxLayer({
+			id: layerId,
+			deck: deck,
+		});
+
+		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+		// @ts-ignore
+		mapHook.map.addLayer(layerRef.current);
+
+		setDeckGl(deck);
+		return () => {
+			mapHook.map?.removeLayer(layerId);
+			layerRef.current = undefined;
+		};
+	}, [mapHook.map]);
+
+	useEffect(() => {
+		if (!deckGl) return;
+		deckGl.setProps({
+			layers: [...deckGlLayerArray],
+		});
+	}, [deckGlLayerArray, deckGl]);
+
+	const value = {
+		deckGl,
+		deckGlLayerArray,
+		setDeckGlLayerArray,
+	};
+	return <DeckGlContext.Provider value={value}>{children}</DeckGlContext.Provider>;
+};
+
+export { DeckGlContextProvider };
+export default DeckGlContext;

package/src/custom.d.ts

@@ -0,0 +1,4 @@
+import { GeoJSONFeature } from "maplibre-gl";
+import { GeoJSONObject } from '@turf/turf';
+
+export type GeoJSON = (GeoJSONFeature & GeoJSONObject);

package/src/decorators/MapContextDecorator.js

@@ -0,0 +1,41 @@
+import React, { useMemo } from 'react';
+
+import {
+	MapComponentsProvider,
+	MapLibreMap,
+	MlNavigationTools,
+	getTheme,
+} from '@mapcomponents/react-maplibre';
+import './style.css';
+import { ThemeProvider as MUIThemeProvider } from '@mui/material/styles';
+
+const decorators = [
+	(Story, context) => {
+		const theme = useMemo(() => getTheme(context?.globals?.theme), [context?.globals?.theme]);
+
+		return (
+			<div className="fullscreen_map">
+				<MapComponentsProvider>
+					<MUIThemeProvider theme={theme}>
+						<Story />
+						<MapLibreMap
+							options={{
+								zoom: 14.5,
+								style: 'https://wms.wheregroup.com/tileserver/style/osm-bright.json',
+								center: [7.0851268, 50.73884],
+							}}
+							mapId="map_1"
+						/>
+						<MlNavigationTools
+							sx={{ bottom: '25px', right: '5px' }}
+							showZoomButtons={false}
+							mapId="map_1"
+						/>
+					</MUIThemeProvider>
+				</MapComponentsProvider>
+			</div>
+		);
+	},
+];
+
+export default decorators;

package/src/decorators/style.css

@@ -0,0 +1,34 @@
+#root {
+  background-color: #000;
+  position: absolute;
+  min-height: 400px;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+.docs-story {
+  min-height: 400px;
+  display: flex;
+  align-items: stretch;
+}
+.docs-story > div:first-child {
+  width: 100%;
+}
+
+.App {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+.fullscreen_map .mapContainer {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  z-index: 100;
+}
+

package/src/hooks/useDeckGl.tsx

@@ -0,0 +1,24 @@
+import DeckGlContext from '../contexts/DeckGlContext';
+import { useContext } from 'react';
+import { Layer } from '@deck.gl/core/typed';
+
+function useDeckGl() {
+	const deckGlContext = useContext(DeckGlContext);
+	const layerArray = deckGlContext.deckGlLayerArray;
+
+	function addLayer(layer: Layer) {
+		const newDeckGLLayerArray = [...layerArray];
+		newDeckGLLayerArray.push(layer);
+		deckGlContext.setDeckGlLayerArray(newDeckGLLayerArray);
+	}
+	function removeLayer(layer: Layer) {
+		const newDeckGLLayerArray = layerArray.filter((l) => l !== layer);
+		deckGlContext.setDeckGlLayerArray(newDeckGLLayerArray);
+	}
+	return {
+		addLayer,
+		removeLayer,
+		layerArray,
+	};
+}
+export default useDeckGl;

package/src/index.ts

@@ -0,0 +1,2 @@
+export { default as DeckGlContext, DeckGlContextProvider } from './contexts/DeckGlContext';
+export { default as useDeckGl } from './hooks/useDeckGl';

package/src/setupTests.js

@@ -0,0 +1,113 @@
+/* eslint-disable no-undef */
+import 'jest-enzyme';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
+
+import { configure } from 'enzyme';
+
+var uuid_regex = '[a-f0-9]{8}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{12}';
+export { uuid_regex };
+
+// MapLibre-gl mockup
+var mockMapLibreMethods = {
+	on: jest.fn(),
+	off: jest.fn(),
+	addControl: jest.fn(),
+	removeControl: jest.fn(),
+	fitBounds: jest.fn(),
+	hasControl: jest.fn(() => true),
+	getCanvas: () => document.createElement('canvas'),
+	getContainer: () => ({
+		style: {},
+	}),
+};
+export { mockMapLibreMethods };
+
+jest.mock('maplibre-gl/dist/maplibre-gl', () => {
+	const originalModule = jest.requireActual('maplibre-gl/dist/maplibre-gl');
+
+	return {
+		...originalModule,
+		GeolocateControl: jest.fn(),
+		Map: function () {
+			// eslint-disable-next-line @typescript-eslint/no-this-alias
+			var self = this;
+			this.layers = [];
+			this.sources = [];
+			this.style = { sourceCaches: {} };
+
+			let styleFunctions = {
+				// eslint-disable-next-line @typescript-eslint/no-unused-vars
+				addSource: (id, source) => {
+					if (typeof id.id !== 'undefined') {
+						self.sources.push(id);
+						self.style.sourceCaches[id] = {};
+					} else if (typeof id !== 'undefined') {
+						self.sources.push(id);
+					}
+				},
+				getSource: (id) => {
+					if (self.sources.indexOf(id) !== -1) {
+						return { setData: jest.fn() };
+					}
+					return false;
+				},
+				removeSource: (id) => {
+					const sourcePosition = self.sources.indexOf(id);
+					if (sourcePosition !== -1) {
+						self.sources.splice(sourcePosition, 1);
+						delete self.style.sourceCaches[id];
+					}
+				},
+				addLayer: (layer) => {
+					if (typeof layer.id !== 'undefined') {
+						self.layers.push(layer.id);
+						if (typeof layer.source !== 'undefined' && typeof layer.source === 'object') {
+							self.sources.push(layer.id);
+						}
+					}
+				},
+				getLayer: (id) => {
+					if (self.layers.indexOf(id) !== -1) {
+						return {};
+					}
+					return false;
+				},
+				removeLayer: (id) => {
+					const layerPosition = self.layers.indexOf(id);
+					if (layerPosition !== -1) {
+						self.layers.splice(layerPosition, 1);
+					}
+				},
+			};
+
+			return {
+				...styleFunctions,
+				once: (eventName, callback) => {
+					callback();
+				},
+				remove: jest.fn(),
+				setLayerZoomRange: jest.fn(),
+				setLayoutProperty: jest.fn(),
+				addImage: jest.fn(),
+				loadImage: jest.fn(),
+				removeImage: jest.fn(),
+				hasImage: jest.fn(),
+				project: jest.fn(),
+				setZoom: jest.fn(),
+				setPitch: jest.fn(),
+				setCenter: jest.fn(),
+				style: { ...styleFunctions },
+				layers: this.layers,
+				sources: this.sources,
+				_update: jest.fn(),
+				...mockMapLibreMethods,
+			};
+		},
+		NavigationControl: jest.fn(),
+	};
+});
+
+configure({ adapter: new Adapter() });
+
+window.URL.createObjectURL = function () {};
+window.HTMLCanvasElement.prototype.getContext = () => {};

package/src/stories/components/Readme.js

@@ -0,0 +1,7 @@
+import { Description } from "@storybook/addon-docs/blocks";
+
+import readme from "../README.md";
+
+const Readme = () => <Description markdown={readme} />;
+
+export default Readme;

package/src/util/BubbleForInstructions.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import ReplyAllIcon from '@mui/icons-material/ReplyAll';
+import { Box, Typography } from '@mui/material';
+
+function BubbleForInstruction(props) {
+	return (
+		<>
+			<Box
+				sx={{
+					width: '475px',
+					height: '475px',
+					position: 'fixed',
+					display: 'block',
+					borderRadius: '360px',
+					bgcolor: 'primary.main',
+					right: props.bubbleRight,
+					bottom: props.bubbleBottom,
+					left: props.bubbleLeft,
+					top: props.bubbleTop,
+					zIndex: props.zIndex,
+				}}
+			>
+				<Typography
+					variant="h5"
+					sx={{
+						marginTop: props.textMarginTop,
+						marginLeft: props.textMarginLeft,
+						color: 'text.contrast',
+						textAlign: 'left',
+					}}
+				>
+					<b>{props.children}</b>
+				</Typography>
+				<ReplyAllIcon
+					sx={{
+						color: 'text.contrast',
+						fontSize: '80px',
+						position: 'absolute',
+						transform: props.iconTransform,
+						marginTop: props.iconMarginTop,
+						marginLeft: props.iconMarginLeft,
+					}}
+				/>
+			</Box>
+		</>
+	);
+}
+export default BubbleForInstruction;

package/src/util/Instructions.tsx

@@ -0,0 +1,60 @@
+import React, { useEffect, useState, useRef } from 'react';
+import {Fade, SxProps} from '@mui/material';
+import BubbleStyle from './BubbleForInstructions';
+
+interface StepObject {
+	duration: number;
+	props: SxProps;
+	content: JSX.Element;
+}
+
+interface InstructionProps {
+	steps: Array<StepObject>;
+	open: boolean;
+	callback?: () => void;
+}
+
+const Instructions = (props: InstructionProps) => {
+	const [activeStep, setActiveStep] = useState<number>();
+	const initializedRef = useRef(false);
+
+	const activateStep = (stepId?: number | undefined) => {
+		let _nextStep: number | undefined = typeof stepId === 'undefined' ? 0 : stepId + 1;
+		if (typeof _nextStep !== 'undefined') {
+			if (_nextStep > props.steps.length + 1) {
+				_nextStep = undefined;
+			} else {
+				setTimeout(() => {
+					activateStep(_nextStep);
+				}, props.steps[_nextStep].duration);
+			}
+		}
+		setActiveStep(_nextStep);
+	};
+	useEffect(() => {
+		if (props.open && !initializedRef.current) {
+			initializedRef.current = true;
+			activateStep();
+		}
+		if (!props.open) {
+			initializedRef.current = false;
+			setActiveStep(undefined);
+		}
+	}, [props.open]);
+
+	return (
+		<>
+			{typeof activeStep !== 'undefined' && (
+				<Fade in={true} timeout={150}>
+					<div>
+						<BubbleStyle {...props.steps[activeStep].props}>
+							{props.steps[activeStep].content}
+						</BubbleStyle>
+					</div>
+				</Fade>
+			)}
+		</>
+	);
+};
+
+export default Instructions;

package/src/util/index.js

@@ -0,0 +1,4 @@
+import layerRemovalTest from "./layerRemovalTest";
+import sourceRemovalTest from "./sourceRemovalTest";
+
+export { layerRemovalTest, sourceRemovalTest };

package/src/util/layerRemovalTest.js

@@ -0,0 +1,121 @@
+import React, { useContext, useState } from "react";
+import { mount } from "enzyme";
+import { MapContext, MapComponentsProvider } from "../index";
+import MapLibreMap from "./../components/MapLibreMap/MapLibreMap";
+
+const layerRemovalTest = (
+	ComponentName,
+	Component,
+	regexLayerNameTest,
+	humanReadableLayerName,
+	beforeWrapperInit,
+	afterWrapperInit,
+	createWrapperFunction
+) => {
+	const TestComponent = (props) => {
+		const [layerVisible, setLayerVisible] = useState(true);
+		const [refreshTrigger, setRefreshTrigger] = useState(0);
+		const mapContext = useContext(MapContext);
+
+		return (
+			<>
+				<MapLibreMap />
+
+				{layerVisible && Component}
+
+				<button
+					className="toggle_layer_visible"
+					onClick={() => {
+						setLayerVisible(!layerVisible);
+					}}
+				>
+					toggle layer visible
+				</button>
+				<button
+					className="trigger_refresh"
+					onClick={() => {
+						setRefreshTrigger(refreshTrigger + 1);
+					}}
+				>
+					refresh
+				</button>
+				<div className="layers_json">
+					{mapContext.map &&
+						refreshTrigger &&
+						JSON.stringify(mapContext.map.map.layers)}
+				</div>
+			</>
+		);
+	};
+
+	const createWrapper =
+		(typeof createWrapperFunction === "function" && createWrapperFunction) ||
+		(() =>
+			mount(
+				<MapComponentsProvider>
+					<TestComponent />
+				</MapComponentsProvider>
+			));
+
+	describe(ComponentName, () => {
+		it(
+			"should add a Layer with the id '" +
+				humanReadableLayerName +
+				"' to the MapLibre instance",
+			async () => {
+				if (typeof beforeWrapperInit === "function") {
+					await beforeWrapperInit();
+				}
+
+				const wrapper = createWrapper(TestComponent);
+
+				if (typeof afterWrapperInit === "function") {
+					await afterWrapperInit();
+				}
+
+				wrapper.find(".trigger_refresh").simulate("click");
+
+				// debug helper
+				//console.log('layer removal test')
+				//console.log(wrapper.find(".layers_json").text());
+				//console.log(regexLayerNameTest.toString());
+				//console.log(regexLayerNameTest.test(wrapper.find(".layers_json").text()));
+				expect(regexLayerNameTest.test(wrapper.find(".layers_json").text())).toEqual(
+					true
+				);
+			}
+		);
+
+		it(
+			"should remove a Layer with the id '" +
+				humanReadableLayerName +
+				"' from the MapLibre instance",
+			async () => {
+				if (typeof beforeWrapperInit === "function") {
+					await beforeWrapperInit();
+				}
+
+				const wrapper = createWrapper(TestComponent);
+
+				if (typeof afterWrapperInit === "function") {
+					await afterWrapperInit();
+				}
+
+				wrapper.find(".trigger_refresh").simulate("click");
+
+				expect(regexLayerNameTest.test(wrapper.find(".layers_json").text())).toEqual(
+					true
+				);
+
+				wrapper.find(".toggle_layer_visible").simulate("click");
+				wrapper.find(".trigger_refresh").simulate("click");
+
+				expect(regexLayerNameTest.test(wrapper.find(".layers_json").text())).toEqual(
+					false
+				);
+			}
+		);
+	});
+};
+
+export default layerRemovalTest;

package/src/util/sourceRemovalTest.js

@@ -0,0 +1,113 @@
+import React, { useContext, useState } from "react";
+import { mount, configure } from "enzyme";
+import { MapContext, MapComponentsProvider } from "../index";
+import MapLibreMap from "./../components/MapLibreMap/MapLibreMap";
+
+const sourceRemovalTest = (
+	ComponentName,
+	Component,
+	regexLayerNameTest,
+	humanReadableLayerName,
+	beforeWrapperInit,
+	afterWrapperInit
+) => {
+	const TestComponent = (props) => {
+		const [layerVisible, setLayerVisible] = useState(true);
+		const [refreshTrigger, setRefreshTrigger] = useState(0);
+		const mapContext = useContext(MapContext);
+
+		return (
+			<>
+				<MapLibreMap />
+
+				{layerVisible && Component}
+
+				<button
+					className="toggle_layer_visible"
+					onClick={() => {
+						setLayerVisible(!layerVisible);
+					}}
+				>
+					toggle layer visible
+				</button>
+				<button
+					className="trigger_refresh"
+					onClick={() => {
+						setRefreshTrigger(refreshTrigger + 1);
+					}}
+				>
+					refresh
+				</button>
+				<div className="sources_json">
+					{mapContext.map &&
+						refreshTrigger &&
+						JSON.stringify(mapContext.map.map.sources)}
+				</div>
+			</>
+		);
+	};
+
+	const createWrapper = () =>
+		mount(
+			<MapComponentsProvider>
+				<TestComponent />
+			</MapComponentsProvider>
+		);
+
+	describe(ComponentName, () => {
+		it(
+			"should add a Source with the id '" +
+				humanReadableLayerName +
+				"' to the MapLibre instance",
+			async () => {
+				if (typeof beforeWrapperInit === "function") {
+					await beforeWrapperInit();
+				}
+
+				const wrapper = createWrapper();
+
+				if (typeof afterWrapperInit === "function") {
+					await afterWrapperInit();
+				}
+
+				wrapper.find(".trigger_refresh").simulate("click");
+
+				expect(
+					regexLayerNameTest.test(wrapper.find(".sources_json").text())
+				).toEqual(true);
+			}
+		);
+
+		it(
+			"should remove a Source with the id '" +
+				humanReadableLayerName +
+				"' from the MapLibre instance",
+			async () => {
+				if (typeof beforeWrapperInit === "function") {
+					await beforeWrapperInit();
+				}
+
+				const wrapper = createWrapper();
+
+				if (typeof afterWrapperInit === "function") {
+					await afterWrapperInit();
+				}
+
+				wrapper.find(".trigger_refresh").simulate("click");
+
+				expect(
+					regexLayerNameTest.test(wrapper.find(".sources_json").text())
+				).toEqual(true);
+
+				wrapper.find(".toggle_layer_visible").simulate("click");
+				wrapper.find(".trigger_refresh").simulate("click");
+
+				expect(
+					regexLayerNameTest.test(wrapper.find(".sources_json").text())
+				).toEqual(false);
+			}
+		);
+	});
+};
+
+export default sourceRemovalTest;

package/tsconfig.json

@@ -0,0 +1,34 @@
+{
+	"compilerOptions": {
+		"checkJs": false,
+		"esModuleInterop": true,
+		"importHelpers": false,
+		"isolatedModules": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": false,
+		"types": ["node", "jest", "geojson", "cypress"],
+		"typeRoots": ["./src/@types", "./node_modules/@types"],
+		"outDir": "build/esm",
+		"module": "esnext",
+		"target": "es5",
+		"lib": ["es6", "dom", "es2016", "es2017"],
+		"jsx": "react",
+		"declaration": true,
+		"declarationDir": "./dist",
+		"moduleResolution": "node",
+		"noUnusedLocals": true,
+		"noUnusedParameters": true,
+		"noImplicitReturns": true,
+		"noImplicitThis": true,
+		"noImplicitAny": true,
+		"strictNullChecks": true,
+		"suppressImplicitAnyIndexErrors": true,
+		"allowSyntheticDefaultImports": true,
+		"allowJs": true,
+		"baseUrl": "."
+	},
+	"include": ["src", "src/custom.d.tsx"],
+	"exclude": ["node_modules", "lib"]
+}