@mapcomponents/react-maplibre 0.1.64 → 0.1.66

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@mapcomponents/react-maplibre",
-	"version": "0.1.64",
+	"version": "0.1.66",
 	"main": "index.js",
 	"license": "MIT",
 	"module": "dist/index.esm.js",

package/src/components/MlGeojsonLayerWithSource/MlGeojsonLayerWithSource.tsx

@@ -3,7 +3,7 @@ import useMap from "../../hooks/useMap";
 import useLayer from "../../hooks/useLayer";
 import useSource from "../../hooks/useSource";
 
-interface MlGeojsonLayerWithSourceProps {
+export interface MlGeojsonLayerWithSourceProps {
   /**
    * Id of the target MapLibre instance in mapContext
    */

package/src/components/MlGpxViewer/MlGpxViewer.stories.tsx

@@ -62,8 +62,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/MlGpxViewer/util/MlGpxViewerInstructions.tsx

@@ -1,68 +1,71 @@
 import React from 'react';
 import Instructions from '../../../util/Instructions';
+import { useMediaQuery } from '@mui/material';
 
 const bubbleBottomRightStyle = {
 	bubbleRight: '-120px',
-	bubbleBottom: '-120px',
 	textMarginTop: '70px',
 	textMarginLeft: '120px',
 	iconTransform: 'rotate(180deg)',
 	iconMarginLeft: '200px',
-	zIndex: 200
+	zIndex: 200,
 };
 
-const steps = [
-		{
-			duration: 3000,
-			props: {
-				...bubbleBottomRightStyle,
-				iconMarginTop: '43px',
-							},
-			content: (
-				<>
-					You can load your <br />
-					own GPX file <br /> here
-				</>
-			),
+const getSteps = (mediaIsMobile:boolean) => [
+	{
+		duration: 3000,
+		props: {
+			...bubbleBottomRightStyle,
+			iconMarginTop: '43px',
+			bubbleBottom: mediaIsMobile ? '90px' : 0,
 		},
-		{
-			duration: 3000,
-			props: {
-				...bubbleBottomRightStyle,
-				iconMarginTop: '68px',
-			},
-			content: (
-				<>
-					You can see more <br /> information about <br />
-					the track <br />
-					here
-				</>
-			),
+		content: (
+			<>
+				You can load your <br />
+				own GPX file <br /> here
+			</>
+		),
+	},
+	{
+		duration: 3000,
+		props: {
+			...bubbleBottomRightStyle,
+			iconMarginTop: '68px',
+			bubbleBottom: mediaIsMobile ? '90px' : 0,
 		},
-		{
-			duration: 3000,
-			props: {
-				bubbleLeft: '-40px',
-				bubbleTop: '-150px',
-				textMarginTop: '230px',
-				textMarginLeft: '75px',
-				iconTransform: 'rotate(90deg)',
-				iconMarginTop: '-135px',
-				iconMarginLeft: '280px',
-				zIndex: 400
-			},
-			content: (
-				<>
-					In demo mode we <br /> provide you some <br /> GPX tracks <br /> to load.
-				</>
-			),
+		content: (
+			<>
+				You can see more <br /> information about <br />
+				the track <br />
+				here
+			</>
+		),
+	},
+	{
+		duration: 3000,
+		props: {
+			bubbleLeft: '-40px',
+			bubbleTop: '-150px',
+			textMarginTop: '230px',
+			textMarginLeft: '75px',
+			iconTransform: 'rotate(90deg)',
+			iconMarginTop: '-135px',
+			iconMarginLeft: '280px',
+			zIndex: 400,
 		},
-	];
-export default function MlGpxViewerInstructions(props: { open: boolean}) {
-	
+		content: (
+			<>
+				In demo mode we <br /> provide you some <br /> GPX tracks <br /> to load.
+			</>
+		),
+	},
+];
+export default function MlGpxViewerInstructions(props: { open: boolean }) {
+	const mediaIsMobile = useMediaQuery('(max-width:900px)');
+
 	return (
 		<>
-			<Instructions steps={steps} open={props.open} />
+			<Instructions steps={getSteps(mediaIsMobile)} open={props.open} />
 		</>
 	);
 }

package/src/components/MlSketchTool/{MlSketchTool.stories.js → MlSketchTool.stories.tsx}

@@ -13,7 +13,7 @@ const storyoptions = {
 };
 export default storyoptions;
 
-const Template = (args) => (
+const Template = () => (
 	<>
 		<Sidebar sx={{ maxWidth: '25vw' }}>
 			<MlSketchTool />

package/src/components/MlSketchTool/MlSketchTool.tsx

@@ -21,7 +21,7 @@ import { Feature } from '@turf/turf';
 import { LngLatLike } from '!maplibre-gl';
 import { SxProps } from '@mui/system/styleFunctionSx/styleFunctionSx';
 
-interface MlSketchToolProps {
+export interface MlSketchToolProps {
 	/**
 	 * Id of the target MapLibre instance in mapContext
 	 */

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/index.ts

@@ -38,6 +38,7 @@ export { default as useWms } from "./hooks/useWms";
 export { default as useSource } from "./hooks/useSource";
 export { default as useExportMap } from "./hooks/useExportMap";
 export { default as useCameraFollowPath } from "./hooks/useCameraFollowPath/useCameraFollowPath";
+export { default as useLayerFilter } from "./hooks/useLayerFilter/useLayerFilter";
 
 export { MapComponentsProvider } from "./contexts/MapContext";
 export { default as MapContext } from "./contexts/MapContext";

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