add geo coding component

src/components/MlGeoCoding/MlGeoCoding.json

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

src/components/MlGeoCoding/MlGeoCoding.stories.tsx

@@ -0,0 +1,86 @@
+import React, { useEffect, useState } from 'react';
+
+import MlGeoCoding from './MlGeoCoding';
+
+import mapContextDecorator from '../../decorators/MapContextDecorator';
+
+const storyoptions = {
+	title: 'MapComponents/MlGeoCoding',
+	component: MlGeoCoding,
+	argTypes: {},
+	decorators: mapContextDecorator,
+	parameters: { docs: { source: { type: 'code' } } },
+};
+
+export default storyoptions;
+interface TemplateProps {
+	mapId: string;
+	label: string;
+}
+
+const Template = (args: TemplateProps) => {
+	interface AutoCompleteOptionType {
+		title: string;
+		lat: number;
+		lng: number;
+		id: string | number;
+	}
+
+	interface AddressType {
+		railway: string;
+		boundingbox: string[];
+		class: string;
+		display_name: string;
+		importance: number;
+		lat: string;
+		licence: string;
+		lon: string;
+		name: string;
+		osm_id: number;
+		osm_type: string;
+		place_id: number;
+		place_rank: number;
+		type: string;
+	}
+
+	const [searchValue, setSearchValue] = useState('');
+
+	const [autoCompleteOptionArr, setAutoCompleteOptionArr] = useState<AutoCompleteOptionType[]>([
+
+	]);
+
+	useEffect(() => {
+		const apiUrl = `https://nominatim.openstreetmap.org/search?format=json&q=${searchValue},&limit=7`;
+
+		searchValue &&
+			fetch(apiUrl)
+				.then((res) => res.json())
+				.then((res: AddressType[]) => {
+					console.log(res[0]);
+					const optionsResArr = res.map((el) => ({
+						title: el.display_name,
+						lng: parseInt(el.lon),
+						lat: parseInt(el.lat),
+						id: el.place_id,
+					}));
+					setAutoCompleteOptionArr(optionsResArr);
+				})
+				.catch((err) => console.error(err));
+	}, [searchValue]);
+
+	return (
+		<MlGeoCoding
+			mapId={args.mapId}
+			label={args.label}
+			handleChangeVal={setSearchValue}
+			autoCompleteOptionArr={autoCompleteOptionArr}
+		/>
+	);
+};
+
+export const ExampleConfig = Template.bind({});
+ExampleConfig.parameters = {};
+ExampleConfig.args = {
+	mapId: 'map_1',
+	label: 'Search',
+};

src/components/MlGeoCoding/MlGeoCoding.tsx

@@ -0,0 +1,148 @@
+import React, { useEffect, useState } from 'react';
+import {
+	SxProps,
+	Theme,
+	ListItemText,
+	ListItem,
+	List,
+	ListItemButton,
+	Box,
+	InputLabel,
+	FormControl,
+	InputAdornment,
+	OutlinedInput,
+} from '@mui/material';
+import SearchIcon from '@mui/icons-material/Search';
+import MlMarker from '../MlMarker/MlMarker';
+import useMap from '../../hooks/useMap';
+
+// import
+interface AddressType {
+	title: string;
+	lat: number;
+	long: number;
+	id: string | number;
+}
+
+const inputStyle: SxProps<Theme> = {
+	my: 1,
+	background: 'white',
+	borderRadius: '4px',
+};
+
+interface Point {
+	lng: number;
+	lat: number;
+}
+
+export interface MlGeoCodingProp {
+	mapId: string;
+	label: string;
+	autoCompleteOptionArr: AddressType[];
+	handleChangeVal: (newValue: string) => void;
+}
+
+const MlGeoCoding = (props: MlGeoCodingProp) => {
+	const [selectedPoints, setSelectedPoints] = useState<Point>({ lng: 0, lat: 0 });
+	const [listShowed, setListShowed] = useState(false);
+	const [loading, setLoading] = useState(false);
+	const [searchValue, setSearchValue] = useState('');
+
+	const handleChangeOutSideVal = (event: React.ChangeEvent<HTMLInputElement>) => {
+		setLoading(true);
+		setSearchValue(event.target.value);
+		props.handleChangeVal(event.target.value);
+	};
+
+	useEffect(() => {
+		if (props.autoCompleteOptionArr.length < 1) return;
+		setListShowed(true);
+		setLoading(false);
+	}, [props.autoCompleteOptionArr]);
+
+	const mapHook = useMap({
+		mapId: props.mapId,
+	});
+
+	const handleListItemClick = (points: Point, title: string) => {
+		setSelectedPoints(points);
+		setSearchValue(title);
+
+		mapHook?.map?.map?.flyTo({
+			center: [points.lng, points.lat],
+			zoom: 9,
+			speed: 1.75,
+			curve: 1,
+		});
+	};
+
+	return (
+		<>
+			<Box
+				sx={{
+					zIndex: 1002,
+					px: 1,
+					position: 'relative',
+				}}
+				onClick={() => setListShowed(false)}
+			>
+				<FormControl fullWidth color="info" sx={inputStyle} variant="outlined">
+					<InputLabel>{props.label}</InputLabel>
+					<OutlinedInput
+						fullWidth
+						label={props.label}
+						value={searchValue}
+						onChange={handleChangeOutSideVal}
+						endAdornment={
+							<InputAdornment position="end">
+								<SearchIcon color="info" />
+							</InputAdornment>
+						}
+					/>
+				</FormControl>
+
+				{listShowed === true ? (
+					<List sx={{ background: 'white', borderRadius: '5px', boxShadow: 3 }}>
+						{loading ? (
+							<ListItem>
+								<ListItemText primary={'loading... '} />
+							</ListItem>
+						) : props.autoCompleteOptionArr.length > 1 ? (
+							props.autoCompleteOptionArr.map((el: AddressType) => (
+								<ListItemButton
+									key={el.id}
+									onClick={() =>
+										handleListItemClick(
+											{
+												lng: el.long || 0,
+												lat: el.lat || 0,
+											},
+											el?.title
+										)
+									}
+								>
+									<ListItemText primary={el?.title} />
+								</ListItemButton>
+							))
+						) : (
+							<ListItem>
+								<ListItemText primary={searchValue + ' is not available '} />
+							</ListItem>
+						)}
+					</List>
+				) : null}
+			</Box>
+
+			{(selectedPoints.lat || selectedPoints.lng) && (
+				<MlMarker {...selectedPoints} content="WhereGroup" mapId={props.mapId} />
+			)}
+		</>
+	);
+};
+
+MlGeoCoding.defaultProps = {
+	mapId: 'map_1',
+	label: 'Search',
+};
+
+export default MlGeoCoding;