Alle Marker von layerGroups sind im Map sichtbar.
Mouseover für Popup, ok. Reinzoomen ok. Rauszoomen ok. Hier zentrieren ok. Nur TALAS layerGroup über checkbox ein- und ausblenden. Marker von DB anzeigen, aber verschieben geht noch nicht und hinzufügen auch nicht.
This commit is contained in:
ISA
@@ -67,7 +67,18 @@ function DataSheet() {
|
||||
}, [GisStationsStaticDistrict]);
|
||||
|
||||
const [checkedStations, setCheckedStations] = useState({});
|
||||
|
||||
/* const TALAS = new L.layerGroup();
|
||||
const ECI = new L.layerGroup();
|
||||
const ULAF = new L.layerGroup();
|
||||
const GSMModem = new L.layerGroup();
|
||||
const CiscoRouter = new L.layerGroup();
|
||||
const WAGO = new L.layerGroup();
|
||||
const Siemens = new L.layerGroup();
|
||||
const OTDR = new L.layerGroup();
|
||||
const WDM = new L.layerGroup();
|
||||
const GMA = new L.layerGroup();
|
||||
const Sonstige = new L.layerGroup();
|
||||
const TALASICL = new L.layerGroup(); */
|
||||
const handleCheckboxChangeTALAS = (event) => {
|
||||
const { checked } = event.target;
|
||||
setMapLayersVisibility((prev) => ({
|
||||
@@ -75,6 +86,112 @@ function DataSheet() {
|
||||
TALAS: checked,
|
||||
}));
|
||||
};
|
||||
const handleCheckboxChangeECI = (event) => {
|
||||
const { checked } = event.target;
|
||||
setMapLayersVisibility((prev) => ({
|
||||
...prev,
|
||||
ECI: checked,
|
||||
}));
|
||||
};
|
||||
const handleCheckboxChangeULAF = (event) => {
|
||||
const { checked } = event.target;
|
||||
setMapLayersVisibility((prev) => ({
|
||||
...prev,
|
||||
ULAF: checked,
|
||||
}));
|
||||
};
|
||||
const handleCheckboxChangeGSMModem = (event) => {
|
||||
const { checked } = event.target;
|
||||
setMapLayersVisibility((prev) => ({
|
||||
...prev,
|
||||
GSMModem: checked,
|
||||
}));
|
||||
};
|
||||
const handleCheckboxChangeCiscoRouter = (event) => {
|
||||
const { checked } = event.target;
|
||||
setMapLayersVisibility((prev) => ({
|
||||
...prev,
|
||||
CiscoRouter: checked,
|
||||
}));
|
||||
};
|
||||
const handleCheckboxChangeWAGO = (event) => {
|
||||
const { checked } = event.target;
|
||||
setMapLayersVisibility((prev) => ({
|
||||
...prev,
|
||||
WAGO: checked,
|
||||
}));
|
||||
};
|
||||
const handleCheckboxChangeSiemens = (event) => {
|
||||
const { checked } = event.target;
|
||||
setMapLayersVisibility((prev) => ({
|
||||
...prev,
|
||||
Siemens: checked,
|
||||
}));
|
||||
};
|
||||
const handleCheckboxChangeOTDR = (event) => {
|
||||
const { checked } = event.target;
|
||||
setMapLayersVisibility((prev) => ({
|
||||
...prev,
|
||||
OTDR: checked,
|
||||
}));
|
||||
};
|
||||
const handleCheckboxChangeWDM = (event) => {
|
||||
const { checked } = event.target;
|
||||
setMapLayersVisibility((prev) => ({
|
||||
...prev,
|
||||
WDM: checked,
|
||||
}));
|
||||
};
|
||||
const handleCheckboxChangeGMA = (event) => {
|
||||
const { checked } = event.target;
|
||||
setMapLayersVisibility((prev) => ({
|
||||
...prev,
|
||||
GMA: checked,
|
||||
}));
|
||||
};
|
||||
const handleCheckboxChangeSonstige = (event) => {
|
||||
const { checked } = event.target;
|
||||
setMapLayersVisibility((prev) => ({
|
||||
...prev,
|
||||
Sonstige: checked,
|
||||
}));
|
||||
};
|
||||
const handleCheckboxChangeTALASICL = (event) => {
|
||||
const { checked } = event.target;
|
||||
setMapLayersVisibility((prev) => ({
|
||||
...prev,
|
||||
TALASICL: checked,
|
||||
}));
|
||||
};
|
||||
const handleCheckboxChangeDAUZ = (event) => {
|
||||
const { checked } = event.target;
|
||||
setMapLayersVisibility((prev) => ({
|
||||
...prev,
|
||||
DAUZ: checked,
|
||||
}));
|
||||
};
|
||||
const handleCheckboxChangeSMSFunkmodem = (event) => {
|
||||
const { checked } = event.target;
|
||||
|
||||
setMapLayersVisibility((prev) => ({
|
||||
...prev,
|
||||
SMSFunkmodem: checked,
|
||||
}));
|
||||
};
|
||||
const handleCheckboxChangeMessstellen = (event) => {
|
||||
const { checked } = event.target;
|
||||
setMapLayersVisibility((prev) => ({
|
||||
...prev,
|
||||
Messstellen: checked,
|
||||
}));
|
||||
};
|
||||
const handleCheckboxChange = (event) => {
|
||||
const { checked, value } = event.target;
|
||||
setCheckedStations((prev) => ({
|
||||
...prev,
|
||||
[value]: checked,
|
||||
}));
|
||||
};
|
||||
|
||||
const handleStationChange = (event) => {
|
||||
console.log("Station selected:", event.target.value);
|
||||
@@ -96,6 +213,34 @@ function DataSheet() {
|
||||
);
|
||||
}
|
||||
}, [checkedStations, systemListing]);
|
||||
const eciStation = systemListing.find((station) => station.name === "ECI");
|
||||
const ulafStation = systemListing.find((station) => station.name === "ULAF");
|
||||
const gsmModemStation = systemListing.find(
|
||||
(station) => station.name === "GSMModem"
|
||||
);
|
||||
const ciscoRouterStation = systemListing.find(
|
||||
(station) => station.name === "CiscoRouter"
|
||||
);
|
||||
const wagoStation = systemListing.find((station) => station.name === "WAGO");
|
||||
const siemensStation = systemListing.find(
|
||||
(station) => station.name === "Siemens"
|
||||
);
|
||||
const otdrStation = systemListing.find((station) => station.name === "OTDR");
|
||||
const wdmStation = systemListing.find((station) => station.name === "WDM");
|
||||
const gmaStation = systemListing.find((station) => station.name === "GMA");
|
||||
const sonstigeStation = systemListing.find(
|
||||
(station) => station.name === "Sonstige"
|
||||
);
|
||||
const talasiclStation = systemListing.find(
|
||||
(station) => station.name === "TALASICL"
|
||||
);
|
||||
const dauzStation = systemListing.find((station) => station.name === "DAUZ");
|
||||
const smsFunkmodemStation = systemListing.find(
|
||||
(station) => station.name === "SMSFunkmodem"
|
||||
);
|
||||
const messstellenStation = systemListing.find(
|
||||
(station) => station.name === "Messstellen"
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
@@ -134,7 +279,105 @@ function DataSheet() {
|
||||
onChange={handleCheckboxChangeTALAS}
|
||||
/>
|
||||
<label className="text-sm font-bold ml-2">TALAS</label>
|
||||
{/* Weitere Inhalte der Datenblattkomponente */}
|
||||
<br />
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={mapLayersVisibility.ECI}
|
||||
onChange={handleCheckboxChangeECI}
|
||||
/>
|
||||
<label className="text-sm font-bold ml-2">ECI</label>
|
||||
<br />
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={mapLayersVisibility.ULAF}
|
||||
onChange={handleCheckboxChangeULAF}
|
||||
/>
|
||||
<label className="text-sm font-bold ml-2">ULAF</label>
|
||||
<br />
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={mapLayersVisibility.GSMModem}
|
||||
onChange={handleCheckboxChangeGSMModem}
|
||||
/>
|
||||
<label className="text-sm font-bold ml-2">GSM Modem</label>
|
||||
<br />
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={mapLayersVisibility.CiscoRouter}
|
||||
onChange={handleCheckboxChangeCiscoRouter}
|
||||
/>
|
||||
<label className="text-sm font-bold ml-2">Cisco Router</label>
|
||||
<br />
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={mapLayersVisibility.WAGO}
|
||||
onChange={handleCheckboxChangeWAGO}
|
||||
/>
|
||||
<label className="text-sm font-bold ml-2">WAGO</label>
|
||||
<br />
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={mapLayersVisibility.Siemens}
|
||||
onChange={handleCheckboxChangeSiemens}
|
||||
/>
|
||||
<label className="text-sm font-bold ml-2">Siemens</label>
|
||||
<br />
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={mapLayersVisibility.OTDR}
|
||||
onChange={handleCheckboxChangeOTDR}
|
||||
/>
|
||||
<label className="text-sm font-bold ml-2">OTDR</label>
|
||||
<br />
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={mapLayersVisibility.WDM}
|
||||
onChange={handleCheckboxChangeWDM}
|
||||
/>
|
||||
<label className="text-sm font-bold ml-2">WDM</label>
|
||||
<br />
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={mapLayersVisibility.GMA}
|
||||
onChange={handleCheckboxChangeGMA}
|
||||
/>
|
||||
<label className="text-sm font-bold ml-2">GMA</label>
|
||||
<br />
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={mapLayersVisibility.Sonstige}
|
||||
onChange={handleCheckboxChangeSonstige}
|
||||
/>
|
||||
<label className="text-sm font-bold ml-2">Sonstige</label>
|
||||
<br />
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={mapLayersVisibility.TALASICL}
|
||||
onChange={handleCheckboxChangeTALASICL}
|
||||
/>
|
||||
<label className="text-sm font-bold ml-2">TALASICL</label>
|
||||
<br />
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={mapLayersVisibility.DAUZ}
|
||||
onChange={handleCheckboxChangeDAUZ}
|
||||
/>
|
||||
<label className="text-sm font-bold ml-2">DAUZ</label>
|
||||
<br />
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={mapLayersVisibility.SMSFunkmodem}
|
||||
onChange={handleCheckboxChangeSMSFunkmodem}
|
||||
/>
|
||||
<label className="text-sm font-bold ml-2">SMS Funkmodem</label>
|
||||
<br />
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={mapLayersVisibility.Messstellen}
|
||||
onChange={handleCheckboxChangeMessstellen}
|
||||
/>
|
||||
<label className="text-sm font-bold ml-2">Messstellen</label>
|
||||
<br />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1038,7 +1038,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
|
||||
console.log("smsfunkmodemMarkers", smsfunkmodemMarkers);
|
||||
//-------------------------------------------
|
||||
//--------------------------------------------------------------------------------
|
||||
useEffect(() => {
|
||||
/* useEffect(() => {
|
||||
// Drucker ist hier und noch eine Marker "SNMP"
|
||||
if (map && sonstigeMarkers.length) {
|
||||
sonstigeMarkers.forEach((marker) => {
|
||||
@@ -1055,7 +1055,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
|
||||
}
|
||||
}, [map, sonstigeMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken
|
||||
|
||||
console.log("sonstigeMarkers", sonstigeMarkers);
|
||||
console.log("sonstigeMarkers", sonstigeMarkers); */
|
||||
//-------------------------------------------
|
||||
//--------------------------------------------------------------------------------
|
||||
useEffect(() => {
|
||||
|
||||
Reference in New Issue
Block a user