fix WmsLoader catalogue demo (#247)

Author: cioddi

packages/react-maplibre/src/components/MlWmsLoader/MlWmsLoader.stories.tsx

@@ -24,7 +24,7 @@ interface MlWmsLoaderStoryProps {
 	url: string;
 }
 const Template: any = (props: MlWmsLoaderStoryProps) => {
-	const [url, setUrl] = useState(props.url || 'https://magosm.magellium.com/geoserver/wms');
+	const [url, setUrl] = useState(props.url || 'https://img.nj.gov/imagerywms/Infrared1995');
 	const [demoMode, setDemoMode] = useState(false);
 	const [guide, setGuide] = useState(false);
 	const [openSidebar, setOpenSidebar] = useState(true);
@@ -100,6 +100,7 @@ const Template: any = (props: MlWmsLoaderStoryProps) => {
 						url={url}
 						onConfigChange={(config) => console.log(config)}
 						zoomToExtent={true}
+						layerId="WMS-layer"
 						featureInfoActive={featureInfoActive}
 						setFeatureInfoActive={setFeatureInfoActive}
 					/>

packages/react-maplibre/src/components/MlWmsLoader/MlWmsLoader.tsx

@@ -10,7 +10,6 @@ import ListItem from '@mui/material/ListItem';
 import ListItemText from '@mui/material/ListItemText';
 import IconButton from '@mui/material/IconButton';
 import { LngLat, MapMouseEvent } from 'maplibre-gl';
-import { Layer2, Layer3 } from 'wms-capabilities';
 import useMap from '../../hooks/useMap';
 import { Box, Checkbox, ListItemIcon, Snackbar } from '@mui/material';
 import ExpandLessIcon from '@mui/icons-material/ExpandLess';
@@ -66,7 +65,7 @@ export interface MlWmsLoaderProps {
 	/**
 	 * WMS URL
 	 */
-	url: string;
+	url?: string;
 	/**
 	 * Id of the target MapLibre instance in mapContext
 	 */
@@ -124,19 +123,64 @@ export interface MlWmsLoaderProps {
 	sortable?: boolean;
 }
 
+export interface WmsLayer {
+	Name?: string;
+	Title?: string;
+	Abstract?: string;
+	KeywordList?: string[];
+	CRS?: string | string[];
+	SRS?: string | string[];
+	EX_GeographicBoundingBox?: number[];
+	LatLonBoundingBox?: number[];
+	BoundingBox?: any[];
+	Dimension?: any;
+	Attribution?: { Title: string; OnlineResource?: string; LogoURL?: any };
+	AuthorityURL?: any[];
+	Identifier?: any[];
+	MetadataURL?: any[];
+	DataURL?: any[];
+	FeatureListURL?: any[];
+	Style?: any[];
+	MinScaleDenominator?: number;
+	MaxScaleDenominator?: number;
+	Layer?: WmsLayer[];
+	queryable?: boolean;
+	opaque?: boolean;
+	noSubsets?: boolean;
+	fixedWidth?: number;
+	fixedHeight?: number;
+}
+
 export type LayerType = {
 	visible: boolean;
 	Name: string;
 	Attribution?: { Title: string };
-} & Omit<Layer2, 'Layer' | 'CRS'> &
-	Partial<Pick<Layer2, 'Layer'>>;
+} & Omit<WmsLayer, 'Layer' | 'CRS'> &
+	Partial<Pick<WmsLayer, 'Layer'>>;
+
+const defaultProps = {
+	mapId: undefined,
+	url: '',
+	urlParameters: {
+		SERVICE: 'WMS',
+		VERSION: '1.3.0',
+		REQUEST: 'GetCapabilities',
+	},
+	wmsUrlParameters: {
+		TRANSPARENT: 'TRUE',
+	},
+	featureInfoEnabled: true,
+	zoomToExtent: false,
+	showDeleteButton: false,
+};
 /**
  * Loads a WMS getCapabilities xml document and adds a MlWmsLayer component for each layer that is
  * offered by the WMS.
  *
  * @component
  */
 const MlWmsLoader = (props: MlWmsLoaderProps) => {
+	props = { ...defaultProps, ...props };
 	const {
 		capabilities: _capabilities,
 		error,
@@ -146,6 +190,7 @@ const MlWmsLoader = (props: MlWmsLoaderProps) => {
 	}: useWmsReturnType = useWms({
 		urlParameters: props.urlParameters,
 	});
+
 	const [open, setOpen] = useState(props?.config?.open || false);
 	const [visible, setVisible] = useState<boolean>(props?.config?.visible || true);
 	const [showDeletionConfirmationDialog, setShowDeletionConfirmationDialog] = useState(false);
@@ -259,8 +304,8 @@ const MlWmsLoader = (props: MlWmsLoaderProps) => {
 			let _gfiUrl: string | undefined = getFeatureInfoUrl;
 			let _gfiUrlParts;
 			if (_gfiUrl?.indexOf?.('?') !== -1) {
-				_gfiUrlParts = props.url.split('?');
-				_gfiUrl = _gfiUrlParts[0];
+				_gfiUrlParts = props?.url?.split('?') || props?.config?.wmsUrl?.split('?');
+				_gfiUrl = _gfiUrlParts?.[0];
 			}
 			const _urlParamsFromUrl = new URLSearchParams(_gfiUrlParts?.[1]);
 
@@ -317,6 +362,8 @@ const MlWmsLoader = (props: MlWmsLoaderProps) => {
 	useEffect(() => {
 		if (!capabilities?.Service) return;
 
+		let _LatLonBoundingBox: Array<number> = [];
+
 		if (
 			capabilities?.Capability?.Layer?.CRS?.indexOf?.('EPSG:3857') === -1 &&
 			capabilities?.Capability?.Layer?.CRS?.indexOf?.('CRS:84') === -1
@@ -329,38 +376,34 @@ const MlWmsLoader = (props: MlWmsLoaderProps) => {
 				'MlWmsLoader (' + capabilities.Service.Title + '): WGS 84/Pseudo-Mercator supported'
 			);
 
-			let _LatLonBoundingBox: Array<number> = [];
-
 			// collect queriable Layer2 layers
 			let _layers: LayerType[] = capabilities?.Capability?.Layer?.Layer.filter(
-				(el) => !el.Layer?.length
-				// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-				// @ts-expect-error
-			).map((layer: Layer2 & { Name: string }, idx: number) => {
+				(el: WmsLayer) => !el.Layer?.length
+			).map((layer: WmsLayer, idx: number) => {
 				if (idx === 0) {
-					_LatLonBoundingBox = layer.EX_GeographicBoundingBox;
+					_LatLonBoundingBox = layer.EX_GeographicBoundingBox || layer?.LatLonBoundingBox || [];
 				}
 				return {
 					visible: capabilities?.Capability?.Layer?.Layer?.length > 2 ? idx > 1 : true,
 					Attribution: { Title: '' },
 					// eslint-disable-next-line @typescript-eslint/no-unused-vars
 					...(({ CRS, ..._layer }) => _layer)(layer),
-				};
+				} as LayerType;
 			});
 
 			// collect queriable Layer3 layers
-			capabilities?.Capability?.Layer?.Layer.forEach((el) => {
-				const tmpLayers = el?.Layer?.filter((el) => el.CRS.length).map(
-					(layer: Layer3, idx: number) => {
+			capabilities?.Capability?.Layer?.Layer.forEach((el: WmsLayer) => {
+				const tmpLayers = el?.Layer?.filter((el) => el.CRS?.length).map(
+					(layer: WmsLayer, idx: number) => {
 						if (idx === 0) {
-							_LatLonBoundingBox = layer.EX_GeographicBoundingBox;
+							_LatLonBoundingBox = layer.EX_GeographicBoundingBox || layer?.LatLonBoundingBox || [];
 						}
 						return {
 							visible: false,
 							Attribution: { Title: '' },
 							// eslint-disable-next-line @typescript-eslint/no-unused-vars
 							...(({ CRS, ..._layer }) => _layer)(layer),
-						};
+						} as LayerType;
 					}
 				);
 
@@ -542,24 +585,5 @@ const MlWmsLoader = (props: MlWmsLoaderProps) => {
 		</>
 	);
 };
-//<p key="description" style={{ fontSize: '.7em' }}>
-//	{capabilities?.Capability?.Layer?.['Abstract']}
-//</p>
-
-MlWmsLoader.defaultProps = {
-	mapId: undefined,
-	url: '',
-	urlParameters: {
-		SERVICE: 'WMS',
-		VERSION: '1.3.0',
-		REQUEST: 'GetCapabilities',
-	},
-	wmsUrlParameters: {
-		TRANSPARENT: 'TRUE',
-	},
-	featureInfoEnabled: true,
-	zoomToExtent: false,
-	showDeleteButton: false,
-};
 
 export default MlWmsLoader;

packages/react-maplibre/src/components/MlWmsLoader/utils/WMSLinks.tsx

@@ -48,14 +48,14 @@ const wmsServices = [
 		id: '1',
 		title: 'HistOSM',
 		description: 'Historic objects stored in the OpenStreetMap database',
-		link: 'https://maps.heigit.org/histosm/wms',
+		link: 'https://maps.heigit.org/histosm/wms/',
 	},
 	{
 		id: '2',
-		title: 'MagOSM',
+		title: 'New Jersey Infrared 1995',
 		description:
-			'MagOSM is a project of the company Magellium which offers services related to thematic data from OpenStreetMap. Currently these services are provided at the scale of metropolitan France. The data of the different services are updated daily.',
-		link: 'https://magosm.magellium.com/geoserver/wms',
+			'This service was created to provide convenient internet access to 1995 - 1997 New Jersey orthophotos in false color infrared.',
+		link: 'https://img.nj.gov/imagerywms/Infrared1995',
 	},
 	{
 		id: '3',