@mapcomponents/react-maplibre 0.1.62 → 0.1.64

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 = {};