Skip to content

Commit

Permalink
some updates for now
Browse files Browse the repository at this point in the history
  • Loading branch information
jeffbliss committed Mar 5, 2024
1 parent 933f640 commit 72f8b65
Show file tree
Hide file tree
Showing 15 changed files with 1,613 additions and 182 deletions.
1 change: 1 addition & 0 deletions .eslintrc.cjs
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ module.exports = {
'plugin:react/recommended',
'plugin:react/jsx-runtime',
'plugin:react-hooks/recommended',
'prettier'
],
ignorePatterns: ['dist', '.eslintrc.cjs'],
parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
Expand Down
4 changes: 2 additions & 2 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<link rel="icon" type="image/svg+xml+png" href="favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title>
<title>New FCAV</title>
</head>
<body>
<div id="root"></div>
Expand Down
1,369 changes: 1,330 additions & 39 deletions package-lock.json

Large diffs are not rendered by default.

17 changes: 16 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,18 @@
"preview": "vite preview"
},
"dependencies": {
"@emotion/react": "^11.11.4",
"@emotion/styled": "^11.11.0",
"@mui/material": "^5.15.11",
"@mui/system": "^5.15.11",
"esri-leaflet": "^3.0.12",
"esri-leaflet-vector": "^4.2.3",
"leaflet": "^1.9.4",
"prettier": "^3.2.5",
"react": "^18.2.0",
"react-dom": "^18.2.0"
"react-dom": "^18.2.0",
"react-esri-leaflet": "^2.0.1",
"react-leaflet": "^4.2.1"
},
"devDependencies": {
"@types/react": "^18.2.56",
Expand All @@ -22,5 +32,10 @@
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.5",
"vite": "^5.1.4"
},
"overrides": {
"react-esri-leaflet": {
"esri-leaflet-vector": "$esri-leaflet-vector"
}
}
}
42 changes: 0 additions & 42 deletions src/App.css

This file was deleted.

48 changes: 20 additions & 28 deletions src/App.jsx
Original file line number Diff line number Diff line change
@@ -1,34 +1,26 @@
import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import React, { useState } from 'react'
import Box from '@mui/material/Box';
import Grid from '@mui/material/Grid';
import Layer from './components/Layer';
import ReactLeafletMap from './components/ReactLeafletMap';
import { findMostRecentLayerDate } from './utils';
import { config } from './config';

function App() {
const [count, setCount] = useState(0)

const [selectedLayer, setSelectedLayer] = React.useState('');
const [selectedDate, setSelectedDate] = React.useState('20231226'); // TODO: Change this hardcoded
return (
<>
<div>
<a href="https://vitejs.dev" target="_blank">
<img src={viteLogo} className="logo" alt="Vite logo" />
</a>
<a href="https://react.dev" target="_blank">
<img src={reactLogo} className="logo react" alt="React logo" />
</a>
</div>
<h1>Vite + React</h1>
<div className="card">
<button onClick={() => setCount((count) => count + 1)}>
count is {count}
</button>
<p>
Edit <code>src/App.jsx</code> and save to test HMR
</p>
</div>
<p className="read-the-docs">
Click on the Vite and React logos to learn more
</p>
</>
<Box>
<Grid>
<Layer
selectedLayer={selectedLayer}
setSelectedLayer={setSelectedLayer}
/>
</Grid>
<ReactLeafletMap
selectedLayer={selectedLayer}
/>
</Box>
)
}

Expand Down
Binary file added src/assets/favicon.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 0 additions & 1 deletion src/assets/react.svg

This file was deleted.

14 changes: 14 additions & 0 deletions src/components/BaseMap.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import L from "leaflet";
import 'esri-leaflet';
import { vectorBasemapLayer } from "esri-leaflet-vector";
import { useMap } from "react-leaflet";
import { config } from "../config";

export default function BaseMap(props) {
const map = useMap();
const apiKey = config.agolApiKey;
vectorBasemapLayer("arcgis/dark-gray", {
apikey: apiKey
}).addTo(map);
return null;
}
38 changes: 38 additions & 0 deletions src/components/Layer.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import * as React from 'react';
import Box from '@mui/material/Box';
import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@mui/material/MenuItem';
import FormControl from '@mui/material/FormControl';
import Select from '@mui/material/Select';
import { config } from '../config';

export default function BasicSelect(props) {
const { selectedLayer, setSelectedLayer } = props;

const handleChange = (event) => {
layer = event.target.value;
layer.layer = layer.layer.concat('currentMaskForForest');
setSelectedLayer(layer);
};

return (
<Box sx={{ minWidth: 120 }}>
<FormControl fullWidth>
<InputLabel id="demo-simple-select-label">Select Layer</InputLabel>
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
value={selectedLayer}
label="Layer"
onChange={handleChange}
>
{config.wmsLayers.map((layer, index) => (
<MenuItem key={index} value={layer}>
{layer.name}
</MenuItem>
))}
</Select>
</FormControl>
</Box>
);
}
43 changes: 43 additions & 0 deletions src/components/reactLeafletMap.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
import React, { useState } from "react";
import { MapContainer, WMSTileLayer } from "react-leaflet";
import L from "leaflet";
import { styled } from "@mui/system";
import BaseMap from "./BaseMap";
import { config } from "../config";
import VectorBasemapLayer from "react-esri-leaflet/plugins/VectorBasemapLayer";

export const StyledMapContainer = styled(MapContainer)(({ theme }) => ({
height: "800px",
}));

export default function ReactLeafletMap(props) {
const { selectedLayer } = props;

return (
<StyledMapContainer
center={config.mapCenter}
zoom={config.mapZoom}
>
<link
rel="stylesheet"
href="https://unpkg.com/leaflet@latest/dist/leaflet.css"
/>
<link
rel="stylesheet"
href="https://unpkg.com/esri-leaflet-geocoder/dist/esri-leaflet-geocoder.css"
/>
{selectedLayer && (
<WMSTileLayer
key={selectedLayer.layer}
url={selectedLayer.url}
layers={selectedLayer.layer}
format="image/png"
transparent={true}
uppercase={true}
opacity={1}
/>
)}
<VectorBasemapLayer name="arcgis/dark-gray" token={config.agolApiKey} />
</StyledMapContainer>
)
}
129 changes: 129 additions & 0 deletions src/config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,129 @@
import { isLeapYear } from './utils'

const wmsBaseUrl = 'https://fswms.nemac.org/'
const date = new Date();
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0'); // Months are 0-based in JavaScript
const day = String(date.getDate()).padStart(2, '0');

export const config = {
agolApiKey: 'AAPK961d021a9f344f7c95eaadbeb6c6f39ajXC7QTZMufrPPCzqo0NN_ta6FKKzOb8GDutDr1ipDWZMVMPT-Mgy4CNcnKIXJTdu',
mapCenter: [37.0902, -95.7129],
mapZoom: 6,
projectName: 'New FCAV',
monthDay: `${month}${day}`, // current month and day
yearMonthDay: `${year}${month}${day}`, // current year, month, and day
leapYear: isLeapYear(year), // checks if leap year
dateStart: '0103',
nonLeapYearDays: [
'0108',
'0116',
'0124',
'0201',
'0209',
'0217',
'0225',
'0305',
'0313',
'0321',
'0329',
'0406',
'0414',
'0422',
'0430',
'0508',
'0516',
'0524',
'0601',
'0609',
'0617',
'0625',
'0703',
'0711',
'0719',
'0727',
'0804',
'0812',
'0820',
'0828',
'0905',
'0913',
'0921',
'0929',
'1007',
'1015',
'1023',
'1031',
'1108',
'1116',
'1124',
'1202',
'1210',
'1218',
'1226',
],
leapYearDays: [
'0108',
'0116',
'0124',
'0201',
'0209',
'0217',
'0225',
'0304',
'0312',
'0320',
'0328',
'0405',
'0413',
'0421',
'0429',
'0507',
'0515',
'0523',
'0531',
'0608',
'0616',
'0624',
'0702',
'0710',
'0718',
'0726',
'0803',
'0811',
'0819',
'0827',
'0904',
'0912',
'0920',
'0928',
'1006',
'1014',
'1022',
'1030',
'1107',
'1115',
'1123',
'1201',
'1209',
'1217',
'1225',
],
wmsLayers: [
{
name: 'From Seasonal Progress Adaptive Baseline "Normal',
url: wmsBaseUrl.concat('forwarn3'),
layer: `FW3_adaptivebaseline_allyr_`,
dayStart:'0108',
yearStart: '2021'
},
{
name: 'Early Detect From 8-day Two-Year Maximum Baseline "Normal',
url: wmsBaseUrl.concat('forwarn3'),
layer: 'FW3_ED_',
dayStart:'0108',
yearStart: '2021'
}

]
}
Loading

0 comments on commit 72f8b65

Please sign in to comment.