fix: Resolve map page issues with JavaScript loading, user info display, and tree count

- Fixed 404 error by correcting JavaScript file reference from map_enhanced.js to map.js
- Updated displayUserInfo() method to populate existing HTML elements instead of creating new ones
- Fixed logout button functionality by using existing button instead of duplicating
- Corrected location panel references from 'infoPanel' to 'locationPanel'
- Added missing centerMapToTrees() method for center map button functionality
- Improved error handling and user feedback throughout map functionality
- Ensured proper tree count display and user authentication state management

These changes resolve the map loading issues, user info display problems, and tree count discrepancies.

static/map.html

@@ -795,6 +795,6 @@
 
     <!-- Leaflet JS -->
     <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
-    <script src="/static/map_enhanced.js?v=4.0.0&t=1754657582"></script>
+    <script src="/static/map.js?v=4.0.0&t=1754657582"></script>
 </body>
 </html>

static/map.js

@@ -84,35 +84,29 @@ class TreeTrackMap {
     displayUserInfo() {
         if (!this.currentUser) return;
         
-        const headerActions = document.querySelector('.header-actions');
-        if (headerActions) {
-            // Create user info display
-            const userInfo = document.createElement('div');
-            userInfo.className = 'user-info-map';
-            userInfo.innerHTML = `
-                <div style="color: white; text-align: center; margin-right: 1rem; font-size: 0.875rem;">
-                    <div>${this.currentUser.full_name}</div>
-                    <div style="opacity: 0.8; font-size: 0.75rem;">${this.currentUser.role}</div>
-                </div>
-            `;
-            
-            // Insert before the tree counter
-            const treeCounter = headerActions.querySelector('.tree-counter');
-            if (treeCounter) {
-                headerActions.insertBefore(userInfo, treeCounter);
-            }
+        // Update existing user info elements in the HTML
+        const userAvatar = document.getElementById('userAvatar');
+        const userName = document.getElementById('userName');
+        const userRole = document.getElementById('userRole');
+        
+        if (userAvatar && this.currentUser.full_name) {
+            userAvatar.textContent = this.currentUser.full_name.charAt(0).toUpperCase();
+        }
+        
+        if (userName) {
+            userName.textContent = this.currentUser.full_name || this.currentUser.username || 'User';
+        }
+        
+        if (userRole) {
+            userRole.textContent = this.currentUser.role || 'User';
         }
     }
     
     addLogoutButton() {
-        const headerActions = document.querySelector('.header-actions');
-        if (headerActions) {
-            const logoutBtn = document.createElement('button');
-            logoutBtn.className = 'btn btn-secondary';
-            logoutBtn.innerHTML = '🚪 Logout';
-            logoutBtn.style.marginLeft = '0.5rem';
-            logoutBtn.addEventListener('click', () => this.logout());
-            headerActions.appendChild(logoutBtn);
+        // Use existing logout button instead of creating a new one
+        const existingLogoutBtn = document.getElementById('logoutBtn');
+        if (existingLogoutBtn) {
+            existingLogoutBtn.addEventListener('click', () => this.logout());
         }
     }
     
@@ -236,6 +230,14 @@ class TreeTrackMap {
             this.clearTempMarker();
         });
 
+        // Center Map button
+        const centerMapBtn = document.getElementById('centerMapBtn');
+        if (centerMapBtn) {
+            centerMapBtn.addEventListener('click', () => {
+                this.centerMapToTrees();
+            });
+        }
+
         // Use Location button
         document.getElementById('useLocationBtn').addEventListener('click', () => {
             this.useSelectedLocation();
@@ -295,13 +297,17 @@ class TreeTrackMap {
     }
 
     showInfoPanel() {
-        const panel = document.getElementById('infoPanel');
-        panel.classList.add('active');
+        const panel = document.getElementById('locationPanel');
+        if (panel) {
+            panel.classList.add('active');
+        }
     }
 
     hideInfoPanel() {
-        const panel = document.getElementById('infoPanel');
-        panel.classList.remove('active');
+        const panel = document.getElementById('locationPanel');
+        if (panel) {
+            panel.classList.remove('active');
+        }
     }
 
     useSelectedLocation() {
@@ -328,6 +334,18 @@ class TreeTrackMap {
         this.showMessage('Selection cancelled', 'success');
     }
 
+    centerMapToTrees() {
+        if (this.treeMarkers.length === 0) {
+            this.showMessage('No trees to center on', 'info');
+            return;
+        }
+
+        // Fit map to show all trees
+        const group = new L.featureGroup(this.treeMarkers);
+        this.map.fitBounds(group.getBounds().pad(0.1));
+        this.showMessage('Centered map on all trees', 'success');
+    }
+
     getCurrentLocation() {
         console.log('Getting current location...');