Update JavaScript functionality

static/js/main.js

@@ -1,176 +1,60 @@
-let polygonDraw = null;
-let currentMap = null;
-
-$(document).ready(function() {
-    // Location search form submission
-    $('#locationForm').on('submit', function(e) {
-        e.preventDefault();
-        
-        $.ajax({
-            url: '/search_location',
-            method: 'POST',
-            data: {
-                location: $('#location').val()
-            },
-            success: function(response) {
-                $('#mapContainer').removeClass('d-none');
-                loadMap(response.lat, response.lon);
-            },
-            error: function(xhr) {
-                alert('Error: ' + (xhr.responseJSON ? xhr.responseJSON.error : 'Location not found'));
-            }
-        });
-    });
-
-    // File upload form submission
-    $('#uploadForm').on('submit', function(e) {
-        e.preventDefault();
-        
-        const formData = new FormData();
-        const fileInput = $('#imageUpload')[0];
-        
-        if (fileInput.files.length === 0) {
-            alert('Please select a file to upload');
+function searchLocation() {
+    const location = document.getElementById('location').value;
+    
+    fetch('/search_location', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/x-www-form-urlencoded',
+        },
+        body: `location=${encodeURIComponent(location)}`
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.error) {
+            alert(data.error);
             return;
         }
-        
-        formData.append('file', fileInput.files[0]);
-        
-        $.ajax({
-            url: '/upload',
-            method: 'POST',
-            data: formData,
-            processData: false,
-            contentType: false,
-            success: function(response) {
-                window.location.href = `/analyze?image=${encodeURIComponent(response.filepath)}`;
-            },
-            error: function(xhr) {
-                alert('Error uploading file: ' + (xhr.responseJSON ? xhr.responseJSON.error : 'Upload failed'));
-            }
-        });
-    });
-
-    // Screenshot capture button click
-    $('#captureBtn').on('click', function() {
-        if (!polygonDraw) {
-            // Initialize polygon drawing if not already initialized
-            const mapContainer = document.getElementById('map');
-            mapContainer.classList.add('drawing-mode');
-            polygonDraw = new PolygonDraw(mapContainer);
-            polygonDraw.startDrawing();
-            $(this).text('Complete Drawing (Press Enter)');
-        } else if (polygonDraw.isDrawing) {
-            const points = polygonDraw.completePolygon();
-            const mapContainer = document.getElementById('map');
-            mapContainer.classList.remove('drawing-mode');
-            if (points.length >= 3) {
-                captureWithPolygon(points);
-            }
-            $(this).text('Capture Screenshot');
-        } else {
-            const mapContainer = document.getElementById('map');
-            mapContainer.classList.add('drawing-mode');
-            polygonDraw.startDrawing();
-            $(this).text('Complete Drawing (Press Enter)');
-        }
-    });
-
-    // Analyze button click
-    $('#analyzeBtn').on('click', function() {
-        const screenshotPath = $('#capturedImage').attr('src');
-        if (screenshotPath) {
-            window.location.href = `/analyze?image=${encodeURIComponent(screenshotPath)}`;
-        }
-    });
-
-    // Add keyboard event listener for Enter key
-    document.addEventListener('keydown', function(event) {
-        if (event.key === 'Enter' && polygonDraw && polygonDraw.isDrawing) {
-            const points = polygonDraw.completePolygon();
-            const mapContainer = document.getElementById('map');
-            mapContainer.classList.remove('drawing-mode');
-            if (points.length >= 3) {
-                captureWithPolygon(points);
-            }
-            $('#captureBtn').text('Capture Screenshot');
-        }
-    });
-});
-
-function loadMap(lat, lon) {
-    const mapDiv = document.getElementById('map');
-    mapDiv.innerHTML = ''; // Clear any existing content
-    
-    // Create a new map instance
-    currentMap = L.map('map', {
-        center: [lat, lon],
-        zoom: 20,
-        maxZoom: 18,
-        preferCanvas: true
-    });
-    
-    // Add the satellite tile layer
-    L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
-        attribution: 'Esri',
-        maxZoom: 20,
-        tileSize: 256
-    }).addTo(currentMap);
-
-    // Wait for the map to load completely
-    currentMap.whenReady(() => {
-        currentMap.invalidateSize();
-        currentMap.setView([lat, lon], 20);
+        // Update map with location data
+        map.setView([data.lat, data.lon], 20);
+    })
+    .catch(error => {
+        console.error('Error:', error);
+        alert('Error searching location');
     });
 }
 
-function captureWithPolygon(points) {
-    const mapContainer = document.getElementById('map');
-    
-    // Get the current map state
-    const center = currentMap.getCenter();
-    const bounds = currentMap.getBounds();
-    const zoom = currentMap.getZoom();
+function captureScreenshot() {
+    const bounds = map.getBounds();
+    const center = map.getCenter();
     
-    const data = {
-        width: mapContainer.offsetWidth,
-        height: mapContainer.offsetHeight,
-        polygon: points,
-        mapState: {
-            center: {
-                lat: center.lat,
-                lng: center.lng
-            },
-            bounds: {
-                north: bounds.getNorth(),
-                south: bounds.getSouth(),
-                east: bounds.getEast(),
-                west: bounds.getWest()
-            },
-            zoom: zoom
-        }
-    };
-
-    // Log the map state for debugging
-    console.log('Capturing map state:', data.mapState);
-
     fetch('/capture_screenshot', {
         method: 'POST',
         headers: {
-            'Content-Type': 'application/json'
+            'Content-Type': 'application/json',
         },
-        body: JSON.stringify(data)
+        body: JSON.stringify({
+            width: map.getContainer().clientWidth,
+            height: map.getContainer().clientHeight,
+            mapState: {
+                center: center,
+                zoom: map.getZoom(),
+                bounds: {
+                    north: bounds.getNorth(),
+                    south: bounds.getSouth(),
+                    east: bounds.getEast(),
+                    west: bounds.getWest()
+                }
+            },
+            polygon: drawnPolygon
+        })
     })
     .then(response => response.json())
     .then(data => {
-        if (data.success) {
-            $('#screenshotGallery').removeClass('d-none');
-            const imagePath = data.cutout_path || data.screenshot_path;
-            const imageUrl = imagePath + '?t=' + new Date().getTime();
-            $('#capturedImage').attr('src', imageUrl);
-        } else {
-            alert('Error capturing screenshot');
+        if (data.error) {
+            alert(data.error);
+            return;
         }
+        window.location.href = `/analyze?image=${data.cutout_path || data.screenshot_path}`;
     })
     .catch(error => {
         console.error('Error:', error);

static/js/polygon-draw.js

@@ -1,110 +1,70 @@
-class PolygonDraw {
-    constructor(container) {
-        this.container = container;
-        this.points = [];
-        this.isDrawing = false;
-        this.svg = null;
-        this.polygon = null;
-        this.setupSVG();
-    }
-
-    setupSVG() {
-        // Create SVG overlay
-        this.svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-        this.svg.style.position = 'absolute';
-        this.svg.style.top = '0';
-        this.svg.style.left = '0';
-        this.svg.style.width = '100%';
-        this.svg.style.height = '100%';
-        this.svg.style.pointerEvents = 'all';
-        this.svg.style.zIndex = '1000';
-        
-        // Create polygon element
-        this.polygon = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
-        this.polygon.setAttribute('fill', 'rgba(255, 0, 0, 0.2)');
-        this.polygon.setAttribute('stroke', 'red');
-        this.polygon.setAttribute('stroke-width', '2');
-        this.svg.appendChild(this.polygon);
-        
-        // Add SVG to container
-        this.container.appendChild(this.svg);
-    }
+let drawnPolygon = [];
+let drawing = false;
+let drawingCanvas;
+let ctx;
 
-    startDrawing() {
-        this.isDrawing = true;
-        this.points = [];
-        this.updatePolygon();
-        
-        // Add click listener to container
-        this.container.style.cursor = 'crosshair';
-        this.clickHandler = this.handleClick.bind(this);
-        this.moveHandler = this.handleMouseMove.bind(this);
-        
-        // Find and disable the iframe
-        const mapFrame = this.container.querySelector('iframe');
-        if (mapFrame) {
-            mapFrame.style.pointerEvents = 'none';
-        }
-        
-        this.svg.addEventListener('click', this.clickHandler);
-        this.svg.addEventListener('mousemove', this.moveHandler);
+document.addEventListener('DOMContentLoaded', function() {
+    drawingCanvas = document.getElementById('drawing-canvas');
+    ctx = drawingCanvas.getContext('2d');
+    
+    // Setup canvas size
+    function resizeCanvas() {
+        drawingCanvas.width = map.getContainer().clientWidth;
+        drawingCanvas.height = map.getContainer().clientHeight;
     }
+    
+    resizeCanvas();
+    window.addEventListener('resize', resizeCanvas);
+    
+    // Setup map click handler
+    map.on('click', function(e) {
+        if (!drawing) return;
+        addPoint(e);
+    });
+});
 
-    handleClick(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        
-        const rect = this.container.getBoundingClientRect();
-        const x = event.clientX - rect.left;
-        const y = event.clientY - rect.top;
-        
-        this.points.push({ x, y });
-        this.updatePolygon();
-    }
+function startDrawing() {
+    drawing = true;
+    drawnPolygon = [];
+    clearCanvas();
+    document.getElementById('map').style.cursor = 'crosshair';
+}
 
-    handleMouseMove(event) {
-        if (this.points.length > 0) {
-            event.preventDefault();
-            event.stopPropagation();
-            
-            const rect = this.container.getBoundingClientRect();
-            const x = event.clientX - rect.left;
-            const y = event.clientY - rect.top;
-            
-            this.updatePolygon([...this.points, { x, y }]);
-        }
+function stopDrawing() {
+    if (drawnPolygon.length > 2) {
+        // Close the polygon
+        addPoint({ containerPoint: drawnPolygon[0] });
     }
+    drawing = false;
+    document.getElementById('map').style.cursor = '';
+}
 
-    updatePolygon(points = this.points) {
-        if (points.length > 0) {
-            const pointsString = points.map(p => `${p.x},${p.y}`).join(' ');
-            this.polygon.setAttribute('points', pointsString);
-        } else {
-            this.polygon.setAttribute('points', '');
-        }
-    }
-
-    completePolygon() {
-        this.isDrawing = false;
-        this.container.style.cursor = 'default';
-        this.svg.removeEventListener('click', this.clickHandler);
-        this.svg.removeEventListener('mousemove', this.moveHandler);
-        
-        // Re-enable the iframe
-        const mapFrame = this.container.querySelector('iframe');
-        if (mapFrame) {
-            mapFrame.style.pointerEvents = 'auto';
-        }
-        
-        const points = [...this.points];
-        this.points = [];
-        this.updatePolygon();
-        return points;
-    }
+function clearCanvas() {
+    ctx.clearRect(0, 0, drawingCanvas.width, drawingCanvas.height);
+}
 
-    cleanup() {
-        if (this.svg && this.svg.parentNode) {
-            this.svg.parentNode.removeChild(this.svg);
-        }
+function addPoint(e) {
+    const point = {
+        x: e.containerPoint.x,
+        y: e.containerPoint.y
+    };
+    
+    drawnPolygon.push(point);
+    
+    // Draw point
+    ctx.fillStyle = 'red';
+    ctx.beginPath();
+    ctx.arc(point.x, point.y, 3, 0, 2 * Math.PI);
+    ctx.fill();
+    
+    // Draw line
+    if (drawnPolygon.length > 1) {
+        const prev = drawnPolygon[drawnPolygon.length - 2];
+        ctx.beginPath();
+        ctx.moveTo(prev.x, prev.y);
+        ctx.lineTo(point.x, point.y);
+        ctx.strokeStyle = 'red';
+        ctx.lineWidth = 2;
+        ctx.stroke();
     }
 }