pushing updates

nemac · Sep 16, 2024 · cc397f8 · cc397f8
1 parent 31f5d84
commit cc397f8
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 57 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -36,14 +36,14 @@ function App() {
   const [ndviDataSubset, setNdviDataSubset] = useState([]);
   const [showGraph, setShowGraph] = useState(false);
   const [popupPosition, setPopupPosition] = useState(null);
-  const [changeProduct, setChangeProduct] = useState(config.wmsLayers['Net Ecological 3 Year']);
-  const [mask, setMask] = useState(config.masks['MaskForForest']);
-  const [overlay, setOverlay] = useState(config.vectorLayers['Tropical Cyclone Lines Since 1980']);
+  const [changeProduct, setChangeProduct] = useState(config.wmsLayers['FW3 1 year']);
+  const [mask, setMask] = useState(config.masks['NoMask']);
+  const [overlay, setOverlay] = useState(config.vectorLayers['modis-fire-2022']);
   const [basemap, setBasemap] = useState(config.basemaps['ArcGIS Imagery']);
   const [availableLayers, setAvailableLayers] = useState([]);
   const [activeLayerIndex, setActiveLayerIndex] = useState(0);
-  const [startDate, setStartDate] = useState(dayjs('2017-01-01'));
-  const [endDate, setEndDate] = useState(dayjs('2018-01-01'));
+  const [startDate, setStartDate] = useState(dayjs('2024-07-01'));
+  const [endDate, setEndDate] = useState(dayjs('2024-09-01'));
   const [isPlaying, setIsPlaying] = useState(false);
   const [playSpeed, setPlaySpeed] = useState(config.playSpeeds['2x']);
   const [unFilteredLayers, setUnfilteredLayers] = useState([]);
@@ -332,7 +332,7 @@ function App() {
         sx={{ height: '100%', width: '100%' }}
       >
         <Box sx={{ height: '100vh', display: 'flex', flexDirection: 'column' }}>
-          <Box sx={{ height: '100%', transition: 'flex 0.3s ease-in-out' }}>
+          <Box sx={{ height: '80%', transition: 'flex 0.3s ease-in-out' }}>
             <StyledMapContainer
               ref={setMap}
               id="map-container"
@@ -343,18 +343,29 @@ function App() {
                 rel="stylesheet"
                 href="https://unpkg.com/leaflet@latest/dist/leaflet.css"
               />
-              {/*{availableLayers.map((layer, index) => (*/}
-              {/*  <WMSTileLayer*/}
-              {/*    key={layer + mask.name}*/}
-              {/*    url={changeProduct.url}*/}
-              {/*    layers={layer}*/}
-              {/*    format="image/png"*/}
-              {/*    transparent={true}*/}
-              {/*    uppercase={true}*/}
-              {/*    mask={mask.name}*/}
-              {/*    opacity={index === activeLayerIndex ? 1 : 0}*/}
-              {/*  />*/}
-              {/*))}*/}
+              <WMSTileLayer
+                key={overlay.name}
+                url={overlay.url}
+                layers={overlay.layerName}
+                format="image/png"
+                transparent={true}
+                uppercase={true}
+                opacity={100}
+                zIndex={100}
+                // time={'2022-01-01 00:00:00/2023-12-31 00:00:00'}
+              />
+              {availableLayers.map((layer, index) => (
+                <WMSTileLayer
+                  key={layer + mask.name}
+                  url={changeProduct.url}
+                  layers={layer}
+                  format="image/png"
+                  transparent={true}
+                  uppercase={true}
+                  mask={mask.name}
+                  opacity={index === activeLayerIndex ? 1 : 0}
+                />
+              ))}
               {/*<WMSTileLayer*/}
               {/*  key={availableLayers[activeLayerIndex] + mask}*/}
               {/*  url={changeProduct.url}*/}
@@ -364,15 +375,6 @@ function App() {
               {/*  uppercase={true}*/}
               {/*  mask={mask.name}*/}
               {/*/>*/}
-              {/*<WMSTileLayer*/}
-              {/*  key={overlay.name}*/}
-              {/*  url={overlay.url}*/}
-              {/*  layers={overlay.layerName}*/}
-              {/*  format="image/png"*/}
-              {/*  transparent={true}*/}
-              {/*  uppercase={true}*/}
-              {/*  time={'2022-01-01 00:00:00/2023-12-31 00:00:00'}*/}
-              {/*/>*/}
               {/*<div className="leaflet-top leaflet-left" style={{ top: '90px' }}>*/}
               {/*  <div className="leaflet-control leaflet-bar">*/}
               {/*    <NdviChartButton />*/}
@@ -399,15 +401,15 @@ function App() {
                 name={basemap.basemap}
                 token={config.agolApiKey}
               />
-              <NDVIButtonWrapper
-                popupPosition={popupPosition}
-                startDate={startDate}
-                endDate={endDate}
-                setPopupPosition={setPopupPosition}
-                setShowGraph={setShowGraph}
-                setNdviData={setNdviData}
-                setNdviDataSubset={setNdviDataSubset}
-              />
+              {/*<NDVIButtonWrapper*/}
+              {/*  popupPosition={popupPosition}*/}
+              {/*  startDate={startDate}*/}
+              {/*  endDate={endDate}*/}
+              {/*  setPopupPosition={setPopupPosition}*/}
+              {/*  setShowGraph={setShowGraph}*/}
+              {/*  setNdviData={setNdviData}*/}
+              {/*  setNdviDataSubset={setNdviDataSubset}*/}
+              {/*/>*/}
               {showGraph && <Marker position={popupPosition} />}
             </StyledMapContainer>
           </Box>

diff --git a/src/components/NDVIChart.jsx b/src/components/NDVIChart.jsx
@@ -6,32 +6,30 @@ const NDVIChart = (props) => {
   const [dotsData, setDotsData] = useState([{ x: 0, y: 0 }]);
   const [activeDotPosition, setActiveDotPosition] = useState({ x: 0, y: 0 });
 
-  // if (activeDotPosition != dotsData[activeLayerIndex]) {
-  //   setActiveDotPosition(dotsData[activeLayerIndex]);
-  // }
-
-  useEffect(() => {
+  if (activeDotPosition != dotsData[activeLayerIndex]) {
     setActiveDotPosition(dotsData[activeLayerIndex]);
-  }, [activeLayerIndex]);
+  }
+
+  // useEffect(() => {
+  //   setActiveDotPosition(dotsData[activeLayerIndex]);
+  // }, [activeLayerIndex]);
 
   const getDotsData = () => {
     const dotsList = [];
     const dots = document.querySelectorAll('.recharts-dot');
     if (dots.length) {
       Array.from(dots).map((item) => {
-        dotsList.push({ x: item.getAttribute('cx'), y: item.getAttribute('cy') });
+        dotsList.push({ x: parseInt(item.getAttribute('cx'), 10) * -1, y: parseInt(item.getAttribute('cy'), 10) * -1 });
       });
       setDotsData(dotsList);
-      console.log('animation End');
     }
   };
 
   const CustomTooltip = ({ active, payload, label }) => {
     if (active && payload && payload.length) {
-      console.log(payload);
       return (
         <div className="custom-tooltip">
-          <p className="label">{`${data[activeLayerIndex].name} : ${data[activeLayerIndex].ndvi}`}</p>
+          <p className="label">NDVI : {data[activeLayerIndex].ndvi}</p>
         </div>
       );
     }
@@ -53,7 +51,7 @@ const NDVIChart = (props) => {
           cursor={false}
           isAnimationActive={true}
           active={true}
-          position={{ x: 0 - -1 * activeDotPosition.x, y: -50 - -1 * activeDotPosition.y }}
+          position={{ x: 0 - dotsData[activeLayerIndex].x, y: 0 - dotsData[activeLayerIndex].y }}
         />
         <Legend />
         <Line

diff --git a/src/config.js b/src/config.js
@@ -1,11 +1,10 @@
-const wmsUrl = 'https://mapserver.nemac.org/?map=/etc/mapserver/ecs_test_map_files/';
-const wmsUrlFull = 'https://mapserver.nemac.org/?map=/etc/mapserver/ecs_test_map_files/mapserver.map';
+const wmsUrlNemac = 'https://mapserver.nemac.org/?map=/etc/mapserver/ecs_test_map_files/';
+const wmsUrl = 'https://fswms-dev.nemac.org/forwarn3?MAPFILE=';
 export const config = {
   wmsUrl: wmsUrl,
-  wmsUrlFull: wmsUrlFull,
   agolApiKey: 'AAPK961d021a9f344f7c95eaadbeb6c6f39ajXC7QTZMufrPPCzqo0NN_ta6FKKzOb8GDutDr1ipDWZMVMPT-Mgy4CNcnKIXJTdu',
-  mapCenter: [36.9517, -82.4588],
-  mapZoom: 7,
+  mapCenter: [34.87, -83.4],
+  mapZoom: 12,
   projectName: 'New FCAV',
   playSpeeds: {
     // in milliseconds
@@ -16,7 +15,7 @@ export const config = {
   wmsLayers: {
     'FW3 1 year': {
       name: 'FW3 1 year',
-      url: wmsUrl.concat('forwarn3_products_1yr.map'),
+      url: wmsUrl.concat('forwarn3_products_1yr'),
       layer_regex: /^forwarn3_products_1yr_(\d{4})(\d{2})(\d{2})$/,
     },
     forwarn3_products_1yr: {
@@ -123,22 +122,27 @@ export const config = {
   vectorLayers: {
     'Current Large Incidents': {
       name: 'Current Large Incidents',
-      url: wmsUrl.concat('fire.map'),
+      url: wmsUrlNemac.concat('fire.map'),
       layerName: 'Current-Large-incidents',
     },
+    'modis-fire-2022': {
+      name: 'modis-fire-2022',
+      url: wmsUrlNemac.concat('fire.map'),
+      layerName: 'modis-fire-2022',
+    },
     'Tropical Cyclone Lines 2022': {
       name: 'Tropical Cyclone Lines 2022',
-      url: wmsUrl.concat('vlayers.map'),
+      url: wmsUrlNemac.concat('vlayers.map'),
       layerName: 'tropical_cyclone_lines_2022',
     },
     'Tropical Cyclone Lines 2023': {
       name: 'Tropical Cyclone Lines 2023',
-      url: wmsUrl.concat('vlayers.map'),
+      url: wmsUrlNemac.concat('vlayers.map'),
       layerName: 'tropical_cyclone_lines_2023',
     },
     'Tropical Cyclone Lines Since 1980': {
       name: 'Tropical Cyclone Lines Since 1980',
-      url: wmsUrl.concat('vector_map_files/tropical_cyclone_lines.map'),
+      url: wmsUrlNemac.concat('vector_map_files/tropical_cyclone_lines.map'),
       layerName: 'tropical_cyclone_lines_since_1980',
     },
   },

diff --git a/vite.config.js b/vite.config.js
@@ -5,4 +5,7 @@ import react from '@vitejs/plugin-react';
 export default defineConfig({
   base: '/fcav-lite',
   plugins: [react()],
+  build: {
+    minify: false,
+  },
 });