Update of Website

s27288-pj · Jan 10, 2024 · 9993415 · 9993415
1 parent a5186bf
commit 9993415
Show file tree

Hide file tree

Showing 2 changed files with 85 additions and 13 deletions.
diff --git a/scripts.js b/scripts.js
@@ -180,20 +180,18 @@ async function getTA2MapData(latitude, longitude) {
     op: 'TA2',
   })
 
-  TA2Map.zoomControl.remove();
-
   // Add the layers to TA2Map
   mapLayer.addTo(TA2Map);
   weatherLayer.addTo(TA2Map);
 }
 
-async function getPA0MapData(latitude, longitude) {
+async function getPR0MapData(latitude, longitude) {
   const mapContainer = document.getElementById('map-box-precipitation');
   if (mapContainer && mapContainer._leaflet_id) {
     mapContainer._leaflet_id = null;
   }
 
-  const PA0Map = L.map('map-box-precipitation', {dragging: false, scrollWheelZoom: false, touchZoom: false}).setView([latitude, longitude], 10);
+  const PR0Map = L.map('map-box-precipitation', {dragging: false, scrollWheelZoom: false, touchZoom: false}).setView([latitude, longitude], 7);
 
   const mapLayer =  L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
     maxZoom: 18,
@@ -204,14 +202,12 @@ async function getPA0MapData(latitude, longitude) {
     apiKey: apiKey,
     maxZoom: 18,
     attribution: 'Weather &copy; <a href="https://openweathermap.org">OpenWeatherMap</a>',
-    op: 'PA0',
+    op: 'PR0',
   })
 
-  PA0Map.zoomControl.remove();
-
-  // Add the layers to PA0Map
-  mapLayer.addTo(PA0Map);
-  weatherLayer.addTo(PA0Map);
+  // Add the layers to PR0Map
+  mapLayer.addTo(PR0Map);
+  weatherLayer.addTo(PR0Map);
 }
 async function getWNDMapData(latitude, longitude) {
   const mapContainer = document.getElementById('map-box-wind');
@@ -233,8 +229,6 @@ async function getWNDMapData(latitude, longitude) {
     op: 'WND',
   })
 
-  WNDMap.zoomControl.remove();
-
   // Add the layers to WNDMap
   mapLayer.addTo(WNDMap);
   weatherLayer.addTo(WNDMap);
@@ -546,7 +540,7 @@ mapPrecipitation.addEventListener('click', () => {
   mapBoxPrecipitation.style.display = 'block';
   const mapBoxWind = document.getElementById('map-box-wind');
   mapBoxWind.style.display = 'none';
-  getPA0MapData(latitude, longitude);
+  getPR0MapData(latitude, longitude);
   window.scrollTo(0, document.body.scrollHeight);
 });
 

diff --git a/styles.css b/styles.css
@@ -1735,6 +1735,10 @@
     font-size: 13px;
     font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
   }
+  .default-mode #map-temperature:hover {
+    color: var(--default-hover-color);
+    cursor: pointer;
+  }
 
   .light-mode #map-temperature {
     background-color:var(--light-background-color);
@@ -1753,6 +1757,10 @@
     font-size: 13px;
     font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
   }
+  .light-mode #map-temperature:hover {
+    color: var(--light-hover-color);
+    cursor: pointer;
+  }
 
   .dark-mode #map-temperature {
     background-color:var(--dark-background-color);
@@ -1771,6 +1779,10 @@
     font-size: 13px;
     font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
   }
+  .dark-mode #map-temperature:hover {
+    color: var(--dark-hover-color);
+    cursor: pointer;
+  }
 
   .default-mode #map-precipitation {
     background-color:var(--default-background-color);
@@ -1789,6 +1801,10 @@
     font-size: 13px;
     font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
   }
+  .default-mode #map-precipitation:hover {
+    color: var(--default-hover-color);
+    cursor: pointer;
+  }
 
   .light-mode #map-precipitation {
     background-color:var(--light-background-color);
@@ -1807,6 +1823,10 @@
     font-size: 13px;
     font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
   }
+  .light-mode #map-precipitation:hover {
+    color: var(--light-hover-color);
+    cursor: pointer;
+  }
 
   .dark-mode #map-precipitation {
     background-color:var(--dark-background-color);
@@ -1825,6 +1845,10 @@
     font-size: 13px;
     font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
   }
+  .dark-mode #map-precipitation:hover {
+    color: var(--dark-hover-color);
+    cursor: pointer;
+  }
 
   .default-mode #map-wind {
     background-color:var(--default-background-color);
@@ -1843,6 +1867,10 @@
     font-size: 13px;
     font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
   }
+  .default-mode #map-wind:hover {
+    color: var(--default-hover-color);
+    cursor: pointer;
+  }
 
   .light-mode #map-wind {
     background-color:var(--light-background-color);
@@ -1861,6 +1889,10 @@
     font-size: 13px;
     font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
   }
+  .light-mode #map-wind:hover {
+    color: var(--light-hover-color);
+    cursor: pointer;
+  }
 
   .dark-mode #map-wind {
     background-color:var(--dark-background-color);
@@ -1879,6 +1911,10 @@
     font-size: 13px;
     font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
   }
+  .dark-mode #map-wind:hover {
+    color: var(--dark-hover-color);
+    cursor: pointer;
+  }
 
   .default-mode .map-box {
     background-color:var(--default-background-color);
@@ -3478,6 +3514,11 @@
     font-size: 13px;
     font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
   }
+  .default-mode #map-temperature:hover {
+    color: var(--default-hover-color);
+    cursor: pointer;
+  }
+
   .light-mode #map-temperature {
     background-color:var(--light-background-color);
     color: var(--light-text-color);
@@ -3495,6 +3536,11 @@
     font-size: 13px;
     font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
   }
+  .light-mode #map-temperature:hover {
+    color: var(--light-hover-color);
+    cursor: pointer;
+  }
+
   .dark-mode #map-temperature {
     background-color:var(--dark-background-color);
     color: var(--dark-text-color);
@@ -3512,6 +3558,10 @@
     font-size: 13px;
     font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
   }
+  .dark-mode #map-temperature:hover {
+    color: var(--dark-hover-color);
+    cursor: pointer;
+  }
 
   .default-mode #map-precipitation {
     background-color:var(--default-background-color);
@@ -3530,6 +3580,11 @@
     font-size: 13px;
     font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
   }
+  .default-mode #map-precipitation:hover {
+    color: var(--default-hover-color);
+    cursor: pointer;
+  }
+
   .light-mode #map-precipitation {
     background-color:var(--light-background-color);
     color: var(--light-text-color);
@@ -3547,6 +3602,11 @@
     font-size: 13px;
     font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
   }
+  .light-mode #map-precipitation:hover {
+    color: var(--light-hover-color);
+    cursor: pointer;
+  }
+
   .dark-mode #map-precipitation {
     background-color:var(--dark-background-color);
     color: var(--dark-text-color);
@@ -3564,6 +3624,10 @@
     font-size: 13px;
     font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
   }
+  .dark-mode #map-precipitation:hover {
+    color: var(--dark-hover-color);
+    cursor: pointer;
+  }
 
   .default-mode #map-wind {
     background-color:var(--default-background-color);
@@ -3582,6 +3646,11 @@
     font-size: 13px;
     font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
   }
+  .default-mode #map-wind:hover {
+    color: var(--default-hover-color);
+    cursor: pointer;
+  }
+
   .light-mode #map-wind {
     background-color:var(--light-background-color);
     color: var(--light-text-color);
@@ -3599,6 +3668,11 @@
     font-size: 13px;
     font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
   }
+  .light-mode #map-wind:hover {
+    color: var(--light-hover-color);
+    cursor: pointer;
+  }
+
   .dark-mode #map-wind {
     background-color:var(--dark-background-color);
     color: var(--dark-text-color);
@@ -3616,6 +3690,10 @@
     font-size: 13px;
     font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
   }
+  .dark-mode #map-wind:hover {
+    color: var(--dark-hover-color);
+    cursor: pointer;
+  }
 
   .default-mode .map-box {
     background-color:var(--default-background-color);