({
+ run: false,
+ steps: [
+ {
+ content: (
+
+
Bienvenido a la Simulación de Inundaciones
+
+ Esta aplicación es una herramienta para simular una posible
+ inundación en la ciudad de La Plata
+
+
+
Primero, un recorrido por la aplicación
+
+ Te guiaremos por las distintas herramientas que tenemos para que
+ puedas usarlas de la mejor manera.
+
+
+ En cualquier momento puedes clickear la X
+ para pausar la explicación y continuar luego.
+
+
+ También puedes omitirlo completamente presionando Saltar .
+
+
+
Simulador de altura de agua
+
Cambiando este valor se indica la cantidad de metros
+ de agua que hay luego de las lluvias.
+ En el mapa se reflejará una representación del nivel del agua
+ que podría llegar a acumularse en las calles.
+
+
+
También se pueden utilizar estos controles para cambiar el valor.
+
+
Buscar una dirección
+
Para acceder a una dirección mediante la calle y el número.
+
+
+
Condiciones archivadas
+
Podrás visualizar cómo fué la situación en varios
+ sucesos históricos.
+
+
+
Configuraciones personalizadas
+
Aquí podrás cambiar algunos ajustes para personalizar tu
+ experiencia.
+
+
+
Acerca de nosotros
+
Aquí obtendrás más información sobre el proyecto. También podrás
+ reiniciar este recorrido.
+
+
+
Acceder a tu ubicación
+
Este botón sirve para centrar el mapa en la ubicación de éste
+ dispositivo.
+
+
) => {
+ event.preventDefault();
+
+ setState({
+ run: true,
+ });
+ toggle();
+ };
+
+
+
+ const handleJoyrideCallback = (data: CallBackProps) => {
+ const { status, type } = data;
+ const finishedStatuses: string[] = [STATUS.FINISHED, STATUS.SKIPPED];
+
+ if (finishedStatuses.includes(status)) {
+ setState({ run: false });
+ }
+
+ logGroup(type, data);
+
+ };
+
+ const theme = useTheme();
+
+ return (
+
+
+ Volver a hacer el tour
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/Map/Mapita.tsx b/src/components/Map/Mapita.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..c43b649031eef9b62b537c41585b3eaaa2e6a935
--- /dev/null
+++ b/src/components/Map/Mapita.tsx
@@ -0,0 +1,191 @@
+import MapGL, { Source, Layer, GeolocateControl, MapRef } from 'react-map-gl';
+// @ts-ignore (typescript)
+import VerticalSlider from './components/verticalSider/VerticalSlider';
+import 'mapbox-gl/dist/mapbox-gl.css'
+import React, { useState, useRef, useCallback } from "react";
+// @ts-ignore (typescript)
+import MapboxGeocoder from '@mapbox/mapbox-gl-geocoder';
+import { MAPBOX_TOKEN, MAP_STYLE_DARK, MAP_STYLE_LIGHT, MAX_WATER_HEIGHT } from 'config/Constant';
+import type { SkyLayer, FillExtrusionLayer } from 'react-map-gl';
+import { useTheme } from '@mui/material';
+import { isMobile } from "react-device-detect";
+
+export default function Mapita() {
+ const [selectedM, selectM] = useState(0);
+
+ const skyLayer: SkyLayer = {
+ id: 'sky',
+ type: 'sky',
+ paint: {
+ 'sky-type': 'atmosphere',
+ 'sky-atmosphere-sun': [0.0, 0.0],
+ 'sky-atmosphere-sun-intensity': 15
+ }
+ };
+
+ const buildingLayer: FillExtrusionLayer = {
+ id: 'building',
+ type: 'fill-extrusion',
+ source: 'composite',
+ 'source-layer': 'building',
+ paint: {
+ 'fill-extrusion-color': '#000',
+ 'fill-extrusion-height': [
+ 'interpolate',
+ ['linear'],
+ ['zoom'],
+ 15,
+ 0,
+ 15.05,
+ ['get', 'height']
+ ],
+ 'fill-extrusion-base': [
+ 'interpolate',
+ ['linear'],
+ ['zoom'],
+ 15,
+ 0,
+ 15.05,
+ ['get', 'min_height']
+ ],
+ 'fill-extrusion-opacity': 0.6
+ }
+ };
+
+ const MAP_CENTER = [-57.95, -34.93]
+ const MAP_ZOOM = 13
+
+ // Crear cuatro puntos para un rectangulo desde el centro
+ // RECTANGLE = [ancho, alto]
+ // const RECTANGLE = [0.1, 0.05]
+ // const NORTH_BOUND = MAP_CENTER[1] + RECTANGLE[1]
+ // const SOUTH_BOUND = MAP_CENTER[1] - RECTANGLE[1]
+ // const EAST_BOUND = MAP_CENTER[0] + RECTANGLE[0]
+ // const WEST_BOUND = MAP_CENTER[0] - RECTANGLE[0]
+
+ // Si no, de esta forma se puede abarcar todo el globo:
+ const NORTH_BOUND = 90.0
+ const SOUTH_BOUND = -90.0
+ const EAST_BOUND = 180.0
+ const WEST_BOUND = -180.0
+
+
+ const mapRef = useRef();
+ // @ts-ignore (typescript)
+ //const mapGL = mapRef.getMap();
+ const bounds = mapRef.current;
+ const waterSquare = {
+ type: 'FeatureCollection',
+ features: [
+ {
+ type: 'Feature',
+ geometry: {
+ type: 'Polygon',
+ coordinates: [
+ [
+ [WEST_BOUND, NORTH_BOUND], [EAST_BOUND, NORTH_BOUND],
+ [EAST_BOUND, SOUTH_BOUND], [WEST_BOUND, SOUTH_BOUND],
+ [WEST_BOUND, NORTH_BOUND]
+ ]
+ ]
+ }
+ }
+ ]
+ };
+
+ const WATER_COLOR = '#75cff0';
+
+ function calculateWaterHeight(value: number) {
+ // Acá se calcularía la altura del agua,
+ // Por ahora se retorna el valor ajustado al máximo
+ let v = value - 5;
+ return v < 0 ? 0 : v;
+ }
+
+
+ function calculateWaterOpac(value: number) {
+ const max_opacity = 0.8;
+ // Ajusto el valor a una opacidad para que vaya subiendo cuadráticamente
+ // respecto del slider, hasta llegar a la mitad, donde toma la máxima opacidad
+ let threshold = MAX_WATER_HEIGHT / 4;
+ return (value < threshold ? Math.pow(value, 2) / Math.pow(threshold, 2) : 1) * max_opacity;
+ }
+
+ const waterLayer = {
+ id: 'waterLayer',
+ type: 'fill-extrusion',
+ paint: {
+ 'fill-extrusion-base': 0,
+ 'fill-extrusion-height': calculateWaterHeight(selectedM),
+ 'fill-extrusion-color': WATER_COLOR,
+ 'fill-extrusion-opacity': calculateWaterOpac(selectedM),
+ 'fill-extrusion-vertical-gradient': true
+ }
+ };
+
+ const geocoderContainerRef = useRef();
+ //const mapRef = useRef();
+ const theme = useTheme();
+
+ return (
+ <>
+
+
+ {// @ts-ignore (typescript)
+
+ }
+
+
+
+
+
+
+ { changeValue(true); }} variant="contained">
+
+
+
+ { changeValue(false); }} variant="contained">
+
+
+
+
+ );
+}
+
+export default React.memo(VerticalSlider);
diff --git a/src/components/Map/mapStyle.ts b/src/components/Map/mapStyle.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ba8248ff3c9d3c39e892f9ffcb22c0897c90c9d6
--- /dev/null
+++ b/src/components/Map/mapStyle.ts
@@ -0,0 +1,40 @@
+import type {HeatmapLayer} from 'react-map-gl';
+
+const MAX_ZOOM_LEVEL = 9;
+
+export const heatmapLayer: HeatmapLayer = {
+ id: 'heatmap',
+ maxzoom: MAX_ZOOM_LEVEL,
+ type: 'heatmap',
+ paint: {
+ // Increase the heatmap weight based on frequency and property magnitude
+ 'heatmap-weight': ['interpolate', ['linear'], ['get', 'mag'], 0, 0, 6, 1],
+ // Increase the heatmap color weight weight by zoom level
+ // heatmap-intensity is a multiplier on top of heatmap-weight
+ 'heatmap-intensity': ['interpolate', ['linear'], ['zoom'], 0, 1, MAX_ZOOM_LEVEL, 3],
+ // Color ramp for heatmap. Domain is 0 (low) to 1 (high).
+ // Begin color ramp at 0-stop with a 0-transparancy color
+ // to create a blur-like effect.
+ 'heatmap-color': [
+ 'interpolate',
+ ['linear'],
+ ['heatmap-density'],
+ 0,
+ 'rgba(33,102,172,0)',
+ 0.2,
+ 'rgb(103,169,207)',
+ 0.4,
+ 'rgb(209,229,240)',
+ 0.6,
+ 'rgb(253,219,199)',
+ 0.8,
+ 'rgb(239,138,98)',
+ 0.9,
+ 'rgb(255,201,101)'
+ ],
+ // Adjust the heatmap radius by zoom level
+ 'heatmap-radius': ['interpolate', ['linear'], ['zoom'], 0, 2, MAX_ZOOM_LEVEL, 20],
+ // Transition from heatmap to circle layer by zoom level
+ 'heatmap-opacity': ['interpolate', ['linear'], ['zoom'], 7, 1, 9, 0]
+ }
+};
\ No newline at end of file
diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..330e03f3f6e008cd022fb6bd08e1716976ff4854
--- /dev/null
+++ b/src/components/Menu/Menu.tsx
@@ -0,0 +1,203 @@
+import {
+ Button,
+ FormHelperText,
+ Grid,
+ Input,
+ InputLabel,
+ Switch,
+ Typography,
+ useTheme,
+} from "@mui/material";
+import { Box } from "@mui/system";
+import MenuModalButton from "components/MenuModalButton/MenuModalButton";
+import SettingsIcon from "@mui/icons-material/Settings";
+import QuestionMarkIcon from "@mui/icons-material/QuestionMark";
+import SearchIcon from "@mui/icons-material/Search";
+import MyLocationIcon from "@mui/icons-material/MyLocation";
+import DriveFileMoveIcon from "@mui/icons-material/DriveFileMove";
+import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
+import ArrowBackIcon from "@mui/icons-material/ArrowBack";
+import AddIcon from "@mui/icons-material/Add";
+import RemoveIcon from "@mui/icons-material/Remove";
+import { useContext } from "react";
+import { ThemeContext } from "context/ThemeContext";
+import { Link } from "react-router-dom";
+import BasicDemo from "../Demo/Demo";
+import { useState } from "react";
+import { getScreenSize } from "modules/helpers";
+import { isMobile } from "react-device-detect";
+import { ModalProvider } from "context/ModalContext";
+import MenuModalButtonContext from "components/MenuModalButton/MenuModalButtonContext";
+import useModalContext from "hooks/UseModalContext";
+import CondicionesArchivadas from "./components/CondicionesArchivadas";
+
+export default function Menu() {
+ const [breakpoint, setBreakpoint] = useState(getScreenSize());
+ const { toggleColorMode, incrementFontSize, decrementFontSize } =
+ useContext(ThemeContext);
+ const theme = useTheme();
+ const { toggle } = useModalContext();
+ return (
+
+
+
+
+ Dirección
+
+
+ Indique la calle, el numero/altura que desea buscar.
+
+ {}}
+ sx={{ p: 2, mt: 2 }}
+ endIcon={Buscar
+
+
+
+
+
+
+
+
+
+
+ Configuración
+
+
+
+
+ Modo oscuro
+
+
+
+
+ Tamaño de letra
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Ayuda
+
+
+ {
+ localStorage.removeItem("alreadyVisited");
+ window.location.reload();
+ toggle();
+ }}
+ color={"primary"}
+ variant="contained"
+ >
+ VOLVER A HACER EL TUTORIAL
+
+
+
+ Más información de interes
+
+
+
+
+
+
+
+
+ {
+
+
+
+ );
+}
diff --git a/src/components/Menu/components/CondicionesArchivadas.tsx b/src/components/Menu/components/CondicionesArchivadas.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..029ee32f87b7cf69dbe23962621f8c4ce2b3c897
--- /dev/null
+++ b/src/components/Menu/components/CondicionesArchivadas.tsx
@@ -0,0 +1,105 @@
+
+import { Button, Box, Paper, Typography } from "@mui/material"
+import Carousel from 'react-material-ui-carousel'
+import { useState } from "react";
+import { maxWidth } from "@mui/system";
+import useMetersContext from "hooks/UseMetersContext";
+
+interface ItemsInterface{
+ name: string,
+ image: string,
+ year: number,
+ description: string,
+ meters: number
+}
+export default function CondicionesArchivadas() {
+ const [description, setDescription] = useState("");
+ const {setSliderMeters} = useMetersContext()
+
+ var items:ItemsInterface[] = [
+ {
+ name: "INUNDACIÓN LA PLATA",
+ image: "/inundación_2013.jpg",
+ year: 2013,
+ description: "El 2 de abril de 2013, la ciudad de La Plata y sus cercanías fueron afectadas por una lluvia continua. El Servicio Meteorológico Nacional informó que 181 mm cayeron entre las 18 y las 21, pudiendo suponerse un valor de hasta 200 mm en otras áreas no medidas; las ciudades de Ensenada y Berisso y los barrios platenses de Los Hornos, Villa Elvira y Tolosa fueron los más afectados junto al casco céntrico de la ciudad. La cantidad de víctimas fatales confirmadas fue de 89. Se registraron un total de 2200 evacuados",
+ meters: 50
+ },
+ {
+ name: "INUNDACIÓN CONCORDIA",
+ image: "/inundación_1959.jpg",
+ year: 1959,
+ description: 'La inundación de abril de 1959, considerada en la Argentina un "desastre nacional", deja bajo las aguas una extensión que supera los 20.000 km2. Desde Concordia hasta el delta y durante tres meses, la provincia observa un continuo manto hídrico sobre tierras ricamente productivas',
+ meters: 30
+ },
+ {
+ name: "INUNDACIÓN SANTA FE",
+ image: "/inundación_2007.jpg",
+ year: 2007,
+ description: "La inundación en Santa Fe de 2007 fue un suceso meteorológico ocurrido en el mes de marzo de ese año que afectó a la ciudad de Santa Fe y las localidades aledañas, a causa de fuertes precipitaciones que se sucedieron en la zona litoral argentina. En total, cayeron 437 milímetros de lluvia del 26 de marzo al 4 de abril, dejando como saldo 26 000 evacuados",
+ meters: 60
+ }
+ ]
+
+ function Item(props: any) {
+ return (
+
+ setSliderMeters(props.item.meters) }
+ sx={{
+ backgroundImage: `url(${props.item.image})`,
+ height: '9rem',
+ backgroundRepeat: 'no-repeat',
+ backgroundPosition: 'center',
+ backgroundSize: 'cover',
+ display: 'grid',
+ padding: 3,
+ cursor: 'pointer'
+ }}>
+
+ {props.item.name}
+
+
+ {props.item.year}
+
+
+
+
+ )
+ }
+
+ return (
+
+
+
+ Condiciones Archivadas
+
+ {
+ if (index != undefined) {
+ setDescription(items[index].description)
+ }
+ }}
+ >
+ {
+ items.map((item, i) =>
+
+ {/* {description} */}
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/components/MenuModalButton/MenuModalButton.tsx b/src/components/MenuModalButton/MenuModalButton.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..60830b61a06ebc7faaf07751fb88f194849af337
--- /dev/null
+++ b/src/components/MenuModalButton/MenuModalButton.tsx
@@ -0,0 +1,69 @@
+import {
+ Box,
+ Button,
+ Paper,
+ SwipeableDrawer,
+ Typography,
+} from "@mui/material";
+import { PropsWithChildren, useState } from "react";
+import { isMobile } from "react-device-detect";
+
+interface Props {
+ text: string;
+ classNameButton?: string;
+ icon: any;
+ variant?: "text" | "outlined" | "contained" | undefined;
+}
+
+export default function MenuModalButton(props: PropsWithChildren) {
+ let { text, icon, variant, children, classNameButton } = props;
+ const [open, setOpen] = useState(false);
+ const [showButtonText, showText] = useState(false);
+
+ function onClickHandler() {
+ setOpen(!open);
+ }
+
+ return (
+
+ showText(true)}
+ onMouseLeave={() => showText(false)}
+ className={classNameButton}
+ aria-label={text}
+ onClick={onClickHandler}
+ sx={{ ...(!isMobile ? { m: 2 } : { m: 0.7 }), p: 2, maxHeight: 60 }}
+ variant={variant}
+ color="secondary"
+ >
+ {icon}
+ {showButtonText && !isMobile && (
+ {text}
+ )}
+
+ {open &&
+ (!isMobile ? (
+ {children}
+ ) : (
+
+ {children}
+
+ ))}
+
+ );
+}
diff --git a/src/components/MenuModalButton/MenuModalButtonContext.tsx b/src/components/MenuModalButton/MenuModalButtonContext.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..87162c2bec72a24dafe408fb6bfcd627848bdc3f
--- /dev/null
+++ b/src/components/MenuModalButton/MenuModalButtonContext.tsx
@@ -0,0 +1,71 @@
+import { Box, Button, Paper, SwipeableDrawer, Typography } from "@mui/material";
+import useModalContext from "hooks/UseModalContext";
+import { PropsWithChildren, useState } from "react";
+import { isMobile } from "react-device-detect";
+
+interface Props {
+ text: string;
+ classNameButton?: string;
+ icon: any;
+ variant?: "text" | "outlined" | "contained" | undefined;
+}
+
+export default function MenuModalButtonContext(
+ props: PropsWithChildren
+) {
+ let { text, icon, variant, children, classNameButton } = props;
+ const { toggle, open } = useModalContext();
+ const [showButtonText, showText] = useState(false);
+
+ function onClickHandler() {
+ toggle();
+ }
+
+ return (
+
+ showText(true)}
+ onMouseLeave={() => showText(false)}
+ className={classNameButton}
+ aria-label={text}
+ onClick={onClickHandler}
+ sx={{ ...(!isMobile ? { m: 2 } : { m: 0.7 }), p: 2, maxHeight: 60 }}
+ variant={variant}
+ color="secondary"
+ >
+ {icon}
+ {showButtonText && !isMobile && (
+
+ {text}
+
+ )}
+
+ {open &&
+ (!isMobile ? (
+ {children}
+ ) : (
+
+ {children}
+
+ ))}
+
+ );
+}
diff --git a/src/config/Constant.ts b/src/config/Constant.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f1bf0b81ec162d152ad2b1b3d92b2bef3cb11f85
--- /dev/null
+++ b/src/config/Constant.ts
@@ -0,0 +1,20 @@
+export const MAPBOX_TOKEN: string | undefined = process.env.REACT_APP_MAPBOX_TOKEN
+
+export const MAP_STYLE_LIGHT: string = "mapbox://styles/juanpsm/cl4uqpovc003e14p5il6orxwf"
+export const MAP_STYLE_DARK: string = "mapbox://styles/juanpsm/cl4w0ubor005a14pr6xsfzxph"
+
+export const MAX_WATER_HEIGHT: number = 120;
+
+interface HomeConfig {
+ title: string,
+ subtitle: string,
+ description: string
+}
+
+
+export const HOME_CONFIG: HomeConfig = {
+ title: "SIMULACION INUNDACIONES LA PLATA",
+ subtitle: "UNLP - DEU y DCU 2022",
+ description: "Esta aplicación es una herramienta para simular una posible inundación en la ciudad de La Plata"
+}
+
diff --git a/src/config/Routes.tsx b/src/config/Routes.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..534262297c65ceb1dffa1918f84bfa611f24be29
--- /dev/null
+++ b/src/config/Routes.tsx
@@ -0,0 +1,27 @@
+import { RouteObject } from "react-router-dom";
+import { Dashboard, } from '@mui/icons-material';
+import { ReactNode } from "react";
+import HomeIcon from '@mui/icons-material/Home';
+import ErrorIcon from '@mui/icons-material/Error';
+import HomePage from "pages/Home/HomePage";
+
+
+interface AppRouteObject extends RouteObject {
+ name: string;
+ icon: ReactNode;
+}
+
+export const appRoutes: AppRouteObject[] = [
+ {
+ name: "Inicio",
+ path: "/",
+ element: ( localStorage["theme"] === "dark" ? "dark" : "light");
+ const [fontSize, setFontSize] = useState(localStorage["fontSize"] ? JSON.parse(localStorage["fontSize"]) : 1);
+ const toggleColorMode = () =>{
+ setThemeMode((prevMode) => (prevMode === "light" ? "dark" : "light"));
+ }
+
+ const incrementFontSize = () => setFontSize((prevSize) => prevSize < 1.4 ? prevSize + 0.2 : 1.4);
+ const decrementFontSize = () => setFontSize((prevSize) => prevSize > 1 ? prevSize - 0.2 : 1);
+
+ useEffect(() => {
+ localStorage.setItem("fontSize", JSON.stringify(fontSize));
+ localStorage.setItem("theme", themeMode)
+ }, [fontSize,themeMode])
+
+ const defaultTheme: ThemeOptions = useMemo(
+ () =>
+ createTheme({
+
+ palette: {
+ mode: themeMode,
+ primary: {
+ main: "#0288D1",
+ },
+ secondary: {
+ main: themeMode == "light" ?"#fff": "#1e1e1e",
+ dark: "#001E3C",
+ contrastText:themeMode == "light" ? "#1e1e1e": "#fff",
+ },
+ text: {
+ secondary: "#0288D1",
+ disabled: "#b1b4bd",
+ },
+ error: {
+ main: "#F2994A",
+ },
+ warning: {
+ main: "#F44B4A",
+ },
+ success: {
+ main: "#3ecd7b",
+ },
+ },
+
+ typography: {
+ fontFamily: "Raleway.ttf",
+ fontWeightLight: 400,
+ fontWeightRegular: 400,
+ fontWeightMedium: 500,
+ fontWeightBold: 800,
+ h1: {
+ fontSize: `${3 + fontSize}em`,
+ },
+ h2: {
+ fontSize: `${2 + fontSize }em`,
+ },
+ h3: {
+ fontSize: `${1.5 + fontSize}em`,
+ },
+ h4: {
+ fontSize: `${0.7 + fontSize}em`,
+ },
+ h5: {
+ fontSize: `${0.5 + fontSize}em`,
+ },
+ h6: {
+ fontSize: `${0.4 + fontSize}em`,
+ },
+ subtitle1: {
+ fontSize: `${0.2 + fontSize}em`,
+ },
+ body1: {
+ fontSize: `${0.7 + fontSize}em`,
+ },
+ body2: {
+ fontSize: `${0.4 + fontSize}em`,
+ },
+ button: {
+ fontSize: `${0 + fontSize}em`,
+ fontWeight: 800,
+ },
+ },
+ components: {
+ MuiPaper: {
+ styleOverrides: {
+ root: sx({
+ borderRadius: "1em",
+ }),
+ },
+ },
+ MuiCard: {
+ styleOverrides: {
+ root: sx({
+ borderRadius: "1em",
+ }),
+ },
+ },
+ MuiButton: {
+ styleOverrides: {
+ root: sx({
+ "&:hover":{
+ backgroundColor: "#0288D1",
+ },
+ }),
+ },
+ },
+ },
+ }),
+ [themeMode,fontSize]
+ );
+
+ return (
+
+
+ {children}
+
+ );
+}
diff --git a/src/context/MetersContext.tsx b/src/context/MetersContext.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..33e78c4e0a95a2bc824d05561afc05ef0606bb75
--- /dev/null
+++ b/src/context/MetersContext.tsx
@@ -0,0 +1,19 @@
+import { createContext, useState } from "react";
+
+const MetersContext = createContext({
+ setSliderMeters: (meters: number) => {},
+ meters: 0
+})
+
+function MetersProviderContext({children}: {children: React.ReactNode}) {
+ const [meters, setMeters] = useState(0);
+ const setSliderMeters = (meters: number) => setMeters(meters);
+
+ return (
+
+ {children}
+
+ );
+}
+
+export {MetersContext, MetersProviderContext}
\ No newline at end of file
diff --git a/src/context/ModalContext.tsx b/src/context/ModalContext.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..358fcc48a47bbcabbb8bdd750014841d589fb5da
--- /dev/null
+++ b/src/context/ModalContext.tsx
@@ -0,0 +1,21 @@
+import { createContext, PropsWithChildren, useState } from "react";
+
+export const ModalContext = createContext({
+ toggle: () => {},
+ open: false,
+});
+
+function ModalProvider({ children }: PropsWithChildren) {
+ const [open, setOpen] = useState(false);
+ const toggle = () => {
+ console.log("toggle");
+ setOpen(!open);
+ };
+ return (
+
+ {children}
+
+ );
+}
+
+export { ModalProvider };
diff --git a/src/context/ThemeContext.ts b/src/context/ThemeContext.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6beda08052267a3a06dabcfe4c4a4fd62b0c10ff
--- /dev/null
+++ b/src/context/ThemeContext.ts
@@ -0,0 +1,7 @@
+import { createContext } from "react";
+
+export const ThemeContext = createContext({
+ toggleColorMode: () => {},
+ incrementFontSize: () => {},
+ decrementFontSize: () => {}
+})
diff --git a/src/fonts/Raleway/Raleway.ttf b/src/fonts/Raleway/Raleway.ttf
new file mode 100644
index 0000000000000000000000000000000000000000..5428c9c6dd788af7e626be91d6986d07cf6ae1b6
Binary files /dev/null and b/src/fonts/Raleway/Raleway.ttf differ
diff --git a/src/hooks/UseMetersContext.tsx b/src/hooks/UseMetersContext.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..368d70228d7949e6d60d2bbb92416eb6d54fe362
--- /dev/null
+++ b/src/hooks/UseMetersContext.tsx
@@ -0,0 +1,10 @@
+import { MetersContext } from "context/MetersContext";
+import { useContext } from "react";
+
+export default function useMetersContext(){
+ const context = useContext(MetersContext);
+ if (context === undefined) {
+ throw new Error("useMetersContext must be used within a MetersProvider");
+ }
+ return context;
+}
\ No newline at end of file
diff --git a/src/hooks/UseModalContext.ts b/src/hooks/UseModalContext.ts
new file mode 100644
index 0000000000000000000000000000000000000000..fea3ebf5feac8911a46b4f5a94c235ca9d9fd382
--- /dev/null
+++ b/src/hooks/UseModalContext.ts
@@ -0,0 +1,11 @@
+import { ModalContext } from "context/ModalContext";
+import { useContext } from "react";
+
+export default function useModalContext() {
+
+ const context = useContext(ModalContext);
+ if (context === undefined) {
+ throw new Error("useModalContext must be used within a ModalContextProvider");
+ }
+ return context;
+}
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index ec2585e8c0bb8188184ed1e0703c4c8f2a8419b0..e24def54c13e83ab1b074adacf60d57de14eab5a 100644
--- a/src/index.css
+++ b/src/index.css
@@ -11,3 +11,27 @@ code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
+
+#map {
+ width: 100%;
+ height: 100%;
+}
+.control-panel {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+label {
+ display: inline-block;
+ width: 150px;
+}
+
+input {
+ margin-left: 20px;
+}
+
+.input.disabled {
+ opacity: .5;
+ cursor: not-allowed;
+}
\ No newline at end of file
diff --git a/src/modules/helpers.tsx b/src/modules/helpers.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..c60f3e8d33d40f1086e1a9cb50ae92b5d99d0312
--- /dev/null
+++ b/src/modules/helpers.tsx
@@ -0,0 +1,22 @@
+/* eslint-disable no-console */
+
+export function getScreenSize() {
+ const { innerWidth } = window;
+ let breakpoint = 'xs';
+
+ if (innerWidth >= 1024) {
+ breakpoint = 'lg';
+ } else if (innerWidth >= 768) {
+ breakpoint = 'md';
+ } else if (innerWidth >= 400) {
+ breakpoint = 'sm';
+ }
+
+ return breakpoint;
+}
+
+export function logGroup(type: string, data: any) {
+ console.groupCollapsed(type);
+ console.log(data);
+ console.groupEnd();
+}
diff --git a/src/pages/Home/HomePage.tsx b/src/pages/Home/HomePage.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..f6f26c2e3d701b07ddaed505eceaa07f9d0917e0
--- /dev/null
+++ b/src/pages/Home/HomePage.tsx
@@ -0,0 +1,269 @@
+import {
+ Button,
+ Typography,
+ Grid,
+ useTheme,
+ IconButton,
+ Divider,
+ Paper,
+ List,
+ ListItem,
+ ListItemText,
+ ListItemIcon,
+} from "@mui/material";
+import Brightness1Icon from "@mui/icons-material/Brightness1";
+import { Link as LinkRouter } from "react-router-dom";
+import Link from '@mui/material/Link';
+import { Box } from "@mui/system";
+import { HOME_CONFIG } from "config/Constant";
+import Brightness4Icon from "@mui/icons-material/Brightness4";
+import Brightness7Icon from "@mui/icons-material/Brightness7";
+import { useContext } from "react";
+import { ThemeContext } from "context/ThemeContext";
+
+export default function HomePage() {
+ const theme = useTheme();
+ const { toggleColorMode } = useContext(ThemeContext);
+ return (
+
+
+
+
+ {theme.palette.mode === "dark" ? (
+
+
+
+
+
+
+
+
+ {HOME_CONFIG.title}
+
+
+ {HOME_CONFIG.subtitle}
+
+
+ {HOME_CONFIG.description}
+
+
+
+
+ Ver mapa
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ¿De que trata la app?
+
+
+ Esta aplicación es una herramienta para simular una posible
+ inundación en la ciudad de La Plata.
+
+
+ ¿Por qué simular?
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Sobre el proyecto
+
+
+ {
+ "Proyecto de la materia Diseño de Experiencia de Usuario y Diseño Centrado en el Usuario de la "
+ }
+
+
+
+
+ {"Con el objetivo de realizar una "}
+
+
+ aplicacion que sea accessible para todos.
+
+
+
+
+
+
+ );
+}
diff --git a/src/pages/Information/InformationPage.tsx b/src/pages/Information/InformationPage.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..57d3f3c4c53aeb92752cc62cced96685f4e18e8e
--- /dev/null
+++ b/src/pages/Information/InformationPage.tsx
@@ -0,0 +1,77 @@
+import { Box, Button, Divider, Typography, useTheme } from "@mui/material";
+import Link from "@mui/material/Link";
+import { Link as LinkRouter } from "react-router-dom";
+import ArrowBackIcon from "@mui/icons-material/ArrowBack";
+
+const LinksInteres = [
+ {
+ title:
+ "Las inundaciones en La Plata, Berisso y Ensenada: análisis de riesgo, estrategias de intervención. Hacia la construcción de un observatorio ambiental.",
+ description:
+ "Los conflictos en torno a las inundaciones son de naturaleza multicausal, alertan sobre la necesidad de modificar la racionalidad de su manejo. Una de sus principales causas está relacionada con eventos de inundaciones por precipitaciones y/o sudestadas y sus consecuencias catastróficas a nivel regional, que han sido frecuentes en los últimos cien años y se agudizaron en las últimas décadas. La acción antrópica, que ignora el sistema hídrico, generalmente desemboca en una tragedia.",
+ link: "http://sedici.unlp.edu.ar/handle/10915/59633",
+ },
+ {
+ title:
+ "Manual Plan de Reducción de Riesgo por Inundaciones en la Región de La Plata",
+ description:
+ "Este manual es un medio didáctico creado para aportar a la transformación y al diálogo de saberes relacionados a la ciudad y su riesgo de inundación. Incluye una propuesta pedagógica y estrategias para que quienes hagan uso de él puedan construir un diagnóstico del territorio que habitan, así como definir medidas particulares para la prevención y recomendaciones de acción ante la emergencia. ",
+ link: "http://sedici.unlp.edu.ar/handle/10915/112896",
+ },
+ {
+ title:
+ "Informe Final PIO: Las inundaciones en La Plata, Berisso y Ensenada. Análisis de riesgos y estrategias de intervención.",
+ description: "",
+ link: "http://omlp.sedici.unlp.edu.ar/dataset/informe-final",
+ },
+];
+
+export default function InformationPage() {
+ const theme = useTheme();
+ return (
+
+
+
+ {
+
+
+ Información de interes
+
+
+ {LinksInteres.map((link) => {
+ return (
+
+
+
+ {link.title}
+
+
+ {link.description}
+
+
+
+
+
+
+
+ );
+ })}
+
+
+
+ );
+}
diff --git a/src/pages/Map/MapPage.tsx b/src/pages/Map/MapPage.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..73658bcebedca2b5358659004118beb998dec330
--- /dev/null
+++ b/src/pages/Map/MapPage.tsx
@@ -0,0 +1,36 @@
+import { VisibilityOff } from "@mui/icons-material";
+import { Grid } from "@mui/material";
+import { MetersProviderContext } from "context/MetersContext";
+import BasicDemo from "components/Demo/Demo";
+import Mapita from "components/Map/Mapita";
+import Menu from "components/Menu/Menu";
+import { getScreenSize } from "modules/helpers";
+import { useState } from "react";
+import { isMobile } from "react-device-detect";
+
+export default function MapPage() {
+ const [breakpoint, setBreakpoint] = useState(getScreenSize());
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/tsconfig.json b/tsconfig.json
index a273b0cfc0e965c35524e3cd0d3574cbe1ad2d0d..860b1d5fe3d73cc96e6487e82608ba87f3b01b47 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -18,7 +18,8 @@
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
- "jsx": "react-jsx"
+ "jsx": "react-jsx",
+ "baseUrl": "src"
},
"include": [
"src"