diff --git a/client/src/components/map/MapComponent.tsx b/client/src/components/map/MapComponent.tsx index 1d40248..f0bb98f 100644 --- a/client/src/components/map/MapComponent.tsx +++ b/client/src/components/map/MapComponent.tsx @@ -35,6 +35,7 @@ import { Style } from 'ol/style' import MapRegionSelect from './MapRegionSelect/MapRegionSelect' import MapLayersSelect from './MapLayers/MapLayersSelect' import MapObjectSearch from './MapObjectSearch/MapObjectSearch' +import { useCapitals } from '../../hooks/map/useCapitals' const swrOptions: SWRConfiguration = { revalidateOnFocus: false @@ -468,6 +469,7 @@ const MapComponent = ({ } }, [selectedRegion, selectedDistrict, id]) + useCapitals(capitalsLayer, !!selectedDistrict) useEffect(() => { if (selectedYear) { @@ -476,6 +478,7 @@ const MapComponent = ({ } }, [selectedYear]) + return (
diff --git a/client/src/hooks/map/useCapitals.ts b/client/src/hooks/map/useCapitals.ts new file mode 100644 index 0000000..6d4c042 --- /dev/null +++ b/client/src/hooks/map/useCapitals.ts @@ -0,0 +1,20 @@ +import { useEffect } from "react"; +import type VectorLayer from "ol/layer/Vector"; +import type VectorSource from "ol/source/Vector"; + +/** + * Hook that controls the opacity of the capitals layer depending on the selected district. + * + * @param capitalsLayer - The OpenLayers VectorLayer instance for capitals. + * @param value - Value to observe, boolean. + */ +export function useCapitals( + capitalsLayer: VectorLayer> | null, + value: boolean +) { + useEffect(() => { + if (!capitalsLayer) return; + + capitalsLayer.setOpacity(value ? 0 : 1); + }, [capitalsLayer, value]); +} \ No newline at end of file