UI design/ogc api+sketch tool (#221)

Author: lenaghub

src/components/MlGeoJsonLayer/util/getDefaultPaintPropsByType.ts

@@ -10,15 +10,21 @@ const getDefaultPaintPropsByType = (
 				return defaultPaintOverrides.fill;
 			}
 			return {
-				'fill-color': 'rgba(10,240,256,0.6)',
-				'fill-outline-color': 'rgba(20,230,256,0.8)',
+				// 'fill-color': 'rgba(10,240,256,0.6)',
+				// 'fill-outline-color': 'rgba(20,230,256,0.8)',
+				'fill-color': '#009EE0',
+				'fill-outline-color': '#009EE0',
 			};
 		case 'line':
 			if (defaultPaintOverrides?.line) {
+				console.log(defaultPaintOverrides.line);
 				return defaultPaintOverrides.line;
 			}
 			return {
-				'line-color': 'rgb(203,211,2)',
+				// // 'line-color': 'rgb(203,211,2)',
+				// 'line-width': 5,
+				// 'line-blur': 0,
+				'line-color': '#009EE0',
 				'line-width': 5,
 				'line-blur': 0,
 			};
@@ -27,10 +33,14 @@ const getDefaultPaintPropsByType = (
 				return defaultPaintOverrides.circle;
 			}
 			return {
-				'circle-color': 'rgba(10,240,256,0.8)',
+				// 'circle-color': 'rgba(10,240,256,0.8)',
+				// 'circle-stroke-color': '#fff',
+				// 'circle-stroke-width': 2,
+				// 'circle-radius': 4,
+				'circle-color': '#009EE0',
 				'circle-stroke-color': '#fff',
 				'circle-stroke-width': 2,
-				'circle-radius': 4,
+				'circle-radius': 5,
 			};
 		default:
 			return {};

src/components/MlOgcApiFeatures/MlOgcApiFeatures.stories.tsx

@@ -58,6 +58,7 @@ const PointTemplate = (props: TemplateProps) => {
 				mapId={props.mapId}
 				ogcApiFeatureParams={props.ogcApiFeatureParams}
 				reloadFeaturesOnMapMove={true}
+				mlGeoJsonLayerProps={{ defaultPaintOverrides: { circle: { 'circle-color': '#CF003D' } } }}
 			></MlOgcApiFeatures>
 		</>
 	);

src/components/MlSketchTool/MlSketchTool.stories.tsx

@@ -1,11 +1,12 @@
 import React, { useState } from 'react';
 
 import MlSketchTool from './MlSketchTool';
+import { Feature } from 'geojson';
 
 import mapContextDecorator from '../../decorators/MapContextDecorator';
 import Sidebar from '../../ui_components/Sidebar';
 import TopToolbar from '../../ui_components/TopToolbar';
-import { Box, Button, Theme, useMediaQuery } from '@mui/material';
+import { Button, Paper, Typography } from '@mui/material';
 
 const storyoptions = {
 	title: 'MapComponents/MlSketchTool',
@@ -40,33 +41,31 @@ const Template = () => {
 };
 
 const catalgoueTemplate = () => {
-	const mediaIsMobile = useMediaQuery((theme: Theme) => theme.breakpoints.down('lg'));
+	// const mediaIsMobile = useMediaQuery((theme: Theme) => theme.breakpoints.down('lg'));
 
 	const [openSidebar, setOpenSidebar] = useState(true);
+	const [instructionText, setInstructionText] = useState('Select a sketch tool.');
+
+	const getInstructionText = (drawMode?: keyof MapboxDraw.Modes, selectedGeoJson?: Feature) => {
+		if (drawMode === 'simple_select' && selectedGeoJson) {
+			const geoType = selectedGeoJson.geometry.type;
+			return `Edit ${geoType}: Click the geometry to edit.`;
+		}
+
+		switch (drawMode) {
+			case 'draw_point':
+				return 'Click to draw point.';
+			case 'draw_line_string':
+				return 'Click to add vertices. Double-click to finish drawing.';
+			case 'draw_polygon':
+				return 'Click to add vertices. Double-click to finish drawing.';
+			default:
+				return 'Select a sketch tool.';
+		}
+	};
+
 	return (
 		<>
-			<Box
-				sx={{
-					position: 'fixed',
-					width: { xs: '100%', sm: 'auto' },
-					top: { xs: '62px', sm: '22px' },
-					right: { xs: '0px', sm: '180px' },
-					paddingRight: { xs: '20px', sm: '0px' },
-					color: '#009ee0',
-					backgroundColor: '#fff',
-					textAlign: 'right',
-					fontSize: '16px',
-					fontFamily: 'sans-serif',
-					display: 'flex',
-					flexDirection: 'column',
-					gap: '5px',
-					zIndex: 5000,
-				}}
-			>
-				{mediaIsMobile
-					? 'Zum Beenden erneut auf denselben Punkt klicken.'
-					: 'Die Zeichnung kann beendet werden, indem erneut auf den zuletzt gezeichneten Punkt geklickt wird.'}
-			</Box>
 			<TopToolbar
 				buttons={
 					<>
@@ -81,8 +80,30 @@ const catalgoueTemplate = () => {
 				}
 			/>
 			<Sidebar open={openSidebar} setOpen={setOpenSidebar} name={'Sketch Tool'}>
-				<MlSketchTool onChange={(state) => console.log(state)} />
+				<MlSketchTool
+					onChange={(state) => {
+						const { drawMode, selectedGeoJson } = state;
+						setInstructionText(getInstructionText(drawMode, selectedGeoJson));
+					}}
+				/>
 			</Sidebar>
+
+			<Paper
+				sx={{
+					position: 'fixed',
+					bottom: '25px',
+					left: '50%',
+					padding: '10px',
+					zIndex: 101,
+				}}
+			>
+				<Typography>
+					{/* {mediaIsMobile
+						? 'Zum Beenden erneut auf denselben Punkt klicken.'
+						: 'Die Zeichnung kann beendet werden, indem erneut auf den zuletzt gezeichneten Punkt geklickt wird.'} */}
+					{instructionText}
+				</Typography>
+			</Paper>
 		</>
 	);
 };