Added new feature: windy style layer

.prettierignore

@@ -0,0 +1 @@
+data/

app/components/MapView.client.tsx

@@ -9,12 +9,14 @@ import GeoJSON from "ol/format/GeoJSON";
 import OSM from "ol/source/OSM";
 import { fromLonLat } from "ol/proj";
 import { defaults as defaultControls } from "ol/control";
+import { WindLayer } from "ol-wind";
 
 import Sidebar from "./Sidebar";
 
 type LayersVisible = {
   osm: boolean;
   vector: boolean;
+  wind: boolean;
 };
 
 const MapView = () => {
@@ -25,10 +27,13 @@ const MapView = () => {
   const [osmLayer, setOsmLayer] = useState<TileLayer<OSM> | null>(null);
   const [vectorLayer, setVectorLayer] =
     useState<VectorLayer<VectorSource> | null>(null);
+  const [windLayer, setWindLayer] = useState<any>();
   const [layersVisible, setLayersVisible] = useState<LayersVisible>({
     osm: true,
     vector: true,
+    wind: true,
   });
+  const [windData, setWindData] = useState<any>(null);
 
   useEffect(() => {
     if (!mapElementRef.current) return;
@@ -66,9 +71,20 @@ const MapView = () => {
       }),
     });
 
+    const initialWindLayer = new WindLayer(windData, {
+      forceRender: false,
+      windOptions: {
+        velocityScale: 1 / 100,
+        paths: 5000,
+        colorScale: (velocity: number) => "#C71585",
+        width: 3,
+        generateParticleOption: false,
+      },
+    });
+
     const initialMap = new Map({
       target: mapElementRef.current,
-      layers: [initialOsmLayer, initialVectorLayer],
+      layers: [initialOsmLayer, initialVectorLayer, initialWindLayer],
       view: new View({
         center: fromLonLat([107, 3.5]),
         zoom: 6,
@@ -79,14 +95,16 @@ const MapView = () => {
     setMap(initialMap);
     setOsmLayer(initialOsmLayer);
     setVectorLayer(initialVectorLayer);
+    setWindLayer(initialWindLayer);
 
     return () => initialMap.setTarget(undefined);
-  }, []);
+  }, [windData]);
 
   useEffect(() => {
     if (osmLayer) osmLayer.setVisible(layersVisible.osm);
     if (vectorLayer) vectorLayer.setVisible(layersVisible.vector);
-  }, [layersVisible, osmLayer, vectorLayer]);
+    if (windLayer) windLayer.setVisible(layersVisible.wind);
+  }, [layersVisible, osmLayer, vectorLayer, windLayer]);
 
   const toggleSidebar = () => {
     setSidebarExpanded(!sidebarExpanded);
@@ -99,6 +117,8 @@ const MapView = () => {
         sidebarExpanded={sidebarExpanded}
         layersVisible={layersVisible}
         setLayersVisible={setLayersVisible}
+        windData={windData}
+        setWindData={setWindData}
       />
       <div
         ref={mapElementRef}

app/components/Sidebar.tsx

@@ -1,20 +1,47 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 
 type SidebarProps = {
   toggleSidebar: () => void;
   sidebarExpanded: boolean;
-  layersVisible: { osm: boolean; vector: boolean };
+  layersVisible: { osm: boolean; vector: boolean; wind: boolean };
   setLayersVisible: React.Dispatch<
-    React.SetStateAction<{ osm: boolean; vector: boolean }>
+    React.SetStateAction<{ osm: boolean; vector: boolean; wind: boolean }>
   >;
+  windData: any;
+  setWindData: React.Dispatch<React.SetStateAction<any>>;
 };
 
 const Sidebar: React.FC<SidebarProps> = ({
   toggleSidebar,
   sidebarExpanded,
   layersVisible,
   setLayersVisible,
+  windData,
+  setWindData,
 }) => {
+  useEffect(() => {
+    if (layersVisible.wind && !windData) {
+      fetchWindData();
+    }
+  }, [layersVisible.wind]);
+
+  const fetchWindData = async () => {
+    try {
+      const response = await fetch(`api/windy`);
+      const data = await response.json();
+      setWindData(data);
+    } catch (error) {
+      console.error("Error fetching wind data:", error);
+    }
+  };
+
+  const handleWindLayerToggle = () => {
+    setLayersVisible((prev) => ({ ...prev, wind: !prev.wind }));
+    if (!layersVisible.wind && !windData) {
+      fetchWindData();
+    }
+  };
+
   return (
     <div>
       <button
@@ -83,6 +110,21 @@ const Sidebar: React.FC<SidebarProps> = ({
                   className="toggle-checkbox"
                 />
               </div>
+              <div className="flex items-center justify-between">
+                <label
+                  htmlFor="wind-toggle"
+                  className="text-sm font-medium text-gray-700"
+                >
+                  Wind Layer
+                </label>
+                <input
+                  id="wind-toggle"
+                  type="checkbox"
+                  checked={layersVisible.wind}
+                  onChange={handleWindLayerToggle}
+                  className="toggle-checkbox"
+                />
+              </div>
             </div>
           </div>
         )}