@mapcomponents/react-maplibre 0.1.63 → 0.1.65

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

@@ -0,0 +1,103 @@
+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.meta.json

@@ -10,6 +10,5 @@
   },
   "tags": [ "Map layer" ],
   "category": "layer",
-  "type": "component",
-  "price": 5000
+  "type": "component"
 }

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

@@ -0,0 +1,37 @@
+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/MlTransitionGeoJsonLayer/MlTransitionGeoJsonLayer.meta.json

@@ -10,6 +10,5 @@
   },
   "tags": [],
   "category": "",
-  "type": "component",
-  "price": 0
+  "type": "component"
 }

package/src/components/MlTransitionGeoJsonLayer/MlTransitionGeoJsonLayer.stories.js

@@ -1,4 +1,4 @@
-import React, { useState, useContext, useRef, useEffect } from "react";
+import React, { useState, useRef, useEffect } from "react";
 
 import MlTransitionGeoJsonLayer from "./MlTransitionGeoJsonLayer";
 
@@ -7,9 +7,8 @@ import useMap from "../../hooks/useMap";
 
 import sample_geojson_1 from "./assets/sample_1.json";
 import sample_geojson_2 from "./assets/sample_2.json";
-import sample_polygon_geojson_1 from "./assets/sample_polygon_1.json";
 
-console.log(sample_polygon_geojson_1);
+
 const storyoptions = {
 	title: "MapComponents/MlTransitionGeoJsonLayer",
 	component: MlTransitionGeoJsonLayer,

package/src/components/MlTransitionGeoJsonLayer/MlTransitionGeoJsonLayer.tsx

@@ -1,83 +1,23 @@
-import React, { useState, useRef, useEffect, useCallback } from "react";
-
-import * as turf from "@turf/turf";
-
-import useMap from "../../hooks/useMap";
-
-import { _transitionToGeojson } from "./util/transitionFunctions";
-import MlGeoJsonLayer from "../MlGeoJsonLayer/MlGeoJsonLayer";
-import { Feature, FeatureCollection } from "@turf/turf";
-import { CircleLayerSpecification, FillLayerSpecification, LineLayerSpecification, MapLayerMouseEvent } from "maplibre-gl";
+import React, { useState, useRef, useEffect, useCallback } from 'react';
+import * as turf from '@turf/turf';
+import useMap from '../../hooks/useMap';
+import { _transitionToGeojson } from './util/transitionFunctions';
+import MlGeoJsonLayer from '../MlGeoJsonLayer/MlGeoJsonLayer';
+import { Feature, FeatureCollection } from '@turf/turf';
+import { MlGeoJsonLayerProps } from '../MlGeoJsonLayer/MlGeoJsonLayer';
 
 const msPerStep = 50;
 
-interface MlTransitionGeoJsonLayerProps {
-	/**
-	 * Id of the target MapLibre instance in mapContext
-	 */
-	mapId: string;
-	/**
-	 * GeoJSON data that is supposed to be rendered by this component.
-	 */
-	geojson: Feature | FeatureCollection | undefined;
-	/**
-	 * Type of the layer that will be added to the MapLibre instance.
-	 * Possible values: "line", "circle", "fill"
-	 */
-	type?: "fill" | "line" | "circle";
-	/**
-	 * Paint property object, that is passed to the addLayer call.
-	 * Possible props depend on the layer type.
-	 * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#line
-	 * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#circle
-	 * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#fill
-	 */
-	paint?: CircleLayerSpecification['paint'] | FillLayerSpecification['paint'] | LineLayerSpecification['paint'];
-	/**
-	 * Layout property object, that is passed to the addLayer call.
-	 * Possible props depend on the layer type.
-	 * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#line
-	 * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#circle
-	 * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#fill
-	 */
-	layout?: CircleLayerSpecification['layout'] | FillLayerSpecification['layout'] | LineLayerSpecification['layout'];
-	/**
-	 * Javascript object that is spread into the addLayer commands first parameter.
-	 */
-	options?: CircleLayerSpecification | FillLayerSpecification | LineLayerSpecification;
-	/**
-	 * Javascript object with optional properties "fill", "line", "circle" to override implicit layer type default paint properties.
-	 */
-	defaultPaintOverrides?: { circle?: CircleLayerSpecification['paint'], fill?: FillLayerSpecification['paint'], line?: LineLayerSpecification['paint'] };
-	/**
-	 * Id of an existing layer in the mapLibre instance to help specify the layer order
-	 * This layer will be visually beneath the layer with the "insertBeforeLayer" id.
-	 */
-	insertBeforeLayer: string;
-	/**
-	 * Hover event handler that is executed whenever a geometry rendered by this component is hovered.
-	 */
-	onHover?: MapLayerMouseEvent;
-	/**
-	 * Click event handler that is executed whenever a geometry rendered by this component is clicked.
-	 */
-	onClick?: MapLayerMouseEvent;
-	/**
-	 * Leave event handler that is executed whenever a geometry rendered by this component is
-	 * left/unhovered.
-	 */
-	onLeave?: MapLayerMouseEvent;
-	/**
-	 * Creates transition animation whenever the geojson prop changes.
-	 * Only works with layer type "line" and LineString GeoJSON data.
-	 */
+type MlTransitionGeoJsonLayerProps = MlGeoJsonLayerProps & {
 	transitionTime: number;
-}
+};
 
 /**
  * Adds source and layer of types "line", "fill" or "circle" to display GeoJSON data on the map.
  */
 const MlTransitionGeoJsonLayer = (props: MlTransitionGeoJsonLayerProps) => {
+	// ignore eslint. Only using `geojson` for destructuring
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
 	const { geojson, ...restProps } = props;
 
 	const mapHook = useMap({
@@ -93,9 +33,7 @@ const MlTransitionGeoJsonLayer = (props: MlTransitionGeoJsonLayerProps) => {
 	const currentTransitionStepRef = useRef(false);
 	const transitionGeojsonDataRef = useRef([]);
 	const transitionGeojsonCommonDataRef = useRef([]);
-	const [displayGeojson, setDisplayGeojson] = useState(
-		turf.featureCollection([])
-	);
+	const [displayGeojson, setDisplayGeojson] = useState(turf.featureCollection([]));
 
 	useEffect(() => {
 		return () => {
@@ -125,8 +63,8 @@ const MlTransitionGeoJsonLayer = (props: MlTransitionGeoJsonLayerProps) => {
 		if (!mapHook.map || !initializedRef.current) return;
 
 		if (
-			typeof props.transitionTime !== "undefined" &&
-			props.type === "line" &&
+			typeof props.transitionTime !== 'undefined' &&
+			props.type === 'line' &&
 			oldGeojsonRef.current
 		) {
 			transitionInProgressRef.current = false;
@@ -140,10 +78,10 @@ const MlTransitionGeoJsonLayer = (props: MlTransitionGeoJsonLayerProps) => {
 
 	const startTransition = useCallback(() => {
 		if (
-			props.type === "line" &&
-			typeof props.transitionTime !== "undefined" &&
+			props.type === 'line' &&
+			typeof props.transitionTime !== 'undefined' &&
 			props.transitionTime &&
-			typeof props.geojson !== "undefined" &&
+			typeof props.geojson !== 'undefined' &&
 			JSON.stringify(oldGeojsonRef.current) !== JSON.stringify(props.geojson)
 		) {
 			transitionToGeojson();

package/src/components/MlUseMapDebugger/MlUseMapDebugger.meta_.json

@@ -10,6 +10,5 @@
   },
   "tags": [],
   "category": "",
-  "type": "component",
-  "price": 0
+  "type": "component"
 }

package/src/components/MlVectorTileLayer/MlVectorTileLayer.meta.json

@@ -10,6 +10,5 @@
   },
   "tags": ["Map layer"],
   "category": "layer",
-  "type": "component",
-  "price": 5000
+  "type": "component"
 }

package/src/components/MlVectorTileLayer/MlVectorTileLayer.tsx

@@ -43,8 +43,7 @@ const MlVectorTileLayer = (props: MlVectorTileLayerProps) => {
 			layerId.current,
 			{
 				type: 'vector',
-				tiles: [props.url],
-				tileSize: 512,
+				tiles: [props.url || ""],
 				attribution: '',
 				...props.sourceOptions,
 			},
@@ -60,6 +59,8 @@ const MlVectorTileLayer = (props: MlVectorTileLayerProps) => {
 					maxzoom: 22,
 					layout: {},
 					paint: {
+						// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+						// @ts-ignore
 						'line-opacity': 0.5,
 						'line-color': 'rgb(80, 80, 80)',
 						'line-width': 2,

package/src/components/MlWmsFeatureInfoPopup/MlWmsFeatureInfoPopup.meta_.json

@@ -10,6 +10,5 @@
   },
   "tags": [],
   "category": "",
-  "type": "component",
-  "price": 0
+  "type": "component"
 }

package/src/components/MlWmsFeatureInfoPopup/MlWmsFeatureInfoPopup.stories.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import MlWmsFeatureInfoPopup from './MlWmsFeatureInfoPopup';
+
+import mapContextDecorator from '../../decorators/MapContextDecorator';
+
+const storyoptions = {
+	title: 'MapComponents/MlWmsFeatureInfoPopup',
+	component: MlWmsFeatureInfoPopup,
+	argTypes: {
+		url: {},
+		layer: {},
+	},
+	decorators: mapContextDecorator,
+};
+export default storyoptions;
+
+const Template = () => <MlWmsFeatureInfoPopup />;
+
+export const ExampleConfig = Template.bind({});
+ExampleConfig.parameters = {};
+ExampleConfig.args = {};

package/src/components/MlWmsLayer/MlWmsLayer.tsx

@@ -1,22 +1,23 @@
-import React, { useRef, useEffect, useCallback } from "react";
-import useMap from "../../hooks/useMap";
+import React, { useMemo, useRef, useEffect, useCallback } from 'react';
+import useMap from '../../hooks/useMap';
 
-import PropTypes from "prop-types";
+import PropTypes from 'prop-types';
+import { RasterLayerSpecification, RasterSourceSpecification } from 'maplibre-gl';
 
 const defaultProps = {
 	visible: true,
 	urlParameters: {
-		bbox: "{bbox-epsg-3857}",
-		format: "image/png",
-		service: "WMS",
-		version: "1.1.1",
-		request: "GetMap",
-		srs: "EPSG:3857",
+		bbox: '{bbox-epsg-3857}',
+		format: 'image/png',
+		service: 'WMS',
+		version: '1.1.1',
+		request: 'GetMap',
+		srs: 'EPSG:3857',
 		width: 256,
 		height: 256,
-		styles: "",
+		styles: '',
 	},
-	attribution: "",
+	attribution: '',
 	sourceOptions: {
 		minZoom: 0,
 		maxZoom: 20,
@@ -28,13 +29,13 @@ const defaultProps = {
 };
 
 interface MlWmsLayerProps {
-	urlParameters?: any;
+	urlParameters?: { [key: string]: string };
 	url: string;
 	visible?: boolean;
 	attribution?: string;
 	mapId?: string;
-	sourceOptions?: any;
-	layerOptions?: any;
+	sourceOptions?: RasterSourceSpecification;
+	layerOptions?: RasterLayerSpecification;
 	insertBeforeLayer?: string;
 	layerId?: string;
 }
@@ -61,40 +62,44 @@ const MlWmsLayer = (props: MlWmsLayerProps) => {
 	});
 
 	const initializedRef = useRef(false);
-	const layerId = useRef(props.layerId || "MlWmsLayer-" + mapHook.componentId);
-
-	const createLayer = useCallback(() => {
-		if (!mapHook.map) return;
-
-		initializedRef.current = true;
-
-		if (mapHook.map.map.getLayer(layerId.current)) {
-			mapHook.cleanup();
-		}
+	const layerId = useRef(props.layerId || 'MlWmsLayer-' + mapHook.componentId);
 
+	const tileUrl = useMemo(() => {
 		let _propsUrlParams;
 		let _wmsUrl = props.url;
-		if (props.url.indexOf("?") !== -1) {
-			_propsUrlParams = props.url.split("?");
+		if (props.url.indexOf('?') !== -1) {
+			_propsUrlParams = props.url.split('?');
 			_wmsUrl = _propsUrlParams[0];
 		}
-		let _urlParamsFromUrl = new URLSearchParams(_propsUrlParams?.[1]);
+		const _urlParamsFromUrl = new URLSearchParams(_propsUrlParams?.[1]);
 		// first spread in default props manually to enable overriding a single parameter without replacing the whole default urlParameters object
-		let urlParamsObj = {
+		const urlParamsObj = {
 			...defaultProps.urlParameters,
 			...Object.fromEntries(_urlParamsFromUrl),
 			...props.urlParameters,
 		};
-		let urlParams = new URLSearchParams(urlParamsObj);
-		let urlParamsStr =
-			decodeURIComponent(urlParams.toString()) + "".replace(/%2F/g, "/").replace(/%3A/g, ":");
+		const urlParams = new URLSearchParams(urlParamsObj as unknown as Record<string, string>);
+		const urlParamsStr =
+			decodeURIComponent(urlParams.toString()) + ''.replace(/%2F/g, '/').replace(/%3A/g, ':');
+
+		return _wmsUrl + '?' + urlParamsStr;
+	}, [props.urlParameters, props.url]);
+
+	const createLayer = useCallback(() => {
+		if (!mapHook.map) return;
+
+		initializedRef.current = true;
+
+		if (mapHook.map.map.getLayer(layerId.current)) {
+			mapHook.cleanup();
+		}
 
 		mapHook.map.addSource(
 			layerId.current,
 			{
-				type: "raster",
-				tiles: [_wmsUrl + "?" + urlParamsStr],
-				tileSize: urlParamsObj.width,
+				type: 'raster',
+				tiles: [tileUrl],
+				tileSize: 256,
 				attribution: props.attribution,
 				...props.sourceOptions,
 			},
@@ -104,7 +109,7 @@ const MlWmsLayer = (props: MlWmsLayerProps) => {
 		mapHook.map.addLayer(
 			{
 				id: layerId.current,
-				type: "raster",
+				type: 'raster',
 				source: layerId.current,
 				...props.layerOptions,
 			},
@@ -114,19 +119,19 @@ const MlWmsLayer = (props: MlWmsLayerProps) => {
 
 		// recreate layer if map style.json has changed
 		mapHook.map.on(
-			"styledata",
+			'styledata',
 			() => {
 				if (initializedRef.current && !mapHook.map?.map.getLayer(layerId.current)) {
-					console.log("Recreate Layer " + layerId.current);
+					console.log('Recreate Layer ' + layerId.current);
 					createLayer();
 				}
 			},
 			mapHook.componentId
 		);
 		if (!props.visible) {
-			mapHook.map.map.setLayoutProperty(layerId.current, "visibility", "none");
+			mapHook.map.map.setLayoutProperty(layerId.current, 'visibility', 'none');
 		}
-	}, [mapHook.map, props]);
+	}, [mapHook.map, props, tileUrl]);
 
 	useEffect(() => {
 		if (initializedRef.current) return;
@@ -134,14 +139,27 @@ const MlWmsLayer = (props: MlWmsLayerProps) => {
 		createLayer();
 	}, [createLayer]);
 
+	useEffect(() => {
+		if (!mapHook.map || !mapHook.map?.map?.style?.sourceCaches?.[layerId.current] || !initializedRef.current) return;
+
+		const source = mapHook.map.map.getSource(layerId.current) as RasterSourceSpecification;
+		source.tiles = [tileUrl];
+
+		mapHook.map.map.style.sourceCaches[layerId.current].clearTiles();
+
+		mapHook.map.map.style.sourceCaches[layerId.current].update(mapHook.map.map.transform);
+
+		mapHook.map.map.triggerRepaint();
+	}, [mapHook.map, tileUrl]);
+
 	useEffect(() => {
 		if (!mapHook.map || !initializedRef.current) return;
 
 		// toggle layer visibility by changing the layout object's visibility property
 		if (props.visible) {
-			mapHook.map.map.setLayoutProperty(layerId.current, "visibility", "visible");
+			mapHook.map.map.setLayoutProperty(layerId.current, 'visibility', 'visible');
 		} else {
-			mapHook.map.map.setLayoutProperty(layerId.current, "visibility", "none");
+			mapHook.map.map.setLayoutProperty(layerId.current, 'visibility', 'none');
 		}
 	}, [props.visible, mapHook.map]);
 

package/src/components/MlWmsLoader/MlWmsLoader.meta.json

@@ -10,6 +10,5 @@
   },
   "tags": [],
   "category": "",
-  "type": "component",
-  "price": 0
+  "type": "component"
 }

package/src/components/MlWmsLoader/MlWmsLoader.stories.tsx

@@ -0,0 +1,89 @@
+import React, { useState} from 'react';
+import MlWmsLoader from './MlWmsLoader';
+import { Button, TextField, useMediaQuery } from '@mui/material';
+import mapContextDecorator from '../../decorators/MapContextDecorator';
+import Sidebar from '../../ui_components/Sidebar';
+import TopToolbar from '../../ui_components/TopToolbar';
+import MlWmsLoaderInstructions from './utils/MlWmsLoaderInstructions';
+import WMSLinks from './utils/WMSLinks';
+
+const storyoptions = {
+	title: 'MapComponents/MlWmsLoader',
+	component: MlWmsLoader,
+	argTypes: {
+		url: {},
+		layer: {},
+	},
+	decorators: mapContextDecorator,
+};
+export default storyoptions;
+
+interface MlWmsLoaderStoryProps {
+	url: string;
+}
+
+const Template = (props: MlWmsLoaderStoryProps) => {
+	const [url, setUrl] = useState(props.url || "");
+	const [demoMode, setDemoMode] = useState(false);
+	const [guide, setGuide] = useState(false);
+
+	const mediaIsMobile = useMediaQuery('(max-width:900px)');
+
+	const openGuide = () => {
+		setGuide(true);
+		setTimeout(() => {
+			setGuide(false);
+		}, 5500);
+	};
+
+	const loader = (str: string) => {
+		setUrl(str);
+		setDemoMode(false);
+	};
+
+	return (
+		<>
+			<MlWmsLoaderInstructions open={guide} />
+			<WMSLinks open={demoMode} close={() => setDemoMode(false)} load={loader} />
+			<TopToolbar appBarStyle={{ zIndex: 1220 }}>
+				<Button
+					variant="contained"
+					onClick={openGuide}
+					sx={{ marginRight: '10px' }}
+				>
+					Guide me through
+				</Button>
+				<Button
+					variant="contained"
+					onClick={() => setDemoMode(!demoMode)}
+					
+				>
+					Demo WMS
+				</Button>
+			</TopToolbar>
+
+			{!mediaIsMobile || (mediaIsMobile && !demoMode) ? (
+				<Sidebar
+					drawerPaperProps={{ sx: { top: '65px', maxWidth: '20%', padding: '40px' } }}
+					drawerButtonStyle={{ top: '65px' }}
+					sx={{ wordBreak: 'break-word' }}
+				>
+					<TextField
+						id="wms_text_field"
+						label="WMS Url"
+						variant="standard"
+						value={url}
+						onChange={(ev) => setUrl(ev.target.value)}
+					/>
+					<MlWmsLoader mapId={'map_1'} url={url} />
+				</Sidebar>
+			) : (
+				<></>
+			)}
+		</>
+	);
+};
+
+export const ExampleConfig = Template.bind({});
+ExampleConfig.parameters = {};
+ExampleConfig.args = {};