diff --git a/src/components/Map/index.tsx b/src/components/Map/index.tsx index fc13b669..bcf905c9 100644 --- a/src/components/Map/index.tsx +++ b/src/components/Map/index.tsx @@ -28,7 +28,6 @@ import { useOnMapFeatureMove } from '@lib/hooks/useOnMapFeatureMove' import { useMapUserGeolocationMarker } from '@lib/hooks/useMapUserGeolocationMarker' import { useInitialViewport } from '@lib/hooks/useInitialViewport' import { useMapHighlightMarker } from '@lib/hooks/useMapHighlightMarker' -import { useMapSearchMarker } from '@lib/hooks/useMapSearchMarker' import { useMaplibreMap } from '@lib/hooks/useMaplibreMap' import { useFiltersWithActiveProp } from '@lib/hooks/useFiltersWithActiveProp' import { @@ -47,7 +46,6 @@ interface MapType { * Also, a highlighted marker will be drawn to the map. */ highlightedCenter?: [longitude: number, latitude: number] - searchCenter?: [longitude: number, latitude: number] } const easeInOutQuad = (t: number): number => @@ -74,7 +72,6 @@ export const FacilitiesMap: FC = ({ onClickAnywhere = () => undefined, onMoveStart = () => undefined, highlightedCenter, - searchCenter, }) => { const { query, push } = useRouter() const texts = useTexts() @@ -96,15 +93,6 @@ export const FacilitiesMap: FC = ({ const [urlState, setUrlState] = useUrlState() - const highlightedSearchViewport = searchCenter - ? { - latitude: searchCenter[1], - longitude: searchCenter[0], - zoom: MAP_CONFIG.zoomedInZoom, - } - : null - useMapSearchMarker(map, highlightedSearchViewport) - const id = typeof query.id === 'string' ? parseInt(query.id, 10) : undefined const currentFacilityIdPageIsSpiderfied = id && isSpiderfied && spiderifier.current?.expandedIds.includes(id) diff --git a/src/components/MapHeader.tsx b/src/components/MapHeader.tsx index 17ce97e1..8b6ef461 100644 --- a/src/components/MapHeader.tsx +++ b/src/components/MapHeader.tsx @@ -1,23 +1,19 @@ import classNames from '@lib/classNames' -import { FeatureType } from '@lib/requests/geocode' import { useTexts } from '@lib/TextsContext' import { useUrlState } from '@lib/UrlStateContext' import { FC } from 'react' import { IconButtonLink } from './IconButton' import { House } from './icons/House' -import { Search } from './Search' interface MapHeaderPropsType { filterSidebarIsOpened: boolean listViewOpen: boolean setFilterSidebarIsOpened: (newState: boolean) => void - handleSearchResult: ((place: FeatureType) => void) | undefined } export const MapHeader: FC = ({ filterSidebarIsOpened, setFilterSidebarIsOpened, - handleSearchResult, listViewOpen, }) => { const [urlState] = useUrlState() @@ -47,7 +43,6 @@ export const MapHeader: FC = ({
= ({ > -
- -
- - ) - })} - -
- ) -} diff --git a/src/lib/hooks/useMapSearchMarker.ts b/src/lib/hooks/useMapSearchMarker.ts deleted file mode 100644 index 4b3bce2f..00000000 --- a/src/lib/hooks/useMapSearchMarker.ts +++ /dev/null @@ -1,46 +0,0 @@ -import classNames from '@lib/classNames' -import { ViewportType } from '@lib/types/map' -import { LngLatLike, Map, Marker } from 'maplibre-gl' -import { useEffect, useRef } from 'react' - -export function useMapSearchMarker( - map: Map | null, - searchViewport: ViewportType | null -): void { - const highlightedSearchMarker = useRef(null) - useEffect(() => { - if (!map) return - if (!searchViewport?.latitude) { - // Without a searchCenter we want to remove any highlightedSearchMarker: - highlightedSearchMarker && highlightedSearchMarker.current?.remove() - return - } else { - // Remove possibly existent markers: - highlightedSearchMarker.current?.remove() - - const customMarker = document.createElement('div') - customMarker.className = classNames('w-8 h-8 bg-norepeat') - customMarker.style.backgroundImage = 'url("/images/search_geopin.svg")' - - const searchCenter = [ - searchViewport.longitude, - searchViewport.latitude, - ] as LngLatLike - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore - highlightedSearchMarker.current = new Marker(customMarker) - .setLngLat(searchCenter) - .addTo(map) - - map.easeTo({ - center: searchCenter, - zoom: searchViewport.zoom, - }) - } - }, [ - map, - searchViewport?.latitude, - searchViewport?.longitude, - searchViewport?.zoom, - ]) -} diff --git a/src/lib/hooks/useMaplibreMap.ts b/src/lib/hooks/useMaplibreMap.ts index 9f3386b4..bfefa383 100644 --- a/src/lib/hooks/useMaplibreMap.ts +++ b/src/lib/hooks/useMaplibreMap.ts @@ -10,8 +10,10 @@ export function useMaplibreMap(config: { minZoom: number }): Map | null { const map = useRef(null) + const mapIsInitialized = useRef(false) // Map setup (run only once on initial render) useEffect(() => { + if (mapIsInitialized.current) return // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore map.current = new Map({ @@ -24,6 +26,7 @@ export function useMaplibreMap(config: { minZoom: config.minZoom, maxZoom: config.maxZoom, }) + mapIsInitialized.current = true // eslint-disable-next-line react-hooks/exhaustive-deps }, [])