_

static/js/main.js

@@ -1,60 +1,176 @@
-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);
+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');
             return;
         }
-        // Update map with location data
-        map.setView([data.lat, data.lon], 20);
-    })
-    .catch(error => {
-        console.error('Error:', error);
-        alert('Error searching location');
+        
+        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);
     });
 }
 
-function captureScreenshot() {
-    const bounds = map.getBounds();
-    const center = map.getCenter();
+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();
     
+    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({
-            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
-        })
+        body: JSON.stringify(data)
     })
     .then(response => response.json())
     .then(data => {
-        if (data.error) {
-            alert(data.error);
-            return;
+        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');
         }
-        window.location.href = `/analyze?image=${data.cutout_path || data.screenshot_path}`;
     })
     .catch(error => {
         console.error('Error:', error);

static/js/polygon-draw.js

@@ -1,70 +1,110 @@
-let drawnPolygon = [];
-let drawing = false;
-let drawingCanvas;
-let ctx;
+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);
+    }
 
-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;
+    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);
     }
-    
-    resizeCanvas();
-    window.addEventListener('resize', resizeCanvas);
-    
-    // Setup map click handler
-    map.on('click', function(e) {
-        if (!drawing) return;
-        addPoint(e);
-    });
-});
 
-function startDrawing() {
-    drawing = true;
-    drawnPolygon = [];
-    clearCanvas();
-    document.getElementById('map').style.cursor = 'crosshair';
-}
+    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 stopDrawing() {
-    if (drawnPolygon.length > 2) {
-        // Close the polygon
-        addPoint({ containerPoint: drawnPolygon[0] });
+    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 }]);
+        }
     }
-    drawing = false;
-    document.getElementById('map').style.cursor = '';
-}
 
-function clearCanvas() {
-    ctx.clearRect(0, 0, drawingCanvas.width, drawingCanvas.height);
-}
+    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 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();
+    cleanup() {
+        if (this.svg && this.svg.parentNode) {
+            this.svg.parentNode.removeChild(this.svg);
+        }
     }
 } 

templates/index.html

@@ -19,21 +19,63 @@
             <button onclick="searchLocation()">Search</button>
         </div>
 
-        <div id="map-container">
-            <div id="map"></div>
-            
-            <div class="drawing-controls">
-                <button id="polygon-toggle" onclick="togglePolygonDraw()">Start Drawing</button>
-                <button id="clear-polygon" onclick="clearPolygon()">Clear Drawing</button>
+                <div class="card mb-4">
+                    <div class="card-body">
+                        <h5 class="card-title">
+                            <i class="fas fa-upload me-2"></i>Or Upload an Image
+                        </h5>
+                        <form id="uploadForm" class="mb-3">
+                            <div class="form-group">
+                                <input type="file" 
+                                       class="form-control" 
+                                       id="imageUpload" 
+                                       accept=".jpg,.jpeg,.png,.tif,.tiff"
+                                       required>
+                            </div>
+                            <button type="submit" class="btn btn-primary mt-3">
+                                <i class="fas fa-upload me-2"></i>Upload and Analyze
+                            </button>
+                        </form>
+                    </div>
+                </div>
+
+                <div id="mapContainer" class="card mb-4 d-none">
+                    <div class="card-body">
+                        <div id="map"></div>
+                        <div class="mt-4 d-flex justify-content-between align-items-center flex-wrap">
+                            <button id="captureBtn" class="btn btn-success">
+                                <i class="fas fa-camera me-2"></i>Capture Screenshot
+                            </button>
+                            <small class="text-muted">
+                                <i class="fas fa-info-circle me-2"></i>Use map controls to adjust the view
+                            </small>
+                        </div>
+                    </div>
+                </div>
+
+                <div id="screenshotGallery" class="card d-none">
+                    <div class="card-body">
+                        <h5 class="card-title">
+                            <i class="fas fa-image me-2"></i>Captured Image
+                        </h5>
+                        <div id="screenshotContainer" class="text-center">
+                            <img id="capturedImage" class="img-fluid" alt="Captured map">
+                            <div class="mt-4">
+                                <a id="analyzeBtn" class="btn btn-primary">
+                                    <i class="fas fa-chart-bar me-2"></i>Analyze Image
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
             </div>
-            
-            <button onclick="captureScreenshot()">Capture Screenshot</button>
         </div>
-
-        <div id="screenshot-result" class="results"></div>
     </div>
 
-    <script src="/static/js/main.js"></script>
-    <script src="/static/js/polygon-draw.js"></script>
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="{{ url_for('static', filename='js/polygon-draw.js') }}"></script>
+    <script src="{{ url_for('static', filename='js/main.js') }}"></script>
+    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
 </body>
 </html>