Fix map UI/UX issues: proper SVG pins, remove emojis, improve tooltips and performance

- Replace emoji pins with professional SVG markers that properly anchor to map
- Remove View button from popups - tooltip already shows tree info
- Remove ALL emojis for professional appearance
- Fix pin floating issue with proper iconAnchor configuration
- Larger, more visible pins (28x36px for trees, 24x32px for temp/user)
- Enhanced tooltip with creator info and better formatting
- Simplified popup content with cleaner layout
- Performance optimizations with debounced map fitting
- Professional color-coded markers (green=trees, red=temp, blue=user)
- Smooth hover animations and proper drop shadows
- Fixed redirect to main form page instead of static path

static/map.html

@@ -664,6 +664,86 @@
             25%, 75% { opacity: 1; }
         }
 
+        /* Custom Map Markers */
+        .map-marker {
+            position: relative;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
+            transition: transform 0.2s ease, filter 0.2s ease;
+        }
+        
+        .map-marker:hover {
+            transform: scale(1.1);
+            filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
+        }
+        
+        .tree-marker svg {
+            filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.3));
+        }
+        
+        .temp-marker svg {
+            animation: pulse-marker 2s infinite;
+        }
+        
+        .user-marker svg {
+            filter: drop-shadow(0 2px 6px rgba(59, 130, 246, 0.5));
+        }
+        
+        @keyframes pulse-marker {
+            0%, 100% {
+                opacity: 1;
+                transform: scale(1);
+            }
+            50% {
+                opacity: 0.8;
+                transform: scale(1.05);
+            }
+        }
+        
+        /* Tree Tooltip Improvements */
+        .tree-tooltip {
+            background: rgba(255, 255, 255, 0.95) !important;
+            border: 1px solid var(--gray-200) !important;
+            border-radius: var(--radius-md) !important;
+            box-shadow: var(--shadow-lg) !important;
+            backdrop-filter: blur(8px);
+            font-size: 0.8125rem;
+            padding: var(--space-2) var(--space-3) !important;
+            max-width: 200px;
+        }
+        
+        .tree-tooltip-content {
+            text-align: center;
+        }
+        
+        .tree-name {
+            font-weight: 600;
+            color: var(--gray-900);
+            margin-bottom: var(--space-1);
+        }
+        
+        .tree-details {
+            font-size: 0.75rem;
+            color: var(--gray-600);
+        }
+        
+        .tree-creator {
+            font-size: 0.7rem;
+            color: var(--gray-500);
+            font-style: italic;
+        }
+        
+        /* Performance optimizations */
+        .leaflet-tile-pane {
+            filter: none;
+        }
+        
+        .leaflet-overlay-pane {
+            transform: translate3d(0, 0, 0);
+        }
+        
         /* Focus States */
         .btn:focus-visible,
         .control-button:focus-visible,
@@ -693,17 +773,17 @@
         <div class="header">
             <div class="header-content">
                 <div class="header-brand">
-                    <div class="logo">🌳 TreeTrack Map</div>
+                    <div class="logo">TreeTrack Map</div>
                 </div>
                 
                 <div class="header-stats">
                     <div class="stat-item">
-                        <span class="stat-icon">🌲</span>
+                        <span class="stat-icon">T</span>
                         <span class="stat-text">Trees:</span>
                         <span class="stat-number" id="treeCount">0</span>
                     </div>
                     <div class="stat-item">
-                        <span class="stat-icon">📍</span>
+                        <span class="stat-icon">S</span>
                         <span class="stat-text">Selected:</span>
                         <span class="stat-number" id="selectedCount">0</span>
                     </div>
@@ -717,7 +797,7 @@
                             <div class="user-role" id="userRole">User</div>
                         </div>
                     </div>
-                    <a href="/" class="btn btn-secondary">✏️ Add Tree</a>
+                    <a href="/" class="btn btn-secondary">Add Tree</a>
                     <button id="logoutBtn" class="btn btn-secondary">Logout</button>
                 </div>
             </div>
@@ -735,15 +815,15 @@
                 <div class="controls-content">
                     <div class="control-group">
                         <button id="myLocationBtn" class="control-button">
-                            <span>📍</span>
+                            <span>Loc</span>
                             <span>My Location</span>
                         </button>
                         <button id="clearPinsBtn" class="control-button">
-                            <span>🧹</span>
+                            <span>Clr</span>
                             <span>Clear Pins</span>
                         </button>
                         <button id="centerMapBtn" class="control-button">
-                            <span>🎯</span>
+                            <span>Ctr</span>
                             <span>Center View</span>
                         </button>
                     </div>
@@ -753,7 +833,7 @@
             <!-- Location Panel -->
             <div class="location-panel" id="locationPanel">
                 <div class="location-header">
-                    <h3 class="location-title">📍 Location Selected</h3>
+                    <h3 class="location-title">Location Selected</h3>
                 </div>
                 <div class="location-content">
                     <div class="coordinates-grid">
@@ -768,10 +848,10 @@
                     </div>
                     <div class="location-actions">
                         <button id="useLocationBtn" class="btn btn-primary">
-                            ✅ Use This Location
+                            Use This Location
                         </button>
                         <button id="cancelBtn" class="btn btn-secondary">
-                            ❌ Cancel
+                            Cancel
                         </button>
                     </div>
                 </div>
@@ -788,7 +868,7 @@
 
             <!-- Gesture Hint -->
             <div class="gesture-hint">
-                💡 Tap anywhere on the map to drop a location pin
+                Tap anywhere on the map to drop a location pin
             </div>
         </div>
     </div>

static/map.js

@@ -260,20 +260,20 @@ class TreeTrackMap {
         // Remove existing temp marker
         this.clearTempMarker();
 
-        // Create new temp marker with glow effect
+        // Create new temp marker with proper SVG icon
         const tempIcon = L.divIcon({
             html: `
-                <div class="custom-tree-marker">
-                    <div class="tree-icon-container temp-pin">
-                        📍
-                    </div>
-                    <div class="tree-marker-shadow"></div>
+                <div class="map-marker temp-marker">
+                    <svg width="24" height="32" viewBox="0 0 24 32" fill="none">
+                        <path d="M12 0C5.37 0 0 5.37 0 12C0 21 12 32 12 32S24 21 24 12C24 5.37 18.63 0 12 0Z" fill="#ef4444"/>
+                        <circle cx="12" cy="12" r="4" fill="white"/>
+                    </svg>
                 </div>
             `,
-            className: 'custom-tree-icon',
-            iconSize: [32, 42],
-            iconAnchor: [16, 42],
-            popupAnchor: [0, -42]
+            className: 'custom-marker-icon',
+            iconSize: [24, 32],
+            iconAnchor: [12, 32],
+            popupAnchor: [0, -32]
         });
 
         this.tempMarker = L.marker([e.latlng.lat, e.latlng.lng], { icon: tempIcon }).addTo(this.map);
@@ -325,13 +325,13 @@ class TreeTrackMap {
         this.showMessage('Location saved! Redirecting to form...', 'success');
         
         setTimeout(() => {
-            window.location.href = '/static/index.html';
-        }, 1500);
+            window.location.href = '/';
+        }, 1000);
     }
 
     cancelLocationSelection() {
         this.clearTempMarker();
-        this.showMessage('Selection cancelled', 'success');
+        this.showMessage('Selection cancelled', 'info');
     }
 
     centerMapToTrees() {
@@ -343,7 +343,7 @@ class TreeTrackMap {
         // 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');
+        this.showMessage('Map centered on all trees', 'success');
     }
 
     getCurrentLocation() {
@@ -377,17 +377,17 @@ class TreeTrackMap {
 
                 const userIcon = L.divIcon({
                     html: `
-                        <div class="custom-tree-marker">
-                            <div class="tree-icon-container" style="background: linear-gradient(145deg, #3b82f6, #1d4ed8);">
-                                🫵
-                            </div>
-                            <div class="tree-marker-shadow"></div>
+                        <div class="map-marker user-marker">
+                            <svg width="24" height="32" viewBox="0 0 24 32" fill="none">
+                                <path d="M12 0C5.37 0 0 5.37 0 12C0 21 12 32 12 32S24 21 24 12C24 5.37 18.63 0 12 0Z" fill="#3b82f6"/>
+                                <circle cx="12" cy="12" r="4" fill="white"/>
+                            </svg>
                         </div>
                     `,
-                    className: 'custom-tree-icon',
-                    iconSize: [32, 42],
-                    iconAnchor: [16, 42],
-                    popupAnchor: [0, -42]
+                    className: 'custom-marker-icon',
+                    iconSize: [24, 32],
+                    iconAnchor: [12, 32],
+                    popupAnchor: [0, -32]
                 });
 
                 this.userLocationMarker = L.marker([lat, lng], { icon: userIcon }).addTo(this.map);
@@ -400,7 +400,7 @@ class TreeTrackMap {
                     className: 'tree-tooltip'
                 });
 
-                this.showMessage('📍 Location found!', 'success');
+                this.showMessage('Location found successfully', 'success');
                 
                 myLocationBtn.textContent = 'My Location';
                 myLocationBtn.disabled = false;
@@ -454,11 +454,13 @@ class TreeTrackMap {
             // Update tree count
             document.getElementById('treeCount').textContent = trees.length;
 
-            if (trees.length > 0) {
-                // Fit map to show all trees
+        if (trees.length > 0) {
+            // Fit map to show all trees with debounced execution
+            setTimeout(() => {
                 const group = new L.featureGroup(this.treeMarkers);
                 this.map.fitBounds(group.getBounds().pad(0.1));
-            }
+            }, 100);
+        }
 
         } catch (error) {
             console.error('Error loading trees:', error);
@@ -469,17 +471,17 @@ class TreeTrackMap {
     addTreeMarker(tree) {
         const treeIcon = L.divIcon({
             html: `
-                <div class="custom-tree-marker">
-                    <div class="tree-icon-container tree-pin">
-                        🌳
-                    </div>
-                    <div class="tree-marker-shadow"></div>
+                <div class="map-marker tree-marker">
+                    <svg width="28" height="36" viewBox="0 0 24 32" fill="none">
+                        <path d="M12 0C5.37 0 0 5.37 0 12C0 21 12 32 12 32S24 21 24 12C24 5.37 18.63 0 12 0Z" fill="#22c55e"/>
+                        <circle cx="12" cy="12" r="4" fill="white"/>
+                    </svg>
                 </div>
             `,
-            className: 'custom-tree-icon',
-            iconSize: [32, 42],
-            iconAnchor: [16, 42],
-            popupAnchor: [0, -42]
+            className: 'custom-marker-icon',
+            iconSize: [28, 36],
+            iconAnchor: [14, 36],
+            popupAnchor: [0, -36]
         });
 
         const marker = L.marker([tree.latitude, tree.longitude], { icon: treeIcon }).addTo(this.map);
@@ -489,7 +491,8 @@ class TreeTrackMap {
         const tooltipContent = `
             <div class="tree-tooltip-content">
                 <div class="tree-name">${treeName}</div>
-                <div class="tree-details">ID: ${tree.id}${tree.tree_code ? ' • ' + tree.tree_code : ''}</div>
+                <div class="tree-details">ID: ${tree.id}${tree.tree_code ? ' | ' + tree.tree_code : ''}</div>
+                ${tree.created_by ? `<div class="tree-creator">by ${tree.created_by}</div>` : ''}
             </div>
         `;
 
@@ -500,62 +503,63 @@ class TreeTrackMap {
             className: 'tree-tooltip'
         });
 
-        // Enhanced popup with action buttons
+        // Enhanced popup with action buttons (no emojis)
         const canEdit = this.canEditTree(tree.created_by);
         const canDelete = this.canDeleteTree(tree.created_by);
         
         const popupContent = `
-            <div style="min-width: 280px; font-family: 'Segoe UI', sans-serif;">
-                <div style="border-bottom: 1px solid #e5e7eb; padding-bottom: 12px; margin-bottom: 12px;">
-                    <h3 style="margin: 0 0 8px 0; color: #1e40af; font-size: 16px; font-weight: 600;">
+            <div style="min-width: 320px; font-family: 'Segoe UI', sans-serif;">
+                <div style="border-bottom: 1px solid #e5e7eb; padding-bottom: 16px; margin-bottom: 16px;">
+                    <h3 style="margin: 0 0 8px 0; color: #1e40af; font-size: 18px; font-weight: 600;">
                         ${treeName}
                     </h3>
-                    <div style="color: #6b7280; font-size: 13px;">
+                    <div style="color: #6b7280; font-size: 14px;">
                         <strong>Tree ID:</strong> #${tree.id}${tree.tree_code ? ' (' + tree.tree_code + ')' : ''}
                     </div>
                 </div>
                 
-                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; font-size: 13px;">
-                    <div><strong>📍 Location:</strong></div>
-                    <div>${tree.latitude.toFixed(4)}, ${tree.longitude.toFixed(4)}</div>
-                    
-                    ${tree.height ? `<div><strong>📏 Height:</strong></div><div>${tree.height}m</div>` : ''}
-                    ${tree.width ? `<div><strong>📐 Girth:</strong></div><div>${tree.width}cm</div>` : ''}
-                    
-                    <div><strong>👤 Added by:</strong></div>
-                    <div>${tree.created_by || 'Unknown'}</div>
-                    
-                    <div><strong>📅 Date:</strong></div>
-                    <div>${new Date(tree.created_at).toLocaleDateString()}</div>
+                <div style="margin-bottom: 16px;">
+                    <div style="display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: 14px;">
+                        ${tree.local_name ? `<strong>Local Name:</strong><span>${tree.local_name}</span>` : ''}
+                        ${tree.scientific_name ? `<strong>Scientific:</strong><span><em>${tree.scientific_name}</em></span>` : ''}
+                        ${tree.common_name ? `<strong>Common:</strong><span>${tree.common_name}</span>` : ''}
+                        <strong>Location:</strong><span>${tree.latitude.toFixed(6)}, ${tree.longitude.toFixed(6)}</span>
+                        ${tree.height ? `<strong>Height:</strong><span>${tree.height} meters</span>` : ''}
+                        ${tree.width ? `<strong>Girth:</strong><span>${tree.width} cm</span>` : ''}
+                        <strong>Added by:</strong><span>${tree.created_by || 'Unknown'}</span>
+                        <strong>Date:</strong><span>${new Date(tree.created_at).toLocaleDateString()}</span>
+                    </div>
                 </div>
                 
                 ${tree.notes ? `
-                    <div style="margin-bottom: 12px;">
-                        <strong style="color: #374151; font-size: 13px;">📝 Notes:</strong>
-                        <div style="color: #6b7280; font-size: 12px; margin-top: 4px; line-height: 1.4;">
-                            ${tree.notes.substring(0, 120)}${tree.notes.length > 120 ? '...' : ''}
+                    <div style="margin-bottom: 16px; padding: 12px; background: #f9fafb; border-radius: 8px;">
+                        <strong style="color: #374151; font-size: 14px; display: block; margin-bottom: 8px;">Notes:</strong>
+                        <div style="color: #6b7280; font-size: 13px; line-height: 1.5;">
+                            ${tree.notes}
                         </div>
                     </div>
                 ` : ''}
                 
-                <div style="display: flex; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #e5e7eb;">
-                    ${canEdit ? `
-                        <button onclick="mapApp.editTree(${tree.id})" 
-                                style="flex: 1; background: linear-gradient(145deg, #3b82f6, #2563eb); color: white; border: none; padding: 8px 12px; border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 600; transition: all 0.2s;">
-                            ✏️ Edit
-                        </button>
-                    ` : ''}
-                    ${canDelete ? `
-                        <button onclick="mapApp.deleteTree(${tree.id})" 
-                                style="flex: 1; background: linear-gradient(145deg, #ef4444, #dc2626); color: white; border: none; padding: 8px 12px; border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 600; transition: all 0.2s;">
-                            🗑️ Delete
-                        </button>
-                    ` : ''}
-                    <button onclick="mapApp.viewTreeDetails(${tree.id})" 
-                            style="flex: 1; background: linear-gradient(145deg, #059669, #047857); color: white; border: none; padding: 8px 12px; border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 600; transition: all 0.2s;">
-                        👁️ View
-                    </button>
-                </div>
+                ${canEdit || canDelete ? `
+                    <div style="display: flex; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px solid #e5e7eb;">
+                        ${canEdit ? `
+                            <button onclick="mapApp.editTree(${tree.id})" 
+                                    style="flex: 1; background: #3b82f6; color: white; border: none; padding: 10px 16px; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 600; transition: background-color 0.2s;" 
+                                    onmouseover="this.style.backgroundColor='#2563eb'" 
+                                    onmouseout="this.style.backgroundColor='#3b82f6'">
+                                Edit Tree
+                            </button>
+                        ` : ''}
+                        ${canDelete ? `
+                            <button onclick="mapApp.deleteTree(${tree.id})" 
+                                    style="flex: 1; background: #ef4444; color: white; border: none; padding: 10px 16px; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 600; transition: background-color 0.2s;" 
+                                    onmouseover="this.style.backgroundColor='#dc2626'" 
+                                    onmouseout="this.style.backgroundColor='#ef4444'">
+                                Delete Tree
+                            </button>
+                        ` : ''}
+                    </div>
+                ` : ''}
             </div>
         `;
 
@@ -613,7 +617,7 @@ class TreeTrackMap {
             if (!response) return;
             
             if (response.ok) {
-                this.showMessage(`🗑️ Tree #${treeId} deleted successfully.`, 'success');
+                this.showMessage(`Tree #${treeId} deleted successfully`, 'success');
                 
                 // Reload trees to update the map
                 setTimeout(() => {
@@ -633,100 +637,6 @@ class TreeTrackMap {
         }
     }
     
-    async viewTreeDetails(treeId) {
-        try {
-            const response = await this.authenticatedFetch(`/api/trees/${treeId}`);
-            if (!response) return;
-            
-            if (!response.ok) {
-                throw new Error('Failed to fetch tree data');
-            }
-            
-            const tree = await response.json();
-            
-            // Create detailed view popup
-            const detailContent = `
-                <div style="max-width: 350px; font-family: 'Segoe UI', sans-serif;">
-                    <div style="border-bottom: 2px solid #1e40af; padding-bottom: 12px; margin-bottom: 16px;">
-                        <h2 style="margin: 0; color: #1e40af; font-size: 18px; font-weight: 700;">
-                            🌳 ${tree.scientific_name || tree.common_name || tree.local_name || 'Unknown Tree'}
-                        </h2>
-                        <div style="color: #6b7280; font-size: 14px; margin-top: 4px;">
-                            Tree #${tree.id}${tree.tree_code ? ' • Code: ' + tree.tree_code : ''}
-                        </div>
-                    </div>
-                    
-                    <div style="margin-bottom: 16px;">
-                        <div style="display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: 13px;">
-                            ${tree.local_name ? `<strong>🏷️ Local Name:</strong><span>${tree.local_name}</span>` : ''}
-                            ${tree.scientific_name ? `<strong>🔬 Scientific:</strong><span><em>${tree.scientific_name}</em></span>` : ''}
-                            ${tree.common_name ? `<strong>🌍 Common:</strong><span>${tree.common_name}</span>` : ''}
-                            ${tree.height ? `<strong>📏 Height:</strong><span>${tree.height} meters</span>` : ''}
-                            ${tree.width ? `<strong>📐 Girth:</strong><span>${tree.width} cm</span>` : ''}
-                            <strong>📍 Coordinates:</strong><span>${tree.latitude.toFixed(6)}, ${tree.longitude.toFixed(6)}</span>
-                            <strong>👤 Created by:</strong><span>${tree.created_by || 'Unknown'}</span>
-                            <strong>📅 Date:</strong><span>${new Date(tree.created_at).toLocaleDateString()}</span>
-                        </div>
-                    </div>
-                    
-                    ${tree.utility && tree.utility.length > 0 ? `
-                        <div style="margin-bottom: 12px;">
-                            <strong style="color: #059669; font-size: 14px;">🌿 Ecological Uses:</strong>
-                            <div style="margin-top: 4px;">
-                                ${tree.utility.map(u => `<span style="display: inline-block; background: #dcfce7; color: #166534; padding: 2px 6px; border-radius: 4px; font-size: 11px; margin: 2px;">${u}</span>`).join('')}
-                            </div>
-                        </div>
-                    ` : ''}
-                    
-                    ${tree.phenology_stages && tree.phenology_stages.length > 0 ? `
-                        <div style="margin-bottom: 12px;">
-                            <strong style="color: #7c3aed; font-size: 14px;">🌸 Current Stages:</strong>
-                            <div style="margin-top: 4px;">
-                                ${tree.phenology_stages.map(stage => `<span style="display: inline-block; background: #ede9fe; color: #6b21a8; padding: 2px 6px; border-radius: 4px; font-size: 11px; margin: 2px;">${stage}</span>`).join('')}
-                            </div>
-                        </div>
-                    ` : ''}
-                    
-                    ${tree.storytelling_text ? `
-                        <div style="margin-bottom: 12px;">
-                            <strong style="color: #ea580c; font-size: 14px;">📖 Stories & Culture:</strong>
-                            <div style="color: #6b7280; font-size: 12px; margin-top: 4px; line-height: 1.4; max-height: 80px; overflow-y: auto; padding: 8px; background: #f9fafb; border-radius: 6px;">
-                                ${tree.storytelling_text}
-                            </div>
-                        </div>
-                    ` : ''}
-                    
-                    ${tree.notes ? `
-                        <div style="margin-bottom: 12px;">
-                            <strong style="color: #374151; font-size: 14px;">📝 Notes:</strong>
-                            <div style="color: #6b7280; font-size: 12px; margin-top: 4px; line-height: 1.4; padding: 8px; background: #f9fafb; border-radius: 6px;">
-                                ${tree.notes}
-                            </div>
-                        </div>
-                    ` : ''}
-                </div>
-            `;
-            
-            // Close current popup and show detailed one
-            this.map.closePopup();
-            
-            // Find the marker for this tree and open detailed popup
-            const treeMarker = this.treeMarkers.find(marker => {
-                return marker.getLatLng().lat === tree.latitude && marker.getLatLng().lng === tree.longitude;
-            });
-            
-            if (treeMarker) {
-                treeMarker.bindPopup(detailContent, {
-                    maxWidth: 400,
-                    className: 'tree-popup'
-                }).openPopup();
-            }
-            
-        } catch (error) {
-            console.error('Error viewing tree details:', error);
-            this.showMessage('Error loading tree details: ' + error.message, 'error');
-        }
-    }
 
     showLoading() {
         document.getElementById('loading').style.display = 'block';