From 71e3664ee0ce2af3ea2041bf2a68f727bc36999b Mon Sep 17 00:00:00 2001 From: Vidhi Doshi Date: Thu, 31 Aug 2023 20:09:14 -0500 Subject: [PATCH 1/3] time slider changes --- .../core/src/components/ol/LayersControl.jsx | 740 +++++++++++------- packages/core/src/utils/flowtype.js | 4 + .../geostreaming/src/containers/Map/index.jsx | 184 +++-- 3 files changed, 597 insertions(+), 331 deletions(-) diff --git a/packages/core/src/components/ol/LayersControl.jsx b/packages/core/src/components/ol/LayersControl.jsx index f1b8f9a9..1121f887 100644 --- a/packages/core/src/components/ol/LayersControl.jsx +++ b/packages/core/src/components/ol/LayersControl.jsx @@ -1,319 +1,489 @@ // @flow -import React from 'react'; -import ReactDOM from 'react-dom'; -import { Grid, makeStyles } from '@material-ui/core'; -import Accordion from '@material-ui/core/Accordion'; -import AccordionDetails from '@material-ui/core/AccordionDetails'; -import AccordionSummary from '@material-ui/core/AccordionSummary'; -import Button from '@material-ui/core/Button'; -import Card from '@material-ui/core/Card'; -import CardContent from '@material-ui/core/CardContent'; -import Checkbox from '@material-ui/core/Checkbox'; -import Collapse from '@material-ui/core/Collapse'; -import Divider from '@material-ui/core/Divider'; -import IconButton from '@material-ui/core/IconButton'; -import List from '@material-ui/core/List'; -import ListItem from '@material-ui/core/ListItem'; -import ListItemIcon from '@material-ui/core/ListItemIcon'; -import ListItemText from '@material-ui/core/ListItemText'; -import Slider from '@material-ui/core/Slider'; -import Typography from '@material-ui/core/Typography'; -import ChevronDownIcon from '@material-ui/icons/KeyboardArrowDown'; -import ChevronRightIcon from '@material-ui/icons/KeyboardArrowRight'; -import CloseIcon from '@material-ui/icons/Close'; -import InfoOutlinedIcon from '@material-ui/icons/InfoOutlined'; +import React from "react"; +import ReactDOM from "react-dom"; +import { Grid, makeStyles } from "@material-ui/core"; +import Accordion from "@material-ui/core/Accordion"; +import AccordionDetails from "@material-ui/core/AccordionDetails"; +import AccordionSummary from "@material-ui/core/AccordionSummary"; +import Button from "@material-ui/core/Button"; +import Card from "@material-ui/core/Card"; +import CardContent from "@material-ui/core/CardContent"; +import Checkbox from "@material-ui/core/Checkbox"; +import Collapse from "@material-ui/core/Collapse"; +import Divider from "@material-ui/core/Divider"; +import IconButton from "@material-ui/core/IconButton"; +import List from "@material-ui/core/List"; +import ListItem from "@material-ui/core/ListItem"; +import ListItemIcon from "@material-ui/core/ListItemIcon"; +import ListItemText from "@material-ui/core/ListItemText"; +import Slider from "@material-ui/core/Slider"; +import Typography from "@material-ui/core/Typography"; +import ChevronDownIcon from "@material-ui/icons/KeyboardArrowDown"; +import ChevronRightIcon from "@material-ui/icons/KeyboardArrowRight"; +import CloseIcon from "@material-ui/icons/Close"; +import InfoOutlinedIcon from "@material-ui/icons/InfoOutlined"; -import InfoDialog from '@geostreams/geostreaming/src/containers/Explore/InfoDialog'; -import type { Layer as LayerType } from 'ol/layer'; +import InfoDialog from "@geostreams/geostreaming/src/containers/Explore/InfoDialog"; +import type { Layer as LayerType } from "ol/layer"; -import { entries } from '../../utils/array'; +import { entries } from "../../utils/array"; const useStyle = makeStyles((theme) => ({ - button: { - width: '10em !important', - height: '2em !important', - + button: { + width: "10em !important", + height: "2em !important", + }, + card: { + width: 320, + }, + cardContent: { + padding: 6, + height: "calc(100vh - 12em)", + overflowY: "auto", + }, + cardHeader: { + background: "#467a9e", + color: "#fff", + padding: 6, + }, + closeButton: { + position: "absolute", + right: theme.spacing(0.5), + top: theme.spacing(1), + background: "none !important", + }, + checkbox: { + minWidth: 0, + }, + legendLabelRoot: { + minHeight: 0, + flexDirection: "row-reverse", + }, + legendLabelContent: { + margin: 0, + padding: 0, + }, + legendImage: { + width: "90%", + }, + opacitySlider: { + width: "80%", + }, + divider: { + width: "80%", + margin: "auto", + "&:last-child": { + display: "none", }, - card: { - width: 320 + }, + sliderContainer: { + width: "300px", + marginLeft: "10%", + display: "flex", + alignItems: "center", + }, + styledInput: { + "-webkit-appearance": "none", + width: "30%", + height: "2px", + borderRadius: "4px", + background: "#d3d3d3", + outline: "none", + opacity: "1", + transition: "opacity 0.2s", + "&::-webkit-slider-thumb": { + "-webkit-appearance": "none", + appearance: "none", + width: "12px", + height: "12px", + borderRadius: "50%", + background: "#283d4b", // Change this color + cursor: "pointer", }, - cardContent: { - padding: 6, - height: 'calc(100vh - 12em)', - overflowY: 'auto' + "&::-moz-range-thumb": { + width: "16px", + height: "16px", + borderRadius: "50%", + background: "#283d4b", // Change this color + cursor: "pointer", }, - cardHeader: { - background: '#467a9e', - color: '#fff', - padding: 6 - }, - closeButton: { - position: 'absolute', - right: theme.spacing(0.5), - top: theme.spacing(1), - background: 'none !important' - }, - checkbox: { - minWidth: 0 - }, - legendLabelRoot: { - minHeight: 0, - flexDirection: 'row-reverse' - }, - legendLabelContent: { - margin: 0, - padding: 0 - }, - legendImage: { - width: '90%' - }, - opacitySlider: { - width: '80%', - margin: 'auto' - }, - divider: { - 'width': '80%', - 'margin': 'auto', - '&:last-child': { - display: 'none' - } - } + }, })); type Props = { - el: HTMLElement; - layers: { [layerName: string]: LayerType }; - exclude: string[]; - layersInfo: { [groupName: string]: [string,{[layerName:string]:string}]; }; -} - + el: HTMLElement, + layers: { [layerName: string]: LayerType }, + exclude: string[], + layersInfo: { + [groupName: string]: [string, { [layerName: string]: string }], + }, +}; const LayersControl = ({ el, layers, exclude, layersInfo }: Props) => { - const classes = useStyle(); + console.log("---THESE ARE LAYERS ON 92---", layers); + const [selectedYear, setSelectedYear] = React.useState(null); + const [selectedOpacity, setSelectedOpacity] = React.useState(null); + const [selectedLegend, setSelectedLegend] = React.useState(null); + const classes = useStyle(); + + const [infoDialogControl, toggleInfoDialog] = React.useState(false); + const [showLayers, updateShowLayers] = React.useState(false); + const [dialogInfo, setDialogInfo] = React.useState({ + label: "", + description: "", + link: "", + more_info: "", + }); + + const [openGroups, updateOpenGroups] = React.useState<{ + [groupName: string]: boolean, + }>({}); - const [infoDialogControl, toggleInfoDialog] = React.useState(false); - const [showLayers, updateShowLayers] = React.useState(false); - const [dialogInfo, setDialogInfo] = React.useState({ label:'',description:'', link:'', more_info:'' }); + const [layersVisibility, updateLayersVisibility] = React.useState<{ + [layerName: string]: { isVisible: boolean, opacity: number }, + }>({}); - const [openGroups, updateOpenGroups] = React.useState<{ [groupName: string]: boolean; }>({}); + const handleLayerGroupInfoDialog = (e, layerGroupName) => { + e.stopPropagation(); + setDialogInfo({ + label: layerGroupName, + description: layersInfo[layerGroupName][0].description, + link: layersInfo[layerGroupName][0].link, + more_info: layersInfo[layerGroupName][0].link, + }); + toggleInfoDialog(true); + }; - const [layersVisibility, updateLayersVisibility] = React.useState<{ - [layerName: string]: { isVisible: boolean; opacity: number; } - }>({}); + const handleLayerInfoDialog = (e, layerGroupName, layerName) => { + e.stopPropagation(); + setDialogInfo({ + label: layerName, + description: layersInfo[layerGroupName]?.[1][layerName].description, + link: layersInfo[layerGroupName]?.[1][layerName].link, + more_info: layersInfo[layerGroupName]?.[1][layerName].link, + }); + toggleInfoDialog(true); + }; + const renderLayer = ( + layer: LayerType, + groupName: string, + timeEntries: Array + ) => { + console.log("--I AM IN RENDER LAYER ON 169---", layer); - const handleLayerGroupInfoDialog = (e, layerGroupName) => { - e.stopPropagation(); - setDialogInfo({ label:layerGroupName, description: layersInfo[layerGroupName][0].description, link: layersInfo[layerGroupName][0].link, - more_info:layersInfo[layerGroupName][0].link }); - toggleInfoDialog(true); + const title = layer.get("title"); + const time = timeEntries; + console.log("--THIS IS TIME ON 174--", time); + console.log( + "--THIS IS LAYERVISIBILITY ON 175--", + layersVisibility[title], + title + ); + const { isVisible, opacity } = layersVisibility[title] || { + isVisible: layer.getVisible(), + opacity: layer.getOpacity(), }; + const legend = layer.get("legend"); + return ( + + + + {groupName in layersInfo + ? title in layersInfo[groupName]?.[1] && ( + handleLayerInfoDialog(e, groupName, title)} + edge="right" + size="small" + > + + + ) + : null} + + + { + layer.setOpacity(value); + updateLayersVisibility({ + ...layersVisibility, + [title]: { + opacity: value, + isVisible, + }, + }); + }} + /> + + {legend ? ( + + + } + > + Legend + + + {title} + + + + ) : null} + + + + ); + }; - const handleLayerInfoDialog = (e, layerGroupName, layerName) => { - e.stopPropagation(); - setDialogInfo({ label:layerName, description: layersInfo[layerGroupName]?.[1][layerName].description, link: layersInfo[layerGroupName]?.[1][layerName].link, - more_info:layersInfo[layerGroupName]?.[1][layerName].link }); - toggleInfoDialog(true); + const renderLayerGroup = (layer: LayerType, groupName: string) => { + const isOpen = openGroups[groupName]; + const groupLayers = layer.getLayersArray(); + // console.log("--THESE ARE GROUP LAYERS--", groupLayers,groupName); + + let timeEntries = layer.get("timeEntries"); + const title = layer.get("title"); + const time = timeEntries; + // console.log("--THIS IS TIME ON 174--", time); + // console.log( + // "--THIS IS LAYERVISIBILITY ON 175--", + // layersVisibility[title], + // title + // ); + const { isVisible, opacity } = layersVisibility[title] || { + isVisible: layer.getVisible(), + opacity: layer.getOpacity(), }; + const legend = layer.get("legend"); - const renderLayer = (layer: LayerType, groupName:string) => { - const title = layer.get('title'); - const { isVisible, opacity } = layersVisibility[title] || { - isVisible: layer.getVisible(), - opacity: layer.getOpacity() - }; + const handleYearChange = (event) => { + const year = parseInt(event.target.value); + setSelectedYear(year); + console.log("--THIS IS SELECTED YEAR--", selectedYear); + const selectedTimeEntry = time?.find((item) => item.year === year); + setSelectedLegend(selectedTimeEntry?.legend); + console.log("--THIS IS SELECTED TITLE--", layer.get("title")); + console.log("--THIS IS VISIBILITY--", layer.getVisible()); + console.log("--THESE ARE GROUP LAYERS--", groupLayers); + + groupLayers.forEach((layer)=>{ + console.log("--THIS IS INSIDE FOR LOOP--", layer.get("year")); - const legend = layer.get('legend'); - return ( - - - - { - layer.setVisible(!isVisible); - updateLayersVisibility({ - ...layersVisibility, - [title]: { - opacity, - isVisible: !isVisible - } - }); - }} - /> - - - {(groupName in layersInfo) ? (title in layersInfo[groupName]?.[1]) && - handleLayerInfoDialog(e, groupName, title)} - edge="right" - size="small" - > - - : - null} - - {legend ? - - - } - > - Legend - - - {title} - - - : - null} - - item.year); + years?.sort((a, b) => a - b); + const areLayersVisible = !groupLayers.find( + (groupLayer) => + !( + layersVisibility[groupLayer.get("title")] || { + isVisible: groupLayer.getVisible(), + } + ).isVisible + ); + + return ( + + + updateOpenGroups({ + ...openGroups, + [groupName]: !isOpen, + }) + } + > + + {isOpen ? ( + + {" "} + + ) : ( + + + + )} + {groupName in layersInfo && ( + handleLayerGroupInfoDialog(e, groupName)} + edge="right" + size="small" + > + + + )} + + + + + + + updateLayersVisibility({ + ...layersVisibility, + ...groupLayers.reduce((visibility, groupLayer) => { + const groupLayerTitle = groupLayer.get("title"); + const opacity = layersVisibility[groupLayerTitle] || { + opacity: groupLayer.getOpacity(), + }; + groupLayer.setVisible(!areLayersVisible); + visibility[groupLayerTitle] = { + opacity, + isVisible: !areLayersVisible, + }; + return visibility; + }, {}), + }) + } + /> + + + + {timeEntries?.length > 0 ? ( + + + +
+ +
+
+ +
+ + +
+ + { - layer.setOpacity(value); - updateLayersVisibility({ - ...layersVisibility, - [title]: { - opacity: value, - isVisible - } - }); + layer.setOpacity(value); + updateLayersVisibility({ + ...layersVisibility, + [title]: { + opacity: value, + isVisible, + }, + }); }} - /> - - - - ); - }; - - const renderLayerGroup = (layer: LayerType, groupName: string) => { - const isOpen = openGroups[groupName]; - - const groupLayers = layer.getLayersArray(); - const areLayersVisible = !groupLayers.find( - (groupLayer) => !( - layersVisibility[groupLayer.get('title')] || { isVisible: groupLayer.getVisible() } - ).isVisible - ); - - return ( - - updateOpenGroups({ - ...openGroups, - [groupName]: !isOpen - })} - > - - {isOpen ? : } - {(groupName in layersInfo) && - handleLayerGroupInfoDialog(e,groupName)} - edge="right" - size="small" - > - - } - - - - - - updateLayersVisibility({ - ...layersVisibility, - ...groupLayers.reduce((visibility, groupLayer) => { - const groupLayerTitle = groupLayer.get('title'); - const opacity = ( - layersVisibility[groupLayerTitle] || - { opacity: groupLayer.getOpacity() } - ); - groupLayer.setVisible(!areLayersVisible); - visibility[groupLayerTitle] = { - opacity, - isVisible: !areLayersVisible - }; - return visibility; - }, {}) - })} - /> - - - - {groupLayers.map((subLayer) => renderLayer(subLayer,groupName))} - - - - ); - }; - - return ReactDOM.createPortal( - <> - - - - - Explore Layers - - updateShowLayers(false)} - > - - - - - - {entries(layers) - .filter(([layerName]) => !exclude.includes(layerName)) - .map(([layerName, layer]) => ( - layer.getLayersArray().length > 1 ? - renderLayerGroup(layer, layerName) : - renderLayer(layer) - ))} - - - - - , - el + /> +
+ + + + ) : ( + groupLayers.map((subLayer) => + renderLayer(subLayer, groupName, timeEntries) + ) + )} + + + ); + }; + + return ReactDOM.createPortal( + <> + + + + + Explore Layers + + updateShowLayers(false)} + > + + + + + + {entries(layers) + .filter(([layerName]) => !exclude.includes(layerName)) + .map(([layerName, layer]) => + layer.getLayersArray().length > 0 + ? renderLayerGroup(layer, layerName) + : renderLayer(layer) + )} + + + + + , + el + ); }; export default LayersControl; diff --git a/packages/core/src/utils/flowtype.js b/packages/core/src/utils/flowtype.js index efadd8cc..edaacaf1 100644 --- a/packages/core/src/utils/flowtype.js +++ b/packages/core/src/utils/flowtype.js @@ -56,4 +56,8 @@ export type MapLayerConfig = { legend: ?string; initialVisibility: ?boolean; initialOpacity: ?number; + time: []; + year: number; + + }; diff --git a/packages/geostreaming/src/containers/Map/index.jsx b/packages/geostreaming/src/containers/Map/index.jsx index 9ef59b86..5273ffdc 100644 --- a/packages/geostreaming/src/containers/Map/index.jsx +++ b/packages/geostreaming/src/containers/Map/index.jsx @@ -20,7 +20,7 @@ import ClusterControl from "@geostreams/core/src/components/ol/ClusterControl"; import FitViewControl from "@geostreams/core/src/components/ol/FitViewControl"; import LayersControl from "@geostreams/core/src/components/ol/LayersControl"; import SourcesControl from "@geostreams/core/src/components/ol/SourcesControl"; -import { entries } from '@geostreams/core/src/utils/array'; +import { entries } from "@geostreams/core/src/utils/array"; import type { Feature as FeatureType, @@ -44,7 +44,7 @@ const useStyles = makeStyles((theme) => ({ content: { height: "100%", flexGrow: 1, - position:"relative" + position: "relative", }, fitViewControl: { bottom: ".5em", @@ -121,6 +121,7 @@ const prepareLayers = ( layersConfig: { [group: string]: MapLayerConfig[] } = {}, showExploreLayers: boolean ): { [layerName: string]: LayerType } => { + // console.log('--I AM PREPARING LAYERS ON 124--'); let source = new OSM(); if (mapTileURL) source = new XYZ({ @@ -140,51 +141,140 @@ const prepareLayers = ( }), }; if (showExploreLayers) + // console.log("--THIS IS SHOW EXPLORE LAYERS---", entries(layersConfig)); entries(layersConfig).forEach(([group, groupLayersConfig]) => { const groupLayers = []; - groupLayersConfig.forEach( - ({ - title, - id, - type, - initialOpacity, - initialVisibility, - legend, - }: MapLayerConfig) => { - let layer; - if (type === "wms") { - layer = new ImageLayer({ - source: new ImageWMSSource({ - url: `${geoserverUrl}/wms`, - params: { LAYERS: id }, - ratio: 1, - serverType: "geoserver", - }), - opacity: initialOpacity || 0.8, - visible: initialVisibility || false, - }); - layer.set("title", title); - if (legend) { - layer.set("legend", `${geoserverUrl}/${legend}`); + console.log("--THIS IS on 147---", group, groupLayersConfig); + if ( + typeof groupLayersConfig === "object" && + !Array.isArray(groupLayersConfig) + ) { + console.log("--GROUP LAYERS CONFIG IS AN OBJECT--", groupLayersConfig); + let layerTitle; + let time = groupLayersConfig?.time; + console.log("---THESE ARE TIME ENTRIES", time); + layerTitle = groupLayersConfig?.title; + //check if it is list + // grouplayers already EXISTING SO WE CANNOT MODIFY and it will be complicated + time?.forEach( + ({ + title, + id, + type, + initialOpacity, + initialVisibility, + legend, + year + + }: MapLayerConfig) => { + // console.log("--THIS IS TITLE ON 158---", title); + let layer; + if (groupLayersConfig?.type === "wms") { + layer = new ImageLayer({ + source: new ImageWMSSource({ + url: `${geoserverUrl}/wms`, + params: { LAYERS: id }, + ratio: 1, + serverType: "geoserver", + }), + opacity: initialOpacity || 0.8, + visible: initialVisibility || false, + + }); + console.log("--I AM SETTING TITLE ON 170--------",groupLayersConfig?.title); + layer.set("title", title); + layer.set("year",year); + + + if (legend) { + layer.set("legend", `${geoserverUrl}/${legend}`); + } + } + console.log("---PRINTING LAYERS WHEN OBJECT--", layer); + if (layer) { + if (group) { + groupLayers.push(layer); + } else { + layers[title] = layer; + } + console.log("--PUSHING INTO GROUP LAYERS IN CASE IT IS AN OBJECT---", groupLayers); } } - if (layer) { - if (group) { - groupLayers.push(layer); - } else { - layers[title] = layer; + ); + + if (group) { + // console.log("--I AM IN GROUP AND SETTING TITLE---",group ); + console.log("--I AM PRINTING LAYERTITLE----",layerTitle ); + layers[group] = new GroupLayer({ + title: layerTitle, //Change here + layers: groupLayers, + timeEntries: time + }); + } + + + } else { + let layerTitle; + //check if it is list + // grouplayers already EXISTING SO WE CANNOT MODIFY and it will be complicated + groupLayersConfig.forEach( + ({ + title, + id, + type, + initialOpacity, + initialVisibility, + legend, + time, + }: MapLayerConfig) => { + // console.log("--THIS IS TITLE ON 158---", title); + let layer; + if (type === "wms") { + layer = new ImageLayer({ + source: new ImageWMSSource({ + url: `${geoserverUrl}/wms`, + params: { LAYERS: id }, + ratio: 1, + serverType: "geoserver", + }), + opacity: initialOpacity || 0.8, + visible: initialVisibility || false, + time: time, + }); + // console.log("--I AM SETTING TITLE ON 170--------", title); + layer.set("title", title); + layerTitle = title; + if (time) { + layer.set("time", time); + } + + if (legend) { + layer.set("legend", `${geoserverUrl}/${legend}`); + } + } + console.log("---PRINTING LAYERS WHEN NOT AN OBJECT--", layer); + if (layer) { + if (group) { + groupLayers.push(layer); + } else { + layers[title] = layer; + } } + console.log("--PUSHING INTO GROUP LAYERS---", groupLayers); } + ); + + if (group) { + // console.log("--I AM IN GROUP AND SETTING TITLE---",group ); + // console.log("--I AM IN GROUP LAYERS----",groupLayers ); + layers[group] = new GroupLayer({ + title: layerTitle, //Change here + layers: groupLayers, + }); } - ); - if (group) { - layers[group] = new GroupLayer({ - title: group, - layers: groupLayers, - }); } }); - + console.log("--THESE ARE LAYERS ON 198--", layers); return layers; }; @@ -496,12 +586,10 @@ const Map = (props: Props) => { .setCenter( featuresAtPixel.get("features")[0].getGeometry().getCoordinates() ); - mapRef.current - .getView() - .animate({ - zoom: mapRef.current.getView().getZoom() + 1, - duration: 500, - }); + mapRef.current.getView().animate({ + zoom: mapRef.current.getView().getZoom() + 1, + duration: 500, + }); } } } @@ -560,7 +648,7 @@ const Map = (props: Props) => { ) : null} {showExploreSources ? ( { el={cacheRef.current.layersControl.element} layers={cacheRef.current.layers} exclude={["basemaps"]} - layersInfo = { (typeof mapConfig.layersInfo === 'undefined') ? {} : mapConfig.layersInfo} + layersInfo={ + typeof mapConfig.layersInfo === "undefined" + ? {} + : mapConfig.layersInfo + } /> ) : null} From e74dade49d36203f861bc9aa9d5436cc1a4c3057 Mon Sep 17 00:00:00 2001 From: Vidhi Doshi Date: Tue, 5 Sep 2023 00:27:22 -0500 Subject: [PATCH 2/3] fixed time slider issue --- .../core/src/components/ol/LayersControl.jsx | 89 +++++++++++-------- 1 file changed, 53 insertions(+), 36 deletions(-) diff --git a/packages/core/src/components/ol/LayersControl.jsx b/packages/core/src/components/ol/LayersControl.jsx index 1121f887..3d729069 100644 --- a/packages/core/src/components/ol/LayersControl.jsx +++ b/packages/core/src/components/ol/LayersControl.jsx @@ -120,7 +120,6 @@ type Props = { }; const LayersControl = ({ el, layers, exclude, layersInfo }: Props) => { - console.log("---THESE ARE LAYERS ON 92---", layers); const [selectedYear, setSelectedYear] = React.useState(null); const [selectedOpacity, setSelectedOpacity] = React.useState(null); const [selectedLegend, setSelectedLegend] = React.useState(null); @@ -170,16 +169,8 @@ const LayersControl = ({ el, layers, exclude, layersInfo }: Props) => { groupName: string, timeEntries: Array ) => { - console.log("--I AM IN RENDER LAYER ON 169---", layer); - const title = layer.get("title"); const time = timeEntries; - console.log("--THIS IS TIME ON 174--", time); - console.log( - "--THIS IS LAYERVISIBILITY ON 175--", - layersVisibility[title], - title - ); const { isVisible, opacity } = layersVisibility[title] || { isVisible: layer.getVisible(), opacity: layer.getOpacity(), @@ -188,6 +179,25 @@ const LayersControl = ({ el, layers, exclude, layersInfo }: Props) => { return ( + {time?.length > 0 ? null : ( + + { + layer.setVisible(!isVisible); + updateLayersVisibility({ + ...layersVisibility, + [title]: { + opacity, + isVisible: !isVisible, + }, + }); + }} + /> + + )} + { const isOpen = openGroups[groupName]; const groupLayers = layer.getLayersArray(); // console.log("--THESE ARE GROUP LAYERS--", groupLayers,groupName); - + let timeEntries = layer.get("timeEntries"); const title = layer.get("title"); const time = timeEntries; - // console.log("--THIS IS TIME ON 174--", time); - // console.log( - // "--THIS IS LAYERVISIBILITY ON 175--", - // layersVisibility[title], - // title - // ); const { isVisible, opacity } = layersVisibility[title] || { isVisible: layer.getVisible(), opacity: layer.getOpacity(), }; + const legend = layer.get("legend"); - const handleYearChange = (event) => { + const handleYearChange = async (event) => { const year = parseInt(event.target.value); - setSelectedYear(year); - console.log("--THIS IS SELECTED YEAR--", selectedYear); + await setSelectedYear(year); const selectedTimeEntry = time?.find((item) => item.year === year); setSelectedLegend(selectedTimeEntry?.legend); - console.log("--THIS IS SELECTED TITLE--", layer.get("title")); - console.log("--THIS IS VISIBILITY--", layer.getVisible()); - console.log("--THESE ARE GROUP LAYERS--", groupLayers); - - groupLayers.forEach((layer)=>{ - console.log("--THIS IS INSIDE FOR LOOP--", layer.get("year")); - - if(layer.get("year").toString()==selectedYear.toString()){ - console.log("this is layer on 293--", layer); - - layer.setVisible(!isVisible); - + groupLayers.forEach((layer) => { + + if (layer.get("year").toString() === year.toString()) { + const { isVisible, opacity } = layersVisibility[ + layer.get("title") + ] || { + isVisible: layer.getVisible(), + opacity: layer.getOpacity(), + }; + layer.setVisible(true); updateLayersVisibility({ ...layersVisibility, [title]: { opacity, - isVisible: !isVisible, + isVisible: true, + }, + }); + }else{ + const { isVisible, opacity } = layersVisibility[ + layer.get("title") + ] || { + isVisible: layer.getVisible(), + opacity: layer.getOpacity(), + }; + layer.setVisible(false); + updateLayersVisibility({ + ...layersVisibility, + [title]: { + opacity, + isVisible: false, }, }); - } - }) - + }); }; const years = time?.map((item) => item.year); years?.sort((a, b) => a - b); + + const areLayersVisible = !groupLayers.find( (groupLayer) => !( @@ -394,7 +411,7 @@ const LayersControl = ({ el, layers, exclude, layersInfo }: Props) => {
- +
Date: Tue, 3 Oct 2023 10:28:37 -0500 Subject: [PATCH 3/3] time slider working --- .../core/src/components/ol/LayersControl.jsx | 89 +++++++++---------- packages/core/src/utils/flowtype.js | 1 + .../geostreaming/src/containers/Map/index.jsx | 43 ++++----- 3 files changed, 57 insertions(+), 76 deletions(-) diff --git a/packages/core/src/components/ol/LayersControl.jsx b/packages/core/src/components/ol/LayersControl.jsx index 3d729069..e5ee52b6 100644 --- a/packages/core/src/components/ol/LayersControl.jsx +++ b/packages/core/src/components/ol/LayersControl.jsx @@ -67,7 +67,7 @@ const useStyle = makeStyles((theme) => ({ width: "90%", }, opacitySlider: { - width: "80%", + width: "220px", }, divider: { width: "80%", @@ -78,13 +78,13 @@ const useStyle = makeStyles((theme) => ({ }, sliderContainer: { width: "300px", - marginLeft: "10%", + marginLeft: "2%", display: "flex", alignItems: "center", }, styledInput: { "-webkit-appearance": "none", - width: "30%", + width: "70%", height: "2px", borderRadius: "4px", background: "#d3d3d3", @@ -120,7 +120,7 @@ type Props = { }; const LayersControl = ({ el, layers, exclude, layersInfo }: Props) => { - const [selectedYear, setSelectedYear] = React.useState(null); + // const [selectedYear, setSelectedYear] = React.useState(null); const [selectedOpacity, setSelectedOpacity] = React.useState(null); const [selectedLegend, setSelectedLegend] = React.useState(null); const classes = useStyle(); @@ -269,10 +269,13 @@ const LayersControl = ({ el, layers, exclude, layersInfo }: Props) => { }; const renderLayerGroup = (layer: LayerType, groupName: string) => { + const [selectedYear, setSelectedYear] = React.useState( + layer.get("min_year") + ); + const [isChecked, setIsChecked] = React.useState(false); const isOpen = openGroups[groupName]; + const min_year = layer.get("min_year"); const groupLayers = layer.getLayersArray(); - // console.log("--THESE ARE GROUP LAYERS--", groupLayers,groupName); - let timeEntries = layer.get("timeEntries"); const title = layer.get("title"); const time = timeEntries; @@ -280,23 +283,19 @@ const LayersControl = ({ el, layers, exclude, layersInfo }: Props) => { isVisible: layer.getVisible(), opacity: layer.getOpacity(), }; - const legend = layer.get("legend"); - const handleYearChange = async (event) => { + const handleYearChange = (event) => { const year = parseInt(event.target.value); - await setSelectedYear(year); + setSelectedYear(year); const selectedTimeEntry = time?.find((item) => item.year === year); setSelectedLegend(selectedTimeEntry?.legend); groupLayers.forEach((layer) => { - + const { isVisible, opacity } = layersVisibility[layer.get("title")] || { + isVisible: layer.getVisible(), + opacity: layer.getOpacity(), + }; if (layer.get("year").toString() === year.toString()) { - const { isVisible, opacity } = layersVisibility[ - layer.get("title") - ] || { - isVisible: layer.getVisible(), - opacity: layer.getOpacity(), - }; layer.setVisible(true); updateLayersVisibility({ ...layersVisibility, @@ -305,13 +304,7 @@ const LayersControl = ({ el, layers, exclude, layersInfo }: Props) => { isVisible: true, }, }); - }else{ - const { isVisible, opacity } = layersVisibility[ - layer.get("title") - ] || { - isVisible: layer.getVisible(), - opacity: layer.getOpacity(), - }; + } else { layer.setVisible(false); updateLayersVisibility({ ...layersVisibility, @@ -326,7 +319,6 @@ const LayersControl = ({ el, layers, exclude, layersInfo }: Props) => { const years = time?.map((item) => item.year); years?.sort((a, b) => a - b); - const areLayersVisible = !groupLayers.find( (groupLayer) => !( @@ -378,46 +370,47 @@ const LayersControl = ({ el, layers, exclude, layersInfo }: Props) => { - updateLayersVisibility({ - ...layersVisibility, - ...groupLayers.reduce((visibility, groupLayer) => { - const groupLayerTitle = groupLayer.get("title"); - const opacity = layersVisibility[groupLayerTitle] || { - opacity: groupLayer.getOpacity(), - }; - groupLayer.setVisible(!areLayersVisible); - visibility[groupLayerTitle] = { - opacity, - isVisible: !areLayersVisible, - }; - return visibility; - }, {}), - }) - } + onChange={() => { + setIsChecked((prevIsChecked) => { + const newIsChecked = !prevIsChecked; + + if (newIsChecked === false) { + groupLayers.forEach((layer) => { + layer.setVisible(false); + }); + } else { + let minYearLayer = groupLayers.filter( + (layer) => layer.get("year") === min_year + ); + minYearLayer[0].setVisible(true); + } + + return newIsChecked; + }); + }} /> - {timeEntries?.length > 0 ? ( + {timeEntries?.length > 0 && isChecked ? (
- +
{ - ) : ( + ) : timeEntries?.length > 0 ? null : ( groupLayers.map((subLayer) => renderLayer(subLayer, groupName, timeEntries) ) @@ -487,7 +480,7 @@ const LayersControl = ({ el, layers, exclude, layersInfo }: Props) => { .filter(([layerName]) => !exclude.includes(layerName)) .map(([layerName, layer]) => layer.getLayersArray().length > 0 - ? renderLayerGroup(layer, layerName) + ? renderLayerGroup(layer, layerName, layer.get("min_year")) : renderLayer(layer) )} diff --git a/packages/core/src/utils/flowtype.js b/packages/core/src/utils/flowtype.js index edaacaf1..afedcb75 100644 --- a/packages/core/src/utils/flowtype.js +++ b/packages/core/src/utils/flowtype.js @@ -58,6 +58,7 @@ export type MapLayerConfig = { initialOpacity: ?number; time: []; year: number; + min_year: number; }; diff --git a/packages/geostreaming/src/containers/Map/index.jsx b/packages/geostreaming/src/containers/Map/index.jsx index 5273ffdc..ff7cef1a 100644 --- a/packages/geostreaming/src/containers/Map/index.jsx +++ b/packages/geostreaming/src/containers/Map/index.jsx @@ -121,7 +121,6 @@ const prepareLayers = ( layersConfig: { [group: string]: MapLayerConfig[] } = {}, showExploreLayers: boolean ): { [layerName: string]: LayerType } => { - // console.log('--I AM PREPARING LAYERS ON 124--'); let source = new OSM(); if (mapTileURL) source = new XYZ({ @@ -141,21 +140,17 @@ const prepareLayers = ( }), }; if (showExploreLayers) - // console.log("--THIS IS SHOW EXPLORE LAYERS---", entries(layersConfig)); entries(layersConfig).forEach(([group, groupLayersConfig]) => { const groupLayers = []; - console.log("--THIS IS on 147---", group, groupLayersConfig); if ( typeof groupLayersConfig === "object" && !Array.isArray(groupLayersConfig) ) { - console.log("--GROUP LAYERS CONFIG IS AN OBJECT--", groupLayersConfig); + let layerTitle; - let time = groupLayersConfig?.time; - console.log("---THESE ARE TIME ENTRIES", time); + let time = groupLayersConfig?.time; layerTitle = groupLayersConfig?.title; - //check if it is list - // grouplayers already EXISTING SO WE CANNOT MODIFY and it will be complicated + let min_year = groupLayersConfig?.min_year; time?.forEach( ({ title, @@ -164,10 +159,11 @@ const prepareLayers = ( initialOpacity, initialVisibility, legend, - year + year, + min_year }: MapLayerConfig) => { - // console.log("--THIS IS TITLE ON 158---", title); + let layer; if (groupLayersConfig?.type === "wms") { layer = new ImageLayer({ @@ -181,42 +177,39 @@ const prepareLayers = ( visible: initialVisibility || false, }); - console.log("--I AM SETTING TITLE ON 170--------",groupLayersConfig?.title); layer.set("title", title); layer.set("year",year); - + layer.set("min_year",min_year); if (legend) { layer.set("legend", `${geoserverUrl}/${legend}`); } } - console.log("---PRINTING LAYERS WHEN OBJECT--", layer); if (layer) { if (group) { groupLayers.push(layer); } else { layers[title] = layer; } - console.log("--PUSHING INTO GROUP LAYERS IN CASE IT IS AN OBJECT---", groupLayers); } } ); if (group) { - // console.log("--I AM IN GROUP AND SETTING TITLE---",group ); - console.log("--I AM PRINTING LAYERTITLE----",layerTitle ); + layers[group] = new GroupLayer({ - title: layerTitle, //Change here + title: layerTitle, layers: groupLayers, - timeEntries: time + timeEntries: time, + min_year: min_year, + opacity:0.8 + }); } } else { let layerTitle; - //check if it is list - // grouplayers already EXISTING SO WE CANNOT MODIFY and it will be complicated groupLayersConfig.forEach( ({ title, @@ -227,7 +220,6 @@ const prepareLayers = ( legend, time, }: MapLayerConfig) => { - // console.log("--THIS IS TITLE ON 158---", title); let layer; if (type === "wms") { layer = new ImageLayer({ @@ -241,7 +233,6 @@ const prepareLayers = ( visible: initialVisibility || false, time: time, }); - // console.log("--I AM SETTING TITLE ON 170--------", title); layer.set("title", title); layerTitle = title; if (time) { @@ -252,7 +243,6 @@ const prepareLayers = ( layer.set("legend", `${geoserverUrl}/${legend}`); } } - console.log("---PRINTING LAYERS WHEN NOT AN OBJECT--", layer); if (layer) { if (group) { groupLayers.push(layer); @@ -260,21 +250,18 @@ const prepareLayers = ( layers[title] = layer; } } - console.log("--PUSHING INTO GROUP LAYERS---", groupLayers); } ); if (group) { - // console.log("--I AM IN GROUP AND SETTING TITLE---",group ); - // console.log("--I AM IN GROUP LAYERS----",groupLayers ); + layers[group] = new GroupLayer({ - title: layerTitle, //Change here + title: layerTitle, layers: groupLayers, }); } } }); - console.log("--THESE ARE LAYERS ON 198--", layers); return layers; };