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

Einbinden von OverlappingMarkerSpiderfier,js

Browse Source 
ohne Error, der code muss noch optimiert werden
This commit is contained in:
ISA
2024-04-18 09:47:25 +02:00
parent d8a0430f17
commit 82f259a3a6
4 changed files with 860 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

152
components/MapComponent.js
View File

@@ -5,12 +5,88 @@ import "leaflet/dist/leaflet.css";
import "leaflet-contextmenu/dist/leaflet.contextmenu.css";
import "leaflet-contextmenu";
import * as config from "../config/config.js";
import { OverlappingMarkerSpiderfier } from "../lib/OverlappingMarkerSpiderfier.js";
const MapComponent = ({ locations, onLocationUpdate }) => {
const mapRef = useRef(null); // Referenz auf das DIV-Element der Karte
const [map, setMap] = useState(null); // Zustand der Karteninstanz
const [online, setOnline] = useState(navigator.onLine); // Zustand der Internetverbindung
// Funktionen zur Überwachung der Internetverbindung
const checkInternet = () => {
fetch("https://tile.openstreetmap.org/1/1/1.png", { method: "HEAD" })
.then((response) => setOnline(response.ok))
.catch(() => setOnline(false));
};
// Handle online/offline status
useEffect(() => {
window.addEventListener("online", checkInternet);
window.addEventListener("offline", checkInternet);
return () => {
window.removeEventListener("online", checkInternet);
window.removeEventListener("offline", checkInternet);
};
}, []);
// Initialisiere die Karte
useEffect(() => {
if (mapRef.current && !map) {
initialMap = L.map(mapRef.current, {
center: [53.111111, 8.4625],
zoom: 10,
layers: [
TALAS,
ECI,
ULAF,
GSMModem,
CiscoRouter,
WAGO,
Siemens,
OTDR,
WDM,
GMA,
Sonstige,
TALASICL,
],
zoomControl: false, // Deaktiviere die Standard-Zoomsteuerung
contextmenu: true,
contextmenuItems: [
{ text: "Station hinzufügen", callback: showAddStationPopup },
{
text: "Station öffnen (Tab)",
icon: "img/screen_new.png",
callback: newLink,
},
{
text: "Station öffnen",
icon: "img/screen_same.png",
callback: sameLink,
},
{
text: "Koordinaten",
icon: "img/screen_same.png",
callback: lata,
},
"-", // Divider
{ text: "Reinzoomen", callback: zoomIn },
{ text: "Rauszoomen", callback: zoomOut },
{ text: "Hier zentrieren", callback: centerHere },
],
});
L.tileLayer(online ? onlineTileLayer : offlineTileLayer, {
attribution:
'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
}).addTo(initialMap);
if (window.OverlappingMarkerSpiderfier) {
const oms = new window.OverlappingMarkerSpiderfier(initialMap, {
nearbyDistance: 50,
});
setOms(oms);
}
setMap(initialMap);
setMap(initialMap);
}
}, [mapRef, map]);
const [GisStationsStaticDistrict, setGisStationsStaticDistrict] = useState(
[]
); // Zustand für statische Daten
@@ -267,80 +343,6 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
}
}, []);
// Funktionen zur Überwachung der Internetverbindung
const checkInternet = () => {
fetch("https://tile.openstreetmap.org/1/1/1.png", { method: "HEAD" })
.then((response) => setOnline(response.ok))
.catch(() => setOnline(false));
};
// Initialisiere die Karte
useEffect(() => {
if (mapRef.current && !map) {
initialMap = L.map(mapRef.current, {
center: [53.111111, 8.4625],
zoom: 10,
layers: [
TALAS,
ECI,
ULAF,
GSMModem,
CiscoRouter,
WAGO,
Siemens,
OTDR,
WDM,
GMA,
Sonstige,
TALASICL,
],
zoomControl: false, // Deaktiviere die Standard-Zoomsteuerung
contextmenu: true,
contextmenuItems: [
{ text: "Station hinzufügen", callback: showAddStationPopup },
{
text: "Station öffnen (Tab)",
icon: "img/screen_new.png",
callback: newLink,
},
{
text: "Station öffnen",
icon: "img/screen_same.png",
callback: sameLink,
},
{
text: "Koordinaten",
icon: "img/screen_same.png",
callback: lata,
},
"-", // Divider
{ text: "Reinzoomen", callback: zoomIn },
{ text: "Rauszoomen", callback: zoomOut },
{ text: "Hier zentrieren", callback: centerHere },
],
});
L.tileLayer(online ? onlineTileLayer : offlineTileLayer, {
attribution:
'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
}).addTo(initialMap);
const newOms = new OverlappingMarkerSpiderfier(initialMap, {
nearbyDistance: 50,
});
setOms(newOms);
setMap(initialMap);
}
}, [mapRef, map]);
// Handle online/offline status
useEffect(() => {
window.addEventListener("online", checkInternet);
window.addEventListener("offline", checkInternet);
return () => {
window.removeEventListener("online", checkInternet);
window.removeEventListener("offline", checkInternet);
};
}, []);
// Update map layers based on online status
useEffect(() => {
if (map) {