Added new files

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}

App.js

@@ -0,0 +1,141 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const map = L.map('map').setView([18.5204, 73.8567], 13);
+
+    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+    }).addTo(map);
+
+    const markers = {};
+    let peakCrowd = 0;
+    let totalCrowd = 0;
+    let numberOfShops = 0;
+
+    function createIcon(color) {
+        return L.divIcon({
+            className: 'custom-icon',
+            html: `<div style="background-color: ${color}; width: 20px; height: 20px; border-radius: 50%;"></div>`,
+            iconSize: [20, 20]
+        });
+    }
+
+    // Fetch and update the map with current data
+    function updateMap() {
+        fetch('/data')
+            .then(response => response.json())
+            .then(data => {
+                let maxCrowd = 0;
+                let minCrowd = Infinity;
+                let minCrowdLocation = '';
+
+                totalCrowd = 0;
+                numberOfShops = 0;
+
+                data.forEach(item => {
+                    const key = `${item.coordinates.latitude},${item.coordinates.longitude}`;
+                    const color = item.count > 10 ? 'red' : 'yellow';
+
+                    if (!markers[key]) {
+                        const marker = L.marker([item.coordinates.latitude, item.coordinates.longitude], { icon: createIcon(color) }).addTo(map)
+                            .bindPopup(`Shop Count: ${item.count}`);
+                        markers[key] = marker;
+                    } else {
+                        markers[key].setPopupContent(`Shop Count: ${item.count}`);
+                        markers[key].setIcon(createIcon(color));
+                    }
+
+                    // Calculate statistics
+                    if (item.count > maxCrowd) {
+                        maxCrowd = item.count;
+                    }
+                    if (item.count < minCrowd) {
+                        minCrowd = item.count;
+                        minCrowdLocation = `${item.coordinates.latitude},${item.coordinates.longitude}`;
+                    }
+
+                    totalCrowd += item.count;
+                    numberOfShops++;
+                });
+
+                // Update statistics
+                const averageCrowd = numberOfShops > 0 ? (totalCrowd / numberOfShops).toFixed(2) : 0;
+                peakCrowd = maxCrowd;
+
+                document.getElementById('peak-crowd').textContent = peakCrowd;
+                document.getElementById('average-crowd').textContent = averageCrowd;
+                document.getElementById('preferred-shop').textContent = minCrowdLocation ? 
+                    `Shop Location: ${minCrowdLocation} with crowd: ${minCrowd}` : 'No data available';
+            })
+            .catch(error => {
+                console.error('Error fetching data:', error);
+            });
+    }
+
+    // Function to fetch and display historical data for a selected location
+    function fetchHistoricalData(lat, lng, minutes) {
+        fetch(`/history?lat=${lat}&lng=${lng}&minutes=${minutes}`)
+            .then(response => response.json())
+            .then(data => {
+                const historyContainer = document.getElementById('history');
+                historyContainer.innerHTML = '';
+
+                data.forEach(item => {
+                    const historyItem = document.createElement('div');
+                    historyItem.textContent = `Time: ${item.timestamp}, Count: ${item.count}`;
+                    historyContainer.appendChild(historyItem);
+                });
+            })
+            .catch(error => {
+                console.error('Error fetching historical data:', error);
+            });
+    }
+
+    updateMap();
+    setInterval(updateMap, 5000);
+
+    // Event listener for viewing historical data
+    document.getElementById('view-history').addEventListener('click', () => {
+        const lat = document.getElementById('lat').value;
+        const lng = document.getElementById('lng').value;
+        const minutes = document.getElementById('time-range').value;
+
+        if (lat && lng && minutes) {
+            fetchHistoricalData(lat, lng, minutes);
+        }
+    });
+    document.addEventListener('DOMContentLoaded', () => {
+        const map = L.map('map').setView([18.5204, 73.8567], 13);
+
+        // Adding OpenStreetMap tiles (background)
+        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+        }).addTo(map);
+
+        // Step 1: Initialize heatmap layer (but leave it empty for now)
+        let heat = L.heatLayer([], { radius: 25 }).addTo(map);
+
+        // Step 2: Fetch data from server and update heatmap
+        function updateHeatmap() {
+            fetch('/data')  // Assuming your crowd data is at /data
+                .then(response => response.json())  // Convert the response to JSON
+                .then(data => {
+                    // Step 3: Prepare the heatmap data in the format [lat, lng, intensity]
+                    const heatmapData = data.map(item => [
+                        item.coordinates.latitude, 
+                        item.coordinates.longitude, 
+                        item.count // Use crowd count as intensity
+                    ]);
+
+                    // Step 4: Update the heatmap layer with new data
+                    heat.setLatLngs(heatmapData);
+                })
+                .catch(error => {
+                    console.error('Error fetching heatmap data:', error);
+                });
+        }
+
+        // Step 5: Update the heatmap every 5 seconds to reflect changes in crowd data
+        updateHeatmap();  // Run it once to load data initially
+        setInterval(updateHeatmap, 5000);  // Run it every 5 seconds
+    });
+
+});

CNAME

@@ -0,0 +1 @@
+hack2skillexample.com