Spaces:

RoyAalekh
/

TreeTrack

Running

RoyAalekh commited on 20 days ago

Commit

264ecd0

1 Parent(s): aa47527

Add immersive interactive map view with mobile optimization

- Created dedicated map.html with full-screen interactive map using Leaflet
- Implemented pin management: tap/click to drop pins, location auto-population
- Added mobile-optimized gestures: pinch zoom, pan, long press support
- Created floating controls and bottom info panel with smooth animations
- Added location sharing between map and form via localStorage
- Implemented PWA service worker for offline capabilities
- Added navigation between map and form views
- Mobile-responsive design with touch-friendly controls
- GPS location detection and user location marker
- Real-time tree markers with popups showing tree information
- Deep linking support with URL hash for location sharing
- Haptic feedback on mobile devices

Files changed (5) hide show

static/app.js +21 -0
static/index.html +10 -2
static/map.html +398 -0
static/map.js +501 -0
static/sw.js +159 -0

static/app.js CHANGED Viewed

@@ -14,6 +14,7 @@ class TreeTrackApp {
         this.loadFormOptions();
         this.setupEventListeners();
         this.loadTrees();
     }
     async loadFormOptions() {
@@ -94,6 +95,26 @@ class TreeTrackApp {
         this.setupDragAndDrop();
     }
     setupPhotoUploads() {
         document.querySelectorAll('.photo-upload').forEach(upload => {
             upload.addEventListener('click', (e) => {

         this.loadFormOptions();
         this.setupEventListeners();
         this.loadTrees();
+        this.loadSelectedLocation();
     }
     async loadFormOptions() {
         this.setupDragAndDrop();
     }
+    loadSelectedLocation() {
+        // Load location from map selection
+        const selectedLocation = localStorage.getItem('selectedLocation');
+        if (selectedLocation) {
+            try {
+                const location = JSON.parse(selectedLocation);
+                document.getElementById('latitude').value = location.lat.toFixed(6);
+                document.getElementById('longitude').value = location.lng.toFixed(6);
+                // Clear the stored location
+                localStorage.removeItem('selectedLocation');
+                // Show success message
+                this.showMessage('Location loaded from map!', 'success');
+            } catch (error) {
+                console.error('Error loading selected location:', error);
+            }
+        }
+    }
     setupPhotoUploads() {
         document.querySelectorAll('.photo-upload').forEach(upload => {
             upload.addEventListener('click', (e) => {

static/index.html CHANGED Viewed

@@ -398,8 +398,13 @@
 </head>
 <body>
     <div class="header">
-        <h1>🌳 TreeTrack</h1>
-        <p>Comprehensive Field Research & Documentation Tool</p>
     </div>
     <div class="container">
@@ -421,6 +426,9 @@
                             <input type="number" id="longitude" step="0.0000001" min="-180" max="180" required>
                         </div>
                     </div>
                 </div>
                 <!-- Section 2: Identification -->

 </head>
 <body>
     <div class="header">
+        <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px;">
+            <div>
+                <h1 style="margin: 0; font-size: 2rem;">🌳 TreeTrack</h1>
+                <p style="margin: 5px 0 0 0; font-size: 1rem;">Field Research Tool</p>
+            </div>
+            <a href="/static/map.html" class="btn" style="background: rgba(255,255,255,0.2); color: white; text-decoration: none;">🗺️ Map View</a>
+        </div>
     </div>
     <div class="container">
                             <input type="number" id="longitude" step="0.0000001" min="-180" max="180" required>
                         </div>
                     </div>
+                    <div class="form-group">
+                        <a href="/static/map.html" class="btn btn-secondary" style="width: 100%; text-align: center; display: block; text-decoration: none;">🗺️ Select from Interactive Map</a>
+                    </div>
                 </div>
                 <!-- Section 2: Identification -->

static/map.html ADDED Viewed

	@@ -0,0 +1,398 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>🗺️ TreeTrack Map - Interactive Field View</title>
+    <!-- Leaflet CSS -->
+    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: #1a1a1a;
+            color: white;
+            height: 100vh;
+            overflow: hidden;
+        }
+        .app-container {
+            height: 100vh;
+            display: flex;
+            flex-direction: column;
+        }
+        /* Header */
+        .header {
+            background: linear-gradient(135deg, #2c5530 0%, #1a3a1c 100%);
+            padding: 15px 20px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.3);
+            z-index: 1000;
+        }
+        .logo {
+            font-size: 1.5rem;
+            font-weight: bold;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+        .header-actions {
+            display: flex;
+            gap: 10px;
+            align-items: center;
+        }
+        .btn {
+            padding: 8px 15px;
+            border: none;
+            border-radius: 20px;
+            cursor: pointer;
+            font-size: 14px;
+            font-weight: 600;
+            transition: all 0.3s ease;
+            text-decoration: none;
+            display: inline-flex;
+            align-items: center;
+            gap: 5px;
+        }
+        .btn-primary {
+            background: #4CAF50;
+            color: white;
+        }
+        .btn-primary:hover {
+            background: #45a049;
+            transform: translateY(-1px);
+        }
+        .btn-secondary {
+            background: rgba(255,255,255,0.2);
+            color: white;
+            backdrop-filter: blur(10px);
+        }
+        .btn-secondary:hover {
+            background: rgba(255,255,255,0.3);
+        }
+        /* Map Container */
+        .map-container {
+            flex: 1;
+            position: relative;
+            overflow: hidden;
+        }
+        #map {
+            width: 100%;
+            height: 100%;
+            z-index: 1;
+        }
+        /* Floating Controls */
+        .floating-controls {
+            position: absolute;
+            top: 20px;
+            right: 20px;
+            z-index: 1000;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+        }
+        .control-panel {
+            background: rgba(0,0,0,0.8);
+            backdrop-filter: blur(10px);
+            border-radius: 15px;
+            padding: 15px;
+            box-shadow: 0 8px 32px rgba(0,0,0,0.3);
+            border: 1px solid rgba(255,255,255,0.1);
+        }
+        .location-info {
+            position: absolute;
+            bottom: 20px;
+            left: 20px;
+            right: 20px;
+            z-index: 1000;
+        }
+        .info-panel {
+            background: rgba(0,0,0,0.9);
+            backdrop-filter: blur(15px);
+            border-radius: 15px;
+            padding: 20px;
+            box-shadow: 0 8px 32px rgba(0,0,0,0.5);
+            border: 1px solid rgba(255,255,255,0.1);
+            transform: translateY(100%);
+            transition: transform 0.3s ease;
+        }
+        .info-panel.active {
+            transform: translateY(0);
+        }
+        .coordinates {
+            display: flex;
+            gap: 20px;
+            margin-bottom: 15px;
+        }
+        .coord-item {
+            flex: 1;
+            text-align: center;
+        }
+        .coord-label {
+            font-size: 12px;
+            opacity: 0.7;
+            margin-bottom: 5px;
+        }
+        .coord-value {
+            font-size: 18px;
+            font-weight: bold;
+            color: #4CAF50;
+        }
+        .quick-actions {
+            display: flex;
+            gap: 10px;
+            margin-top: 15px;
+        }
+        .quick-actions .btn {
+            flex: 1;
+        }
+        /* Tree Markers Info */
+        .tree-counter {
+            background: rgba(76, 175, 80, 0.9);
+            color: white;
+            padding: 10px 15px;
+            border-radius: 20px;
+            font-weight: bold;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+        /* Mobile Optimizations */
+        @media (max-width: 768px) {
+            .header {
+                padding: 10px 15px;
+            }
+            .logo {
+                font-size: 1.3rem;
+            }
+            .floating-controls {
+                top: 10px;
+                right: 10px;
+            }
+            .control-panel {
+                padding: 10px;
+            }
+            .location-info {
+                bottom: 10px;
+                left: 10px;
+                right: 10px;
+            }
+            .coordinates {
+                flex-direction: column;
+                gap: 10px;
+            }
+            .quick-actions {
+                flex-direction: column;
+            }
+            .btn {
+                padding: 12px 20px;
+                font-size: 16px;
+            }
+        }
+        /* Custom Pin Styles */
+        .tree-pin {
+            background: #4CAF50;
+            border: 3px solid white;
+            border-radius: 50%;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.3);
+        }
+        .temp-pin {
+            background: #ff6b35;
+            border: 3px solid white;
+            border-radius: 50%;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.3);
+            animation: pulse 2s infinite;
+        }
+        @keyframes pulse {
+            0% { transform: scale(1); opacity: 1; }
+            50% { transform: scale(1.1); opacity: 0.7; }
+            100% { transform: scale(1); opacity: 1; }
+        }
+        /* Loading States */
+        .loading {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            background: rgba(0,0,0,0.8);
+            padding: 20px 30px;
+            border-radius: 10px;
+            z-index: 2000;
+        }
+        .spinner {
+            border: 3px solid rgba(255,255,255,0.3);
+            border-top: 3px solid #4CAF50;
+            border-radius: 50%;
+            width: 30px;
+            height: 30px;
+            animation: spin 1s linear infinite;
+            margin: 0 auto 10px;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        /* Success/Error Messages */
+        .message {
+            position: absolute;
+            top: 80px;
+            left: 50%;
+            transform: translateX(-50%);
+            padding: 15px 25px;
+            border-radius: 25px;
+            font-weight: 600;
+            z-index: 1500;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+        .message.show {
+            opacity: 1;
+        }
+        .message.success {
+            background: linear-gradient(45deg, #4CAF50, #45a049);
+            color: white;
+        }
+        .message.error {
+            background: linear-gradient(45deg, #f44336, #d32f2f);
+            color: white;
+        }
+        /* Gesture Instructions */
+        .gesture-hint {
+            position: absolute;
+            bottom: 120px;
+            left: 50%;
+            transform: translateX(-50%);
+            background: rgba(0,0,0,0.7);
+            color: white;
+            padding: 10px 20px;
+            border-radius: 20px;
+            font-size: 14px;
+            z-index: 1000;
+            animation: fadeInOut 4s ease-in-out;
+        }
+        @keyframes fadeInOut {
+            0%, 100% { opacity: 0; }
+            20%, 80% { opacity: 1; }
+        }
+    </style>
+</head>
+<body>
+    <div class="app-container">
+        <!-- Header -->
+        <div class="header">
+            <div class="logo">
+                🌳 TreeTrack Map
+            </div>
+            <div class="header-actions">
+                <div class="tree-counter">
+                    <span>🌳</span>
+                    <span id="treeCount">0</span>
+                </div>
+                <a href="/static/index.html" class="btn btn-secondary">📝 Add Tree</a>
+            </div>
+        </div>
+        <!-- Map Container -->
+        <div class="map-container">
+            <div id="map"></div>
+            <!-- Floating Controls -->
+            <div class="floating-controls">
+                <div class="control-panel">
+                    <button id="myLocationBtn" class="btn btn-primary">📍 My Location</button>
+                    <button id="clearPinsBtn" class="btn btn-secondary" style="margin-top: 8px;">🗑️ Clear Pins</button>
+                </div>
+            </div>
+            <!-- Location Info Panel -->
+            <div class="location-info">
+                <div class="info-panel" id="infoPanel">
+                    <div class="coordinates">
+                        <div class="coord-item">
+                            <div class="coord-label">Latitude</div>
+                            <div class="coord-value" id="latValue">--</div>
+                        </div>
+                        <div class="coord-item">
+                            <div class="coord-label">Longitude</div>
+                            <div class="coord-value" id="lngValue">--</div>
+                        </div>
+                    </div>
+                    <div class="quick-actions">
+                        <button id="useLocationBtn" class="btn btn-primary">✅ Use This Location</button>
+                        <button id="cancelBtn" class="btn btn-secondary">❌ Cancel</button>
+                    </div>
+                </div>
+            </div>
+            <!-- Loading -->
+            <div id="loading" class="loading" style="display: none;">
+                <div class="spinner"></div>
+                <div>Loading map...</div>
+            </div>
+            <!-- Messages -->
+            <div id="message" class="message"></div>
+            <!-- Gesture Hint -->
+            <div class="gesture-hint">
+                👆 Tap anywhere on map to drop a pin
+            </div>
+        </div>
+    </div>
+    <!-- Leaflet JS -->
+    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
+    <script src="/static/map.js"></script>
+</body>
+</html>

static/map.js ADDED Viewed

	@@ -0,0 +1,501 @@

+// TreeTrack Map - Interactive Map with Pin Management
+class TreeTrackMap {
+    constructor() {
+        this.map = null;
+        this.currentMarker = null;
+        this.treeMarkers = [];
+        this.userLocation = null;
+        this.selectedLocation = null;
+        this.init();
+    }
+    init() {
+        this.showLoading(true);
+        this.initializeMap();
+        this.setupEventListeners();
+        this.loadExistingTrees();
+        this.attemptGeolocation();
+    }
+    initializeMap() {
+        // Initialize Leaflet map
+        this.map = L.map('map', {
+            zoomControl: false,
+            attributionControl: false,
+            tap: true,
+            touchZoom: true,
+            doubleClickZoom: false // Disable double click to prevent conflicts
+        }).setView([26.2006, 92.9376], 13); // Default to Guwahati, Assam
+        // Add tile layer - Using OpenStreetMap with satellite option
+        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+            attribution: '',
+            maxZoom: 19
+        }).addTo(this.map);
+        // Add custom zoom controls
+        L.control.zoom({
+            position: 'bottomleft'
+        }).addTo(this.map);
+        // Add scale
+        L.control.scale({
+            position: 'bottomleft',
+            metric: true,
+            imperial: false
+        }).addTo(this.map);
+        this.showLoading(false);
+    }
+    setupEventListeners() {
+        // Map click event for dropping pins
+        this.map.on('click', (e) => {
+            this.handleMapClick(e);
+        });
+        // Button event listeners
+        document.getElementById('myLocationBtn').addEventListener('click', () => {
+            this.goToMyLocation();
+        });
+        document.getElementById('clearPinsBtn').addEventListener('click', () => {
+            this.clearTemporaryPin();
+        });
+        document.getElementById('useLocationBtn').addEventListener('click', () => {
+            this.useSelectedLocation();
+        });
+        document.getElementById('cancelBtn').addEventListener('click', () => {
+            this.cancelLocationSelection();
+        });
+        // Handle browser back/forward
+        window.addEventListener('popstate', (e) => {
+            if (e.state && e.state.location) {
+                this.selectedLocation = e.state.location;
+                this.showLocationPanel(true);
+            }
+        });
+    }
+    handleMapClick(e) {
+        const lat = e.latlng.lat;
+        const lng = e.latlng.lng;
+        // Clear any existing temporary marker
+        this.clearTemporaryPin();
+        // Create new temporary marker
+        this.currentMarker = L.circleMarker([lat, lng], {
+            radius: 15,
+            fillColor: '#ff6b35',
+            color: 'white',
+            weight: 3,
+            opacity: 1,
+            fillOpacity: 0.8,
+            className: 'temp-pin'
+        }).addTo(this.map);
+        // Store selected location
+        this.selectedLocation = { lat, lng };
+        // Update info panel
+        this.updateLocationDisplay(lat, lng);
+        this.showLocationPanel(true);
+        // Add to browser history
+        history.pushState(
+            { location: this.selectedLocation },
+            '',
+            `#lat=${lat.toFixed(6)}&lng=${lng.toFixed(6)}`
+        );
+        // Haptic feedback on mobile
+        this.vibrate(50);
+    }
+    clearTemporaryPin() {
+        if (this.currentMarker) {
+            this.map.removeLayer(this.currentMarker);
+            this.currentMarker = null;
+        }
+        this.selectedLocation = null;
+        this.showLocationPanel(false);
+        // Clear URL hash
+        history.pushState('', document.title, window.location.pathname);
+    }
+    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);
+        }
+    }
+    displayTreeMarkers(trees) {
+        // Clear existing tree markers
+        this.treeMarkers.forEach(marker => {
+            this.map.removeLayer(marker);
+        });
+        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,
+                    className: 'tree-popup'
+                });
+                this.treeMarkers.push(marker);
+            }
+        });
+    }
+    createTreePopup(tree) {
+        return `
+            <div style="padding: 10px; font-family: 'Segoe UI', sans-serif;">
+                <h3 style="margin: 0 0 10px 0; color: #2c5530; font-size: 1.1rem;">
+                    ${tree.local_name || tree.common_name || 'Tree #' + tree.id}
+                </h3>
+                ${tree.scientific_name ? `<p style="margin: 0 0 8px 0; font-style: italic; color: #666;">${tree.scientific_name}</p>` : ''}
+                ${tree.tree_code ? `<p style="margin: 0 0 8px 0;"><strong>Code:</strong> ${tree.tree_code}</p>` : ''}
+                ${tree.height ? `<p style="margin: 0 0 5px 0;"><strong>Height:</strong> ${tree.height}m</p>` : ''}
+                ${tree.width ? `<p style="margin: 0 0 5px 0;"><strong>Girth:</strong> ${tree.width}cm</p>` : ''}
+                <div style="margin-top: 10px; font-size: 0.9rem; color: #888;">
+                    📍 ${tree.latitude.toFixed(6)}, ${tree.longitude.toFixed(6)}
+                </div>
+            </div>
+        `;
+    }
+    updateTreeCounter(count) {
+        document.getElementById('treeCount').textContent = count;
+    }
+    updateLocationDisplay(lat, lng) {
+        document.getElementById('latValue').textContent = lat.toFixed(6);
+        document.getElementById('lngValue').textContent = lng.toFixed(6);
+    }
+    showLocationPanel(show) {
+        const panel = document.getElementById('infoPanel');
+        if (show) {
+            panel.classList.add('active');
+        } else {
+            panel.classList.remove('active');
+        }
+    }
+    useSelectedLocation() {
+        if (this.selectedLocation) {
+            // Store in localStorage for form access
+            localStorage.setItem('selectedLocation', JSON.stringify(this.selectedLocation));
+            this.showMessage('Location saved! Redirecting to form...', 'success');
+            // Redirect to form page after a short delay
+            setTimeout(() => {
+                window.location.href = '/static/index.html';
+            }, 1500);
+        }
+    }
+    cancelLocationSelection() {
+        this.clearTemporaryPin();
+    }
+    async attemptGeolocation() {
+        if ('geolocation' in navigator) {
+            try {
+                const position = await this.getCurrentPosition();
+                this.userLocation = {
+                    lat: position.coords.latitude,
+                    lng: position.coords.longitude
+                };
+                // Add user location marker
+                this.addUserLocationMarker();
+            } catch (error) {
+                console.log('Geolocation not available or denied');
+            }
+        }
+    }
+    getCurrentPosition() {
+        return new Promise((resolve, reject) => {
+            navigator.geolocation.getCurrentPosition(resolve, reject, {
+                enableHighAccuracy: true,
+                timeout: 10000,
+                maximumAge: 300000 // 5 minutes
+            });
+        });
+    }
+    addUserLocationMarker() {
+        if (this.userLocation) {
+            // Add pulsing blue dot for user location
+            const userMarker = L.circleMarker([this.userLocation.lat, this.userLocation.lng], {
+                radius: 8,
+                fillColor: '#2196F3',
+                color: 'white',
+                weight: 2,
+                opacity: 1,
+                fillOpacity: 1
+            }).addTo(this.map);
+            userMarker.bindPopup('📍 Your Location', {
+                className: 'user-location-popup'
+            });
+        }
+    }
+    async goToMyLocation() {
+        this.showLoading(true);
+        try {
+            const position = await this.getCurrentPosition();
+            const lat = position.coords.latitude;
+            const lng = position.coords.longitude;
+            this.userLocation = { lat, lng };
+            // Animate to user location
+            this.map.flyTo([lat, lng], 16, {
+                animate: true,
+                duration: 1.5
+            });
+            // Update user location marker
+            this.addUserLocationMarker();
+            this.showMessage('Found your location!', 'success');
+        } catch (error) {
+            this.showMessage('Could not get your location. Please check permissions.', 'error');
+        } finally {
+            this.showLoading(false);
+        }
+    }
+    showMessage(text, type = 'success') {
+        const messageEl = document.getElementById('message');
+        messageEl.textContent = text;
+        messageEl.className = `message ${type} show`;
+        setTimeout(() => {
+            messageEl.classList.remove('show');
+        }, 3000);
+    }
+    showLoading(show) {
+        const loadingEl = document.getElementById('loading');
+        loadingEl.style.display = show ? 'block' : 'none';
+    }
+    vibrate(duration) {
+        if ('vibrate' in navigator) {
+            navigator.vibrate(duration);
+        }
+    }
+}
+// Enhanced Mobile Gestures and Touch Handling
+class MobileEnhancements {
+    constructor(mapInstance) {
+        this.map = mapInstance;
+        this.initMobileFeatures();
+    }
+    initMobileFeatures() {
+        // Prevent iOS bounce/overscroll
+        document.addEventListener('touchmove', (e) => {
+            if (e.target === document.getElementById('map')) {
+                e.preventDefault();
+            }
+        }, { passive: false });
+        // Handle orientation change
+        window.addEventListener('orientationchange', () => {
+            setTimeout(() => {
+                this.map.map.invalidateSize();
+            }, 500);
+        });
+        // Long press for pin dropping (alternative to tap)
+        this.setupLongPressHandler();
+        // Swipe gestures for panels
+        this.setupSwipeGestures();
+    }
+    setupLongPressHandler() {
+        let longPressTimer;
+        let isLongPress = false;
+        this.map.map.on('mousedown touchstart', (e) => {
+            isLongPress = false;
+            longPressTimer = setTimeout(() => {
+                isLongPress = true;
+                this.handleLongPress(e);
+            }, 500); // 500ms long press
+        });
+        this.map.map.on('mouseup touchend mousemove touchmove', () => {
+            clearTimeout(longPressTimer);
+        });
+    }
+    handleLongPress(e) {
+        // Vibrate to indicate long press detected
+        this.map.vibrate([50, 50, 50]);
+        // Handle the long press as a pin drop
+        this.map.handleMapClick(e);
+        // Show different message for long press
+        this.map.showMessage('Pin dropped via long press!', 'success');
+    }
+    setupSwipeGestures() {
+        let startY = 0;
+        let startX = 0;
+        document.addEventListener('touchstart', (e) => {
+            startY = e.touches[0].clientY;
+            startX = e.touches[0].clientX;
+        });
+        document.addEventListener('touchend', (e) => {
+            if (!e.changedTouches[0]) return;
+            const endY = e.changedTouches[0].clientY;
+            const endX = e.changedTouches[0].clientX;
+            const diffY = startY - endY;
+            const diffX = startX - endX;
+            // Detect swipe up on info panel to dismiss
+            if (Math.abs(diffY) > Math.abs(diffX) && diffY > 50) {
+                const infoPanel = document.getElementById('infoPanel');
+                if (infoPanel.classList.contains('active')) {
+                    this.map.cancelLocationSelection();
+                }
+            }
+        });
+    }
+}
+// Progressive Web App features
+class PWAFeatures {
+    constructor() {
+        this.initPWA();
+    }
+    initPWA() {
+        // Service worker registration
+        if ('serviceWorker' in navigator) {
+            navigator.serviceWorker.register('/static/sw.js')
+                .then(registration => {
+                    console.log('SW registered: ', registration);
+                })
+                .catch(registrationError => {
+                    console.log('SW registration failed: ', registrationError);
+                });
+        }
+        // Install prompt
+        this.setupInstallPrompt();
+    }
+    setupInstallPrompt() {
+        let deferredPrompt;
+        window.addEventListener('beforeinstallprompt', (e) => {
+            e.preventDefault();
+            deferredPrompt = e;
+            // Show custom install button (you can add this to UI)
+            console.log('PWA install prompt available');
+        });
+        window.addEventListener('appinstalled', () => {
+            console.log('PWA was installed');
+            deferredPrompt = null;
+        });
+    }
+}
+// URL handling for deep linking
+class URLHandler {
+    constructor(mapInstance) {
+        this.map = mapInstance;
+        this.handleInitialURL();
+    }
+    handleInitialURL() {
+        const hash = window.location.hash;
+        if (hash) {
+            const params = new URLSearchParams(hash.substring(1));
+            const lat = parseFloat(params.get('lat'));
+            const lng = parseFloat(params.get('lng'));
+            if (!isNaN(lat) && !isNaN(lng)) {
+                // Restore location from URL
+                setTimeout(() => {
+                    this.map.handleMapClick({
+                        latlng: { lat, lng }
+                    });
+                    this.map.map.setView([lat, lng], 16);
+                }, 1000);
+            }
+        }
+    }
+}
+// Initialize the application
+document.addEventListener('DOMContentLoaded', () => {
+    // Main map instance
+    const treeMap = new TreeTrackMap();
+    // Mobile enhancements
+    const mobileEnhancements = new MobileEnhancements(treeMap);
+    // PWA features
+    const pwaFeatures = new PWAFeatures();
+    // URL handling
+    const urlHandler = new URLHandler(treeMap);
+    // Auto-refresh tree data every 30 seconds
+    setInterval(() => {
+        treeMap.loadExistingTrees();
+    }, 30000);
+});
+// Export for use in other modules
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = { TreeTrackMap, MobileEnhancements, PWAFeatures };
+}

static/sw.js ADDED Viewed

	@@ -0,0 +1,159 @@

+// TreeTrack Service Worker - PWA and Offline Support
+const CACHE_NAME = 'treetrack-v1';
+const urlsToCache = [
+    '/static/',
+    '/static/index.html',
+    '/static/map.html',
+    '/static/app.js',
+    '/static/map.js',
+    'https://unpkg.com/[email protected]/dist/leaflet.css',
+    'https://unpkg.com/[email protected]/dist/leaflet.js',
+    'https://fonts.googleapis.com/css2?family=Segoe+UI:wght@400;600;700&display=swap'
+];
+// Install event - cache resources
+self.addEventListener('install', event => {
+    event.waitUntil(
+        caches.open(CACHE_NAME)
+            .then(cache => {
+                console.log('Opened cache');
+                return cache.addAll(urlsToCache.map(url => new Request(url, {cache: 'reload'})));
+            })
+            .catch(error => {
+                console.log('Cache install failed:', error);
+            })
+    );
+});
+// Fetch event - serve cached content when offline
+self.addEventListener('fetch', event => {
+    // Skip non-GET requests
+    if (event.request.method !== 'GET') {
+        return;
+    }
+    // Skip requests to API endpoints - let them fail gracefully
+    if (event.request.url.includes('/api/') || event.request.url.includes('/trees')) {
+        return;
+    }
+    event.respondWith(
+        caches.match(event.request)
+            .then(response => {
+                // Cache hit - return response
+                if (response) {
+                    return response;
+                }
+                return fetch(event.request).then(response => {
+                    // Check if we received a valid response
+                    if (!response || response.status !== 200 || response.type !== 'basic') {
+                        return response;
+                    }
+                    // Clone the response
+                    const responseToCache = response.clone();
+                    caches.open(CACHE_NAME)
+                        .then(cache => {
+                            cache.put(event.request, responseToCache);
+                        });
+                    return response;
+                }).catch(() => {
+                    // If fetch fails, try to return a cached fallback
+                    if (event.request.destination === 'document') {
+                        return caches.match('/static/index.html');
+                    }
+                });
+            })
+    );
+});
+// Activate event - clean up old caches
+self.addEventListener('activate', event => {
+    const cacheWhitelist = [CACHE_NAME];
+    event.waitUntil(
+        caches.keys().then(cacheNames => {
+            return Promise.all(
+                cacheNames.map(cacheName => {
+                    if (cacheWhitelist.indexOf(cacheName) === -1) {
+                        return caches.delete(cacheName);
+                    }
+                })
+            );
+        })
+    );
+});
+// Background sync for offline data submission
+self.addEventListener('sync', event => {
+    if (event.tag === 'background-sync') {
+        event.waitUntil(doBackgroundSync());
+    }
+});
+async function doBackgroundSync() {
+    // Handle any queued tree submissions when back online
+    try {
+        const cache = await caches.open('offline-data');
+        const requests = await cache.keys();
+        for (const request of requests) {
+            if (request.url.includes('offline-tree-')) {
+                const response = await cache.match(request);
+                const treeData = await response.json();
+                // Try to submit the data
+                try {
+                    const submitResponse = await fetch('/api/trees', {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                        },
+                        body: JSON.stringify(treeData)
+                    });
+                    if (submitResponse.ok) {
+                        // Remove from cache if successful
+                        await cache.delete(request);
+                        console.log('Offline tree data synced successfully');
+                    }
+                } catch (error) {
+                    console.log('Failed to sync offline data:', error);
+                }
+            }
+        }
+    } catch (error) {
+        console.log('Background sync failed:', error);
+    }
+}
+// Push notifications (for future enhancement)
+self.addEventListener('push', event => {
+    const options = {
+        body: event.data ? event.data.text() : 'New tree data available!',
+        icon: '/static/icon-192x192.png',
+        badge: '/static/badge-72x72.png',
+        tag: 'treetrack-notification',
+        data: {
+            url: '/static/map.html'
+        }
+    };
+    event.waitUntil(
+        self.registration.showNotification('TreeTrack', options)
+    );
+});
+// Handle notification clicks
+self.addEventListener('notificationclick', event => {
+    event.notification.close();
+    if (event.notification.data && event.notification.data.url) {
+        event.waitUntil(
+            clients.openWindow(event.notification.data.url)
+        );
+    }
+});