fix(grayline): Improve segment splitting with overlap at boundaries

Changed splitting strategy to ensure segments overlap at the split point.
This prevents gaps between western and eastern hemisphere segments.

Uses sorted points and midpoint splitting with 1-point overlap.

src/plugins/layers/useGrayLine.js

@@ -121,28 +121,34 @@ function splitAtDateLine(points) {
   if (span > 350) {
     console.log('🔍 Full-world span detected, splitting at ±180°');
     
-    // Find where the line crosses from negative to positive (near ±180°)
+    // Strategy: Create two segments that meet at ±180° longitude
-    // Split into: [points with lon < 0] and [points with lon >= 0]
+    // Segment 1: Western hemisphere (-180° to slightly past 0°)
-    const westSegment = [];  // Points from -180 to ~0
+    // Segment 2: Eastern hemisphere (slightly before 0° to +180°)
-    const eastSegment = [];  // Points from ~0 to 180
+    
-    
+    const westSegment = [];  // Points from -180° to ~0°
-    for (let i = 0; i < points.length; i++) {
+    const eastSegment = [];  // Points from ~0° to +180°
-      const lon = points[i][1];
+    
-      
+    // Sort points by longitude to ensure correct ordering
-      // Split around longitude 0 or at the extremes
+    const sortedPoints = [...points].sort((a, b) => a[1] - b[1]);
-      // Points near -180 and near +180 should be in different segments
+    
-      if (lon < 0) {
+    // Find the midpoint longitude (should be around 0°)
-        westSegment.push(points[i]);
+    const midIndex = Math.floor(sortedPoints.length / 2);
-      } else {
+    
-        eastSegment.push(points[i]);
+    // Split at midpoint, with some overlap
-      }
+    westSegment.push(...sortedPoints.slice(0, midIndex + 1));
-    }
+    eastSegment.push(...sortedPoints.slice(midIndex));
     
     const segments = [];
     if (westSegment.length >= 2) segments.push(westSegment);
     if (eastSegment.length >= 2) segments.push(eastSegment);
     
-    console.log('🔍 Split into segments:', segments.map(s => s.length), 'points');
+    console.log('🔍 Split into segments:', segments.map(s => {
+      const lons = s.map(p => p[1]);
+      return {
+        points: s.length,
+        lonRange: `${Math.min(...lons).toFixed(1)} to ${Math.max(...lons).toFixed(1)}`
+      };
+    }));
     return segments;
   }
   
@@ -628,10 +634,16 @@ export function useLayer({ enabled = false, opacity = 0.5, map = null }) {
             // Create polygon from upper segment + reversed lower segment
             const enhancedZone = [...upperSeg, ...lowerSeg.reverse()];
             
+            // Debug: Show longitude range of this polygon
+            const polyLons = enhancedZone.map(p => p[1]);
+            const polyMinLon = Math.min(...polyLons);
+            const polyMaxLon = Math.max(...polyLons);
+            
             console.log(`🔶 Creating Enhanced DX polygon segment ${i+1}/${numSegments}:`, {
               upperPoints: upperSeg.length,
               lowerPoints: lowerSeg.length,
-              totalPolygonPoints: enhancedZone.length
+              totalPolygonPoints: enhancedZone.length,
+              lonRange: `${polyMinLon.toFixed(1)} to ${polyMaxLon.toFixed(1)}`
             });
             
             const enhancedPoly = L.polygon(enhancedZone, {