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

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" />