Fix map zoom levels for optimal clustering view

- Set maxZoom to 16 to maintain clustering at all levels
- Changed initial zoom from 15 to 14 for better overview
- Set minZoom to 10 for consistent experience
- Updated cluster settings: larger radius (80px) for better grouping
- Disabled clustering only at max zoom (16) instead of 17
- Auto-center uses maxZoom 15 to preserve clustering
- Removed auto-zoom to level 18 that broke clustering
- Map now opens with same view as 'Center View' button provides

static/index.html

@@ -947,7 +947,7 @@
         // Force refresh if we detect cached version
         (function() {
             const currentVersion = '5.1.1';
-            const timestamp = '1761506574'; // Cache-busting bump
+            const timestamp = '1761507045'; // 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=1761506574"></script>
+    <script type="module" src="/static/js/tree-track-app.js?v=5.1.1&t=1761507045"></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 = '1761506574'; // Current timestamp for cache busting
+const timestamp = '1761507045'; // Current timestamp for cache busting
             const lastVersion = sessionStorage.getItem('treetrack_version');
             const lastTimestamp = sessionStorage.getItem('treetrack_timestamp');
             
@@ -1081,7 +1081,7 @@ const timestamp = '1761506574'; // 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=1761506574">
+<script src="/static/map.js?v=5.1.1&t=1761507045">
     
                     "default-state": {
                         gradients: [

static/map.js

@@ -255,31 +255,34 @@ class TreeTrackMap {
         // Center on Tezpur, Assam - the actual research area
         const tezpurLocation = [26.6340, 92.7840]; // Tezpur coordinates
         
-        // Initialize map with high zoom for detailed view
+        // Initialize map with optimal clustering zoom level
         this.map = L.map('map', {
             center: tezpurLocation,
-            zoom: 15, // Start with high zoom for immediate detail
+            zoom: 14, // Start with clustering view
+            maxZoom: 16, // Limit maximum zoom to maintain clustering
+            minZoom: 10, // Set reasonable minimum zoom
             zoomControl: true,
             attributionControl: true,
             preferCanvas: true // Better performance for many markers
         });
 
-        // Add multiple beautiful tile layers
+        // Add multiple beautiful tile layers with clustering-optimized zoom limits
         const satelliteLayer = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
             attribution: 'Tiles © Esri — Source: Esri, Maxar, GeoEye, Earthstar Geographics, CNES/Airbus DS, USDA, AeroGRID, IGN, and the GIS User Community',
-            maxZoom: 18,
-            minZoom: 3
+            maxZoom: 16, // Match map maxZoom for consistency
+            minZoom: 10
         });
         
         const terrainLayer = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/terrain/{z}/{x}/{y}{r}.png', {
             attribution: 'Map tiles by Stamen Design, CC BY 3.0 — Map data © OpenStreetMap contributors',
             maxZoom: 16,
-            minZoom: 3
+            minZoom: 10
         });
         
         const streetLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
             attribution: '© OpenStreetMap contributors',
-            maxZoom: 18
+            maxZoom: 16,
+            minZoom: 10
         });
 
         // Use satellite as primary layer for Tezpur's natural beauty
@@ -294,18 +297,18 @@ class TreeTrackMap {
         
         L.control.layers(baseMaps).addTo(this.map);
 
-        // Initialize marker clustering optimized for high-zoom detailed view
+        // Initialize marker clustering optimized for overview clustering
         this.markerClusterGroup = L.markerClusterGroup({
             chunkedLoading: true,
             chunkInterval: 100, // Faster processing for single query
             chunkDelay: 25,     // Reduced delay
-            maxClusterRadius: 50, // Smaller radius for detailed view
+            maxClusterRadius: 80, // Larger radius for better clustering
             spiderfyOnMaxZoom: true,
             showCoverageOnHover: false,
             zoomToBoundsOnClick: true,
             removeOutsideVisibleBounds: true, // Performance optimization
             animate: true,
-            disableClusteringAtZoom: 17 // Disable clustering at very high zoom
+            disableClusteringAtZoom: 16 // Keep clustering active until max zoom
         });
         
         this.map.addLayer(this.markerClusterGroup);
@@ -493,9 +496,9 @@ class TreeTrackMap {
             return;
         }
 
-        // Fit map to show all trees
+        // Fit map to show all trees with clustering-friendly zoom
         const group = new L.featureGroup(this.treeMarkers);
-        this.map.fitBounds(group.getBounds().pad(0.1));
+        this.map.fitBounds(group.getBounds().pad(0.1), { maxZoom: 15 });
         this.showMessage('Map centered on all trees', 'success');
     }
 
@@ -673,21 +676,16 @@ class TreeTrackMap {
                 }, (i / uiBatchSize) * 50); // Stagger UI batches by 50ms
             }
 
-            // Auto-zoom to max level and center on trees after loading completes
+            // Auto-center on trees with clustering-friendly zoom after loading completes
             setTimeout(() => {
                 if (loadedCount > 0) {
                     // Get bounds of all tree markers
                     const group = new L.featureGroup(this.treeMarkers);
                     const bounds = group.getBounds();
                     
-                    // Center on trees and zoom to maximum level for detailed view
-                    this.map.fitBounds(bounds, { padding: [20, 20] });
-                    
-                    // After fitting bounds, zoom to maximum detailed level
-                    setTimeout(() => {
-                        this.map.setZoom(18); // Maximum detailed zoom
-                        console.log('Map auto-zoomed to maximum detail level');
-                    }, 500);
+                    // Center on trees with clustering-optimized zoom level
+                    this.map.fitBounds(bounds, { padding: [20, 20], maxZoom: 15 });
+                    console.log('Map auto-centered on trees with clustering view');
                 }
             }, 2000); // Wait for most UI batches to complete
 

static/sw.js

@@ -1,5 +1,5 @@
 // TreeTrack Service Worker - PWA and Offline Support
-const VERSION = 1761506574; // Cache busting bump - force clients to fetch new static assets and header image change
+const VERSION = 1761507045; // 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": 1761506574
+  "timestamp": 1761507045
 }