From 2aac6aa647dfb01998be149ccd38943d80c855fc Mon Sep 17 00:00:00 2001 From: Steve Omondi Date: Fri, 23 Feb 2024 17:14:29 +0300 Subject: [PATCH] Moved the Zoom In/Out and Layer Switcher to the right paving way for Sheila's Drawer to work on the left. --- src/app/map/page.tsx | 14 - src/app/page.tsx | 5 +- src/components/map/Map.tsx | 47 +-- .../shared/CSS/LayerSwitcherStyles.css | 274 ++++++------------ 4 files changed, 96 insertions(+), 244 deletions(-) delete mode 100644 src/app/map/page.tsx diff --git a/src/app/map/page.tsx b/src/app/map/page.tsx deleted file mode 100644 index b5be82f..0000000 --- a/src/app/map/page.tsx +++ /dev/null @@ -1,14 +0,0 @@ -"use client"; -import Newmap from "@/components/map/Map"; - -function Map(): JSX.Element { - return ( -
-
- -
-
- ); -} - -export default Map; diff --git a/src/app/page.tsx b/src/app/page.tsx index f5398b2..e996ed5 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,10 +1,9 @@ import Newmap from "../components/map/Map"; -import NavBar from "../components/shared/navbar"; export default function Home() { return ( -
- +
+ {/**/}
diff --git a/src/components/map/Map.tsx b/src/components/map/Map.tsx index cee8097..dea82e0 100644 --- a/src/components/map/Map.tsx +++ b/src/components/map/Map.tsx @@ -13,6 +13,7 @@ import { Vector as VectorLayer } from "ol/layer.js"; import { getBasemapOverlaysLayersArray } from "@/api/requests"; import { Stroke, Fill, Style, Circle } from "ol/style"; import "../shared/CSS/LayerSwitcherStyles.css"; +import "../shared/CSS/olzoom.css"; import OccurrencePopup from "../popup/OccurrenceDrawer"; import "../filters/filterSectionStyles.css"; import "../filters/filter_section_dev.css"; @@ -22,10 +23,8 @@ import TimeSlider from "@/components/filters/TimeSlider"; import OpenFilterButton from "@/components/filters/OpenFilterButton"; import { getOccurrence } from "@/api/occurrence"; import {Alert, IconButton, Snackbar, Tooltip} from "@mui/material"; -import RenderFeature from "ol/render/Feature"; -import { Geometry, Polygon, SimpleGeometry } from "ol/geom"; +import { Geometry, Polygon } from "ol/geom"; import { transform } from "ol/proj"; -import { Coordinate } from "ol/coordinate"; import { Draw, Modify, Snap } from "ol/interaction.js"; import Map from "ol/Map"; import { never } from "ol/events/condition"; @@ -64,7 +63,6 @@ function Newmap() { strategy: bboxStrategy, }) ); - const [zoomArea, setZoomArea] = useState<[number, number, number, number]>(); const [speciesColors, setSpeciesColors] = useState([ "#DC267F", @@ -78,13 +76,6 @@ function Newmap() { const getColormapColors = (numColors: number): string[] => { return colormap({ colormap: "jet", nshades: numColors, format: "hex" }); }; - const addColormapColorsIfNeeded = () => { - const remainingColors = selectedSpecies.length - speciesColors.length; - if (remainingColors > 0) { - const newColors = getColormapColors(remainingColors); - setSpeciesColors((prevColors) => [...prevColors, ...newColors]); - } - }; const { status, @@ -93,35 +84,14 @@ function Newmap() { error, isFetching, } = useQuery({ - queryKey: ["occurrences", cqlFilter], //Example CQl filter species IN ('gambie', 'finiestus', 'fini') AND WITHIN (the_geom, MULTIPOLYGON((22,22,223,223))) AND adult =true AND season=dry - //queryFn: getOccurrences + queryKey: ["occurrences", cqlFilter], queryFn: ({ queryKey }) => getOccurrence(queryKey), }); - function responseToGEOJSON(occurrenceData: any) { - const geoJSONPoints = (occurrenceData || []).map((d: any) => { - const coordinates = d.geometry.coordinates; - return { - type: "Feature", - geometry: { - type: d.geometry.type, - coordinates: coordinates, - }, - properties: d.properties, - }; - }); - const geoJSONFeatureCollection = { - type: "FeatureCollection", - features: geoJSONPoints, - }; - return geoJSONFeatureCollection; - } - useEffect(() => { if (Object.keys(filterConditionsObj).length === 0) { return; } - //join the filter conditions into one string using the AND CQL clause conditions and add the date filter let filterConditions: string[] = Object.values(filterConditionsObj); filterConditions = filterConditions.filter((c) => c); const cql_filter = filterConditions.join(" AND "); @@ -137,10 +107,6 @@ function Newmap() { }); }; - // const clearDropdown = () =>{ - // setSelectedSpecies([]); - // } - const removeOccurence = ()=> { setCqlFilter(""); setSelectedSpecies([]) @@ -174,7 +140,6 @@ function Newmap() { const total = occurrenceData["totalFeatures"]; const returned = occurrenceData["numberReturned"]; console.log(`${returned} out of ${total} features`); - const featureArray = occurrenceData?.features || []; occurrenceSource?.clear(); const geoJsonFormat = new GeoJSON({ @@ -184,7 +149,7 @@ function Newmap() { }); //Externalize this to a utils service file somewhere else const geojsonData = geoJsonFormat.readFeatures( - responseToGEOJSON(featureArray), + occurrenceData, { featureProjection: "EPSG:3857", } @@ -208,7 +173,7 @@ function Newmap() { }); const occurrenceLayer = new VectorLayer({ - title: "Occurrence Layer", + title: "Occurrence", visible: true, preload: Infinity, source: occurrenceSource, @@ -216,7 +181,7 @@ function Newmap() { image: new Circle({ fill: fill, stroke: stroke, - radius: 8, + radius: 6, }), fill: fill, stroke: stroke, diff --git a/src/components/shared/CSS/LayerSwitcherStyles.css b/src/components/shared/CSS/LayerSwitcherStyles.css index 35bca04..b11d24d 100644 --- a/src/components/shared/CSS/LayerSwitcherStyles.css +++ b/src/components/shared/CSS/LayerSwitcherStyles.css @@ -1,200 +1,102 @@ -/* Custom styles for the LayerSwitcher container */ .ol-layerswitcher { - border-top: transparent !important; - background-color: transparent !important; - margin-top: 18px; - position: absolute; /* Position the LayerSwitcher absolutely */ - left: 9px; /* Align it to the left side of the screen */ - z-index: 1000; /* Adjust the z-index to ensure it's above other content */ - width: 320px; + border-top: transparent !important; + background-color: transparent !important; + margin-top: 25px; + position: absolute; + left: auto !important; + right: 10px; + z-index: 1000; + color: #038543; } -/* Custom styles for the checkboxes */ -.ol-layerswitcher-input { - margin-right: 5px; +.ol-layerswitcher, +.ol-layerswitcher.ol-forceopen { + min-width: 20em; } -.ol-visible { - color: #038543; - margin-left: 20px; - width: "auto"; - font-size: 17px; +.ol-layerswitcher [type=checkbox]+label:before, +.ol-layerswitcher [type=radio]+label:before { + content: '\2713'; + border: 2px solid #ccc; + background-color: transparent; } - -button { - display: hidden !important; -} -.panel-container { - background-color: white !important; -} - -.ol-layerswitcher-image > button:after, -.ol-layerswitcher > button:after { - top: 0.22em; - left: 0.34em; - background: #038543; - background-image: radial-gradient( - circle at 0.85em 0.6em, - #038543 0, - #038543 0.65em, - #038543 0.65em - ); +.ol-control.ol-layerswitcher [type=checkbox]:checked+label:before, +.ol-control.ol-layerswitcher [type=radio]:checked+label:before { + background: #038543; + border-color: #038543; } -.ol-layerswitcher [type="radio"]:checked + label:after, -.ol-layerswitcher [type="checkbox"]:checked + label:after { - content: ""; - position: absolute; - left: 0.1em; - top: 0.1em; - width: 1.2em; - height: 1.2em; - color: green; - background: whitesmoke; - box-sizing: border-box; +.ol-control.ol-layerswitcher [type=checkbox]:checked+label:after { + content: "\2713"; + color: #fff; + position: absolute; + top: -.15em; + left: 0.25em; + cursor: pointer; + font-weight: 900; + text-shadow: 1px 1px #fff; + font-size: 1.2em; + transform: none; + border: 0; + box-shadow: unset; +} +.ol-control.ol-layerswitcher [type="radio"]:checked+label:after { + content: none; } -.ol-layerswitcher [type="radio"] + label:before, -.ol-layerswitcher [type="checkbox"] + label:before { - content: ""; - position: absolute; - left: 0.1em; - top: 0.1em; - width: 1.2em; - height: 1.2em; - border-color: #787878; - background: whitesmoke; - box-sizing: border-box; -} - -.ol-layerswitcher [type="checkbox"]:checked + label:after { - color: #038543 !important; - /* border-width: 0 3px 3px 0; */ - border-style: solid; - width: 0.7em; - height: 1em; - transform: rotate(45deg); - left: 0.55em; - top: -0.05em; - /* box-shadow: 1px 0px 1px 1px #fff; */ +.ol-control.ol-layerswitcher button{ + margin-top: 25px; + pointer-events: auto; + background: #038543 !important; + border: 0; + user-select: none; + outline: none; + font-size: 1.5em; + right: 0.15em; + left: auto !important; +} +.ol-control.ol-layerswitcher button:before { + background: #038543; + -webkit-box-shadow: 0.1em 0.1em #fff; + box-shadow: 0.1em 0.1em #fff; +} +.ol-control.ol-layerswitcher button:after { + background: #fff none; } .ol-layerswitcher .layerswitcher-opacity { - position: relative; - border: 1px solid #369 !important; - height: 3px; - width: 120px; - margin: 5px 1em 10px 7px; - box-sizing: border-box; - border-radius: 3px; - background: #038543 !important; - cursor: pointer; - box-shadow: 1px 1px 1px #038543 !important; -} -.ol-touch .ol-control button { - font-size: 1.5em; - background-color: transparent !important; -} - -.ol-control button { - display: block; - margin: 1px; - color: #fff !important; - background-color: transparent !important; - font-weight: 700; - text-decoration: none; - font-size: inherit; - text-align: center; - height: 1.375em !important; - width: 1.375em !important; - line-height: 0.4em; - border-radius: 2px; -} - -.ol-zoom .ol-zoom-out { - border-radius: 2px 2px 0 0; - background-color: #038543 !important; -} - -.ol-zoom .ol-zoom-in { - border-radius: 2px 2px 0 0; - background-color: #038543 !important; + border:0; + background: none; + height: 1em; + box-shadow: none; +} +.ol-layerswitcher .layerswitcher-opacity:before { + content: ""; + width: 100%; + height: 3px; + background: #038543; + position: absolute; + top: 50%; + -webkit-transform: translateY(-50%); + transform: translateY(-50%); + border: 1px solid #038543; + box-sizing: border-box; } -.ol-layerswitcher .expend-layers, -.ol-layerswitcher .collapse-layers { - margin: 0 2px; - background-color: transparent; -} - -.ol-layerswitcher .expend-layers:after .expend-layers:before { - content: ""; - position: absolute; - left: 50%; - top: 0; - margin-left: -2px; - width: 1px !important; - height: 100%; -} - -.ol-layerswitcher-image > button, -.ol-layerswitcher > button { - float: left !important; - z-index: 10; - position: relative; - font-size: 1.7em; - padding-right: 10px !important; -} -.ol-layerswitcher .layerup { - float: right; - height: 2.5em; - background-color: #b8dfcc !important; - opacity: 0.5; - cursor: move; - cursor: ns-resize; -} -.ol-layerswitcher.ol-forceopen .panel-container { - display: block; - margin-left: 30px; -} -.ol-layerswitcher .panel { - list-style: none; - padding: 0; - margin: 0; - overflow: hidden; - font-family: Tahoma, Geneva, sans-serif; - font-size: 0.9em; - -webkit-transition: top 0.3s; - transition: top 0.3s; - position: relative; - top: 0; - background-color: whitesmoke; - border: 1px solid #038543; - border-radius: 5px; - padding: 2px; -} - -.ol-layerswitcher .layerup:before, -.ol-layerswitcher .layerup:after { - border-color: #038543 #fff !important; - border-style: solid; - border-width: 0.4em 0.4em 0; - content: ""; - height: 0; - position: absolute; - bottom: 3px; - left: 0.1em; - width: 0; -} - -.ol-layerswitcher-image > button:after, -.ol-layerswitcher > button:after { - top: 0.22em; - left: 0.34em; - background: #038543 !important; - background-image: radial-gradient( - circle at 0.85em 0.6em, - #038543 0, - #038543 0.65em, - #038543 0.65em - ); -} +.ol-layerswitcher .layerswitcher-opacity .layerswitcher-opacity-cursor { + width: auto; + transform: translateY(-50%); + height: 3px; + right: 0; + background: #666; + border-radius: 0; +} +.ol-touch .ol-layerswitcher .layerswitcher-opacity .layerswitcher-opacity-cursor, +.ol-layerswitcher .layerswitcher-opacity .layerswitcher-opacity-cursor:before { + position: absolute; + transform: translate(-50%,-50%); + width: 6px; + height: 16px; + left: -1px; + border-radius: 0; + background: #038543; +} \ No newline at end of file