@mapcomponents/react-maplibre 0.1.69 → 0.1.71

package/src/components/MlSpatialElevationProfile/MlSpatialElevationProfile.test.js

@@ -1,48 +0,0 @@
-import { layerRemovalTest, sourceRemovalTest } from "../../util";
-
-import MlSpatialElevationProfile from "./MlSpatialElevationProfile";
-import { uuid_regex } from "../../setupTests";
-const sampleGeojson = {
-	"type": "FeatureCollection",
-	"features": [
-			{
-					"type": "Feature",
-					"properties": {
-							"name": "Rundwanderung auf dem Wiedweg zwischen Seelbach und Oberlahr",
-							"desc": "Diese Rundtour gibt mir viele historische Einblicke und zeigt mir einzigartige und mir bisher verborgene Kultur- und Naturschönheiten. Eine rundum spannende und erlebnisreiche Tour.",
-							"type": "hikingTourTrail"
-					},
-					"geometry": {
-							"type": "LineString",
-							"coordinates": [
-									[
-											7.526536,
-											50.647383,
-											267.71535
-									],
-									[
-											7.526617,
-											50.647247,
-											267.83347
-									],
-							]
-					}
-			}
-	]
-}
-
-// eslint-disable-next-line react/react-in-jsx-scope
-const testComponent = <MlSpatialElevationProfile geojson={sampleGeojson} />;
-
-layerRemovalTest(
-	"<MlSpatialElevationProfile />",
-	testComponent,
-	new RegExp('^.*"elevationprofile-layer-' + uuid_regex + '".*$'),
-	"elevationprofile-layer-{uuid}"
-);
-sourceRemovalTest(
-	"<MlSpatialElevationProfile />",
-	testComponent,
-	new RegExp('^.*"elevationprofile-' + uuid_regex + '".*$'),
-	"elevationprofile-{uuid}"
-);

package/src/components/MlSpatialElevationProfile/MlSpatialElevationProfile.tsx

@@ -1,143 +0,0 @@
-import React, { useRef, useMemo } from 'react';
-import { featureCollection } from '@turf/helpers';
-import { Feature, FeatureCollection } from '@turf/turf';
-import { v4 as uuidv4 } from 'uuid';
-import useSource from '../../hooks/useSource';
-import useLayer from '../../hooks/useLayer';
-import getElevationData from './util/getElevationData';
-import { Coordinates, DataDrivenPropertyValueSpecification } from 'maplibre-gl';
-
-const defaultFillExtrusionColor: (string | number | string[])[] = [
-	'interpolate',
-	['linear'],
-	['get', 'height'],
-	0,
-	'rgba(0, 0, 255, 0)',
-	0.1,
-	'royalblue',
-	0.3,
-	'cyan',
-	0.5,
-	'lime',
-	0.7,
-	'yellow',
-	1,
-	'yellow',
-];
-/**
- * MlSpatialElevationProfile returns a Button that will add a standard OSM tile layer to the maplibre-gl instance.
- *
- * @component
- */
-
-interface geojson {
-	features: Feature | FeatureCollection | undefined;
-}
-
-export interface MlSpatialElevationProfileProps {
-	/**
-	 * Id of the target MapLibre instance in mapContext
-	 */
-	mapId?: string;
-	/**
-	 * GeoJSON data that is supposed to be rendered by this component.
-	 */
-	//geojson: {features: Feature | FeatureCollection | undefined };
-	geojson: geojson | FeatureCollection | undefined;
-	/**
-	 * Prefix of the component id this component uses when adding elements to the MapLibreGl-instance
-	 */
-	idPrefix?: string;
-	/**
-	 * Number describes the factor of the height of the elevation
-	 */
-	elevationFactor?: number;
-	/**
-	 * The layerId of an existing layer this layer should be rendered visually beneath
-	 * https://maplibre.org/maplibre-gl-js-docs/api/map/#map#addlayer - see "beforeId" property
-	 */
-	insertBeforeLayer?: string;
-}
-
-const MlSpatialElevationProfile = (props: MlSpatialElevationProfileProps) => {
-	const sourceName = useRef('elevationprofile-' + uuidv4());
-	const layerName = useRef('elevationprofile-layer-' + uuidv4());
-	const elevationFactor =
-		props.elevationFactor || MlSpatialElevationProfile.defaultProps.elevationFactor;
-
-	const _geojsonInfo = useMemo(() => {
-		if (!props?.geojson?.features) return;
-		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-		// @ts-ignore
-		const line = props.geojson.features?.find((element: Feature) => {
-			return element.geometry.type === 'LineString';
-		});
-
-		if (!line || !line.geometry) return;
-
-		const heights = line.geometry.coordinates.map((coordinate: Coordinates) => {
-			return coordinate[2];
-		});
-
-		const min = Math.min(...heights);
-
-		let max = Math.max(...heights) - min;
-
-		max = max === 0 ? 1 : max;
-
-		return { max, min, line };
-	}, [props.geojson]);
-
-	const _fillExtrusionColor: (string | number | string[])[] = useMemo(() => {
-		if (!_geojsonInfo) return defaultFillExtrusionColor;
-
-		return [
-			'interpolate',
-			['linear'],
-			['get', 'height'],
-			0,
-			'rgb(0,255,55)',
-			_geojsonInfo.max * elevationFactor,
-			'rgb(255,0,0)',
-		];
-	}, [_geojsonInfo, props.elevationFactor]);
-
-	const _geojson = useMemo(() => {
-		if (!props.geojson?.features || !_geojsonInfo) return;
-
-		const newData = getElevationData(_geojsonInfo, elevationFactor);
-		return newData;
-	}, [_geojsonInfo, elevationFactor]);
-
-	useSource({
-		mapId: props.mapId,
-		sourceId: sourceName.current,
-		source: {
-			type: 'geojson',
-			data: _geojson || featureCollection([]),
-		},
-	});
-
-	useLayer({
-		layerId: layerName.current,
-		source: sourceName.current,
-
-		options: {
-			type: 'fill-extrusion',
-			paint: {
-				'fill-extrusion-height': ['get', 'height'],
-				'fill-extrusion-opacity': 0.9,
-				'fill-extrusion-color': (_fillExtrusionColor || defaultFillExtrusionColor) as (DataDrivenPropertyValueSpecification<string>),
-			},
-		},
-		insertBeforeLayer: props.insertBeforeLayer,
-	});
-
-	return <></>;
-};
-
-MlSpatialElevationProfile.defaultProps = {
-	elevationFactor: 1,
-};
-
-export default MlSpatialElevationProfile;

package/src/components/MlSpatialElevationProfile/util/getElevationData.tsx

@@ -1,103 +0,0 @@
-import { distance, lineOffset } from '@turf/turf';
-import { polygon, lineString, featureCollection} from '@turf/helpers';
-import { GeoJSONFeature } from 'maplibre-gl';
-
-interface geometry{
-coordinates: Array<number>
-}
-interface line {
-geometry: geometry
-}
-interface _geojsonInfo {
-line: line, 
-min: number
-}
-
-
-
-export default function getElevationData(_geojsonInfo: _geojsonInfo, elevationFactor: number) {
-
-    const createStep =  (x: number, y: number, z: number, x2: number, y2: number) => {
-            //const summand = 0.0002;
-            const line = lineString([
-                [x, y],
-                [x2, y2],
-            ]);
-            const offsetLine = lineOffset(line, 5, { units: 'meters' });
-            const x3 = offsetLine.geometry.coordinates[0][0];
-            const y3 = offsetLine.geometry.coordinates[0][1];
-            const x4 = offsetLine.geometry.coordinates[1][0];
-            const y4 = offsetLine.geometry.coordinates[1][1];
-    
-            return polygon(
-                [
-                    [
-                        [x, y],
-                        [x2, y2],
-    
-                        [x4, y4],
-                        [x3, y3],
-                        [x, y],
-                    ],
-                ],
-                { height: z * elevationFactor }
-            );
-        };
-    
-        const lerp = (x: number, y: number, a: number) => x * (1 - a) + y * a;
-		const points: GeoJSONFeature[] = [];
-
-		_geojsonInfo.line.geometry.coordinates.forEach((coordinate: number, index: number) => {
-			//const point = createPoint(coordinate[0],coordinate[1],coordinate[2]-min);
-			//points.push(point);
-			if (_geojsonInfo.line.geometry.coordinates[index + 1]) {
-				const wayLength = distance(
-					[coordinate[0], coordinate[1]],
-					[
-						_geojsonInfo.line.geometry.coordinates[index + 1][0],
-						_geojsonInfo.line.geometry.coordinates[index + 1][1],
-					],
-					{ units: 'kilometers' }
-				);
-				let listLength = ~~((wayLength * 1000) / 10);
-				listLength = listLength < 1 ? 1 : listLength;
-				for (let i = 0; i < listLength; i++) {
-					const x = lerp(
-						_geojsonInfo.line.geometry.coordinates[index][0],
-						_geojsonInfo.line.geometry.coordinates[index + 1][0],
-						i / listLength
-					);
-					const y = lerp(
-						_geojsonInfo.line.geometry.coordinates[index][1],
-						_geojsonInfo.line.geometry.coordinates[index + 1][1],
-						i / listLength
-					);
-					const z = lerp(
-						_geojsonInfo.line.geometry.coordinates[index][2] - _geojsonInfo.min,
-						_geojsonInfo.line.geometry.coordinates[index + 1][2] - _geojsonInfo.min,
-						i / listLength
-					);
-
-					const x2 = lerp(
-						_geojsonInfo.line.geometry.coordinates[index][0],
-						_geojsonInfo.line.geometry.coordinates[index + 1][0],
-						(i + 1) / listLength
-					);
-					const y2 = lerp(
-						_geojsonInfo.line.geometry.coordinates[index][1],
-						_geojsonInfo.line.geometry.coordinates[index + 1][1],
-						(i + 1) / listLength
-					);
-
-					const point = createStep(x, y, z, x2, y2);
-					points.push(point as unknown as GeoJSONFeature);
-				}
-			}
-		});
-
-		const output = featureCollection(points);
-
-		return output;
-  
-}
-

package/src/components/MlThreeJsLayer/MlThreeJsLayer.doc.de.md

@@ -1 +0,0 @@
-Darstellung komplexer 3D Modelle

package/src/components/MlThreeJsLayer/MlThreeJsLayer.doc.en.md

@@ -1 +0,0 @@
-Presentation of complex 3D models. 

package/src/components/MlThreeJsLayer/MlThreeJsLayer.js

@@ -1,207 +0,0 @@
-import React, { useContext, useRef, useEffect, useState } from "react";
-import MapContext from "../../contexts/MapContext";
-
-import Button from "@mui/material/Button";
-import maplibregl from "maplibre-gl";
-import * as THREE from "three";
-import GLTFLoader from "./lib/GLTFLoader";
-import PropTypes from "prop-types";
-
-/**
- * Renders obj or gltf 3D Models on the MapLibreMap referenced by props.mapId
- *
- * @component
- */
-const MlThreeJsLayer = (props) => {
-	const mapContext = useContext(MapContext);
-
-	const layerName = "3d-model";
-	const [showLayer, setShowLayer] = useState(true);
-	const showLayerRef = useRef(true);
-	const initializedRef = useRef(false);
-	const mapRef = useRef(null);
-	const initFuncRef = useRef(props.init);
-
-	const cleanup = () => {
-		if (mapRef.current && mapRef.current.style) {
-			if (mapRef.current.getLayer(layerName)) {
-				mapRef.current.removeLayer(layerName);
-			}
-			mapRef.current = null;
-		}
-	};
-
-	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
-		var modelOrigin = [7.099771581806502, 50.73395746209983];
-		// 50.73395746209983, 7.099771581806502
-		var modelAltitude = 0;
-		var modelRotate = [Math.PI / 2, 90, 0];
-
-		var modelAsMercatorCoordinate = maplibregl.MercatorCoordinate.fromLngLat(
-			modelOrigin,
-			modelAltitude
-		);
-
-		// transformation parameters to position, rotate and scale the 3D model onto the map
-		var 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
-		var customLayer = {
-			id: "3d-model",
-			type: "custom",
-			renderingMode: "3d",
-			onAdd: function (map, gl) {
-				this.camera = new THREE.Camera();
-				this.scene = new THREE.Scene();
-
-				// create two three.js lights to illuminate the model
-				var directionalLight = new THREE.DirectionalLight(0xffffff);
-				directionalLight.position.set(0, -70, 100).normalize();
-				this.scene.add(directionalLight);
-
-				var 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
-				var 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) {
-						this.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) {
-				var rotationX = new THREE.Matrix4().makeRotationAxis(
-					new THREE.Vector3(1, 0, 0),
-					modelTransform.rotateX
-				);
-				var rotationY = new THREE.Matrix4().makeRotationAxis(
-					new THREE.Vector3(0, 1, 0),
-					modelTransform.rotateY
-				);
-				var rotationZ = new THREE.Matrix4().makeRotationAxis(
-					new THREE.Vector3(0, 0, 1),
-					modelTransform.rotateZ
-				);
-
-				var m = new THREE.Matrix4().fromArray(matrix);
-				var 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);
-
-				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/MlThreeJsLayer/MlThreeJsLayer.meta.json

@@ -1,14 +0,0 @@
-{
-  "name": "MlThreeJsLayer",
-  "title": "3D Model",
-  "description": "Layer Component, that makes it possible to show 3D Models on the map.",
-  "i18n": {
-    "de": {
-      "title": "3D Modelle",
-      "description": "Layer Component, das es ermöglicht 3D Modelle auf der Karte darzustellen."
-    }
-  },
-  "tags": [ "Map layer" ],
-  "category": "layer",
-  "type": "component"
-}

package/src/components/MlThreeJsLayer/MlThreeJsLayer.stories.tsx

@@ -1,37 +0,0 @@
-import React, { useContext } from 'react';
-
-import TopToolbar from '../../ui_components/TopToolbar';
-import MlThreeJsLayer from './MlThreeJsLayer';
-
-import mapContextDecorator from '../../decorators/MapContextDecorator';
-import { LoadingOverlayContext } from '../../ui_components/LoadingOverlayContext';
-
-const storyoptions = {
-	title: 'MapComponents/MlThreeJsLayer',
-	component: MlThreeJsLayer,
-	argTypes: {
-		options: {
-			control: {
-				type: 'object',
-			},
-		},
-	},
-	decorators: mapContextDecorator,
-};
-export default storyoptions;
-
-const Template = () => {
-	const loadingOverlayContext = useContext(LoadingOverlayContext);
-
-	return (
-		<TopToolbar>
-			<MlThreeJsLayer
-				init={() => loadingOverlayContext?.setControlled?.(true)}
-				onDone={() => setTimeout(() => loadingOverlayContext?.setLoadingDone?.(true), 1200)}
-			/>
-		</TopToolbar>
-	);
-};
-
-export const ExampleConfig = Template.bind({});
-ExampleConfig.parameters = {};

package/src/components/MlThreeJsLayer/MlThreeJsLayer.test.js

@@ -1,33 +0,0 @@
-import { layerRemovalTest, sourceRemovalTest } from "../../util";
-
-import MlThreeJsLayer from "./MlThreeJsLayer";
-
-const testComponent = <MlThreeJsLayer
-		{
-				...{
-						url:
-								"https://wms.wheregroup.com/tileserver/tile/tileserver.php?/europe-0-14/index.json?/europe-0-14/{z}/{x}/{y}.pbf",
-						layers: {
-								landuseLine: {
-										"source-layer": "landuse",
-										layout: {
-												"line-cap": "round",
-												"line-join": "round",
-										},
-										paint: { "line-width": 1, "line-color": "#ff0000" },
-								},
-						},
-						sourceOptions: {
-								minzoom: 0,
-								maxzoom: 20,
-						},
-				}
-		}
-/>;
-
-layerRemovalTest(
-	"<MlThreeJsLayer />",
-	testComponent,
-	/^.*\"3d\-model*\".*$/,
-	"3d-model"
-);