Fix css js

static/css/style.css

@@ -0,0 +1,458 @@
+/* General Styles */
+body {
+    background-color: #f8f9fa;
+    color: #333;
+    font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+}
+
+.container {
+    max-width: 1000px;
+}
+
+/* Header Styles */
+h1 {
+    color: #2c3e50;
+    font-weight: 600;
+    margin-bottom: 2rem;
+    position: relative;
+    padding-bottom: 1rem;
+}
+
+h1:after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 100px;
+    height: 4px;
+    background: linear-gradient(to right, #007bff, #00d2ff);
+    border-radius: 2px;
+}
+
+/* Card Styles */
+.card {
+    border: none;
+    border-radius: 12px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    transition: transform 0.2s, box-shadow 0.2s;
+    margin-bottom: 2rem;
+}
+
+.card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
+}
+
+.card-body {
+    padding: 2rem;
+}
+
+/* Form Styles */
+.form-control {
+    border-radius: 8px;
+    padding: 0.75rem 1rem;
+    border: 2px solid #e9ecef;
+    transition: border-color 0.2s;
+}
+
+.form-control:focus {
+    border-color: #007bff;
+    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.15);
+}
+
+/* Button Styles */
+.btn {
+    padding: 0.75rem 1.5rem;
+    border-radius: 8px;
+    font-weight: 500;
+    transition: all 0.2s;
+}
+
+.btn-primary {
+    background: linear-gradient(45deg, #007bff, #00d2ff);
+    border: none;
+}
+
+.btn-primary:hover {
+    background: linear-gradient(45deg, #0056b3, #00a6cc);
+    transform: translateY(-2px);
+}
+
+.btn-success {
+    background: linear-gradient(45deg, #28a745, #20c997);
+    border: none;
+}
+
+.btn-success:hover {
+    background: linear-gradient(45deg, #218838, #1aa179);
+    transform: translateY(-2px);
+}
+
+/* Map Container Styles */
+#map {
+    width: 100% !important;
+    height: 500px !important;
+    border-radius: 12px;
+    overflow: hidden;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+#map iframe {
+    width: 100% !important;
+    height: 500px !important;
+}
+
+/* Screenshot Styles */
+#capturedImage {
+    max-width: 100%;
+    border-radius: 12px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+/* Analysis Page Styles */
+.analysis-container {
+    background: white;
+    border-radius: 12px;
+    padding: 2rem;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.image-container {
+    margin-bottom: 2rem;
+}
+
+.image-container img {
+    border-radius: 12px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.results-container {
+    background: #f8f9fa;
+    padding: 2rem;
+    border-radius: 12px;
+}
+
+.results-list li {
+    background: white;
+    padding: 1rem;
+    margin-bottom: 1rem;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+.progress {
+    height: 12px;
+    border-radius: 6px;
+    background-color: #e9ecef;
+}
+
+.progress-bar {
+    background: linear-gradient(45deg, #007bff, #00d2ff);
+    border-radius: 6px;
+}
+
+.percentage {
+    font-weight: 600;
+    color: #007bff;
+}
+
+/* Loading States */
+.btn:disabled {
+    opacity: 0.8;
+    cursor: wait;
+}
+
+/* Alert Styles */
+.alert {
+    border-radius: 8px;
+    border: none;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+.alert-info {
+    background: linear-gradient(45deg, #17a2b8, #20c997);
+    color: white;
+}
+
+/* Responsive Adjustments */
+@media (max-width: 768px) {
+    .card-body {
+        padding: 1.5rem;
+    }
+    
+    #map, #map iframe {
+        height: 400px !important;
+    }
+    
+    .btn {
+        width: 100%;
+        margin-bottom: 0.5rem;
+    }
+}
+
+/* Analysis Layout Styles */
+.analysis-container {
+    background: white;
+    border-radius: 12px;
+    padding: 2rem;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.section-title {
+    font-size: 1.5rem;
+    color: #2c3e50;
+    margin-bottom: 1.5rem;
+    padding-bottom: 1rem;
+    border-bottom: 2px solid #e9ecef;
+}
+
+/* Image Section Styles */
+.image-section {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.image-wrapper {
+    flex-grow: 1;
+    background: #f8f9fa;
+    border-radius: 12px;
+    padding: 1rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.analyzed-image {
+    max-width: 100%;
+    height: auto;
+    border-radius: 8px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+/* Results Section Styles */
+.results-section {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.results-list-wrapper {
+    flex-grow: 1;
+    background: #f8f9fa;
+    border-radius: 12px;
+    padding: 1.5rem;
+    max-height: 600px;
+    overflow-y: auto;
+}
+
+.results-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.results-list li {
+    background: white;
+    padding: 1rem;
+    margin-bottom: 1rem;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+.results-list li:last-child {
+    margin-bottom: 0;
+}
+
+.element-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.5rem;
+}
+
+.class-name {
+    font-weight: 600;
+    color: #2c3e50;
+}
+
+.percentage {
+    font-weight: 600;
+    color: #007bff;
+    background: rgba(0, 123, 255, 0.1);
+    padding: 0.25rem 0.75rem;
+    border-radius: 20px;
+}
+
+.progress {
+    height: 8px;
+    border-radius: 4px;
+    background-color: #e9ecef;
+    margin-top: 0.5rem;
+}
+
+.progress-bar {
+    background: linear-gradient(45deg, #007bff, #00d2ff);
+    border-radius: 4px;
+}
+
+/* Scrollbar Styles */
+.results-list-wrapper::-webkit-scrollbar {
+    width: 8px;
+}
+
+.results-list-wrapper::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 4px;
+}
+
+.results-list-wrapper::-webkit-scrollbar-thumb {
+    background: #888;
+    border-radius: 4px;
+}
+
+.results-list-wrapper::-webkit-scrollbar-thumb:hover {
+    background: #555;
+}
+
+/* Alert Styles Update */
+.alert-info {
+    background: linear-gradient(45deg, #17a2b8, #20c997);
+    color: white;
+    border: none;
+    padding: 1rem;
+}
+
+/* Responsive Adjustments */
+@media (max-width: 992px) {
+    .image-section {
+        margin-bottom: 2rem;
+    }
+    
+    .results-list-wrapper {
+        max-height: 400px;
+    }
+}
+
+/* Masks Section Styles */
+.masks-section {
+    margin-top: 2rem;
+    padding: 2rem;
+    background: white;
+    border-radius: 12px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.masks-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 1.5rem;
+    margin-top: 1.5rem;
+}
+
+.mask-item {
+    background: #f8f9fa;
+    padding: 1rem;
+    border-radius: 8px;
+}
+
+.mask-wrapper {
+    background: white;
+    padding: 0.5rem;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+.mask-image {
+    width: 100%;
+    height: auto;
+    border-radius: 4px;
+}
+
+.mask-item h4 {
+    margin: 0 0 1rem 0;
+    color: #2c3e50;
+    text-align: center;
+}
+
+/* Add these new styles */
+.feature-item {
+    background: white;
+    padding: 1.25rem;
+    border-radius: 10px;
+    margin-bottom: 1rem;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+    transition: transform 0.2s;
+}
+
+.feature-item:hover {
+    transform: translateY(-2px);
+}
+
+.feature-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.75rem;
+}
+
+.feature-name {
+    font-weight: 600;
+    color: #2c3e50;
+}
+
+.feature-percentage {
+    background: #f8f9fa;
+    padding: 0.25rem 0.75rem;
+    border-radius: 20px;
+    font-weight: 600;
+    color: #2c3e50;
+}
+
+.progress {
+    height: 8px;
+    background-color: #f8f9fa;
+    border-radius: 4px;
+}
+
+/* Feature-specific progress bar colors */
+.feature-vegetation { background-color: #28a745; }
+.feature-water { background-color: #007bff; }
+.feature-building { background-color: #6c757d; }
+.feature-terrain { background-color: #8B4513; }
+.feature-other { background-color: #adb5bd; }
+
+.masks-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 1.5rem;
+}
+
+.mask-title {
+    font-size: 1.1rem;
+    color: #2c3e50;
+    margin-bottom: 1rem;
+    text-align: center;
+}
+
+.image-wrapper {
+    background: #f8f9fa;
+    padding: 1rem;
+    border-radius: 10px;
+    margin-top: 1rem;
+}
+
+.analyzed-image {
+    width: 100%;
+    height: auto;
+    border-radius: 6px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    .masks-grid {
+        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    }
+}

static/css/styles.css

@@ -0,0 +1,44 @@
+#map {
+    position: relative;
+    width: 100%;
+    height: 500px;
+    overflow: hidden;
+}
+
+.draw-button {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    z-index: 1000;
+    padding: 8px 16px;
+    background-color: #fff;
+    border: 2px solid #ccc;
+    border-radius: 4px;
+    cursor: pointer;
+}
+
+.draw-button:hover {
+    background-color: #f0f0f0;
+}
+
+/* Make sure the SVG overlay is visible and blocks map interaction during drawing */
+svg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1000;
+}
+
+/* Style for the polygon being drawn */
+polygon {
+    fill: rgba(255, 0, 0, 0.2);
+    stroke: red;
+    stroke-width: 2;
+}
+
+/* Style for the map container during drawing */
+#map.drawing-mode iframe {
+    pointer-events: none;
+}

static/js/main.js

@@ -0,0 +1,179 @@
+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;
+        }
+        
+        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 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'
+        },
+        body: JSON.stringify(data)
+    })
+    .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');
+        }
+    })
+    .catch(error => {
+        console.error('Error:', error);
+        alert('Error capturing screenshot');
+    });
+}

static/js/polygon-draw.js

@@ -0,0 +1,110 @@
+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);
+    }
+
+    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);
+    }
+
+    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();
+    }
+
+    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 }]);
+        }
+    }
+
+    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;
+    }
+
+    cleanup() {
+        if (this.svg && this.svg.parentNode) {
+            this.svg.parentNode.removeChild(this.svg);
+        }
+    }
+} 

templates/index.html

@@ -1,99 +1,35 @@
 <!DOCTYPE html>
-<html lang="en">
+<html>
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Satellite Image Analyzer</title>
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
-    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
-    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
+    <title>Map Screenshot Tool</title>
     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
+    <link rel="stylesheet" href="/static/css/styles.css" />
+    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
 </head>
 <body>
-    <div class="container py-5">
-        <h1 class="text-center">Satellite Image Analyzer</h1>
+    <div class="container">
+        <h1>Map Screenshot Tool</h1>
         
-        <div class="row justify-content-center">
-            <div class="col-lg-10">
-                <div class="card mb-4">
-                    <div class="card-body">
-                        <form id="locationForm" class="mb-3">
-                            <div class="form-group">
-                                <label for="location" class="form-label">
-                                    <i class="fas fa-search-location me-2"></i>Enter Location
-                                </label>
-                                <input type="text" 
-                                       class="form-control form-control-lg" 
-                                       id="location" 
-                                       name="location" 
-                                       placeholder="Enter an address or location name"
-                                       required>
-                            </div>
-                            <button type="submit" class="btn btn-primary mt-3">
-                                <i class="fas fa-map-marked-alt me-2"></i>Search Location
-                            </button>
-                        </form>
-                    </div>
-                </div>
-
-                <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 class="controls">
+            <input type="text" id="location-input" placeholder="Enter location...">
+            <button onclick="searchLocation()">Search</button>
+        </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 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>
+            
+            <button onclick="captureScreenshot()">Capture Screenshot</button>
         </div>
+
+        <div id="screenshot-result" class="results"></div>
     </div>
 
-    <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>
+    <script src="/static/js/main.js"></script>
+    <script src="/static/js/polygon-draw.js"></script>
 </body>
 </html>