chore(cache): auto-bump cache version before push

static/index.html

@@ -947,7 +947,7 @@
         // Force refresh if we detect cached version
         (function() {
             const currentVersion = '5.1.1';
-            const timestamp = '1761513015'; // Cache-busting bump
+            const timestamp = '1761513142'; // 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=1761513015"></script>
+    <script type="module" src="/static/js/tree-track-app.js?v=5.1.1&t=1761513142"></script>
     
     <script>
         // Idle-time prefetch of map assets to speed up first navigation

static/map.html

@@ -967,7 +967,7 @@
         // Force refresh if we detect cached version
         (function() {
             const currentVersion = '5.1.1';
-const timestamp = '1761513015'; // Current timestamp for cache busting
+const timestamp = '1761513142'; // Current timestamp for cache busting
             const lastVersion = sessionStorage.getItem('treetrack_version');
             const lastTimestamp = sessionStorage.getItem('treetrack_timestamp');
             
@@ -1035,14 +1035,26 @@ const timestamp = '1761513015'; // Current timestamp for cache busting
                 <div class="instructions-content">
                     <p>This is the Tree Map of Tezpur.</p>
                     <p>Zoom in and out to explore data collected from various locations.</p>
-                    <p>Click on tree icons to view their details and information.</p>
+                    <p>Click on individual tree icons to view their details and information.</p>
+                    
+                    <div style="margin: 15px 0; padding: 12px; background: rgba(255, 255, 255, 0.1); border-radius: 8px; border-left: 3px solid #22c55e;">
+                        <h4 style="margin: 0 0 8px 0; font-size: 0.9rem; font-weight: 600;">Tree Clusters</h4>
+                        <p style="margin: 0 0 8px 0; font-size: 0.8rem; line-height: 1.4;">Circles with numbers represent groups of nearby trees:</p>
+                        <ul style="margin: 0; padding-left: 16px; font-size: 0.8rem; color: #6b7280;">
+                            <li><strong>Small clusters (2-10 trees):</strong> Yellow/orange circles</li>
+                            <li><strong>Medium clusters (10-100 trees):</strong> Orange circles</li>
+                            <li><strong>Large clusters (100+ trees):</strong> Red circles</li>
+                            <li><strong>Zoom in</strong> on any cluster to expand and see individual trees</li>
+                        </ul>
+                    </div>
+                    
                     <p>Use the map controls on the left to:</p>
                     <ul style="margin: 10px 0; padding-left: 20px; font-size: 0.875rem; color: #6b7280;">
                         <li>Find your current location</li>
                         <li>Clear location pins</li>
                         <li>Center the map view</li>
                     </ul>
-                    <p style="font-size: 0.8rem; color: #6b7280; margin-top: 12px;">All trees are displayed with consistent green markers with brown trunks to maintain visual clarity.</p>
+                    <p style="font-size: 0.8rem; color: #6b7280; margin-top: 12px;">All individual trees are displayed with consistent green markers with brown trunks.</p>
                 </div>
             </div>
 
@@ -1116,7 +1128,7 @@ const timestamp = '1761513015'; // 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=1761513015"></script>
+<script src="/static/map.js?v=5.1.1&t=1761513142"></script>
     <script>
         console.log('🗺️ Map script loaded successfully');
     </script>

static/sw.js

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