Implement ID-based color binning for tree markers and add multiple marker style options

- Replace species-based coloring with 5 rotating color groups based on tree IDs
- Add localStorage caching system to prevent reloading trees on every visit
- Implement 5 different marker styles: realistic-tree, simple-circle, pin-style, geometric, minimalist
- Update legend to show ID-based color groups instead of species categories
- Add cache management functions with 30-minute expiration
- Remove unnecessary cache status indicator from UI
- Colors cycle through: Forest Green, Ocean Blue, Sunset Orange, Royal Purple, Crimson Red

app.py

@@ -561,13 +561,9 @@ async def get_trees(
     try:
         trees = await db.get_trees(limit=limit, offset=offset, species=species, health_status=health_status)
         
-        # Add signed URLs for files
-        processed_trees = []
-        for tree in trees:
-            processed_tree = storage.process_tree_files(tree)
-            processed_trees.append(processed_tree)
-        
-        return processed_trees
+        # For map performance: Skip image processing for bulk tree requests
+        # Images are not needed for map markers and clustering
+        return trees
         
     except RuntimeError as e:
         if "Database not connected" in str(e):

static/index.html

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

static/map.html

@@ -950,7 +950,7 @@
         // Force refresh if we detect cached version
         (function() {
             const currentVersion = '5.1.1';
-const timestamp = '1761508675'; // Current timestamp for cache busting
+const timestamp = '1761509700'; // Current timestamp for cache busting
             const lastVersion = sessionStorage.getItem('treetrack_version');
             const lastTimestamp = sessionStorage.getItem('treetrack_timestamp');
             
@@ -1020,15 +1020,15 @@ const timestamp = '1761508675'; // Current timestamp for cache busting
                     <p>Zoom in and out to explore data collected from various locations.</p>
                     <p>Click on tree icons to view their names.</p>
                     <div class="tree-legend">
-                        <h4>Tree Categories:</h4>
+                        <h4>Tree ID Color Groups:</h4>
                         <div class="legend-items">
-                            <div class="legend-item"><span class="legend-color" style="background: #059669;"></span> Ficus (Banyan/Fig)</div>
-                            <div class="legend-item"><span class="legend-color" style="background: #d97706;"></span> Mangifera (Mango)</div>
-                            <div class="legend-item"><span class="legend-color" style="background: #16a34a;"></span> Bambusa (Bamboo)</div>
-                            <div class="legend-item"><span class="legend-color" style="background: #84cc16;"></span> Azadirachta (Neem)</div>
-                            <div class="legend-item"><span class="legend-color" style="background: #dc2626;"></span> Tectona (Teak)</div>
-                            <div class="legend-item"><span class="legend-color" style="background: #8ab070;"></span> Other Species</div>
+                            <div class="legend-item"><span class="legend-color" style="background: #059669;"></span> Forest Green (Group 1)</div>
+                            <div class="legend-item"><span class="legend-color" style="background: #0ea5e9;"></span> Ocean Blue (Group 2)</div>
+                            <div class="legend-item"><span class="legend-color" style="background: #f97316;"></span> Sunset Orange (Group 3)</div>
+                            <div class="legend-item"><span class="legend-color" style="background: #a855f7;"></span> Royal Purple (Group 4)</div>
+                            <div class="legend-item"><span class="legend-color" style="background: #ef4444;"></span> Crimson Red (Group 5)</div>
                         </div>
+                        <p style="font-size: 12px; color: #666; margin-top: 10px;">Colors are assigned based on Tree ID numbers in rotating groups</p>
                     </div>
                 </div>
             </div>
@@ -1103,7 +1103,7 @@ const timestamp = '1761508675'; // 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=1761508675"></script>
+<script src="/static/map.js?v=5.1.1&t=1761509700"></script>
     <script>
         console.log('🗺️ Map script loaded successfully');
     </script>

static/map.js

@@ -647,6 +647,28 @@ class TreeTrackMap {
                 return;
             }
             
+            // Check for cached tree data first
+            const cacheKey = `treetrack_trees_${this.currentUser.username}`;
+            const cachedData = localStorage.getItem(cacheKey);
+            const cacheTimestamp = localStorage.getItem(`${cacheKey}_timestamp`);
+            
+            // Use cached data if it's less than 30 minutes old
+            const cacheAge = Date.now() - parseInt(cacheTimestamp || '0');
+            const maxCacheAge = 30 * 60 * 1000; // 30 minutes
+            
+            if (cachedData && cacheAge < maxCacheAge) {
+                console.log('⚡ Using cached tree data from localStorage');
+                this.showCacheStatus(true, cacheAge);
+                const allTrees = JSON.parse(cachedData);
+                return this.renderCachedTrees(allTrees);
+            } else {
+                console.log('📊 Cache miss or expired, loading fresh data...');
+                if (cachedData) {
+                    localStorage.removeItem(cacheKey);
+                    localStorage.removeItem(`${cacheKey}_timestamp`);
+                }
+            }
+            
             // Load trees in batches (restored simple approach)
             let allTrees = [];
             let offset = 0;
@@ -705,190 +727,275 @@ class TreeTrackMap {
                 }
             }
             
-            // Filter out specific trees (e.g., ID 18 as requested)
-            const filteredTrees = allTrees.filter(tree => {
-                if (tree.id === 18) {
-                    console.log('🔄 Excluding tree ID 18 from display');
-                    return false;
-                }
-                return true;
-            });
+            // Cache the fresh tree data
+            const cacheKey = `treetrack_trees_${this.currentUser.username}`;
+            localStorage.setItem(cacheKey, JSON.stringify(allTrees));
+            localStorage.setItem(`${cacheKey}_timestamp`, Date.now().toString());
+            console.log(`💾 Cached ${allTrees.length} trees to localStorage`);
             
-            console.log(`📊 Total trees to display: ${filteredTrees.length}`);
-
-            // Add tree markers with optimized batch processing
-            let loadedCount = 0;
-            const uiBatchSize = 100; // UI batch size for smooth rendering
-            
-            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(() => {
-                    batch.forEach((tree) => {
-                        try {
-                            this.addTreeMarker(tree);
-                            loadedCount++;
-                        } catch (error) {
-                            console.warn(`Failed to add marker for tree ${tree.id}:`, error);
-                        }
-                    });
-                    
-                    // Update progress
-                    document.getElementById('treeCount').textContent = `${loadedCount} trees`;
-                    
-                    // If this is the last batch, finalize
-                    if (i + uiBatchSize >= filteredTrees.length) {
-                        console.log(`🎉 Map loading complete: ${loadedCount} tree markers added`);
-                        this.showMessage(`Loaded ${loadedCount} trees successfully`, 'success');
-                        
-                        // Auto-center on trees with clustering view
-                        setTimeout(() => {
-                            if (loadedCount > 0) {
-                                const group = new L.featureGroup(this.treeMarkers);
-                                const bounds = group.getBounds();
-                                this.map.fitBounds(bounds.pad(0.1), { maxZoom: 15 });
-                                console.log('🎯 Map auto-centered with clustering view');
-                            }
-                        }, 100);
-                    }
-                }, (i / uiBatchSize) * 50); // Stagger UI batches by 50ms
-            }
+            // Use the new rendering method
+            this.renderTreesToMap(allTrees);
 
         } catch (error) {
             console.error('❌ Error loading trees:', error);
             this.showMessage('Failed to load trees. Please refresh the page.', 'error');
         }
     }
+    
+    async renderCachedTrees(allTrees) {
+        console.log(`⚡ Rendering ${allTrees.length} cached trees...`);
+        
+        try {
+            this.renderTreesToMap(allTrees);
+            console.log(`🎉 Successfully rendered ${allTrees.length} cached trees`);
+            this.showMessage(`Loaded ${allTrees.length} trees from cache`, 'success');
+            
+        } catch (error) {
+            console.error('❌ Failed to render cached trees:', error);
+            this.showMessage('Failed to load cached trees. Fetching fresh data...', 'error');
+            
+            // Clear bad cache and try fresh load
+            const cacheKey = `treetrack_trees_${this.currentUser.username}`;
+            localStorage.removeItem(cacheKey);
+            localStorage.removeItem(`${cacheKey}_timestamp`);
+            
+            // Retry with fresh data
+            return this.loadTrees();
+        }
+    }
+    
+    renderTreesToMap(allTrees) {
+        // Filter out specific trees (e.g., ID 18 as requested)
+        const filteredTrees = allTrees.filter(tree => {
+            if (tree.id === 18) {
+                console.log('🔄 Excluding tree ID 18 from display');
+                return false;
+            }
+            return true;
+        });
+        
+        console.log(`📊 Total trees to display: ${filteredTrees.length}`);
 
-    addTreeMarker(tree) {
-        // Determine tree category and colors based on species
-        const getTreeCategoryAndColors = (tree) => {
-            const scientificName = (tree.scientific_name || '').toLowerCase();
-            const commonName = (tree.common_name || '').toLowerCase();
-            const localName = (tree.local_name || '').toLowerCase();
+        // Add tree markers with optimized batch processing
+        let loadedCount = 0;
+        const uiBatchSize = 100; // UI batch size for smooth rendering
+        
+        for (let i = 0; i < filteredTrees.length; i += uiBatchSize) {
+            const batch = filteredTrees.slice(i, i + uiBatchSize);
             
-            // Categorize trees by families/types with distinct colors
-            if (scientificName.includes('ficus') || commonName.includes('banyan') || commonName.includes('fig')) {
-                return {
-                    category: 'Ficus (Banyan/Fig)',
+            // Process batch with small delay to prevent UI blocking
+            setTimeout(() => {
+                batch.forEach((tree) => {
+                    try {
+                        this.addTreeToMap(tree);
+                        loadedCount++;
+                    } catch (error) {
+                        console.warn(`Failed to add marker for tree ${tree.id}:`, error);
+                    }
+                });
+                
+                // Update progress
+                if (document.getElementById('treeCount')) {
+                    document.getElementById('treeCount').textContent = `${loadedCount} trees`;
+                }
+                
+                // If this is the last batch, finalize
+                if (i + uiBatchSize >= filteredTrees.length) {
+                    console.log(`🎉 Map loading complete: ${loadedCount} tree markers added`);
+                    
+                    // Auto-center on trees with clustering view
+                    setTimeout(() => {
+                        if (loadedCount > 0) {
+                            const group = new L.featureGroup(this.treeMarkers);
+                            const bounds = group.getBounds();
+                            this.map.fitBounds(bounds.pad(0.1), { maxZoom: 15 });
+                            console.log('🎯 Map auto-centered with clustering view');
+                        }
+                    }, 100);
+                }
+            }, (i / uiBatchSize) * 50); // Stagger UI batches by 50ms
+        }
+    }
+    
+    // Method to clear cached tree data (useful for debugging or force refresh)
+    clearTreeCache() {
+        if (this.currentUser) {
+            const cacheKey = `treetrack_trees_${this.currentUser.username}`;
+            localStorage.removeItem(cacheKey);
+            localStorage.removeItem(`${cacheKey}_timestamp`);
+            console.log('🗑️ Tree cache cleared');
+        }
+    }
+
+    addTreeToMap(tree) {
+        // Determine tree colors based on ID bins (5 color categories)
+        const getColorsByID = (treeId) => {
+            // Define 5 distinct color palettes for ID-based binning
+            const colorPalettes = [
+                {
+                    name: 'Forest Green',
                     colors: {
-                        canopy1: '#059669',    // Emerald green for Ficus
+                        canopy1: '#059669',    // Emerald green
                         canopy2: '#047857',    
                         canopy3: '#065f46',    
                         trunk: '#7c6643',
                         shadow: 'rgba(5, 150, 105, 0.3)'
                     }
-                };
-            } else if (scientificName.includes('mangifera') || commonName.includes('mango')) {
-                return {
-                    category: 'Mangifera (Mango)',
+                },
+                {
+                    name: 'Ocean Blue',
                     colors: {
-                        canopy1: '#d97706',    // Amber for Mango
-                        canopy2: '#b45309',    
-                        canopy3: '#92400e',    
+                        canopy1: '#0ea5e9',    // Sky blue
+                        canopy2: '#0284c7',    
+                        canopy3: '#0369a1',    
                         trunk: '#78716c',
-                        shadow: 'rgba(217, 119, 6, 0.3)'
-                    }
-                };
-            } else if (scientificName.includes('bambusa') || commonName.includes('bamboo')) {
-                return {
-                    category: 'Bambusa (Bamboo)',
-                    colors: {
-                        canopy1: '#16a34a',    // Green for Bamboo
-                        canopy2: '#15803d',    
-                        canopy3: '#166534',    
-                        trunk: '#6b7280',
-                        shadow: 'rgba(22, 163, 74, 0.3)'
+                        shadow: 'rgba(14, 165, 233, 0.3)'
                     }
-                };
-            } else if (scientificName.includes('azadirachta') || commonName.includes('neem')) {
-                return {
-                    category: 'Azadirachta (Neem)',
+                },
+                {
+                    name: 'Sunset Orange',
                     colors: {
-                        canopy1: '#84cc16',    // Lime green for Neem
-                        canopy2: '#65a30d',    
-                        canopy3: '#4d7c0f',    
-                        trunk: '#a8a29e',
-                        shadow: 'rgba(132, 204, 22, 0.3)'
+                        canopy1: '#f97316',    // Orange
+                        canopy2: '#ea580c',    
+                        canopy3: '#c2410c',    
+                        trunk: '#92400e',
+                        shadow: 'rgba(249, 115, 22, 0.3)'
                     }
-                };
-            } else if (scientificName.includes('tectona') || commonName.includes('teak')) {
-                return {
-                    category: 'Tectona (Teak)',
+                },
+                {
+                    name: 'Royal Purple',
                     colors: {
-                        canopy1: '#dc2626',    // Red-brown for Teak
-                        canopy2: '#b91c1c',    
-                        canopy3: '#991b1b',    
-                        trunk: '#8b5a3c',
-                        shadow: 'rgba(220, 38, 38, 0.3)'
+                        canopy1: '#a855f7',    // Purple
+                        canopy2: '#9333ea',    
+                        canopy3: '#7c3aed',    
+                        trunk: '#6b21a8',
+                        shadow: 'rgba(168, 85, 247, 0.3)'
                     }
-                };
-            } else {
-                // Default for other/unknown species
-                return {
-                    category: 'Other Species',
+                },
+                {
+                    name: 'Crimson Red',
                     colors: {
-                        canopy1: '#8ab070',    // primary-500
-                        canopy2: '#739b5a',    // primary-600  
-                        canopy3: '#5d7f49',    // primary-700
-                        trunk: '#7f5a44',      // accent-700
-                        shadow: 'rgba(93, 127, 73, 0.3)'
+                        canopy1: '#ef4444',    // Red
+                        canopy2: '#dc2626',    
+                        canopy3: '#b91c1c',    
+                        trunk: '#991b1b',
+                        shadow: 'rgba(239, 68, 68, 0.3)'
                     }
-                };
-            }
+                }
+            ];
+            
+            // Calculate which bin this ID falls into (modulo for cycling)
+            const binIndex = (treeId - 1) % colorPalettes.length;
+            return colorPalettes[binIndex];
         };
         
-        const treeInfo = getTreeCategoryAndColors(tree);
+        const treeInfo = getColorsByID(tree.id);
         const colors = treeInfo.colors;
         
-        const treeIcon = L.divIcon({
-            html: `
-                <div class="map-marker tree-marker" style="filter: drop-shadow(2px 3px 6px ${colors.shadow});">
-                    <svg width="40" height="48" viewBox="0 0 40 48" fill="none" style="transition: transform 0.2s ease;">
-                        <!-- Tree Shadow/Base -->
-                        <ellipse cx="20" cy="46" rx="8" ry="2" fill="${colors.shadow}" opacity="0.4"/>
-                        
-                        <!-- Tree Trunk -->
-                        <path d="M17 38 Q17 40 17.5 42 Q18 44 19 45 Q19.5 45.5 20 45.5 Q20.5 45.5 21 45 Q22 44 22.5 42 Q23 40 23 38 L23 32 Q22.8 31 22 30.5 Q21 30 20 30 Q19 30 18 30.5 Q17.2 31 17 32 Z" fill="${colors.trunk}" stroke="#6b4a39" stroke-width="0.5"/>
-                        
-                        <!-- Tree Trunk Texture -->
-                        <path d="M18.5 32 Q18.5 35 18.5 38" stroke="#5a3e32" stroke-width="0.3" opacity="0.6"/>
-                        <path d="M21.5 33 Q21.5 36 21.5 39" stroke="#5a3e32" stroke-width="0.3" opacity="0.6"/>
-                        
-                        <!-- Main Canopy (Back Layer) -->
-                        <circle cx="20" cy="22" r="12" fill="${colors.canopy3}" opacity="0.8"/>
-                        
-                        <!-- Secondary Canopy Clusters -->
-                        <circle cx="15" cy="20" r="8" fill="${colors.canopy2}" opacity="0.85"/>
-                        <circle cx="25" cy="19" r="7" fill="${colors.canopy2}" opacity="0.85"/>
-                        <circle cx="18" cy="15" r="6" fill="${colors.canopy1}" opacity="0.9"/>
-                        <circle cx="23" cy="25" r="6.5" fill="${colors.canopy2}" opacity="0.85"/>
-                        
-                        <!-- Top Canopy (Brightest) -->
-                        <circle cx="20" cy="18" r="7" fill="${colors.canopy1}"/>
-                        
-                        <!-- Highlight clusters for 3D effect -->
-                        <circle cx="16" cy="15" r="3" fill="#a8b9a0" opacity="0.7"/>
-                        <circle cx="24" cy="20" r="2.5" fill="#a8b9a0" opacity="0.6"/>
-                        <circle cx="18" cy="24" r="2" fill="#a8b9a0" opacity="0.5"/>
-                        
-                        <!-- Small light spots -->
-                        <circle cx="14" cy="14" r="1" fill="#c0d4b2" opacity="0.8"/>
-                        <circle cx="22" cy="16" r="0.8" fill="#c0d4b2" opacity="0.9"/>
-                        <circle cx="26" cy="22" r="0.6" fill="#c0d4b2" opacity="0.7"/>
-                        
-                        <!-- Optional: Small leaves/details -->
-                        <path d="M12 18 Q11 17 11.5 19 Q12.5 20 13 19" fill="${colors.canopy1}" opacity="0.6"/>
-                        <path d="M28 25 Q29 24 28.5 26 Q27.5 27 27 26" fill="${colors.canopy1}" opacity="0.6"/>
-                    </svg>
-                </div>
-            `,
-            className: 'custom-marker-icon tree-pin realistic-tree',
-            iconSize: [40, 48],
-            iconAnchor: [20, 46],
-            popupAnchor: [0, -48]
-        });
+        // Choose marker style - you can change this to test different options
+        const markerStyle = 'realistic-tree'; // Options: 'realistic-tree', 'simple-circle', 'pin-style', 'geometric', 'minimalist'
+        
+        let treeIcon;
+        
+        if (markerStyle === 'simple-circle') {
+            treeIcon = L.divIcon({
+                html: `<div style="width: 20px; height: 20px; background: ${colors.canopy1}; border: 3px solid white; border-radius: 50%; box-shadow: 0 2px 6px rgba(0,0,0,0.3);"></div>`,
+                className: 'custom-marker-icon simple-circle',
+                iconSize: [20, 20],
+                iconAnchor: [10, 10],
+                popupAnchor: [0, -10]
+            });
+        } else if (markerStyle === 'pin-style') {
+            treeIcon = L.divIcon({
+                html: `
+                    <div class="map-marker pin-marker" style="color: ${colors.canopy1};">
+                        <svg width="25" height="35" viewBox="0 0 25 35" fill="none">
+                            <path d="M12.5 0C5.6 0 0 5.6 0 12.5C0 21.9 12.5 35 12.5 35C12.5 35 25 21.9 25 12.5C25 5.6 19.4 0 12.5 0Z" fill="${colors.canopy1}" stroke="white" stroke-width="2"/>
+                            <circle cx="12.5" cy="12.5" r="5" fill="white"/>
+                            <text x="12.5" y="17" text-anchor="middle" font-family="Arial" font-size="8" fill="${colors.canopy1}">T</text>
+                        </svg>
+                    </div>
+                `,
+                className: 'custom-marker-icon pin-style',
+                iconSize: [25, 35],
+                iconAnchor: [12, 35],
+                popupAnchor: [0, -35]
+            });
+        } else if (markerStyle === 'geometric') {
+            treeIcon = L.divIcon({
+                html: `
+                    <div class="map-marker geometric-marker">
+                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                            <polygon points="12,2 22,20 2,20" fill="${colors.canopy1}" stroke="white" stroke-width="2"/>
+                            <circle cx="12" cy="16" r="2" fill="white"/>
+                        </svg>
+                    </div>
+                `,
+                className: 'custom-marker-icon geometric',
+                iconSize: [24, 24],
+                iconAnchor: [12, 24],
+                popupAnchor: [0, -24]
+            });
+        } else if (markerStyle === 'minimalist') {
+            treeIcon = L.divIcon({
+                html: `
+                    <div style="width: 16px; height: 16px; background: ${colors.canopy1}; border: 2px solid white; border-radius: 3px; box-shadow: 0 2px 4px rgba(0,0,0,0.2); display: flex; align-items: center; justify-content: center; font-size: 8px; color: white; font-weight: bold;">T</div>
+                `,
+                className: 'custom-marker-icon minimalist',
+                iconSize: [16, 16],
+                iconAnchor: [8, 8],
+                popupAnchor: [0, -8]
+            });
+        } else {
+            // Default realistic tree style
+            treeIcon = L.divIcon({
+                html: `
+                    <div class="map-marker tree-marker" style="filter: drop-shadow(2px 3px 6px ${colors.shadow});">
+                        <svg width="40" height="48" viewBox="0 0 40 48" fill="none" style="transition: transform 0.2s ease;">
+                            <!-- Tree Shadow/Base -->
+                            <ellipse cx="20" cy="46" rx="8" ry="2" fill="${colors.shadow}" opacity="0.4"/>
+                            
+                            <!-- Tree Trunk -->
+                            <path d="M17 38 Q17 40 17.5 42 Q18 44 19 45 Q19.5 45.5 20 45.5 Q20.5 45.5 21 45 Q22 44 22.5 42 Q23 40 23 38 L23 32 Q22.8 31 22 30.5 Q21 30 20 30 Q19 30 18 30.5 Q17.2 31 17 32 Z" fill="${colors.trunk}" stroke="#6b4a39" stroke-width="0.5"/>
+                            
+                            <!-- Tree Trunk Texture -->
+                            <path d="M18.5 32 Q18.5 35 18.5 38" stroke="#5a3e32" stroke-width="0.3" opacity="0.6"/>
+                            <path d="M21.5 33 Q21.5 36 21.5 39" stroke="#5a3e32" stroke-width="0.3" opacity="0.6"/>
+                            
+                            <!-- Main Canopy (Back Layer) -->
+                            <circle cx="20" cy="22" r="12" fill="${colors.canopy3}" opacity="0.8"/>
+                            
+                            <!-- Secondary Canopy Clusters -->
+                            <circle cx="15" cy="20" r="8" fill="${colors.canopy2}" opacity="0.85"/>
+                            <circle cx="25" cy="19" r="7" fill="${colors.canopy2}" opacity="0.85"/>
+                            <circle cx="18" cy="15" r="6" fill="${colors.canopy1}" opacity="0.9"/>
+                            <circle cx="23" cy="25" r="6.5" fill="${colors.canopy2}" opacity="0.85"/>
+                            
+                            <!-- Top Canopy (Brightest) -->
+                            <circle cx="20" cy="18" r="7" fill="${colors.canopy1}"/>
+                            
+                            <!-- Highlight clusters for 3D effect -->
+                            <circle cx="16" cy="15" r="3" fill="#a8b9a0" opacity="0.7"/>
+                            <circle cx="24" cy="20" r="2.5" fill="#a8b9a0" opacity="0.6"/>
+                            <circle cx="18" cy="24" r="2" fill="#a8b9a0" opacity="0.5"/>
+                            
+                            <!-- Small light spots -->
+                            <circle cx="14" cy="14" r="1" fill="#c0d4b2" opacity="0.8"/>
+                            <circle cx="22" cy="16" r="0.8" fill="#c0d4b2" opacity="0.9"/>
+                            <circle cx="26" cy="22" r="0.6" fill="#c0d4b2" opacity="0.7"/>
+                            
+                            <!-- Optional: Small leaves/details -->
+                            <path d="M12 18 Q11 17 11.5 19 Q12.5 20 13 19" fill="${colors.canopy1}" opacity="0.6"/>
+                            <path d="M28 25 Q29 24 28.5 26 Q27.5 27 27 26" fill="${colors.canopy1}" opacity="0.6"/>
+                        </svg>
+                    </div>
+                `,
+                className: 'custom-marker-icon tree-pin realistic-tree',
+                iconSize: [40, 48],
+                iconAnchor: [20, 46],
+                popupAnchor: [0, -48]
+            });
+        }
 
         const marker = L.marker([tree.latitude, tree.longitude], { icon: treeIcon });
         

static/sw.js

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