Weitzman-MUSA-JavaScript · Jiayue-Ma · Nov 11, 2024
diff --git a/css/styles.css b/css/styles.css
@@ -0,0 +1,92 @@
+@import url('https://fonts.googleapis.com/css2?family=Gowun+Batang:wght@400;700&display=swap');
+
+html, body {
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    overflow: hidden; 
+    font-family: 'Gowun Batang', serif;
+}
+
+#dashboard-container {
+    display: flex;
+    flex-direction: column;
+    height: 100vh; 
+    box-sizing: border-box;
+}
+
+#title {
+    text-align: left;
+    background-color: #f8f8f8;
+    padding: 0;
+    border-bottom: 0.1rem solid #ddd;
+    height: 10vh;
+    line-height: 4vh;
+    flex: 0 1 auto; 
+}
+
+#container {
+    display: flex;
+    flex: 1; 
+    overflow: hidden; 
+}
+
+#map {
+    flex: 2; 
+    height: 100%;
+    background-color: #e0e0e0; 
+}
+
+#stats-panel {
+    flex: 1; 
+    padding: 1vh;
+    display: flex;
+    flex-direction: column;
+    gap: 1vh; 
+    background: #f0f0f0;
+    box-sizing: border-box;
+    overflow: hidden;
+    font-size: 0.9rem; 
+}
+
+#slider-container {
+    display: flex;
+    flex-direction: column;
+    gap: 0.2vh;
+}
+
+#slider-container label {
+    font-weight: bold; 
+}
+
+#water-level-slider {
+    width: 100%;
+}
+
+#info-container {
+    line-height: 1.5; 
+}
+
+#info-container p {
+    margin: 0.5vh 0;
+}
+
+#slider-container {
+    max-height: 45%; 
+}
+
+#parcel-info-table table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 0.9rem;  
+}
+
+#parcel-info-table th, #parcel-info-table td {
+    border: 1px solid #ddd;
+    padding: 5px;
+}
+
+#parcel-info-table th {
+    background-color: #f2f2f2;
+    font-weight: bold;
+}
diff --git a/data/bf.geojson b/data/bf.geojson
diff --git a/data/bf_shadow.geojson b/data/bf_shadow.geojson
diff --git a/data/lu_line2.geojson b/data/lu_line2.geojson
diff --git a/data/parcel_515.geojson b/data/parcel_515.geojson
diff --git a/data/parcel_516.geojson b/data/parcel_516.geojson
diff --git a/data/parcel_517.geojson b/data/parcel_517.geojson
diff --git a/data/parcel_518.geojson b/data/parcel_518.geojson
diff --git a/data/parcel_519.geojson b/data/parcel_519.geojson
diff --git a/data/parcel_520.geojson b/data/parcel_520.geojson
diff --git a/data/parcel_521.geojson b/data/parcel_521.geojson
diff --git a/data/parcel_522.geojson b/data/parcel_522.geojson
diff --git a/data/parcel_523.geojson b/data/parcel_523.geojson
diff --git a/data/parcel_524.geojson b/data/parcel_524.geojson
diff --git a/data/parcel_525.geojson b/data/parcel_525.geojson
diff --git a/data/parcel_526.geojson b/data/parcel_526.geojson
diff --git a/data/river.geojson b/data/river.geojson
diff --git a/data/water_515.geojson b/data/water_515.geojson
diff --git a/data/water_516.geojson b/data/water_516.geojson
diff --git a/data/water_517.geojson b/data/water_517.geojson
diff --git a/data/water_518.geojson b/data/water_518.geojson
diff --git a/data/water_519.geojson b/data/water_519.geojson
diff --git a/data/water_520.geojson b/data/water_520.geojson
diff --git a/data/water_521.geojson b/data/water_521.geojson
diff --git a/data/water_522.geojson b/data/water_522.geojson
diff --git a/data/water_523.geojson b/data/water_523.geojson
diff --git a/data/water_524.geojson b/data/water_524.geojson
diff --git a/data/water_525.geojson b/data/water_525.geojson
diff --git a/data/water_526.geojson b/data/water_526.geojson
diff --git a/eslint.config.js b/eslint.config.js
@@ -0,0 +1,8 @@
+import globals from "globals";
+import pluginJs from "@eslint/js";
+
+
+export default [
+  {languageOptions: { globals: globals.browser }},
+  pluginJs.configs.recommended,
+];
diff --git a/img/location.png b/img/location.png
diff --git a/img/location.svg b/img/location.svg
diff --git a/index.html b/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
+    <link rel="stylesheet" href="css/styles.css">
+    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
+    <title>Inundation Impact in Downtown Montpelier, Vermont</title>
+</head>
+<body>
+    <div id="dashboard-container">
+        <div id="title">
+            <h1>Inundation Impact in Downtown Montpelier, Vermont</h1>
+        </div>
+        <div id="container">
+            <div id="map"></div>
+            <div id="stats-panel">
+                <div id="slider-container">
+                    <label for="water-level-slider">Water Level (feet):</label>
+                    <input type="range" id="water-level-slider" min="515" max="526" step="1" value="515">
+                </div>
+                <div id="info-container">
+                    <p><strong>Hint:</strong> Drag slider to select a flood water level; Click on parcels to show detailed information.</p>
+                    <p><strong>Selected Water Level:</strong> <span id="current-level">515</span> ft</p>
+                    <p><strong>Flood Impacts:</strong> <span id="corresponding-year">Unknown.</span></p>
+                    <p><strong>Total Impacted Parcels:</strong> <span id="inundated-parcels">0</span></p>
+                    <p><strong>Total Impacted Parcel Value:</strong> <span id="total-value">$0</span></p>
+                    <p><strong>For the selected parcel:</strong></p>
+                </div>
+                <div id="parcel-info-table" style="margin-top: 1vh;">                   
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
+    <script src="https://d3js.org/d3.v7.min.js"></script>
+    <script src="scripts.js"></script>
+</body>
+</html>