fixed cut overlays and solved the docker duplication thing

map/app/public/css/modules/leaflet-custom.css

@@ -54,8 +54,8 @@
     cursor: pointer;
 }
 
-/* Ensure circle markers are visible */
-path.leaflet-interactive {
+/* Ensure circle markers are visible - but NOT cut polygons */
+path.leaflet-interactive:not(.cut-polygon) {
     stroke: #fff;
     stroke-opacity: 1;
     stroke-width: 2;
@@ -107,7 +107,15 @@ path.leaflet-interactive {
 /* Cut polygons - allow dynamic opacity (higher specificity to override) */
 .leaflet-container path.leaflet-interactive.cut-polygon {
     stroke-width: 2px !important;
-    /* Allow JavaScript to control fill-opacity - remove !important */
+    /* Allow JavaScript to control fill-opacity - explicitly do NOT override it */
+    stroke: currentColor !important;
+    stroke-opacity: 0.8 !important;
+}
+
+/* Additional specificity rule for cut polygons to ensure JS opacity takes precedence */
+path.leaflet-interactive.cut-polygon {
+    /* Do not set fill-opacity here - let JavaScript control it */
+    stroke-width: 2px;
 }
 
 /* Marker being moved */

map/app/public/css/modules/start-location-marker.css

@@ -37,6 +37,10 @@
     border-radius: 50%;
     background: rgba(255, 68, 68, 0.3);
     animation: pulse-ring 2s ease-out infinite;
+    /* Position the pulse at the tip of the marker */
+    top: 24px;
+    left: 0;
+    transform-origin: center center;
 }
 
 @keyframes bounce-marker {
@@ -69,4 +73,4 @@
 
 .start-location-popup-enhanced .leaflet-popup-content {
     margin: 0;
-}
+}

map/app/public/js/cut-manager.js

@@ -183,92 +183,123 @@ export class CutManager {
             return false;
         }
     }
-    
-    /**
-     * Display a cut on the map (enhanced to support multiple cuts)
-     */
-    /**
-     * Display a cut on the map (enhanced to support multiple cuts)
-     */
-    displayCut(cutData, autoDisplayed = false) {
-        if (!this.map) {
-            console.error('Map not initialized');
-            return false;
-        }
-        
-        // Normalize field names for consistent access
-        const normalizedCut = {
-            ...cutData,
-            id: cutData.id || cutData.Id || cutData.ID,
-            name: cutData.name || cutData.Name,
-            description: cutData.description || cutData.Description,
-            color: cutData.color || cutData.Color,
-            opacity: cutData.opacity || cutData.Opacity,
-            category: cutData.category || cutData.Category,
-            geojson: cutData.geojson || cutData.GeoJSON || cutData['GeoJSON Data'],
-            is_public: cutData.is_public || cutData['Public Visibility'],
-            is_official: cutData.is_official || cutData['Official Cut'],
-            autoDisplayed: autoDisplayed // Track if this was auto-displayed
-        };
-        
-        // Check if already displayed
-        if (this.cutLayers.has(normalizedCut.id)) {
-            console.log(`Cut already displayed: ${normalizedCut.name}`);
-            return true;
-        }
-        
-        if (!normalizedCut.geojson) {
-            console.error('Cut has no GeoJSON data');
-            return false;
-        }
-        
-        try {
-            const geojsonData = typeof normalizedCut.geojson === 'string' ? 
-                JSON.parse(normalizedCut.geojson) : normalizedCut.geojson;
-            
-            const cutLayer = L.geoJSON(geojsonData, {
-                style: {
-                    color: normalizedCut.color || '#3388ff',
-                    fillColor: normalizedCut.color || '#3388ff',
-                    fillOpacity: parseFloat(normalizedCut.opacity) || 0.3,
-                    weight: 2,
-                    opacity: 1,
-                    className: 'cut-polygon'
-                }
-            });
-            
-            // Add popup with cut info
-            cutLayer.bindPopup(`
-                <div class="cut-popup">
-                    <h3>${normalizedCut.name}</h3>
-                    ${normalizedCut.description ? `<p>${normalizedCut.description}</p>` : ''}
-                    ${normalizedCut.category ? `<p><strong>Category:</strong> ${normalizedCut.category}</p>` : ''}
-                    ${normalizedCut.is_official ? '<span class="badge official">Official Cut</span>' : ''}
-                </div>
-            `);
-            
-            cutLayer.addTo(this.map);
-            
-            // Store in both tracking systems
-            this.cutLayers.set(normalizedCut.id, cutLayer);
-            this.displayedCuts.set(normalizedCut.id, normalizedCut);
-            
-            // Update current cut reference (for legacy compatibility)
-            this.currentCut = normalizedCut;
-            this.currentCutLayer = cutLayer;
-            
-            console.log(`Displayed cut: ${normalizedCut.name} (ID: ${normalizedCut.id})`);
-            return true;
-            
-        } catch (error) {
-            console.error('Error displaying cut:', error);
-            return false;
-        }
+
+    // ...existing code...
+
+displayCut(cutData, autoDisplayed = false) {
+    if (!this.map) {
+        console.error('Map not initialized');
+        return false;
     }
     
-    /**
-     * Hide the currently displayed cut (legacy method - now hides all cuts)
-     */
+    // Normalize field names for consistent access
+    const normalizedCut = {
+        ...cutData,
+        id: cutData.id || cutData.Id || cutData.ID,
+        name: cutData.name || cutData.Name,
+        description: cutData.description || cutData.Description,
+        color: cutData.color || cutData.Color,
+        opacity: cutData.opacity || cutData.Opacity,
+        category: cutData.category || cutData.Category,
+        geojson: cutData.geojson || cutData.GeoJSON || cutData['GeoJSON Data'],
+        is_public: cutData.is_public || cutData['Public Visibility'],
+        is_official: cutData.is_official || cutData['Official Cut'],
+        autoDisplayed: autoDisplayed // Track if this was auto-displayed
+    };
+    
+    // Check if already displayed
+    if (this.cutLayers.has(normalizedCut.id)) {
+        console.log(`Cut already displayed: ${normalizedCut.name}`);
+        return true;
+    }
+    
+    if (!normalizedCut.geojson) {
+        console.error('Cut has no GeoJSON data');
+        return false;
+    }
+    
+    try {
+        const geojsonData = typeof normalizedCut.geojson === 'string' ? 
+            JSON.parse(normalizedCut.geojson) : normalizedCut.geojson;
+        
+        // Parse opacity value - ensure it's a number between 0 and 1
+        let opacityValue = parseFloat(normalizedCut.opacity);
+        
+        // Validate opacity is within range
+        if (isNaN(opacityValue) || opacityValue < 0 || opacityValue > 1) {
+            opacityValue = 0.3; // Default fallback
+            console.log(`Invalid opacity value (${normalizedCut.opacity}), using default: ${opacityValue}`);
+        }
+        
+        const cutLayer = L.geoJSON(geojsonData, {
+            style: {
+                color: normalizedCut.color || '#3388ff',
+                fillColor: normalizedCut.color || '#3388ff',
+                fillOpacity: opacityValue,
+                weight: 2,
+                opacity: 0.8, // Stroke opacity - keeping this slightly transparent for better visibility
+                className: 'cut-polygon'
+            },
+            // Add onEachFeature to apply styles to each individual feature
+            onEachFeature: function (feature, layer) {
+                // Apply styles directly to the layer to ensure they override CSS
+                if (layer.setStyle) {
+                    layer.setStyle({
+                        fillOpacity: opacityValue,
+                        color: normalizedCut.color || '#3388ff',
+                        fillColor: normalizedCut.color || '#3388ff',
+                        weight: 2,
+                        opacity: 0.8
+                    });
+                }
+                
+                // Add cut-polygon class to the path element
+                if (layer._path) {
+                    layer._path.classList.add('cut-polygon');
+                }
+            }
+        });
+        
+        // Add popup with cut info
+        cutLayer.bindPopup(`
+            <div class="cut-popup">
+                <h3>${normalizedCut.name}</h3>
+                ${normalizedCut.description ? `<p>${normalizedCut.description}</p>` : ''}
+                ${normalizedCut.category ? `<p><strong>Category:</strong> ${normalizedCut.category}</p>` : ''}
+                ${normalizedCut.is_official ? '<span class="badge official">Official Cut</span>' : ''}
+            </div>
+        `);
+        
+        cutLayer.addTo(this.map);
+        
+        // Ensure cut-polygon class is applied to all path elements after adding to map
+        cutLayer.eachLayer(function(layer) {
+            if (layer._path) {
+                layer._path.classList.add('cut-polygon');
+                // Force the fill-opacity style to ensure it overrides CSS
+                layer._path.style.fillOpacity = opacityValue;
+            }
+        });
+        
+        // Store in both tracking systems
+        this.cutLayers.set(normalizedCut.id, cutLayer);
+        this.displayedCuts.set(normalizedCut.id, normalizedCut);
+        
+        // Update current cut reference (for legacy compatibility)
+        this.currentCut = normalizedCut;
+        this.currentCutLayer = cutLayer;
+        
+        console.log(`Displayed cut: ${normalizedCut.name} (ID: ${normalizedCut.id}) with opacity: ${opacityValue} (raw: ${normalizedCut.opacity})`);
+        return true;
+        
+    } catch (error) {
+        console.error('Error displaying cut:', error);
+        return false;
+    }
+}
+
+// ...existing code...
+
     hideCut() {
         this.hideAllCuts();
     }