Implement proper batch loading for map to handle all trees

- Frontend now makes multiple API requests (1000 trees each) to load all trees
- Keeps existing UI batching (50 trees at a time) for smooth rendering
- Works around Supabase 1000-row default limit
- Maintains progress indicators during loading
- Reverted complex database changes in favor of frontend solution

static/index.html

@@ -947,7 +947,7 @@
         // Force refresh if we detect cached version
         (function() {
             const currentVersion = '5.1.1';
-            const timestamp = '1761506303'; // Cache-busting bump
+            const timestamp = '1761506562'; // Cache-busting bump
             const lastVersion = sessionStorage.getItem('treetrack_version');
             const lastTimestamp = sessionStorage.getItem('treetrack_timestamp');
             
@@ -1193,7 +1193,7 @@
         </div>
     </div>
 
-    <script type="module" src="/static/js/tree-track-app.js?v=5.1.1&t=1761506303"></script>
+    <script type="module" src="/static/js/tree-track-app.js?v=5.1.1&t=1761506562"></script>
     
     <script>
         // Idle-time prefetch of map assets to speed up first navigation

static/map.html

@@ -928,7 +928,7 @@
         // Force refresh if we detect cached version
         (function() {
             const currentVersion = '5.1.1';
-const timestamp = '1761506303'; // Current timestamp for cache busting
+const timestamp = '1761506562'; // Current timestamp for cache busting
             const lastVersion = sessionStorage.getItem('treetrack_version');
             const lastTimestamp = sessionStorage.getItem('treetrack_timestamp');
             
@@ -1081,7 +1081,7 @@ const timestamp = '1761506303'; // Current timestamp for cache busting
     <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
     <!-- Leaflet MarkerCluster JS for performance and grouping -->
     <script src="https://unpkg.com/leaflet.markercluster@1.4.1/dist/leaflet.markercluster.js"></script>
-<script src="/static/map.js?v=5.1.1&t=1761506303">
+<script src="/static/map.js?v=5.1.1&t=1761506562">
     
                     "default-state": {
                         gradients: [

static/map.js

@@ -590,16 +590,47 @@ class TreeTrackMap {
         console.log('Loading trees...');
         
         try {
-            // Single optimized query for all trees (faster than batching for user experience)
-            console.log('Loading all trees in single optimized query...');
-            const response = await this.authenticatedFetch('/api/trees?limit=3000'); // Load all trees
-            if (!response) return;
+            // Load trees in batches to work around API limits
+            let allTrees = [];
+            let offset = 0;
+            const batchSize = 1000; // API batch size (Supabase limit)
+            let hasMoreTrees = true;
             
-            const allTrees = await response.json();
-            console.log(`Loaded ${allTrees.length} trees in single query`);
-
             // Clear existing tree markers
             this.clearTreeMarkers();
+            
+            console.log('Loading trees in batches to handle large dataset...');
+            
+            while (hasMoreTrees && allTrees.length < 3000) { // Safety limit
+                console.log(`Loading batch: offset=${offset}, limit=${batchSize}`);
+                
+                const response = await this.authenticatedFetch(`/api/trees?limit=${batchSize}&offset=${offset}`);
+                if (!response) {
+                    console.error('Failed to fetch batch');
+                    break;
+                }
+                
+                const batchTrees = await response.json();
+                console.log(`Loaded batch: ${batchTrees.length} trees`);
+                
+                if (batchTrees.length === 0) {
+                    hasMoreTrees = false;
+                    break;
+                }
+                
+                allTrees = allTrees.concat(batchTrees);
+                offset += batchSize;
+                
+                // If we got less than the batch size, we've reached the end
+                if (batchTrees.length < batchSize) {
+                    hasMoreTrees = false;
+                }
+                
+                // Update progress
+                document.getElementById('treeCount').textContent = `${allTrees.length} trees loaded...`;
+            }
+            
+            console.log(`Total trees loaded: ${allTrees.length}`);
 
             // Filter out specific trees (e.g., ID 18 as requested)
             const filteredTrees = allTrees.filter(tree => {
@@ -613,12 +644,12 @@ class TreeTrackMap {
 
             console.log(`Filtered trees: ${filteredTrees.length} (excluded ${allTrees.length - filteredTrees.length})`);
 
-            // Add tree markers with progress tracking and batch processing
+            // Add tree markers with progress tracking and UI batch processing
             let loadedCount = 0;
-            const batchSize = 50; // Process 50 trees at a time for better performance
+            const uiBatchSize = 50; // UI processing batch size for smooth rendering
             
-            for (let i = 0; i < filteredTrees.length; i += batchSize) {
-                const batch = filteredTrees.slice(i, i + batchSize);
+            for (let i = 0; i < filteredTrees.length; i += uiBatchSize) {
+                const batch = filteredTrees.slice(i, i + uiBatchSize);
                 
                 // Process batch with small delay to prevent UI blocking
                 setTimeout(() => {
@@ -635,16 +666,13 @@ class TreeTrackMap {
                     document.getElementById('treeCount').textContent = `${loadedCount} trees`;
                     
                     // If this is the last batch, finalize
-                    if (i + batchSize >= filteredTrees.length) {
+                    if (i + uiBatchSize >= filteredTrees.length) {
                         console.log(`Map loading complete: ${loadedCount} tree markers added`);
                         this.showMessage(`Loaded ${loadedCount} trees successfully`, 'success');
                     }
-                }, (i / batchSize) * 100); // Stagger batches by 100ms
+                }, (i / uiBatchSize) * 50); // Stagger UI batches by 50ms
             }
 
-            // Final count update
-            document.getElementById('treeCount').textContent = `${loadedCount} trees`;
-
             // Auto-zoom to max level and center on trees after loading completes
             setTimeout(() => {
                 if (loadedCount > 0) {
@@ -661,7 +689,7 @@ class TreeTrackMap {
                         console.log('Map auto-zoomed to maximum detail level');
                     }, 500);
                 }
-            }, 2000); // Wait for most batches to complete
+            }, 2000); // Wait for most UI batches to complete
 
         } catch (error) {
             console.error('Error loading trees:', error);

static/sw.js

@@ -1,5 +1,5 @@
 // TreeTrack Service Worker - PWA and Offline Support
-const VERSION = 1761506303; // Cache busting bump - force clients to fetch new static assets and header image change
+const VERSION = 1761506562; // Cache busting bump - force clients to fetch new static assets and header image change
 const CACHE_NAME = `treetrack-v${VERSION}`;
 const STATIC_CACHE = `static-v${VERSION}`;
 const API_CACHE = `api-v${VERSION}`;

version.json

@@ -1,4 +1,4 @@
 {
   "version": "5.1.1",
-  "timestamp": 1761506303
+  "timestamp": 1761506562
 }