@mytec: iteration3 done for testing

frontend/src/components/map/Heatmap.tsx

@@ -15,6 +15,7 @@ declare module 'leaflet' {
 interface HeatmapProps {
   points: CoveragePoint[];
   visible: boolean;
+  opacity?: number;
 }
 
 /**
@@ -52,7 +53,7 @@ function getHeatmapParams(zoom: number) {
   };
 }
 
-export default function Heatmap({ points, visible }: HeatmapProps) {
+export default function Heatmap({ points, visible, opacity = 0.7 }: HeatmapProps) {
   const map = useMap();
   const [mapZoom, setMapZoom] = useState(map.getZoom());
 
@@ -98,10 +99,16 @@ export default function Heatmap({ points, visible }: HeatmapProps) {
 
     heatLayer.addTo(map);
 
+    // Apply opacity to the canvas element
+    const container = (heatLayer as unknown as { _canvas?: HTMLCanvasElement })._canvas;
+    if (container) {
+      container.style.opacity = String(opacity);
+    }
+
     return () => {
       map.removeLayer(heatLayer);
     };
-  }, [map, points, visible, mapZoom]);
+  }, [map, points, visible, mapZoom, opacity]);
 
   return null;
 }