refactor: modify the custom vector layer component to contain interac…

…tions

src/frontend/src/components/IndividualProject/MapSection/index.tsx

@@ -43,6 +43,7 @@ export default function MapSection() {
           id={singleTask.id}
           visibleOnMap={!!singleTask?.outline_geojson}
           geojson={singleTask?.outline_geojson}
+          interactions={['feature']}
           layerOptions={{
             type: 'fill',
             paint: {

src/frontend/src/components/common/MapLibreComponents/Layers/VectorLayer.ts

@@ -1,15 +1,24 @@
-import { useEffect, useMemo } from 'react';
+/* eslint-disable no-param-reassign */
+import { useEffect, useMemo, useRef } from 'react';
+import { MapMouseEvent } from 'maplibre-gl';
 import { IVectorLayer } from '../types';
 
 export default function VectorLayer({
   map,
   id,
   geojson,
   isMapLoaded,
+  interactions = [],
   layerOptions,
+  onFeatureSelect,
   visibleOnMap = true,
 }: IVectorLayer) {
   const sourceId = useMemo(() => id.toString(), [id]);
+  const hasInteractions = useRef(false);
+
+  useEffect(() => {
+    hasInteractions.current = !!interactions.length;
+  }, [interactions]);
 
   useEffect(() => {
     if (!map || !isMapLoaded || !geojson) return;
@@ -38,6 +47,42 @@ export default function VectorLayer({
     }
   }, [map, isMapLoaded, visibleOnMap, sourceId, geojson]); // eslint-disable-line
 
+  // change cursor to pointer on feature hover
+  useEffect(() => {
+    if (!map) return () => {};
+    function onMouseOver() {
+      if (!map || !hasInteractions.current) return;
+      map.getCanvas().style.cursor = 'pointer';
+    }
+    function onMouseLeave() {
+      if (!map || !hasInteractions.current) return;
+      map.getCanvas().style.cursor = '';
+    }
+    map.on('mouseover', sourceId, onMouseOver);
+    map.on('mouseleave', sourceId, onMouseLeave);
+    // remove event handlers on unmount
+    return () => {
+      map.off('mouseover', onMouseOver);
+      map.off('mouseleave', onMouseLeave);
+    };
+  }, [map, sourceId]);
+
+  // add select interaction & return properties on feature select
+  useEffect(() => {
+    if (!map || !interactions.includes('feature')) return () => {};
+    function handleSelectInteraction(event: MapMouseEvent) {
+      if (!map) return;
+      map.getCanvas().style.cursor = 'pointer';
+      // @ts-ignore
+      const { features } = event;
+      if (!features?.length) return;
+      const { properties, layer } = features[0];
+      onFeatureSelect?.({ ...properties, layer: layer?.id });
+    }
+    map.on('click', sourceId, handleSelectInteraction);
+    return () => map.off('click', sourceId, handleSelectInteraction);
+  }, [map, interactions, sourceId, onFeatureSelect]);
+
   useEffect(
     () => () => {
       if (map?.getSource(sourceId)) {

src/frontend/src/components/common/MapLibreComponents/types/index.ts

@@ -43,6 +43,8 @@ export type GeojsonType = GeoJsonTypes | FeatureCollection | Feature;
 
 export interface IVectorLayer extends ILayer {
   geojson: GeojsonType | null;
+  interactions?: string[];
+  onFeatureSelect?: (properties: Record<string, any>) => void;
 }
 
 type InteractionsType = 'hover' | 'select';