+ {/*
*/}
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