Create script.js

script.js

@@ -0,0 +1,152 @@
+const API_KEY = "94078593b1c2b2f226fb88d8ee037873da3844db";
+let map;
+let csvData = null;
+
+// Initialize the map
+function initMap() {
+    map = L.map('map').setView([20.5937, 78.9629], 5); // Centered on India
+    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);
+
+    // Add click event listener to the map
+    map.on('click', onMapClick);
+}
+
+// Function to handle the map click event
+async function onMapClick(e) {
+    const { lat, lng } = e.latlng;
+    try {
+        const populationDensity = await fetchLULCStatistics(lat, lng);
+        // Create popup
+        L.popup()
+            .setLatLng([lat, lng])
+            .setContent(`Latitude: ${lat}<br>Longitude: ${lng}<br>Population Density: ${populationDensity}`)
+            .openOn(map);
+    } catch (error) {
+        console.error("Error fetching data:", error);
+    }
+}
+
+// Function to fetch LULC Statistics from the Bhuvan API
+async function fetchLULCStatistics(latitude, longitude) {
+    const apiUrl = `https://bhuvan-api.gov.in/lulc_statistics?lat=${latitude}&lon=${longitude}&token=${API_KEY}`;
+    try {
+        const response = await fetch(apiUrl);
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        const data = await response.json();
+        const populationDensity = data.population_density || "Data not available";
+        return populationDensity;
+    } catch (error) {
+        console.error("Failed to fetch LULC statistics:", error);
+        return "Error fetching data";
+    }
+}
+
+// Drag and Drop Functionality
+const dropArea = document.getElementById('drop-area');
+const csvUpload = document.getElementById('csv-upload');
+
+['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+    dropArea.addEventListener(eventName, preventDefaults, false)
+})
+
+function preventDefaults (e) {
+    e.preventDefault()
+    e.stopPropagation()
+}
+
+['dragenter', 'dragover'].forEach(eventName => {
+    dropArea.addEventListener(eventName, highlight, false)
+})
+
+['dragleave', 'drop'].forEach(eventName => {
+    dropArea.addEventListener(eventName, unhighlight, false)
+})
+
+function highlight(e) {
+    dropArea.classList.add('highlight')
+}
+
+function unhighlight(e) {
+    dropArea.classList.remove('highlight')
+}
+
+dropArea.addEventListener('drop', handleDrop, false)
+
+function handleDrop(e) {
+    const dt = e.dataTransfer
+    const files = dt.files
+
+    handleFiles(files)
+}
+
+csvUpload.addEventListener('change', function() {
+    handleFiles(this.files);
+});
+
+function handleFiles(files) {
+    const file = files[0];
+    if (file && file.type === "text/csv") {
+        const reader = new FileReader();
+        reader.onload = function(event) {
+            csvData = event.target.result;
+            plotCsvDataOnMap();
+        };
+        reader.readAsText(file);
+    } else {
+        alert("Please upload a valid CSV file.");
+    }
+}
+
+// CSV Parsing and Map Plotting
+function parseCSV(csvText) {
+    const lines = csvText.trim().split('\n');
+    const headers = lines[0].split(',').map(header => header.trim());
+    const data = [];
+
+    for (let i = 1; i < lines.length; i++) {
+        const values = lines[i].split(',').map(value => value.trim());
+        if (values.length === headers.length) {
+            const entry = {};
+            for (let j = 0; j < headers.length; j++) {
+                entry[headers[j]] = values[j];
+            }
+            data.push(entry);
+        }
+    }
+    return data;
+}
+
+// Function to plot CSV data on the map
+function plotCsvDataOnMap() {
+    if (!csvData) {
+        alert("Please upload a CSV file first.");
+        return;
+    }
+
+    const data = parseCSV(csvData);
+
+    // Clear existing markers on the map (if any)
+    map.eachLayer(function (layer) {
+        if (layer instanceof L.Marker) {
+            map.removeLayer(layer);
+        }
+    });
+
+    data.forEach(async entry => {
+        if (entry.Latitude && entry.Longitude) {
+            const latitude = parseFloat(entry.Latitude);
+            const longitude = parseFloat(entry.Longitude);
+
+            // Add marker for each location
+            L.marker([latitude, longitude]).addTo(map)
+                .bindPopup(`Latitude: ${latitude}<br>Longitude: ${longitude}`);
+        }
+    });
+}
+
+// Initialize map when the window loads
+window.onload = initMap;