diff --git a/src/Components/Map/Layer.tsx b/src/Components/Map/Layer.tsx index a3d816ca..c2c27526 100644 --- a/src/Components/Map/Layer.tsx +++ b/src/Components/Map/Layer.tsx @@ -133,6 +133,7 @@ export const Layer = ({ <> {items && items. + filter(item => item[itemTextField]). filter(item => item.layer?.name === name)?. filter(item => filterTags.length == 0 ? item : filterTags.every(tag => getItemTags(item).some(filterTag => filterTag.id.toLocaleLowerCase() === tag.id.toLocaleLowerCase())))?. diff --git a/src/Components/Map/Subcomponents/Controls/SearchControl.tsx b/src/Components/Map/Subcomponents/Controls/SearchControl.tsx index 5042ea65..68ed8c2c 100644 --- a/src/Components/Map/Subcomponents/Controls/SearchControl.tsx +++ b/src/Components/Map/Subcomponents/Controls/SearchControl.tsx @@ -3,7 +3,7 @@ import { useAddFilterTag, useFilterTags, useResetFilterTags, useSetSearchPhrase import useWindowDimensions from '../../hooks/useWindowDimension'; import axios from 'axios'; import { useRef, useState } from 'react'; -import { useMap } from 'react-leaflet'; +import { useMap, useMapEvents } from 'react-leaflet'; import { LatLng, LatLngBounds } from 'leaflet'; import { useDebounce } from '../../hooks/useDebounce'; import { useTags } from '../../hooks/useTags'; @@ -19,6 +19,8 @@ import MarkerIconFactory from '../../../../Utils/MarkerIconFactory'; export const SearchControl = ({ clusterRef }) => { const windowDimensions = useWindowDimensions(); + const [popupOpen, setPopupOpen] = useState(false); + const [value, setValue] = useState(''); const [geoResults, setGeoResults] = useState>([]); const [tagsResults, setTagsResults] = useState>([]); @@ -33,13 +35,21 @@ export const SearchControl = ({ clusterRef }) => { const resetFilterTags = useResetFilterTags(); const filterTags = useFilterTags(); + useMapEvents({ + popupopen: () => { + setPopupOpen(true); + }, + popupclose: () => { + setPopupOpen(false); + } + }) + useDebounce(() => { const searchGeo = async () => { try { const { data } = await axios.get( `https://photon.komoot.io/api/?q=${value}&limit=5` ); - setGeoResults(data.features); } catch (error) { console.log(error); @@ -60,7 +70,7 @@ export const SearchControl = ({ clusterRef }) => { const searchInput = useRef(null); return (<> - {!(windowDimensions.height < 500) && + {!(windowDimensions.height < 500 && popupOpen) &&
{ ) } -function isGeoCoordinate(input) { - console.log(input); - +function isGeoCoordinate(input) { const geokoordinatenRegex = /^[-+]?([1-8]?\d(\.\d+)?|90(\.0+)?),\s*[-+]?(180(\.0+)?|((1[0-7]\d)|([1-9]?\d))(\.\d+)?)$/; - return geokoordinatenRegex.test(input); - } function extractCoordinates(input): number[] | null { const result = input.split(",") - - - if (result) { const latitude = parseFloat(result[0]); const longitude = parseFloat(result[1]); - console.log([latitude, longitude]) - if (!isNaN(latitude) && !isNaN(longitude)) { return [latitude, longitude]; } } - return null; // Invalid input or error }