Spaces:

jake2004
/

heatmap

Running

App Files Files Community

jake2004 commited on Mar 5, 2025

Commit

f7c28d8

verified ·

1 Parent(s): 8de71e4

Update index.html

Browse files

Files changed (1) hide show

index.html +144 -24

index.html CHANGED Viewed

@@ -1,41 +1,161 @@
 <!DOCTYPE html>
-<html>
 <head>
-    <title>Store Placement Analysis Tool</title>
-    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
-          integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obscp+WJc="
-          crossorigin=""/>
-    <link rel="stylesheet" href="style.css">
     <style>
-        #map {
-            height: 500px;
-            width: 100%;
         }
-        #drop-area {
-            border: 2px dashed #ccc;
-            padding: 20px;
             text-align: center;
             cursor: pointer;
-            margin-bottom: 20px;
         }
-        #drop-area.highlight {
-            border-color: green;
         }
     </style>
 </head>
 <body>
-    <h1>Store Placement Analysis Tool</h1>
-    <div id="drop-area">
-        <p>Drag and drop your CSV file here, or click to select</p>
-        <input type="file" id="csv-upload" style="display: none;" accept=".csv">
     </div>
-    <div id="map"></div>
-    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
-            integrity="sha256-20nQCchB9co0qIjJZRGuk2/Zi9VM3yavCwpSEYOsMoeY="
-            crossorigin=""></script>
-    <script src="script.js"></script>
 </body>
 </html>

 <!DOCTYPE html>
+<html lang="en">
 <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Dark Store Placement & Heatmap</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
+    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
     <style>
+        body {
+            font-family: 'Poppins', sans-serif;
+            background: url('https://wallpapercave.com/wp/wp4411792.jpg') no-repeat center center fixed;
+            background-size: cover;
+            color: #ffffff;
+            margin: 0;
+            padding: 0;
         }
+        .container {
+            background: rgba(255, 255, 255, 0.1);
+            backdrop-filter: blur(15px);
+            padding: 30px;
+            border-radius: 15px;
+            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
             text-align: center;
+            max-width: 900px;
+            margin: 40px auto;
+            border: 1px solid rgba(255, 255, 255, 0.2);
+        }
+        h2 {
+            font-weight: 600;
+            text-transform: uppercase;
+            background: linear-gradient(90deg, #ff416c, #ff4b2b);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+        .file-upload {
+            position: relative;
+            display: inline-block;
+        }
+        .file-upload input[type="file"] {
+            position: absolute;
+            opacity: 0;
+            width: 100%;
+            height: 100%;
             cursor: pointer;
         }
+        .file-upload label {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 12px 20px;
+            background: linear-gradient(135deg, #007bff, #00d4ff);
+            color: #fff;
+            font-weight: 600;
+            border-radius: 8px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+        }
+        .btn {
+            padding: 12px 24px;
+            font-size: 16px;
+            font-weight: 600;
+            border-radius: 8px;
+            text-transform: uppercase;
+            transition: all 0.3s ease-in-out;
+            cursor: pointer;
+        }
+        .btn-primary {
+            background: linear-gradient(135deg, #007bff, #00d4ff);
+            color: #fff;
+        }
+        .btn-danger {
+            background: linear-gradient(135deg, #ff416c, #ff4b2b);
+            color: #fff;
+        }
+        .btn:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
+        }
+        #map, #heatmap {
+            height: 500px;
+            border-radius: 10px;
+            overflow: hidden;
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
+            margin-top: 20px;
         }
     </style>
 </head>
 <body>
+    <div class="container mt-4">
+        <h2 class="text-center"> Dark Store Placement & Heatmap</h2>
+        <div class="mb-3">
+            <label class="form-label">Upload CSV File (Latitude, Longitude, Location)</label>
+            <div class="file-upload">
+                <input type="file" id="csvFileInput">
+                <label for="csvFileInput">Choose File</label>
+            </div>
+        </div>
+        <div class="d-flex justify-content-center gap-3">
+            <button class="btn btn-primary" onclick="processCSV()">Generate Store Map</button>
+            <button class="btn btn-danger" onclick="generateHeatmap()">Generate Heatmap</button>
+        </div>
+        <div id="map" class="mt-4"></div>
+        <h3 class="text-center mt-4">🔥 Heatmap Representation</h3>
+        <div id="heatmap" class="mt-2"></div>
     </div>
+    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.2/papaparse.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.heat/0.2.0/leaflet-heat.js"></script>
+    <script>
+        let map = L.map('map').setView([18.5204, 73.8567], 10);
+        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
+        let heatmapMap = L.map('heatmap').setView([18.5204, 73.8567], 10);
+        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(heatmapMap);
+        let selectedLocations = [];
+        let heatLayer;
+        function processCSV() {
+            const fileInput = document.getElementById("csvFileInput");
+            if (!fileInput.files.length) return alert("Please upload a CSV file");
+            Papa.parse(fileInput.files[0], {
+                header: true,
+                skipEmptyLines: true,
+                complete: function (result) {
+                    let data = result.data;
+                    selectedLocations = [];
+                    data.forEach(row => {
+                        let lat = parseFloat(row.Latitude);
+                        let lon = parseFloat(row.Longitude);
+                        let location = row.Location;
+                        selectedLocations.push([lat, lon, 1.0]);
+                        L.marker([lat, lon]).addTo(map)
+                            .bindPopup(`<b>${location}</b><br>Lat: ${lat}, Lon: ${lon}`);
+                    });
+                }
+            });
+        }
+        function generateHeatmap() {
+            if (heatLayer) heatmapMap.removeLayer(heatLayer);
+            heatLayer = L.heatLayer(selectedLocations, {
+                radius: 25,
+                blur: 15,
+                maxZoom: 10
+            }).addTo(heatmapMap);
+        }
+    </script>
 </body>
 </html>