@mapcomponents/react-maplibre 0.1.64 → 0.1.65

package/src/components/MlSpatialElevationProfile/MlSpatialElevationProfile.stories.tsx

@@ -59,8 +59,8 @@ const Template = () => {
 
 	return (
 		<>
-			<TopToolbar>
 				<MlGpxViewerInstructions open={guide} />
+			<TopToolbar appBarStyle={{ zIndex: 500 }}>
 				<Button variant="contained" onClick={handleClick2} sx={{ marginRight: '10px' }}>
 					Guide me through
 				</Button>
@@ -73,8 +73,8 @@ const Template = () => {
 			<div
 				style={{
 					position: 'fixed',
-					right: '5px',
-					bottom: mediaIsMobile ? '40px' : '25px',
+					right: '11px',
+					bottom: mediaIsMobile ? '230px' : '145px',
 					display: 'flex',
 					flexDirection: 'column',
 					gap: '5px',

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/MlWmsFeatureInfoPopup/{MlWmsFeatureInfoPopup.stories.js → MlWmsFeatureInfoPopup.stories.tsx}

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

package/src/components/MlWmsLoader/MlWmsLoader.tsx

@@ -212,7 +212,7 @@ const MlWmsLoader = (props: MlWmsLoaderProps) => {
 
 			// collect aueriable Layer2 layers
 			let _layers: LayerType[] = capabilities?.Capability?.Layer?.Layer.filter(
-				(el) => el.CRS.length
+				(el) => !el.Layer?.length
 			).map((layer: Layer2 & { Name: string }, idx: number) => {
 				if (idx === 0) {
 					_LatLonBoundingBox = layer.EX_GeographicBoundingBox;

package/src/hooks/useLayerFilter/useLayerFilter.doc.de.md

@@ -0,0 +1,3 @@
+# Component Beschreibung
+
+Beschreibungstext

package/src/hooks/useLayerFilter/useLayerFilter.meta_.json

@@ -0,0 +1,14 @@
+{
+  "name": "useLayerFilter",
+  "title": "",
+  "description": "",
+  "i18n": {
+    "de": {
+      "title": "",
+      "description": ""
+    }
+  },
+  "tags": [],
+  "category": "",
+  "type": "component"
+}

package/src/hooks/useLayerFilter/useLayerFilter.stories.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+
+import useLayerFilter from './useLayerFilter';
+
+import mapContextDecorator from '../../decorators/MapContextDecorator';
+import MlGeoJsonLayer from '../../components/MlGeoJsonLayer/MlGeoJsonLayer';
+import sample from '../../components/MlGeoJsonLayer/assets/sample_2.json';
+import { FeatureCollection } from '@turf/turf';
+
+const storyoptions = {
+	title: 'hooks/useLayerFilter',
+	component: useLayerFilter,
+	argTypes: {},
+	decorators: mapContextDecorator,
+};
+export default storyoptions;
+
+const Template = (args: { filter_name: string }) => {
+	useLayerFilter({ layerId: 'filter_test', filter: ['==', 'name', args.filter_name] });
+	return <MlGeoJsonLayer layerId="filter_test" geojson={sample as FeatureCollection} />;
+};
+
+export const ExampleConfig = Template.bind({});
+ExampleConfig.parameters = {};
+ExampleConfig.args = {
+	filter_name: 'Mauspfad',
+};
+ExampleConfig.argTypes = {
+	filter_name: {
+		options: [
+			'Mauspfad',
+			'Windeckstraße',
+			'Münsterplatz',
+			'Postrstraße',
+			'In der Sürst',
+			'Remiglustraße',
+		],
+		control: { type: 'radio' },
+	},
+};

package/src/hooks/useLayerFilter/useLayerFilter.ts

@@ -0,0 +1,33 @@
+import { useEffect } from 'react';
+import useMap from '../useMap';
+import { FilterSpecification } from 'maplibre-gl';
+
+export interface UseLayerFilterProps {
+	mapId?: string;
+	layerId?: string;
+	filter?: FilterSpecification;
+}
+
+function useLayerFilter(props: UseLayerFilterProps) {
+	const mapHook = useMap({ mapId: props.mapId });
+
+	useEffect(() => {
+		if (!mapHook.map || !props.layerId || !props.filter) return;
+
+		if (mapHook.map.map.getLayer(props.layerId)) {
+			const _layerId = props.layerId;
+
+			mapHook.map.map.setFilter(_layerId, props.filter);
+			return () => {
+				if (mapHook.map) {
+					mapHook.map.map.setFilter(_layerId, null);
+				}
+			};
+		}
+		return;
+	}, [props, mapHook.map]);
+
+	return {};
+}
+
+export default useLayerFilter;

package/src/components/MlLayer/MlLayer.stories.js

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

package/src/components/MlThreeJsLayer/MlThreeJsLayer.stories.js

@@ -1,39 +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 = (args) => {
-	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 = {};