diff --git a/components/MapComponent.js b/components/MapComponent.js index f29e4a5cd..e56f23761 100644 --- a/components/MapComponent.js +++ b/components/MapComponent.js @@ -40,6 +40,12 @@ import { poiLayerVisibleState } from "../store/atoms/poiLayerVisible.js"; import { data } from "autoprefixer"; import plusRoundIcon from "./PlusRoundIcon.js"; +import { + parsePoint, + determinePriority, + createAndSetMarkers, +} from "../utlis/utils.js"; + //--------------------------------------------------------------------- //-------------------- MapComponent ----------------------------------- const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { @@ -513,7 +519,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { let initMap = []; //------------------------------------------ //------------------------------------------ - function parsePoint(pointString) { + /* function parsePoint(pointString) { const match = pointString.match( /POINT\s*\((\d+(\.\d+)?)\s+(\d+(\.\d+)?)\)/ ); @@ -527,14 +533,14 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { console.error("Invalid POINT format:", pointString); return null; // Oder eine sinnvolle Standardantwort } - } + } */ //---------------------------------- //------------------------------------------ - function parsePoint(position) { + /* function parsePoint(position) { const [longitude, latitude] = position.slice(6, -1).split(" "); return { latitude: parseFloat(latitude), longitude: parseFloat(longitude) }; - } + } */ //----------------------------------------------------------------- // TALAS Marker hinzufügen //----------------------------------------------------------------- @@ -574,14 +580,14 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { const [sonstigeMarkers, setSonstigeMarkers] = useState([]); //----------station.System === 200 const [ulafMarkers, setUlafMarkers] = useState([]); //------------------ no exist //-------------------------------------------------------------------------------- - const determinePriority = (iconPath) => { + /* const determinePriority = (iconPath) => { for (let priority of priorityConfig) { if (iconPath.includes(priority.name.toLowerCase())) { return priority.level; } } return 5; // Default priority (lowest) - }; + }; */ /* function determinePriority(iconPath) { if (iconPath.includes("critical")) return 1; // Highest priority if (iconPath.includes("critical")) { @@ -606,7 +612,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { return 5; // Default priority (lowest) } */ // Daten von einer externen Quelle laden - const createAndSetMarkers = async (systemId, setMarkersFunction) => { + /* const createAndSetMarkers = async (systemId, setMarkersFunction) => { try { const response1 = await fetch(config.mapGisStationsStaticDistrictUrl); const jsonResponse = await response1.json(); @@ -635,10 +641,6 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { const priority = determinePriority(iconPath); const zIndexOffset = 100 * (5 - priority); // Adjusted for simplicity and positive values - /* console.log( - `Icon Path: ${iconPath}, Priority: ${priority}, zIndexOffset: ${zIndexOffset}` - ); */ - const marker = L.marker([station.X, station.Y], { icon: L.icon({ iconUrl: iconPath, @@ -687,7 +689,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { } catch (error) { console.error("Error fetching data: ", error); } - }; + }; */ //-------------------------------------------------------------------------------- const mapLayersVisibility = useRecoilValue(mapLayersState); diff --git a/utlis/utils.js b/utlis/utils.js new file mode 100644 index 000000000..ee9d40c55 --- /dev/null +++ b/utlis/utils.js @@ -0,0 +1,94 @@ +export const parsePoint = (position) => { + const [longitude, latitude] = position.slice(6, -1).split(" "); + return { latitude: parseFloat(latitude), longitude: parseFloat(longitude) }; +}; +//---------------------------------------------- +export const determinePriority = (iconPath) => { + for (let priority of priorityConfig) { + if (iconPath.includes(priority.name.toLowerCase())) { + return priority.level; + } + } + return 5; // Default priority (lowest) +}; +//---------------------------------------------- +export const createAndSetMarkers = async (systemId, setMarkersFunction) => { + try { + const response1 = await fetch(config.mapGisStationsStaticDistrictUrl); + const jsonResponse = await response1.json(); + const response2 = await fetch(config.mapGisStationsStatusDistrictUrl); + const statusResponse = await response2.json(); + + const getIdSystemAndAllowValueMap = new Map( + GisSystemStatic.map((system) => [system.IdSystem, system.Allow]) + ); + //console.log("getIdSystemAndAllowValueMap:", getIdSystemAndAllowValueMap); + + if (jsonResponse.Points && statusResponse.Statis) { + const statisMap = new Map(statusResponse.Statis.map((s) => [s.IdLD, s])); + let markersData = jsonResponse.Points.filter( + (station) => + station.System === systemId && + getIdSystemAndAllowValueMap.get(station.System) === 1 + ).map((station) => { + const statis = statisMap.get(station.IdLD); + const iconPath = statis + ? `img/icons/${statis.Na}-marker-icon-${station.Icon}.png` + : `img/icons/marker-icon-${station.Icon}.png`; + + const priority = determinePriority(iconPath); + const zIndexOffset = 100 * (5 - priority); // Adjusted for simplicity and positive values + + /* console.log( + `Icon Path: ${iconPath}, Priority: ${priority}, zIndexOffset: ${zIndexOffset}` + ); */ + + const marker = L.marker([station.X, station.Y], { + icon: L.icon({ + iconUrl: iconPath, + iconSize: [25, 41], + iconAnchor: [12, 41], + popupAnchor: [1, -34], + }), + areaName: station.Area_Name, // Stelle sicher, dass dieser Bereich gesetzt wird + link: station.Link, + zIndexOffset: zIndexOffset, + bounceOnAdd: !!statis, + }); + + if (statis) { + marker.on("add", () => marker.bounce(3)); + } + + const statusInfo = statusResponse.Statis.filter( + (status) => status.IdLD === station.IdLD + ) + .reverse() + .map( + (status) => ` +
+
+ ${status.Me} (${status.Na}) +
+ ` + ) + .join(""); + + marker.bindPopup(` +
+ ${station.LD_Name} + ${station.Device}
+ ${station.Area_Short} (${station.Area_Name})
+ ${station.Location_Short} (${station.Location_Name}) +
${statusInfo}
+
+ `); + return marker; + }); + + setMarkersFunction(markersData); + } + } catch (error) { + console.error("Error fetching data: ", error); + } +};