@mapcomponents/react-maplibre 0.1.66 → 0.1.67

package/src/components/MlThreeJsLayer/MlThreejsLayer.tsx

@@ -0,0 +1,228 @@
+import React, { useContext, useRef, useEffect, useState } from 'react';
+import MapContext from '../../contexts/MapContext';
+
+import Button from '@mui/material/Button';
+import maplibregl, { CustomLayerInterface, LngLatLike, Map } from 'maplibre-gl';
+import * as THREE from 'three';
+import GLTFLoader from './lib/GLTFLoader';
+import PropTypes from 'prop-types';
+import MapLibreGlWrapper from '../MapLibreMap/lib/MapLibreGlWrapper';
+
+/**
+ * Renders obj or gltf 3D Models on the MapLibreMap referenced by props.mapId
+ *
+ * @component
+ */
+
+export interface MlThreeJsLayerProps {
+	mapId?: string;
+	init?: object;
+	onDone?: () => void;
+}
+
+const MlThreeJsLayer = (props: MlThreeJsLayerProps) => {
+	const mapContext = useContext(MapContext);
+
+	const layerName = '3d-model';
+	const [showLayer, setShowLayer] = useState(true);
+	const showLayerRef = useRef(true);
+	const initializedRef = useRef(false);
+	const mapRef = useRef<MapLibreGlWrapper>();
+	const initFuncRef = useRef(props.init);
+
+	const cleanup = () => {
+		if (mapRef.current && mapRef.current.style) {
+			if (mapRef.current.getLayer(layerName)) {
+				mapRef.current.removeLayer(layerName);
+			}
+			mapRef.current = undefined;
+		}
+	};
+
+	useEffect(() => {
+		if (typeof initFuncRef.current === 'function') {
+			initFuncRef.current();
+		}
+
+		return cleanup;
+	}, []);
+
+	useEffect(() => {
+		if (!mapContext.mapExists(props.mapId) || initializedRef.current) return;
+
+		initializedRef.current = true;
+		mapRef.current = mapContext.getMap(props.mapId);
+
+		mapRef.current?.setCenter([7.099771581806502, 50.73395746209983]);
+		mapRef.current?.setZoom(15);
+		mapRef.current?.setPitch(45);
+
+		// parameters to ensure the model is georeferenced correctly on the map
+		const modelOrigin = [7.099771581806502, 50.73395746209983];
+		// 50.73395746209983, 7.099771581806502
+		const modelAltitude = 0;
+		const modelRotate = [Math.PI / 2, 90, 0];
+
+		const modelAsMercatorCoordinate = maplibregl.MercatorCoordinate.fromLngLat(
+			modelOrigin as LngLatLike,
+			modelAltitude
+		);
+
+		// transformation parameters to position, rotate and scale the 3D model onto the map
+		const modelTransform = {
+			translateX: modelAsMercatorCoordinate.x + 0.0000008,
+			translateY: modelAsMercatorCoordinate.y + 0.0000018,
+			translateZ: modelAsMercatorCoordinate.z,
+			rotateX: modelRotate[0],
+			rotateY: modelRotate[1],
+			rotateZ: modelRotate[2],
+			/* Since our 3D model is in real world meters, a scale transform needs to be
+			 * applied since the CustomLayerInterface expects units in MercatorCoordinates.
+			 */
+			scale: modelAsMercatorCoordinate.meterInMercatorCoordinateUnits() + 0.00000003,
+		};
+
+		//var THREE = window.THREE;
+
+		// configuration of the custom layer for a 3D model per the CustomLayerInterface
+		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+		// @ts-ignore
+		const customLayer: CustomLayerInterface & {
+			camera: THREE.Camera | undefined;
+			scene: THREE.Scene | undefined;
+			map: Map;
+			renderer: THREE.WebGLRenderer;
+		} = {
+			id: '3d-model',
+			type: 'custom',
+			renderingMode: '3d',
+			camera: undefined,
+			scene: undefined,
+			onAdd: function (map: Map, gl: WebGL2RenderingContext) {
+				// eslint-disable-next-line @typescript-eslint/no-this-alias
+				const self = this;
+				this.camera = new THREE.Camera();
+				this.scene = new THREE.Scene();
+
+				// create two three.js lights to illuminate the model
+				const directionalLight = new THREE.DirectionalLight(0xffffff);
+				directionalLight.position.set(0, -70, 100).normalize();
+				this.scene.add(directionalLight);
+
+				const directionalLight2 = new THREE.DirectionalLight(0xffffff);
+				directionalLight2.position.set(0, 70, 100).normalize();
+				this.scene.add(directionalLight2);
+
+				// use the three.js GLTF loader to add the 3D model to the three.js scene
+				const loader = new GLTFLoader();
+				loader.load(
+					'assets/3D/godzilla_simple.glb',
+					//"https://docs.mapbox.com/mapbox-gl-js/assets/34M_17/34M_17.gltf",
+					function (gltf: { scene: THREE.Scene }) {
+						self.scene?.add(gltf.scene);
+						if (typeof props.onDone === 'function') {
+							props.onDone();
+						}
+					}.bind(this)
+				);
+				this.map = map;
+
+				// use the Mapbox GL JS map canvas for three.js
+				this.renderer = new THREE.WebGLRenderer({
+					canvas: map.getCanvas(),
+					context: gl,
+					antialias: true,
+				});
+
+				this.renderer.autoClear = false;
+			},
+			render: function (_gl, matrix) {
+				const rotationX = new THREE.Matrix4().makeRotationAxis(
+					new THREE.Vector3(1, 0, 0),
+					modelTransform.rotateX
+				);
+				const rotationY = new THREE.Matrix4().makeRotationAxis(
+					new THREE.Vector3(0, 1, 0),
+					modelTransform.rotateY
+				);
+				const rotationZ = new THREE.Matrix4().makeRotationAxis(
+					new THREE.Vector3(0, 0, 1),
+					modelTransform.rotateZ
+				);
+
+				const m = new THREE.Matrix4().fromArray(matrix);
+				const l = new THREE.Matrix4()
+					.makeTranslation(
+						modelTransform.translateX,
+						modelTransform.translateY,
+						modelTransform.translateZ
+					)
+					.scale(
+						new THREE.Vector3(modelTransform.scale, -modelTransform.scale, modelTransform.scale)
+					)
+					.multiply(rotationX)
+					.multiply(rotationY)
+					.multiply(rotationZ);
+
+				if (this.camera && this.scene) {
+					this.camera.projectionMatrix = m.multiply(l);
+					this.renderer.resetState();
+					this.renderer.render(this.scene, this.camera);
+					this.map.triggerRepaint();
+				}
+			},
+		};
+
+		mapRef.current?.addLayer(customLayer);
+
+		if (mapRef.current?.getLayer(layerName)) {
+			mapRef.current.setLayoutProperty(layerName, 'visibility', 'visible');
+		}
+	}, [mapContext.mapIds, mapContext, props]);
+
+	useEffect(() => {
+		if (!mapRef.current) return;
+
+		if (mapRef.current.getLayer(layerName)) {
+			// toggle layer visibility by changing the layout object's visibility property
+			if (showLayer) {
+				mapRef.current.setLayoutProperty(layerName, 'visibility', 'visible');
+			} else {
+				mapRef.current.setLayoutProperty(layerName, 'visibility', 'none');
+			}
+		}
+		//
+	}, [showLayer, mapContext]);
+
+	return (
+		<>
+			<Button
+				color="primary"
+				variant={showLayer ? 'contained' : 'outlined'}
+				onClick={() => {
+					setShowLayer(!showLayer);
+					showLayerRef.current = !showLayer;
+				}}
+			>
+				3D
+			</Button>
+		</>
+	);
+};
+
+MlThreeJsLayer.propTypes = {
+	/**
+	 * Id of the target MapLibre instance in mapContext
+	 */
+	mapId: PropTypes.string,
+	/**
+	 * function that gets called when initialized
+	 */
+	init: PropTypes.func,
+	/**
+	 * function that gets called when models are loaded
+	 */
+	onDone: PropTypes.func,
+};
+
+export default MlThreeJsLayer;

package/src/components/MlWmsLoader/MlWmsLoader.tsx

@@ -1,6 +1,6 @@
 import React, { useRef, useEffect, useContext, useCallback, useState, useMemo } from 'react';
 
-import MapContext from '../../contexts/MapContext';
+import MapContext, { MapContextType } from '../../contexts/MapContext';
 import { v4 as uuidv4 } from 'uuid';
 
 import MlWmsLayer from '../MlWmsLayer/MlWmsLayer';
@@ -13,7 +13,7 @@ import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
 import ListItemText from '@mui/material/ListItemText';
 import IconButton from '@mui/material/IconButton';
-import { LngLat } from 'maplibre-gl';
+import { LngLat,  MapMouseEvent } from 'maplibre-gl';
 import MapLibreGlWrapper from '../MapLibreMap/lib/MapLibreGlWrapper';
 import { Layer2, Layer3 } from 'wms-capabilities';
 import { useWmsReturnType } from '../../hooks/useWms';
@@ -117,7 +117,8 @@ const MlWmsLoader = (props: MlWmsLoaderProps) => {
 	}, [layers]);
 
 	const getFeatureInfo = useCallback(
-		(ev) => {
+		// eslint-disable-next-line @typescript-eslint/ban-types
+		(ev:(MapMouseEvent & Object)) => {
 			if (!mapRef.current) return;
 			setFeatureInfoLngLat(undefined);
 			setFeatureInfoContent(undefined);
@@ -190,7 +191,9 @@ const MlWmsLoader = (props: MlWmsLoaderProps) => {
 
 		const _getFeatureInfo = getFeatureInfo;
 
-		mapRef.current.on('click', _getFeatureInfo, componentId.current);
+		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+		// @ts-ignore: ts appears not to consider overloads
+		mapRef.current.map.on('click', _getFeatureInfo, componentId.current);
 		return () => {
 			mapRef.current?.map.off?.('click', _getFeatureInfo);
 		};

package/src/contexts/MapContext.tsx

@@ -1,9 +1,18 @@
-import React, { useState, useRef } from "react";
+import React, { useState, useRef, ReactNode } from 'react';
 import MapLibreGlWrapper from '../components/MapLibreMap/lib/MapLibreGlWrapper';
 
+export interface MapContextType {
+	mapIds: string[];
+	mapExists: (map_id: string | undefined) => boolean;
+	maps: MapLibreGlWrapper[];
+	map: MapLibreGlWrapper | undefined;
+	getMap: (map_id: string | undefined) => MapLibreGlWrapper;
+	setMap: (map: MapLibreGlWrapper) => void;
+	removeMap: (map_id: string | undefined) => void;
+	registerMap: (map_id: string | undefined, map: MapLibreGlWrapper) => void;
+}
 const MapContext = React.createContext({} as MapContextType);
 
-
 /**
  * MapComponentsProvider must be imported and wrapped around component where at least one of its child nodes requires access to a MapLibre-gl or openlayers instance that is registered in this mapContext.
 MapComponentsProvider must be used one level higher than the first use of MapContext.
@@ -11,19 +20,18 @@ MapComponentsProvider must be used one level higher than the first use of MapCon
  * MapComponentsProvider requires at least one use of the MapLibreMap component somewhere down the component tree that will create the MapLibre-gl object and set the reference at MapContext.map. For MapLibre maps it is a good idea to provide a mapId attribute to the MapLibreMap Component even if you are only using a single map instance at start. It will make a later transition to using multiple instances within the same project much easier.
  */
 
-const MapComponentsProvider = ({ children }:{children:any}) => {
-	const [map, setMap] = useState<(MapLibreGlWrapper | undefined)>(undefined);
+const MapComponentsProvider = ({ children }: { children: ReactNode }) => {
+	const [map, setMap] = useState<MapLibreGlWrapper | undefined>(undefined);
 	const [mapIds, setMapIds] = useState<[...string[]]>([]);
-	let mapIds_raw = useRef<[...string[]]>([]);
-	let maps = useRef<any>({});
-
+	const mapIds_raw = useRef<[...string[]]>([]);
+	const maps = useRef<{ [key: string]: MapLibreGlWrapper }>({});
 
-	const removeMap = (mapId:string) => {
+	const removeMap = (mapId: string) => {
 		if (mapId) {
-			if (typeof maps.current[mapId] !== "undefined") {
+			if (typeof maps.current[mapId] !== 'undefined') {
 				delete maps.current[mapId];
 			}
-			let mapIdIndex = mapIds_raw.current.indexOf(mapId);
+			const mapIdIndex = mapIds_raw.current.indexOf(mapId);
 			if (mapIdIndex > -1) {
 				mapIds_raw.current.splice(mapIdIndex, 1);
 			}
@@ -34,15 +42,15 @@ const MapComponentsProvider = ({ children }:{children:any}) => {
 			}
 		} else {
 			setMap(undefined);
-			removeMap("anonymous_map");
+			removeMap('anonymous_map');
 		}
 	};
 
-	const setMapHandler = (mapInstance:MapLibreGlWrapper) => {
+	const setMapHandler = (mapInstance: MapLibreGlWrapper) => {
 		setMap(mapInstance);
 
 		if (mapIds.length === 0) {
-			let mapId = "anonymous_map";
+			const mapId = 'anonymous_map';
 			setMapIds([...mapIds, mapId]);
 			maps.current[mapId] = mapInstance;
 		}
@@ -53,7 +61,7 @@ const MapComponentsProvider = ({ children }:{children:any}) => {
 		setMap: setMapHandler,
 		maps: maps.current,
 		mapIds: mapIds,
-		registerMap: (mapId:string, mapInstance:MapLibreGlWrapper) => {
+		registerMap: (mapId: string, mapInstance: MapLibreGlWrapper) => {
 			if (mapId && mapInstance) {
 				maps.current[mapId] = mapInstance;
 				mapIds_raw.current.push(mapId);
@@ -65,7 +73,7 @@ const MapComponentsProvider = ({ children }:{children:any}) => {
 			}
 		},
 		removeMap,
-		mapExists: (mapId:string) => {
+		mapExists: (mapId: string) => {
 			if (mapId && Object.keys(maps.current).indexOf(mapId) === -1) {
 				return false;
 			} else if (!mapId && !map) {
@@ -73,7 +81,7 @@ const MapComponentsProvider = ({ children }:{children:any}) => {
 			}
 			return true;
 		},
-		getMap: (mapId:string):(MapLibreGlWrapper | null) => {
+		getMap: (mapId: string): MapLibreGlWrapper | null => {
 			if (mapId && mapIds.indexOf(mapId) !== -1) {
 				return maps.current[mapId];
 			} else if (!mapId && map) {
@@ -82,11 +90,10 @@ const MapComponentsProvider = ({ children }:{children:any}) => {
 
 			return null;
 		},
-	};
+	} as unknown as MapContextType;
 
-	//@ts-ignore
 	return <MapContext.Provider value={value}>{children}</MapContext.Provider>;
 };
 
 export { MapComponentsProvider };
-export default MapContext;
+export default MapContext;

package/src/custom.d.ts

@@ -0,0 +1,5 @@
+export interface GeoJSON {
+	type: string,
+	features?: any
+	geometry?: any
+}

package/src/decorators/MapContextDecorator.js

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

package/src/decorators/MapContextDecoratorHooks.js

@@ -1,15 +1,25 @@
-import React from "react";
+import React, {  useMemo } from 'react';
 
 import { MapComponentsProvider } from "../index";
 import MapLibreMap from "../components/MapLibreMap/MapLibreMap";
 import "./style.css";
 import MlNavgiationTools from "../components/MlNavigationTools/MlNavigationTools";
-import ThemeWrapper from "./ThemeWrapper";
+import { ThemeProvider as MUIThemeProvider, createTheme } from '@mui/material/styles';
 
 const decorators = [
-  (Story) => (
-    <div className="fullscreen_map">
-      <ThemeWrapper>
+	(Story, context) => {
+		const theme = useMemo(
+			() =>
+				createTheme({
+					palette: {
+						mode: context?.globals?.theme ? context?.globals?.theme : 'light',
+					},
+				}),
+			[context?.globals?.theme]
+		);
+		return (
+			<div className="fullscreen_map">
+				<MUIThemeProvider theme={theme}>
         <MapComponentsProvider>
           <Story />
           <MapLibreMap
@@ -26,9 +36,9 @@ const decorators = [
             mapId="map_1"
           />
         </MapComponentsProvider>
-      </ThemeWrapper>
-    </div>
-  ),
+      </MUIThemeProvider>
+    </div>)
+  },
 ];
 
 export default decorators;

package/src/decorators/MultiMapContextDecorator.js

@@ -1,80 +1,90 @@
-import React from "react";
+import React, { useMemo } from 'react';
 
-import { MapComponentsProvider } from "../index";
+import { MapComponentsProvider } from '../index';
 
-import MapLibreMap from "../components/MapLibreMap/MapLibreMap";
+import MapLibreMap from '../components/MapLibreMap/MapLibreMap';
 
-import "./style.css";
-import { createTheme, ThemeProvider } from "@mui/material/styles";
-import MlNavgiationTools from "../components/MlNavigationTools/MlNavigationTools";
+import './style.css';
+import MlNavgiationTools from '../components/MlNavigationTools/MlNavigationTools';
 
-const theme = createTheme({});
+import { ThemeProvider as MUIThemeProvider, createTheme } from '@mui/material/styles';
 
 const decorators = [
-	(Story) => (
-		<div className="fullscreen_map">
-			<ThemeProvider theme={theme}>
-				<MapComponentsProvider>
-					<div
-						style={{
-							overflow: "hidden",
-							position: "absolute",
-							top: "0",
-							bottom: "0",
-							left: "0",
-							right: "0",
-						}}
-					>
-						<Story />
-						<div className="maps">
-							<MapLibreMap
-								mapId="map_1"
-								options={{
-									//style: "mapbox://styles/mapbox/light-v10",
-									//center: [-87.62712, 41.89033],
-									zoom: 14.5,
-									//pitch: 45,
-									//style: "https://wms.wheregroup.com/tileserver/style/osm-bright.json",
-									style: "https://wms.wheregroup.com/tileserver/style/osm-liberty.json",
-									//center: [8.607, 53.1409349],
-									//zoom: 13,
-									center: [7.0851268, 50.73884],
-									//maxBounds: [
-									//	[1.40625, 43.452919],
-									//	[17.797852, 55.973798],
-									//],
-								}}
-							/>
-							<MapLibreMap
-								mapId="map_2"
-								options={{
-									//style: "mapbox://styles/mapbox/light-v10",
-									//center: [-87.62712, 41.89033],
-									zoom: 14.5,
-									//pitch: 45,
-									style: "https://wms.wheregroup.com/tileserver/style/osm-bright.json",
-									//style: "https://wms.wheregroup.com/tileserver/style/osm-liberty.json",
-									//center: [8.607, 53.1409349],
-									//zoom: 13,
-									center: [7.0851268, 50.73884],
-									//maxBounds: [
-									//	[1.40625, 43.452919],
-									//	[17.797852, 55.973798],
-									//],
-								}}
-							/>
+	(Story, context) => {
+		const theme = useMemo(
+			() =>
+				createTheme({
+					palette: {
+						mode: context?.globals?.theme ? context?.globals?.theme : 'light',
+					},
+				}),
+			[context?.globals?.theme]
+		);
+		return (
+			<div className="fullscreen_map">
+				<MUIThemeProvider theme={theme}>
+					<MapComponentsProvider>
+						<div
+							style={{
+								overflow: 'hidden',
+								position: 'absolute',
+								top: '0',
+								bottom: '0',
+								left: '0',
+								right: '0',
+							}}
+						>
+							<Story />
+							<div className="maps">
+								<MapLibreMap
+									mapId="map_1"
+									options={{
+										//style: "mapbox://styles/mapbox/light-v10",
+										//center: [-87.62712, 41.89033],
+										zoom: 14.5,
+										//pitch: 45,
+										//style: "https://wms.wheregroup.com/tileserver/style/osm-bright.json",
+										style: 'https://wms.wheregroup.com/tileserver/style/osm-liberty.json',
+										//center: [8.607, 53.1409349],
+										//zoom: 13,
+										center: [7.0851268, 50.73884],
+										//maxBounds: [
+										//	[1.40625, 43.452919],
+										//	[17.797852, 55.973798],
+										//],
+									}}
+								/>
+								<MapLibreMap
+									mapId="map_2"
+									options={{
+										//style: "mapbox://styles/mapbox/light-v10",
+										//center: [-87.62712, 41.89033],
+										zoom: 14.5,
+										//pitch: 45,
+										style: 'https://wms.wheregroup.com/tileserver/style/osm-bright.json',
+										//style: "https://wms.wheregroup.com/tileserver/style/osm-liberty.json",
+										//center: [8.607, 53.1409349],
+										//zoom: 13,
+										center: [7.0851268, 50.73884],
+										//maxBounds: [
+										//	[1.40625, 43.452919],
+										//	[17.797852, 55.973798],
+										//],
+									}}
+								/>
 
-							<MlNavgiationTools
-								sx={{ top: "10px", right: "5px" }}
-								showZoomButtons={false}
-								mapId="map_1"
-							/>
+								<MlNavgiationTools
+									sx={{ top: '10px', right: '5px' }}
+									showZoomButtons={false}
+									mapId="map_1"
+								/>
+							</div>
 						</div>
-					</div>
-				</MapComponentsProvider>
-			</ThemeProvider>
-		</div>
-	),
+					</MapComponentsProvider>
+				</MUIThemeProvider>
+			</div>
+		);
+	},
 ];
 
 export default decorators;