-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
957ff30
commit 1a6565b
Showing
18 changed files
with
1,343 additions
and
513 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,37 +1,35 @@ | ||
| import * as React from 'react'; | ||
| import * as ReactDom from "react-dom"; | ||
| import 'leaflet/dist/leaflet.css'; | ||
| import './App.css'; | ||
| import {createBrowserRouter, | ||
| RouterProvider, | ||
| } from "react-router-dom"; | ||
|
|
||
| import Home from "./pages/HomePage" | ||
| import Visualization from "./pages/Visualization" | ||
| import Profile from "./pages/Profile" | ||
| import AboutUs from './pages/AboutUs'; | ||
| import * as React from "react"; | ||
| import "leaflet/dist/leaflet.css"; | ||
| import "./App.css"; | ||
| import { createBrowserRouter, RouterProvider } from "react-router-dom"; | ||
|
|
||
| import Home from "./pages/HomePage"; | ||
| import Visualization from "./pages/Visualization"; | ||
| import Profile from "./pages/Profile"; | ||
| import AboutUs from "./pages/AboutUs"; | ||
|
|
||
| const router = createBrowserRouter([ | ||
| { | ||
| path: "/", | ||
| element: <Home />, | ||
| }, | ||
| { | ||
| path: "/AboutUs" , | ||
| element: <AboutUs /> | ||
| }, | ||
| path: "/AboutUs", | ||
| element: <AboutUs />, | ||
| }, | ||
| { | ||
| path: "/Visualization" , | ||
| element: <Visualization /> | ||
| path: "/Visualization", | ||
| element: <Visualization />, | ||
| }, | ||
| { | ||
| path: "/Profile" , | ||
| element: <Profile /> | ||
| } | ||
| ]) | ||
| path: "/Services", | ||
| element: <AboutUs />, | ||
| }, | ||
| { | ||
| path: "/Profile", | ||
| element: <Profile />, | ||
| }, | ||
| ]); | ||
| export default function App() { | ||
| return ( | ||
| <RouterProvider router={router} /> | ||
| ); | ||
| } | ||
| return <RouterProvider router={router} />; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,46 +1,55 @@ | ||
| import React, { useState, useEffect } from 'react'; | ||
| // Don't need keyboard alternatives for mouse click events | ||
| /* eslint-disable jsx-a11y/click-events-have-key-events */ | ||
| import React, { useState, useEffect } from "react"; | ||
| import "../assets/css/dropdown.css"; | ||
|
|
||
| interface DropdownProps { | ||
| options: String[], | ||
| selected: String, | ||
| setSelected: (value: String)=>void | ||
| }; | ||
| options: string[]; | ||
| selected: string; | ||
| setSelected: (value: string) => void; | ||
| } | ||
|
|
||
| export default function Dropdown(props: DropdownProps) { | ||
| const [open, setOpen] = useState<boolean>(false) | ||
| const [open, setOpen] = useState<boolean>(false); | ||
|
|
||
| // i don't know what type event should be | ||
| const handleOpen = (e: { stopPropagation: () => void; }) => { | ||
| e.stopPropagation(); | ||
| setOpen(() => !open) | ||
| } | ||
| // i don't know what type event should be | ||
| const handleOpen = (event: { stopPropagation: () => void }) => { | ||
| event.stopPropagation(); | ||
| setOpen(() => !open); | ||
| }; | ||
|
|
||
| const handleSelectOption = (value: String) => { | ||
| props.setSelected(value); | ||
| setOpen(false); | ||
| } | ||
| const handleSelectOption = (value: string) => { | ||
| props.setSelected(value); | ||
| setOpen(false); | ||
| }; | ||
|
|
||
| // close the menu whenever we click outside | ||
| useEffect(() => { | ||
| const handler = () => setOpen(false); | ||
| window.addEventListener("click", handler); | ||
| // close the menu whenever we click outside | ||
| useEffect(() => { | ||
| const handler = () => setOpen(false); | ||
| window.addEventListener("click", handler); | ||
|
|
||
| return () => { | ||
| window.removeEventListener("click", handler); | ||
| } | ||
| }) | ||
| return () => { | ||
| window.removeEventListener("click", handler); | ||
| }; | ||
| }); | ||
|
|
||
| return ( | ||
| <div className='dropdown'> | ||
| <div className='dropdown-button' onClick={handleOpen}>{props.selected}</div> | ||
| {open && <div className='dropdown-options'> | ||
| {React.Children.map(props.options, (option) => ( | ||
| <div className='dropdown-option' onClick={() => handleSelectOption(option)}> | ||
| {option} | ||
| </div> | ||
| ))} | ||
| </div>} | ||
| return ( | ||
| <div className="dropdown"> | ||
| <div className="dropdown-button" onClick={handleOpen}> | ||
| {props.selected} | ||
| </div> | ||
| {open && ( | ||
| <div className="dropdown-options"> | ||
| {React.Children.map(props.options, (option) => ( | ||
| <div | ||
| className="dropdown-option" | ||
| onClick={() => handleSelectOption(option)} | ||
| > | ||
| {option} | ||
| </div> | ||
| ))} | ||
| </div> | ||
| ) | ||
| } | ||
| )} | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,59 +1,52 @@ | ||
| import { | ||
| MapContainer, | ||
| TileLayer, | ||
| LayersControl, | ||
| useMap, | ||
| Polygon, | ||
| GeoJSON, | ||
| } from 'react-leaflet'; | ||
| import { GeoJsonObject } from 'geojson' | ||
| import mapData from "./Classify.json" | ||
| import React from 'react'; | ||
| const center = [40.63463151377654, -97.89969605983609]; | ||
| import { MapContainer, TileLayer, LayersControl, GeoJSON } from "react-leaflet"; | ||
| import { GeoJsonObject } from "geojson"; | ||
| import React from "react"; | ||
|
|
||
| import mapData from "./Classify.json"; | ||
|
|
||
| const { BaseLayer } = LayersControl; | ||
| export default function LeafletMap() { | ||
| return ( | ||
| <div> | ||
| <MapContainer | ||
| center={[18.173094, -77.318759]} | ||
| zoom={10} | ||
| style={{ width: '50vw', height: '60vh', marginLeft:'25vw'}} | ||
| className="map" | ||
| > | ||
| <GeoJSON | ||
| data={{ | ||
| type: "FeatureCollection", | ||
| features: mapData.features | ||
| } as GeoJsonObject } | ||
| /> | ||
| <LayersControl> | ||
| <BaseLayer checked name="OpenStreetMap"> | ||
| return ( | ||
| <> | ||
| <MapContainer | ||
| center={[18.173094, -77.318759]} | ||
| zoom={10} | ||
| style={{ width: "50vw", height: "60vh", marginLeft: "25vw" }} | ||
| className="map" | ||
| > | ||
| <GeoJSON | ||
| data={ | ||
| { | ||
| type: "FeatureCollection", | ||
| features: mapData.features, | ||
| } as GeoJsonObject | ||
| } | ||
| /> | ||
| <LayersControl> | ||
| <BaseLayer checked name="OpenStreetMap"> | ||
| <TileLayer | ||
| attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' | ||
| url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" | ||
| /> | ||
| </BaseLayer> | ||
| <BaseLayer name="Topography"> | ||
| </BaseLayer> | ||
| <BaseLayer name="Topography"> | ||
| <TileLayer | ||
| attribution='Map data: © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, <a href="http://viewfinderpanoramas.org">SRTM</a> | Map style: © <a href="https://opentopomap.org">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)' | ||
| url='https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png' | ||
| url="https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png" | ||
| /> | ||
| </BaseLayer> | ||
| <BaseLayer name="Background Imagery"> | ||
| </BaseLayer> | ||
| <BaseLayer name="Background Imagery"> | ||
| <TileLayer | ||
| attribution='Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community' | ||
| url='https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}' | ||
| attribution="Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community" | ||
| url="https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}" | ||
| /> | ||
| </BaseLayer> | ||
| </LayersControl> | ||
| {/* | ||
| <Marker position={[51.505, -0.09]}> | ||
| <Popup> | ||
| A pretty CSS3 popup. <br /> Easily customizable. | ||
| </Popup> | ||
| </Marker> */} | ||
| </MapContainer> | ||
| <button style={{marginLeft:"67vw", fontSize:"1.5vw"}}>Download</button> | ||
| </div> | ||
| ) | ||
| } | ||
| </BaseLayer> | ||
| </LayersControl> | ||
| </MapContainer> | ||
| {/* eslint-disable-next-line @shopify/jsx-no-hardcoded-content*/} | ||
| <button type="submit" style={{ marginLeft: "67vw", fontSize: "1.5vw" }}> | ||
| Download | ||
| </button> | ||
| </> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,44 +1,52 @@ | ||
| import React, { useState } from "react"; | ||
| import '../assets/css/MenuBar.css'; | ||
| /* eslint-disable @shopify/jsx-no-hardcoded-content */ | ||
| import React from "react"; | ||
| import "../assets/css/MenuBar.css"; | ||
| import { useAuth0 } from "@auth0/auth0-react"; | ||
|
|
||
| import { LogoutButton } from "./logout-button"; | ||
| import { LoginButton } from "./login-button"; | ||
|
|
||
| export const MenuBar = () => { | ||
| const { isAuthenticated } = useAuth0(); | ||
|
|
||
| return ( | ||
| <div className="nav"> | ||
| <div className="container"> | ||
| <div className="logo"> | ||
| <a href="/">Mangrove Monitoring</a> | ||
| </div> | ||
| <div id="mainListDiv" className="main_list"> | ||
| <ul className="navlinks"> | ||
| <li><a href="/AboutUs">About Us</a></li> | ||
| <li><a href="/Visualization">Visualization</a></li> | ||
| <li><a href="#">Services</a></li> | ||
| <li><a href="/Profile">Profile</a></li> | ||
| {!isAuthenticated && ( | ||
| <> | ||
| <LoginButton /> | ||
| </> | ||
| )} | ||
| {isAuthenticated && ( | ||
| <> | ||
| <LogoutButton /> | ||
| </> | ||
| )} | ||
| export const MenuBar = () => { | ||
| const { isAuthenticated } = useAuth0(); | ||
|
|
||
| </ul> | ||
| </div> | ||
| <span className="navTrigger"> | ||
| <i></i> | ||
| <i></i> | ||
| <i></i> | ||
| </span> | ||
| </div> | ||
| return ( | ||
| <div className="nav"> | ||
| <div className="container"> | ||
| <div className="logo"> | ||
| <a href="/">Mangrove Monitoring</a> | ||
| </div> | ||
| ); | ||
|
|
||
| } | ||
| <div id="mainListDiv" className="main_list"> | ||
| <ul className="navlinks"> | ||
| <li> | ||
| <a href="/AboutUs">About Us</a> | ||
| </li> | ||
| <li> | ||
| <a href="/Visualization">Visualization</a> | ||
| </li> | ||
| <li> | ||
| <a href="Services">Services</a> | ||
| </li> | ||
| <li> | ||
| <a href="/Profile">Profile</a> | ||
| </li> | ||
| {!isAuthenticated && ( | ||
| <> | ||
| <LoginButton /> | ||
| </> | ||
| )} | ||
| {isAuthenticated && ( | ||
| <> | ||
| <LogoutButton /> | ||
| </> | ||
| )} | ||
| </ul> | ||
| </div> | ||
| <span className="navTrigger"> | ||
| <i /> | ||
| <i /> | ||
| <i /> | ||
| </span> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; |
Oops, something went wrong.