| <!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> |
|
|
