geo-smart · saikiranAnnam · Nov 18, 2024 · Nov 19, 2024 · Nov 25, 2024 · saikiranAnnam
diff --git a/.DS_Store b/.DS_Store
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "liveServer.settings.port": 5501
+}
diff --git a/counties.geojson → data/counties.geojson b/counties.geojson → data/counties.geojson
diff --git a/us-states.json → data/us-states.json b/us-states.json → data/us-states.json
diff --git a/docs/filestructure.md b/docs/filestructure.md
@@ -0,0 +1,18 @@
+swe_site/
+│
+├── src/
+│   ├── index.html          # Main HTML file
+│   ├── styles/             # CSS files
+│   │   ├── styles.css      # Main stylesheet
+│   ├── scripts/            # JavaScript logic and modules
+│   │   ├── index.js        # Main entry point (initialization logic)
+│   │   ├── utils.js        # Utility functions (e.g., copyCoordinates, helpers)
+│   │   ├── map.js          # MapHandler class and map-related logic
+│   │   ├── datepicker.js   # Functions for setting up the datepicker
+│   │   ├── geotiff.js      # Logic for adding GeoTIFF layers to the map
+│   │   ├── legend.js       # Logic for adding a map legend
+│   │   ├── events.js       # Event listeners for buttons and map interactions
+│
+├── data/                   # Data files
+│   ├── us-states.json      # GeoJSON data for state boundaries
+│   ├── date_list.csv       # CSV file containing available dates
diff --git a/index.html b/index.html
diff --git a/src/index.html b/src/index.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SWE Forecast Map</title>
+    <!-- Leaflet CSS -->
+    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
+    <!-- Bootstrap CSS -->
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
+    <!-- Bootstrap Datepicker CSS -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">
+    <!-- Custom CSS -->
+    <link rel="stylesheet" href="./styles/styles.css">
+</head>
+<body>
+    <!-- Header Section -->
+    <header class="header">
+        <h3>Snow Water Equivalent Estimation Map</h3>
+        <p class="subtitle">A Project by the SnowSource Team</p>
+    </header>
+    <p>hello world!!</p>
+
+    <!-- Control Panel -->
+    <div id="control-panel" class="control-panel-horizontal">
+        <div class="form-group">
+            <label id ="datepicker" for="datepicker">Select Date:</label>
+            <input type="text" id="datepicker">
+            <button id="load_swe_to_map" class="btn btn-primary">Load SWE Prediction</button>
+        <button id="download_swe_geotiff" class="btn btn-secondary">Download SWE Prediction (GeoTiff)</button>
+        </div>
+        <div class="map-views">
+            <button type="button" class="btn btn-outline-primary">single map</button>
+            <button type="button" class="btn btn-outline-primary">swipe map</button>
+            <button type="button" class="btn btn-outline-primary">dual map</button>
+
+        </div>
+
+    </div>
+
+    <!-- Map Container -->
+    <div id="map"></div>
+
+
+
+    <!-- Leaflet JS -->
+    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
+    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
+    <script src="./scripts/index.js" type="module"></script>
+</body>
+
+</html>
diff --git a/src/scripts/datepicker.js b/src/scripts/datepicker.js
@@ -0,0 +1,18 @@
+export function setup_datepicker(dateArray){
+  $('#datepicker').datepicker({
+      format: 'yyyy-mm-dd',
+      todayHighlight: true,
+      timeZone: 'America/Los_Angeles',
+      autoclose: true,
+      beforeShowDay: function(date) {
+          // Convert date to yyyy-mm-dd format
+          var formattedDate = date.getFullYear() + '-' + 
+              ('0' + (date.getMonth() + 1)).slice(-2) + '-' + 
+              ('0' + date.getDate()).slice(-2);
+
+          // Check if the date is in the dateArray
+          return dateArray.includes(formattedDate);
+      }
+  });
+}
+
diff --git a/src/scripts/events.js b/src/scripts/events.js
@@ -0,0 +1,15 @@
+export function setupEventListeners(map, layerControl) {
+  // Listener for SWE map loading button
+  $("#load_swe_to_map").on("click", function () {
+    const selectedDate = $("#datepicker").datepicker("getFormattedDate");
+    console.log(`Loading SWE prediction for: ${selectedDate}`);
+    addGeoTIFF(map, layerControl, selectedDate);
+  });
+
+  // Listener for SWE GeoTIFF download button
+  $("#download_swe_geotiff").on("click", function () {
+    const selectedDate = $("#datepicker").datepicker("getFormattedDate");
+    console.log(`Downloading GeoTIFF for: ${selectedDate}`);
+    window.open(`../swe_forecasting/output/swe_predicted_${selectedDate}.tif`, "_blank");
+  });
+}
diff --git a/src/scripts/geotiff.js b/src/scripts/geotiff.js
@@ -0,0 +1,18 @@
+export function add_swe_predicted_geotiff(map, layerControl, date) {
+  if (!date) {
+    console.error("Date is required to load GeoTIFF.");
+    return;
+  }
+
+  const wmslayer = L.tileLayer.wms(
+    `http://geobrain.csiss.gmu.edu/cgi-bin/mapserv?map=/var/www/html/swe_forecasting/map/swe_predicted_${date}.tif.map&`,
+    {
+      layers: "swemap",
+      format: "image/png",
+      transparent: true,
+    }
+  );
+
+  wmslayer.addTo(map);
+  layerControl.addOverlay(wmslayer, `Predicted SWE ${date}`);
+}
diff --git a/src/scripts/index.js b/src/scripts/index.js
@@ -0,0 +1,31 @@
+import { refreshCalendar} from "./utils.js";
+import { MapHandler } from "./map.js";
+import { addLegend } from "./legend.js";
+import { setupEventListeners } from "./events.js";
+import { setup_datepicker } from "./datepicker.js";
+import { add_swe_predicted_geotiff } from "./geotiff.js";
+
+document.addEventListener("DOMContentLoaded", function () {
+  // Initialize the map
+  const mapHandler = new MapHandler();
+  mapHandler.initializeMap();
+
+  // Load available dates into the datepicker
+  refreshCalendar((dateArray) => {
+    setup_datepicker(dateArray, (selectedDate) => {
+      console.log(`Date selected: ${selectedDate}`);
+      // Load SWE GeoTIFF prediction for the selected date
+      add_swe_predicted_geotiff(
+        mapHandler.map,
+        mapHandler.layerControl,
+        selectedDate
+      );
+    });
+  });
+
+  // Set up event listeners for map and buttons
+  setupEventListeners(mapHandler.map, mapHandler.layerControl);
+
+  // Add a legend to the map
+  addLegend(mapHandler.map);
+});
diff --git a/src/scripts/legend.js b/src/scripts/legend.js
@@ -0,0 +1,33 @@
+export function addLegend(map) {
+  const legend = L.control({ position: "bottomright" });
+
+  legend.onAdd = function () {
+    const div = L.DomUtil.create("div", "info legend");
+    div.style.backgroundColor = "white";
+    div.style.padding = "10px";
+
+    const grades = [0, 5, 10, 15, 20, 25, 30, 35, 40];
+    const colors = [
+      "#003366",
+      "#336699",
+      "#6699CC",
+      "#99CCFF",
+      "#99FFFF",
+      "#CCFFFF",
+      "#FFFFCC",
+      "#FFFF99",
+      "#FFFF33",
+    ];
+
+    grades.forEach((grade, i) => {
+      div.innerHTML += `
+        <i style="background:${colors[i]}; width: 20px; height: 15px; display: inline-block;"></i>
+        ${grade}${grades[i + 1] ? `&ndash;${grades[i + 1]}` : "+"}<br>
+      `;
+    });
+
+    return div;
+  };
+
+  legend.addTo(map);
+}