Enhance TreeTrack map with beautiful tree pins and fixed popup modals

Visual Enhancements:
- Replaced basic pins with detailed tree-shaped SVG icons
- Added red temporary pins with layered tree design and drop shadows
- Upgraded existing tree markers with 3D green tree icons
- Increased pin sizes for better visibility (32x40, 36x44 pixels)

Popup Modal Fixes:
- Fixed button overflow and layout issues
- Properly positioned close button with full functionality
- Improved responsive design (300px width, max 90vw)
- Enhanced typography with better spacing and font sizes
- Added smooth button hover animations and visual effects

User Experience Improvements:
- Fixed 'no location found' message handling
- Better message clearing on form redirect
- Added keyboard support (ESC to close popups)
- Improved word wrapping for long tree names
- Professional styling with consistent spacing

All map functionality now works seamlessly with enhanced visual appeal.

static/map.js

@@ -260,20 +260,31 @@ class TreeTrackMap {
         // Remove existing temp marker
         this.clearTempMarker();
 
-        // Create new temp marker with proper SVG icon
+        // Create beautiful tree-shaped temp marker
         const tempIcon = L.divIcon({
             html: `
-                <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"/>
+                <div class="map-marker temp-marker" style="filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.3));">
+                    <svg width="32" height="40" viewBox="0 0 32 40" fill="none">
+                        <!-- Tree Pin Base -->
+                        <path d="M16 0C9.37 0 4 5.37 4 12C4 21 16 40 16 40S28 21 28 12C28 5.37 22.63 0 16 0Z" fill="#dc2626" stroke="#991b1b" stroke-width="1"/>
+                        <!-- Tree Icon Inside -->
+                        <g transform="translate(16, 12)">
+                            <!-- Tree trunk -->
+                            <rect x="-1" y="3" width="2" height="4" fill="#8b5a2b"/>
+                            <!-- Tree crown layers -->
+                            <circle cx="0" cy="0" r="4" fill="#22c55e"/>
+                            <circle cx="-1" cy="-1" r="3" fill="#16a34a"/>
+                            <circle cx="1" cy="1" r="2.5" fill="#15803d"/>
+                            <!-- Highlight -->
+                            <circle cx="-1.5" cy="-2" r="1" fill="#4ade80" opacity="0.6"/>
+                        </g>
                     </svg>
                 </div>
             `,
-            className: 'custom-marker-icon',
-            iconSize: [24, 32],
-            iconAnchor: [12, 32],
-            popupAnchor: [0, -32]
+            className: 'custom-marker-icon tree-pin-temp',
+            iconSize: [32, 40],
+            iconAnchor: [16, 40],
+            popupAnchor: [0, -40]
         });
 
         this.tempMarker = L.marker([e.latlng.lat, e.latlng.lng], { icon: tempIcon }).addTo(this.map);
@@ -322,6 +333,9 @@ class TreeTrackMap {
             lng: this.selectedLocation.lng
         }));
 
+        // Clear the message and redirect
+        const messageElement = document.getElementById('message');
+        if(messageElement) messageElement.classList.remove('show');
         this.showMessage('Location saved! Redirecting to form...', 'success');
         
         setTimeout(() => {
@@ -471,17 +485,32 @@ class TreeTrackMap {
     addTreeMarker(tree) {
         const treeIcon = L.divIcon({
             html: `
-                <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"/>
+                <div class="map-marker tree-marker" style="filter: drop-shadow(1px 1px 3px rgba(0,0,0,0.4));">
+                    <svg width="36" height="44" viewBox="0 0 36 44" fill="none">
+                        <!-- Tree Pin Base -->
+                        <path d="M18 0C11.37 0 6 5.37 6 12C6 21 18 44 18 44S30 21 30 12C30 5.37 24.63 0 18 0Z" fill="#16a34a" stroke="#15803d" stroke-width="1"/>
+                        <!-- Tree Icon Inside -->
+                        <g transform="translate(18, 14)">
+                            <!-- Tree trunk -->
+                            <rect x="-1.5" y="4" width="3" height="5" fill="#8b5a2b" rx="1"/>
+                            <!-- Tree crown - main layer -->
+                            <circle cx="0" cy="0" r="5" fill="#22c55e"/>
+                            <!-- Tree crown - shadow layer -->
+                            <circle cx="-1" cy="-1" r="4" fill="#16a34a"/>
+                            <!-- Tree crown - highlight layer -->
+                            <circle cx="1" cy="1" r="3" fill="#15803d"/>
+                            <!-- Small highlight for 3D effect -->
+                            <circle cx="-2" cy="-2.5" r="1.2" fill="#4ade80" opacity="0.7"/>
+                            <!-- Tiny highlight -->
+                            <circle cx="-2.5" cy="-3" r="0.5" fill="#86efac" opacity="0.8"/>
+                        </g>
                     </svg>
                 </div>
             `,
-            className: 'custom-marker-icon',
-            iconSize: [28, 36],
-            iconAnchor: [14, 36],
-            popupAnchor: [0, -36]
+            className: 'custom-marker-icon tree-pin',
+            iconSize: [36, 44],
+            iconAnchor: [18, 44],
+            popupAnchor: [0, -44]
         });
 
         const marker = L.marker([tree.latitude, tree.longitude], { icon: treeIcon }).addTo(this.map);
@@ -508,64 +537,73 @@ class TreeTrackMap {
         const canDelete = this.canDeleteTree(tree.created_by);
         
         const popupContent = `
-            <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: 14px;">
-                        <strong>Tree ID:</strong> #${tree.id}${tree.tree_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: 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: 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 style="width: 300px; max-width: 90vw; font-family: 'Segoe UI', sans-serif; position: relative;">
+                <div style="padding: 20px; padding-bottom: 16px;">
+                    <div style="display: flex; justify-content: between; align-items: flex-start; margin-bottom: 16px;">
+                        <div style="flex: 1;">
+                            <h3 style="margin: 0 0 8px 0; color: #1e40af; font-size: 18px; font-weight: 600; line-height: 1.2; word-wrap: break-word;">
+                                ${treeName}
+                            </h3>
+                            <div style="color: #6b7280; font-size: 13px;">
+                                <strong>Tree ID:</strong> #${tree.id}${tree.tree_code ? ' (' + tree.tree_code + ')' : ''}
+                            </div>
                         </div>
                     </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 style="margin-bottom: 16px;">
+                        <div style="display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: 13px;">
+                            ${tree.local_name ? `<strong style="color: #374151;">Local:</strong><span style="word-wrap: break-word;">${tree.local_name}</span>` : ''}
+                            ${tree.scientific_name ? `<strong style="color: #374151;">Scientific:</strong><span style="word-wrap: break-word;"><em>${tree.scientific_name}</em></span>` : ''}
+                            ${tree.common_name ? `<strong style="color: #374151;">Common:</strong><span style="word-wrap: break-word;">${tree.common_name}</span>` : ''}
+                            <strong style="color: #374151;">Location:</strong><span style="font-family: monospace; font-size: 12px;">${tree.latitude.toFixed(4)}, ${tree.longitude.toFixed(4)}</span>
+                            ${tree.height ? `<strong style="color: #374151;">Height:</strong><span>${tree.height}m</span>` : ''}
+                            ${tree.width ? `<strong style="color: #374151;">Girth:</strong><span>${tree.width}cm</span>` : ''}
+                            <strong style="color: #374151;">Added by:</strong><span>${tree.created_by || 'Unknown'}</span>
+                            <strong style="color: #374151;">Date:</strong><span>${new Date(tree.created_at).toLocaleDateString()}</span>
+                        </div>
                     </div>
-                ` : ''}
+                    
+                    ${tree.notes ? `
+                        <div style="margin-bottom: 16px; padding: 12px; background: #f8fafc; border-radius: 6px; border-left: 4px solid #e2e8f0;">
+                            <strong style="color: #374151; font-size: 13px; display: block; margin-bottom: 6px;">Notes:</strong>
+                            <div style="color: #6b7280; font-size: 12px; line-height: 1.4; word-wrap: break-word;">
+                                ${tree.notes}
+                            </div>
+                        </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: 8px 12px; border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 600; transition: all 0.2s; min-height: 36px;" 
+                                        onmouseover="this.style.backgroundColor='#2563eb'; this.style.transform='translateY(-1px)';" 
+                                        onmouseout="this.style.backgroundColor='#3b82f6'; this.style.transform='translateY(0)';">
+                                    ✏️ Edit
+                                </button>
+                            ` : ''}
+                            ${canDelete ? `
+                                <button onclick="mapApp.deleteTree(${tree.id})" 
+                                        style="flex: 1; background: #ef4444; color: white; border: none; padding: 8px 12px; border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 600; transition: all 0.2s; min-height: 36px;" 
+                                        onmouseover="this.style.backgroundColor='#dc2626'; this.style.transform='translateY(-1px)';" 
+                                        onmouseout="this.style.backgroundColor='#ef4444'; this.style.transform='translateY(0)';">
+                                    🗑️ Delete
+                                </button>
+                            ` : ''}
+                        </div>
+                    ` : ''}
+                </div>
             </div>
         `;
 
         marker.bindPopup(popupContent, {
-            maxWidth: 300,
-            className: 'tree-popup'
+            maxWidth: 320,
+            minWidth: 280,
+            className: 'tree-popup',
+            closeButton: true,
+            autoClose: true,
+            autoPan: true,
+            closeOnEscapeKey: true
         });
 
         this.treeMarkers.push(marker);