added files

frozenexplorer · Apr 6, 2024 · c11bab6 · c11bab6
1 parent a4b849d
commit c11bab6
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 53 deletions.
diff --git a/index.html b/index.html
@@ -5,26 +5,26 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Flood Map</title>
-    
+
     <!-- Leaflet CSS -->
     <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
-     integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
-     crossorigin=""/>
-
+        integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
+
     <!-- Custom CSS -->
     <style>
         body {
             margin: 0;
             padding: 0;
             font-family: Arial, sans-serif;
         }
-        
-        #map { 
+
+        #map {
             height: 100vh;
             width: 100%;
             position: relative;
         }
-        .coordinate{
+
+        .coordinate {
             position: absolute;
             bottom: 0;
             left: 0;
@@ -34,7 +34,7 @@
             color: #333;
             z-index: 1000;
         }
-        
+
         .footer {
             position: fixed;
             bottom: 0;
@@ -50,28 +50,27 @@
 </head>
 
 <body>
-   
+
     <div id="map">
         <div class="coordinate"></div>
     </div>
-   
+
     <!-- Leaflet JS -->
     <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
-    integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
-    crossorigin=""></script>
-
+        integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
+
     <script>
         // Initialize map
         var map = L.map('map').setView([28.68548, 77.20], 14.5);
-        
+
         // Add OpenStreetMap tile layer
         L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
             maxZoom: 19,
             attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
         }).addTo(map);
     </script>
     <script src="../temp-folder/roadds.js"></script>
-    
+
     <!-- Footer -->
     <div class="footer">
         &copy; 2024 Beautiful Map Project
@@ -82,7 +81,7 @@
 <script>
 
     L.geoJSON(RoadData, {
-        style: function(feature) {
+        style: function (feature) {
             var num = feature.properties.flood_intensity;
             var opacity = num * 0.1;
             var color;
@@ -96,28 +95,28 @@
             else if (num <= 8) color = '#1e0f7d';
             else if (num <= 9) color = '#0f054a';
             else color = '#0b0240';
-        
+
             return {
                 color: color,
                 opacity: opacity
             };
         },
-        onEachFeature: function(feature, layer) {
+        onEachFeature: function (feature, layer) {
             layer.on({
-                mouseover: function(e) {
+                mouseover: function (e) {
                     this.openPopup();
                 },
-                mouseout: function(e) {
+                mouseout: function (e) {
                     this.closePopup();
                 }
             }).bindPopup(feature.properties.name);
         }
     }).addTo(map);
 
-    map.on('mousemove', function(e){
+    map.on('mousemove', function (e) {
         document.querySelector('.coordinate').innerText = 'lat: ' + e.latlng.lat + ', lng: ' + e.latlng.lng;
-        console.log('lat: '+e.latlng.lat,'lng: '+e.latlng.lng);
+        console.log('lat: ' + e.latlng.lat, 'lng: ' + e.latlng.lng);
     });
 
     console.log('Number of blue roads:', blueCount); // Print count for blue color
-</script>
+</script>
diff --git a/script.js b/script.js
@@ -0,0 +1,11 @@
+L.geoJSON(RoadData).addTo(map);
+L.geoJSON(RoadData, {
+  onEachFeature: function (feature, layer) {
+    layer.bindPopup(feature.properties.name);
+  },
+}).addTo(map);
+map.on("mousemove", function (e) {
+  document.querySelector(".coordinate").innerText =
+    "lat: " + e.latlng.lat + ", lng: " + e.latlng.lng;
+  console.log("lat: " + e.latlng.lat, "lng: " + e.latlng.lng);
+});
diff --git a/style.css b/style.css
diff --git a/temp-folder/tempi.js b/temp-folder/tempi.js
@@ -1,41 +1,54 @@
-const fs = require('fs');
+const fs = require("fs");
+const csv = require("csv-parser");
 
 // Read the GeoJSON file
-const geojsonData = JSON.parse(fs.readFileSync('mapp.geojson', 'utf8'));
+const geojsonData = JSON.parse(fs.readFileSync("mapp.geojson", "utf8"));
 
 // Function to filter road features
 function filterRoads(feature) {
-    // Check if the feature represents a road (LineString or MultiLineString)
-    return (
-        feature.geometry &&
-        (feature.geometry.type === 'LineString' || feature.geometry.type === 'MultiLineString') &&
-        feature.properties && 
-        feature.properties.highway
-    );
+  // Check if the feature represents a road (LineString or MultiLineString)
+  return (
+    feature.geometry &&
+    (feature.geometry.type === "LineString" ||
+      feature.geometry.type === "MultiLineString") &&
+    feature.properties &&
+    feature.properties.highway
+  );
 }
 
-// Filter road features
-const roads = geojsonData.features.filter(filterRoads);
+// Read Flood_Intensity from Rainfall.csv and store it in an array
+const floodIntensity = [];
+fs.createReadStream("Rainfall.csv")
+  .pipe(csv())
+  .on("data", (row) => {
+    // Assuming 'Flood_Intensity' is the column name in Rainfall.csv
+    floodIntensity.push(row.Flood_Intensity);
+  })
+  .on("end", () => {
+    // Filter road features
+    const roads = geojsonData.features.filter(filterRoads);
 
-// Create a new GeoJSON object containing only road features
-const roadsGeoJSON = {
-    type: 'FeatureCollection',
-    features: roads
-};
-function getRandomInt(min, max) {
-    return Math.floor(Math.random() * (max - min + 1)) + min;
-}
+    // Create a new GeoJSON object containing only road features
+    const roadsGeoJSON = {
+      type: "FeatureCollection",
+      features: roads,
+    };
+
+    // Assign a random number between 1 to 10 to a new property for each road feature
+    roadsGeoJSON.features.forEach((feature, index) => {
+      // Check if the feature has a name property
+      if (!feature.properties.name) {
+        // If name property doesn't exist, set it to "unnamed road"
+        feature.properties.name = "unnamed road";
+      }
 
-// Assign a random number between 1 to 10 to a new property for each road feature
-geojsonData.features.forEach(feature => {
-    // Generate random number
-    const randomNumber = getRandomInt(1, 10);
-
-    // Assign the random number to a new property
-    feature.properties.randomNumber = randomNumber;
-});
+      // Assign flood intensity from the array sequentially
+      feature.properties.flood_intensity =
+        floodIntensity[index % floodIntensity.length];
+    });
 
-// Write the filtered GeoJSON data to a file
-fs.writeFileSync('roads.geojson', JSON.stringify(roadsGeoJSON), 'utf8');
+    // Write the filtered GeoJSON data to a file
+    fs.writeFileSync("roadds.geojson", JSON.stringify(roadsGeoJSON), "utf8");
 
-console.log('Roads identified and saved to roads.geojson file.');
+    console.log("Roads identified and saved to roads.geojson file.");
+  });