Spaces:

RoyAalekh
/

TreeTrack

Running

RoyAalekh commited on 19 days ago

Commit

4de3e9c

1 Parent(s): 795b079

Add beautiful custom tree markers with hover tooltips

- Fixed tree loading endpoint from /trees to /api/trees?limit=100
- Replaced default circular markers with custom SVG tree icons
- Added 3D gradient styling with shadows and hover animations
- Implemented beautiful hover tooltips that show tree name and details
- Tooltips appear on hover and disappear when out of focus
- Added debug logging to track tree loading
- Enhanced visual design with green gradient backgrounds and shadows
- Improved mobile responsiveness for markers and tooltips
- Trees now properly appear on the map with professional appearance

Files changed (2) hide show

static/map.html +101 -0
static/map.js +59 -11

static/map.html CHANGED Viewed

@@ -325,6 +325,107 @@
             0%, 100% { opacity: 0; }
             20%, 80% { opacity: 1; }
         }
     </style>
 </head>
 <body>

             0%, 100% { opacity: 0; }
             20%, 80% { opacity: 1; }
         }
+        /* Custom Tree Marker Styles */
+        .custom-tree-icon {
+            background: transparent !important;
+            border: none !important;
+        }
+        .custom-tree-marker {
+            position: relative;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+        .tree-icon-container {
+            background: linear-gradient(145deg, #ffffff, #f0f0f0);
+            border-radius: 50%;
+            padding: 4px;
+            box-shadow:
+                0 4px 8px rgba(0,0,0,0.15),
+                0 2px 4px rgba(0,0,0,0.1),
+                inset 0 1px 0 rgba(255,255,255,0.2);
+            transition: all 0.3s ease;
+            cursor: pointer;
+        }
+        .tree-icon-container:hover {
+            transform: translateY(-2px) scale(1.1);
+            box-shadow:
+                0 6px 16px rgba(0,0,0,0.2),
+                0 4px 8px rgba(0,0,0,0.15),
+                inset 0 1px 0 rgba(255,255,255,0.3);
+        }
+        .tree-marker-shadow {
+            width: 12px;
+            height: 6px;
+            background: rgba(0,0,0,0.3);
+            border-radius: 50%;
+            margin-top: 2px;
+            filter: blur(1px);
+            transition: all 0.3s ease;
+        }
+        .custom-tree-marker:hover .tree-marker-shadow {
+            width: 16px;
+            background: rgba(0,0,0,0.4);
+        }
+        /* Tooltip Styles */
+        .leaflet-tooltip.tree-tooltip {
+            background: linear-gradient(145deg, #2c5530, #1a3a1c) !important;
+            border: 1px solid rgba(255,255,255,0.2) !important;
+            border-radius: 8px !important;
+            box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
+            color: white !important;
+            font-family: 'Segoe UI', sans-serif !important;
+            font-size: 13px !important;
+            padding: 8px 12px !important;
+            backdrop-filter: blur(10px);
+        }
+        .leaflet-tooltip.tree-tooltip::before {
+            border-top-color: #2c5530 !important;
+        }
+        .tree-tooltip-content {
+            min-width: 80px;
+            text-align: center;
+        }
+        .tree-name {
+            font-weight: 600;
+            font-size: 14px;
+            margin-bottom: 2px;
+            color: #ffffff;
+        }
+        .tree-details {
+            font-size: 11px;
+            opacity: 0.9;
+            color: #e8f5e8;
+        }
+        /* Enhanced Popup Styles */
+        .leaflet-popup.tree-popup {
+            margin-bottom: 10px;
+        }
+        .leaflet-popup.tree-popup .leaflet-popup-content-wrapper {
+            background: linear-gradient(145deg, #ffffff, #f8f9fa);
+            border-radius: 12px;
+            box-shadow: 0 8px 24px rgba(0,0,0,0.15);
+            border: 1px solid rgba(44, 85, 48, 0.1);
+        }
+        .leaflet-popup.tree-popup .leaflet-popup-tip {
+            background: #ffffff;
+            border: 1px solid rgba(44, 85, 48, 0.1);
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        }
     </style>
 </head>
 <body>

static/map.js CHANGED Viewed

@@ -131,11 +131,14 @@ class TreeTrackMap {
     async loadExistingTrees() {
         try {
-            const response = await fetch('/trees');
             if (response.ok) {
                 const trees = await response.json();
                 this.displayTreeMarkers(trees);
                 this.updateTreeCounter(trees.length);
             }
         } catch (error) {
             console.error('Error loading trees:', error);
@@ -149,20 +152,26 @@ class TreeTrackMap {
         });
         this.treeMarkers = [];
-        // Add tree markers
         trees.forEach(tree => {
             if (tree.latitude && tree.longitude) {
-                const marker = L.circleMarker([tree.latitude, tree.longitude], {
-                    radius: 12,
-                    fillColor: '#4CAF50',
-                    color: 'white',
-                    weight: 3,
-                    opacity: 1,
-                    fillOpacity: 0.9,
-                    className: 'tree-pin'
                 }).addTo(this.map);
-                // Create popup content
                 const popupContent = this.createTreePopup(tree);
                 marker.bindPopup(popupContent, {
                     maxWidth: 300,
@@ -174,6 +183,45 @@ class TreeTrackMap {
         });
     }
     createTreePopup(tree) {
         return `
             <div style="padding: 10px; font-family: 'Segoe UI', sans-serif;">

     async loadExistingTrees() {
         try {
+            const response = await fetch('/api/trees?limit=100');
             if (response.ok) {
                 const trees = await response.json();
+                console.log('Loaded trees:', trees); // Debug log
                 this.displayTreeMarkers(trees);
                 this.updateTreeCounter(trees.length);
+            } else {
+                console.error('Failed to load trees:', response.status, response.statusText);
             }
         } catch (error) {
             console.error('Error loading trees:', error);
         });
         this.treeMarkers = [];
+        // Add tree markers with custom icons
         trees.forEach(tree => {
             if (tree.latitude && tree.longitude) {
+                // Create custom tree icon
+                const treeIcon = this.createCustomTreeIcon(tree);
+                const marker = L.marker([tree.latitude, tree.longitude], {
+                    icon: treeIcon
                 }).addTo(this.map);
+                // Create hover tooltip
+                const tooltipContent = this.createTreeTooltip(tree);
+                marker.bindTooltip(tooltipContent, {
+                    permanent: false,
+                    direction: 'top',
+                    offset: [0, -10],
+                    className: 'tree-tooltip'
+                });
+                // Create popup content for clicks
                 const popupContent = this.createTreePopup(tree);
                 marker.bindPopup(popupContent, {
                     maxWidth: 300,
         });
     }
+    createCustomTreeIcon(tree) {
+        // Create a beautiful custom tree icon
+        const iconHtml = `
+            <div class="custom-tree-marker">
+                <div class="tree-icon-container">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M12 2C10.9 2 10 2.9 10 4C10 5.1 10.9 6 12 6C13.1 6 14 5.1 14 4C14 2.9 13.1 2 12 2Z" fill="#2E7D32"/>
+                        <path d="M12 6C9.8 6 8 7.8 8 10C8 12.2 9.8 14 12 14C14.2 14 16 12.2 16 10C16 7.8 14.2 6 12 6Z" fill="#4CAF50"/>
+                        <path d="M12 10C10.3 10 9 11.3 9 13C9 14.7 10.3 16 12 16C13.7 16 15 14.7 15 13C15 11.3 13.7 10 12 10Z" fill="#66BB6A"/>
+                        <rect x="11" y="16" width="2" height="6" fill="#8D6E63"/>
+                        <path d="M10 22H14V20H10V22Z" fill="#5D4037"/>
+                    </svg>
+                </div>
+                <div class="tree-marker-shadow"></div>
+            </div>
+        `;
+        return L.divIcon({
+            html: iconHtml,
+            className: 'custom-tree-icon',
+            iconSize: [32, 40],
+            iconAnchor: [16, 40],
+            popupAnchor: [0, -35]
+        });
+    }
+    createTreeTooltip(tree) {
+        const name = tree.local_name || tree.common_name || tree.scientific_name || `Tree #${tree.id}`;
+        const height = tree.height ? `${tree.height}m` : '';
+        const code = tree.tree_code ? `[${tree.tree_code}]` : '';
+        return `
+            <div class="tree-tooltip-content">
+                <div class="tree-name">${name}</div>
+                ${height || code ? `<div class="tree-details">${code} ${height}</div>` : ''}
+            </div>
+        `;
+    }
     createTreePopup(tree) {
         return `
             <div style="padding: 10px; font-family: 'Segoe UI', sans-serif;">