Ismail/nodeMap
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add pointer cursor to expand icon and link zoom-out functionality

Browse Source
This commit is contained in:
ISA
2024-04-29 08:33:10 +02:00
parent ff12901b11
commit 8f4552c259
6 changed files with 90 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
components/DataSheet.js
View File

@@ -5,6 +5,7 @@ import { gisStationsStaticDistrictState } from "../store/gisStationState";
import { gisSystemStaticState } from "../store/gisSystemState";
import { mapLayersState } from "../store/mapLayersState";
import { selectedAreaState } from "../store/selectedAreaState";
import { zoomTriggerState } from "../store/zoomTriggerState";
function DataSheet() {
const setSelectedArea = useSetRecoilState(selectedAreaState);
@@ -72,20 +73,26 @@ function DataSheet() {
);
}, [GisStationsStaticDistrict, GisSystemStatic]);
const handleCheckboxChange = (name, event) => {
const { checked } = event.target;
//console.log(`Checkbox ${name} checked state:`, checked); // Log the checked state of the checkbox
const handleCheckboxChange = (name, event) => {
const { checked } = event.target;
//console.log(`Checkbox ${name} checked state:`, checked); // Log the checked state of the checkbox
setMapLayersVisibility((prev) => {
const newState = {
...prev,
[name]: checked,
};
//console.log(`New mapLayersVisibility state:`, newState); // Log the new state after update
return newState;
});
};
setMapLayersVisibility((prev) => {
const newState = {
...prev,
[name]: checked,
};
//console.log(`New mapLayersVisibility state:`, newState); // Log the new state after update
return newState;
});
};
//---------------------------------------------------------
const setZoomTrigger = useSetRecoilState(zoomTriggerState);
const handleIconClick = () => {
setZoomTrigger((current) => current + 1); // Trigger durch Inkrementierung
};
//---------------------------------------------------------
return (
<div
@@ -109,7 +116,8 @@ const handleCheckboxChange = (name, event) => {
<img
src="/img/expand-icon.svg"
alt="Expand"
className="h-6 w-6 ml-2"
className="h-6 w-6 ml-2 cursor-pointer"
onClick={handleIconClick}
/>
</div>
<div>

81
components/MapComponent.js
View File

@@ -14,6 +14,7 @@ import { gisStationsStaticDistrictState } from "../store/gisStationState";
import { gisSystemStaticState } from "../store/gisSystemState";
import { mapLayersState } from "../store/mapLayersState";
import { selectedAreaState } from "../store/selectedAreaState";
import { zoomTriggerState } from "../store/zoomTriggerState";
const MapComponent = ({ locations, onLocationUpdate }) => {
const poiLayerRef = useRef(null); // Referenz auf die Layer-Gruppe für Datenbank-Marker
@@ -1459,48 +1460,64 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
//------------------------------------------ */
const selectedArea = useRecoilValue(selectedAreaState);
// Combine all markers into a single array
const allMarkers = [
...talasMarkers,
...eciMarkers,
...gsmModemMarkers,
...ciscoRouterMarkers,
...wagoMarkers,
...siemensMarkers,
...otdrMarkers,
...wdmMarkers,
...gmaMarkers,
...messstellenMarkers,
...talasiclMarkers,
...dauzMarkers,
...smsfunkmodemMarkers,
...sonstigeMarkers,
...ulafMarkers,
];
// Combine all markers into a single array
const allMarkers = [
...talasMarkers,
...eciMarkers,
...gsmModemMarkers,
...ciscoRouterMarkers,
...wagoMarkers,
...siemensMarkers,
...otdrMarkers,
...wdmMarkers,
...gmaMarkers,
...messstellenMarkers,
...talasiclMarkers,
...dauzMarkers,
...smsfunkmodemMarkers,
...sonstigeMarkers,
...ulafMarkers,
];
// Function to find a marker by areaName across all groups
const findMyMarker = (areaName) => {
return allMarkers.find((marker) => marker.options.areaName === areaName);
};
// Function to find a marker by areaName across all groups
const findMyMarker = (areaName) => {
return allMarkers.find((marker) => marker.options.areaName === areaName);
};
// Effect to handle navigation to selected area
useEffect(() => {
if (selectedArea && map) {
const marker = findMyMarker(selectedArea);
if (marker) {
map.flyTo(marker.getLatLng(), 14); // Adjust zoom level as needed
// Effect to handle navigation to selected area
useEffect(() => {
if (selectedArea && map) {
const marker = findMyMarker(selectedArea);
if (marker) {
map.flyTo(marker.getLatLng(), 14); // Adjust zoom level as needed
}
}
}
}, [selectedArea, map, allMarkers]); // Include allMarkers in the dependencies
}, [selectedArea, map, allMarkers]); // Include allMarkers in the dependencies
/* const findMyMarker = (areaName) => {
/* const findMyMarker = (areaName) => {
// Angenommen, jeder Marker hat eine option `areaName`, die beim Erstellen gesetzt wurde.
return talasMarkers.find((marker) => marker.options.areaName === areaName);
}; */
//------------------------------------------
const zoomTrigger = useRecoilValue(zoomTriggerState);
useEffect(() => {
if (map) {
var x = 51.41321407879154;
var y = 7.739617925303934;
var zoom = 7;
if (map && map.flyTo) {
map.flyTo([x, y], zoom);
} else {
console.error("Map object is not ready or does not have flyTo method");
} // Ihre bereits existierende Funktion, die Zoom-Out ausführt
}
}, [map, zoomTrigger]);
//------------------------------------------
return (
<>
<DataSheet className="z-50" />