visibility hook for capital cities marks

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 (
         <div style={{ display: 'grid', gridTemplateRows: 'auto min-content', position: 'relative', width: '100%', height: '100%' }}>
             <MapPrint id={id} mapElement={mapElement} />

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<VectorSource<any>> | null,
+    value: boolean
+) {
+    useEffect(() => {
+        if (!capitalsLayer) return;
+
+        capitalsLayer.setOpacity(value ? 0 : 1);
+    }, [capitalsLayer, value]);
+}