fix-mlhexagonlayer-mlgeojsonlayer (#267)

authored-by: jannik brack <jannik.brack@wheregroup.com>

Author: JannikBrack

packages/deck-gl/src/components/MlHexagonLayer/MlHexagonLayer.tsx

@@ -40,38 +40,31 @@ const defaultProps = {
 const MlHexagonLayer = (props: MlHexagonMapProps) => {
 	const deckGlHook = useDeckGl();
 
-	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-	// @ts-expect-error
-	props = {
-		...defaultProps,
-		...props,
-	};
-
-	const { mapId, ...HexagonLayerProps } = props;
-
 	const mapHook = useMap({
-		mapId: mapId,
-		waitForLayer: HexagonLayerProps.beforeId,
+		mapId: props.mapId,
+		waitForLayer: props.beforeId,
 	});
 
 	// create deck.gl HexagonLayer once when its props change
 	const hexagonLayer = useMemo(() => {
+		const { mapId: _mapId, ...HexagonLayerProps } = props;
 		if (!HexagonLayerProps.data) return null;
 		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 		// @ts-ignore
 		return new HexagonLayer({
+			...defaultProps,
 			...HexagonLayerProps,
 		} as unknown as HexagonLayerProps);
 	}, [
-		HexagonLayerProps.beforeId,
-		HexagonLayerProps.data,
-		HexagonLayerProps.elevationScale,
-		HexagonLayerProps.extruded,
-		HexagonLayerProps.coverage,
-		HexagonLayerProps.autoHighlight,
-		HexagonLayerProps.material,
-		HexagonLayerProps.radius,
-		HexagonLayerProps.transitions,
+		props.beforeId,
+		props.data,
+		props.elevationScale,
+		props.extruded,
+		props.coverage,
+		props.autoHighlight,
+		props.material,
+		props.radius,
+		props.transitions,
 	]);
 
 	// add/remove the memoized layer

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

@@ -444,7 +444,7 @@ const catalogueTemplate = (context: any) => {
 				}
 			/>
 
-			{selectedLayer === 'circle' && <CircleTemplate geojson={context.args.geojson} />}
+			{selectedLayer === 'circle' && <CircleTemplate geojson={context.geojson} />}
 			{selectedLayer === 'line' && (
 				<LineStyler
 					openSidebar={openSidebar}