polylines tooltip content
This commit is contained in:
ISA
33
utils/contextMenuUtils.js
Normal file
33
utils/contextMenuUtils.js
Normal file
@@ -0,0 +1,33 @@
|
||||
// contextMenuUtils.js
|
||||
import { BASE_URL } from "../config/urls";
|
||||
export function addContextMenuToMarker(marker) {
|
||||
marker.unbindContextMenu(); // Entferne das Kontextmenü, um Duplikate zu vermeiden
|
||||
|
||||
marker.bindContextMenu({
|
||||
contextmenu: true,
|
||||
contextmenuWidth: 140,
|
||||
contextmenuItems: [
|
||||
/* {
|
||||
text: "Station öffnen (Tab)",
|
||||
icon: "/img/screen_new.png",
|
||||
callback: (e) => openInNewTab(e, marker),
|
||||
},
|
||||
{
|
||||
text: "Station öffnen",
|
||||
icon: "/img/screen_same.png",
|
||||
callback: (e) => openInSameWindow(e, marker),
|
||||
}, */
|
||||
],
|
||||
});
|
||||
}
|
||||
// Funktion zum Öffnen in einem neuen Tab
|
||||
export function openInNewTab(e, marker) {
|
||||
const baseUrl = BASE_URL;
|
||||
//console.log("baseUrl:", baseUrl);
|
||||
if (marker && marker.options && marker.options.link) {
|
||||
//console.log("Marker data:", baseUrl + marker.options.link);
|
||||
window.open(baseUrl + marker.options.link, "_blank");
|
||||
} else {
|
||||
console.error("Fehler: Marker hat keine gültige 'link' Eigenschaft");
|
||||
}
|
||||
}
|
||||
19
utils/geometryUtils.js
Normal file
19
utils/geometryUtils.js
Normal file
@@ -0,0 +1,19 @@
|
||||
// utils/geometryUtils.js
|
||||
|
||||
export const findClosestPoints = (coordinates, newPoint, map) => {
|
||||
if (!map) {
|
||||
console.error("Map is not defined. Cannot find closest points.");
|
||||
return [];
|
||||
}
|
||||
|
||||
let minDist = Infinity;
|
||||
let closestPair = [];
|
||||
for (let i = 1; i < coordinates.length; i++) {
|
||||
const dist = L.LineUtil.pointToSegmentDistance(map.latLngToLayerPoint(newPoint), map.latLngToLayerPoint(coordinates[i - 1]), map.latLngToLayerPoint(coordinates[i]));
|
||||
if (dist < minDist) {
|
||||
minDist = dist;
|
||||
closestPair = [coordinates[i - 1], coordinates[i], i];
|
||||
}
|
||||
}
|
||||
return closestPair;
|
||||
};
|
||||
39
utils/handlePoiSelect.js
Normal file
39
utils/handlePoiSelect.js
Normal file
@@ -0,0 +1,39 @@
|
||||
// utils/handlePoiSelect.js
|
||||
const handlePoiSelect = async (poiData, setSelectedPoi, setLocationDeviceData, setDeviceName, poiLayerRef, poiTypMap) => {
|
||||
setSelectedPoi(poiData); // poiData should be the data of the selected POI
|
||||
//console.log("Selected POI:", poiData);
|
||||
//console.log("Selected POI idLD:", poiData.deviceId);
|
||||
|
||||
try {
|
||||
const response = await fetch("/api/talas_v5_DB/locationDevice/locationDevices");
|
||||
const data = await response.json();
|
||||
setLocationDeviceData(data);
|
||||
//console.log("Standort- und Gerätedaten:", data);
|
||||
|
||||
const currentDevice = data.find((device) => device.idLD === poiData.deviceId);
|
||||
if (currentDevice) {
|
||||
setDeviceName(currentDevice.name);
|
||||
//console.log("Current Device name in poiUpdate2:", currentDevice.name);
|
||||
|
||||
// Update the marker popup with the device name and type
|
||||
const marker = poiLayerRef.current.getLayers().find((m) => m.options.id === poiData.id);
|
||||
if (marker) {
|
||||
marker.setPopupContent(
|
||||
`
|
||||
<div>
|
||||
<b class="text-xl text-black-700">${poiData.description || "Unbekannt"}</b><br>
|
||||
${currentDevice.name}<br>
|
||||
${poiTypMap.get(poiData.idPoiTyp) || "Unbekannt"}<br>
|
||||
</div>
|
||||
`,
|
||||
);
|
||||
marker.openPopup();
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Fehler beim Abrufen der Gerätedaten2:", error);
|
||||
setLocationDeviceData([]);
|
||||
}
|
||||
};
|
||||
|
||||
export default handlePoiSelect;
|
||||
272
utils/mapFeatures.js
Normal file
272
utils/mapFeatures.js
Normal file
@@ -0,0 +1,272 @@
|
||||
// utils/mapFeatures.js
|
||||
import { findClosestPoints } from "./geometryUtils";
|
||||
import handlePoiSelect from "./handlePoiSelect";
|
||||
import { updateLocationInDatabase } from "../services/apiService";
|
||||
import { handleEditPoi, insertNewMarker, removeMarker } from "./markerUtils"; // Import removeMarker here
|
||||
import circleIcon from "../components/gisPolylines/icons/CircleIcon";
|
||||
import startIcon from "../components/gisPolylines/icons/StartIcon";
|
||||
import endIcon from "../components/gisPolylines/icons/EndIcon";
|
||||
import { AddSupportPointIcon, RemoveSupportPointIcon } from "../components/gisPolylines/icons/SupportPointIcons";
|
||||
import { redrawPolyline } from "./mapUtils"; // Import redrawPolyline here
|
||||
|
||||
export const setupMarkers = async (
|
||||
map,
|
||||
locations,
|
||||
poiData,
|
||||
poiTypMap,
|
||||
userRights,
|
||||
poiLayerRef,
|
||||
setSelectedPoi,
|
||||
setLocationDeviceData,
|
||||
setDeviceName,
|
||||
setCurrentPoi,
|
||||
poiLayerVisible,
|
||||
fetchPoiData,
|
||||
toast,
|
||||
setShowPoiUpdateModal,
|
||||
setCurrentPoiData,
|
||||
deviceName
|
||||
) => {
|
||||
if (map && poiLayerRef.current) {
|
||||
map.removeLayer(poiLayerRef.current);
|
||||
poiLayerRef.current = new L.LayerGroup().addTo(map);
|
||||
|
||||
for (const location of locations) {
|
||||
try {
|
||||
const { latitude, longitude } = parsePoint(location.position);
|
||||
const poiTypName = poiTypMap.get(location.idPoiTyp) || "Unbekannt";
|
||||
const canDrag = userRights ? userRights.includes(56) : false;
|
||||
const matchingIcon = poiData.find((poi) => poi.idPoi === location.idPoi);
|
||||
const iconUrl = matchingIcon ? `/img/icons/pois/${matchingIcon.path}` : "/img/icons/pois/default-icon.png";
|
||||
|
||||
//console.log("Setting up marker for location:", location);
|
||||
|
||||
const marker = L.marker([latitude, longitude], {
|
||||
icon: L.icon({
|
||||
iconUrl: iconUrl,
|
||||
iconSize: [25, 41],
|
||||
iconAnchor: [12, 41],
|
||||
popupAnchor: [1, -34],
|
||||
}),
|
||||
draggable: canDrag,
|
||||
id: location.idPoi,
|
||||
name: location.name,
|
||||
description: location.description,
|
||||
}).bindContextMenu({
|
||||
contextmenu: true,
|
||||
contextmenuWidth: 140,
|
||||
contextmenuItems: [
|
||||
{
|
||||
text: "POI Bearbeiten",
|
||||
icon: "/img/poi-edit.png",
|
||||
callback: () => handleEditPoi(marker, userRights, setCurrentPoiData, setShowPoiUpdateModal, fetchPoiData, toast),
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
marker.bindPopup(`
|
||||
<div>
|
||||
<b class="text-xl text-black-700">${location.description || "Unbekannt"}</b><br>
|
||||
${deviceName}<br>
|
||||
${poiTypName}<br>
|
||||
</div>
|
||||
`);
|
||||
|
||||
marker.on("mouseover", function () {
|
||||
handlePoiSelect(
|
||||
{
|
||||
id: location.idPoi,
|
||||
deviceId: location.idLD,
|
||||
idPoiTyp: location.idPoiTyp,
|
||||
typ: poiTypName,
|
||||
description: location.description,
|
||||
},
|
||||
setSelectedPoi,
|
||||
setLocationDeviceData,
|
||||
setDeviceName,
|
||||
poiLayerRef,
|
||||
poiTypMap
|
||||
);
|
||||
setCurrentPoi(location);
|
||||
this.openPopup();
|
||||
});
|
||||
|
||||
marker.on("mouseout", function () {
|
||||
this.closePopup();
|
||||
});
|
||||
|
||||
marker.on("dragend", (e) => {
|
||||
if (canDrag) {
|
||||
const newLat = e.target.getLatLng().lat;
|
||||
const newLng = e.target.getLatLng().lng;
|
||||
const markerId = e.target.options.id;
|
||||
updateLocationInDatabase(markerId, newLat, newLng).then(() => {
|
||||
//onLocationUpdate(markerId, newLat, newLng);
|
||||
});
|
||||
} else {
|
||||
console.error("Drag operation not allowed");
|
||||
}
|
||||
});
|
||||
|
||||
if (poiLayerVisible) {
|
||||
marker.addTo(poiLayerRef.current);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error processing a location:", error);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
//----------------------------------
|
||||
export const setupPolylines = (map, linePositions, lineColors, tooltipContents, setNewCoords, tempMarker, currentZoom, currentCenter) => {
|
||||
const markers = [];
|
||||
const polylines = [];
|
||||
|
||||
linePositions.forEach((lineData, lineIndex) => {
|
||||
const lineMarkers = [];
|
||||
lineData.coordinates.forEach((coord, index) => {
|
||||
let icon = circleIcon;
|
||||
if (index === 0) {
|
||||
icon = startIcon;
|
||||
} else if (index === lineData.coordinates.length - 1) {
|
||||
icon = endIcon;
|
||||
}
|
||||
|
||||
const marker = L.marker(coord, {
|
||||
icon: icon,
|
||||
draggable: true,
|
||||
contextmenu: true,
|
||||
contextmenuInheritItems: false,
|
||||
contextmenuItems: [],
|
||||
}).addTo(map);
|
||||
|
||||
marker.on("dragend", () => {
|
||||
const newCoords = marker.getLatLng();
|
||||
setNewCoords(newCoords);
|
||||
const newCoordinates = [...lineData.coordinates];
|
||||
newCoordinates[index] = [newCoords.lat, newCoords.lng];
|
||||
|
||||
const updatedPolyline = L.polyline(newCoordinates, {
|
||||
color: lineColors[lineData.idModul] || "#000000",
|
||||
}).addTo(map);
|
||||
|
||||
updatedPolyline.bindTooltip(tooltipContents[lineData.idModul] || "Standard-Tooltip-Inhalt", {
|
||||
permanent: false,
|
||||
direction: "auto",
|
||||
});
|
||||
|
||||
updatedPolyline.on("mouseover", () => {
|
||||
updatedPolyline.setStyle({ weight: 10 });
|
||||
updatedPolyline.bringToFront();
|
||||
});
|
||||
updatedPolyline.on("mouseout", () => {
|
||||
updatedPolyline.setStyle({ weight: 3 });
|
||||
});
|
||||
|
||||
polylines[lineIndex].remove();
|
||||
polylines[lineIndex] = updatedPolyline;
|
||||
lineData.coordinates = newCoordinates;
|
||||
|
||||
const requestData = {
|
||||
idModul: lineData.idModul,
|
||||
idLD: lineData.idLD,
|
||||
newCoordinates,
|
||||
};
|
||||
|
||||
fetch("/api/talas_v5_DB/gisLines/updateLineCoordinates", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(requestData),
|
||||
})
|
||||
.then((response) => {
|
||||
if (!response.ok) {
|
||||
return response.json().then((data) => {
|
||||
throw new Error(data.error || "Unbekannter Fehler");
|
||||
});
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then((data) => {
|
||||
console.log("Koordinaten erfolgreich aktualisiert:", data);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Fehler beim Aktualisieren der Koordinaten:", error.message);
|
||||
});
|
||||
});
|
||||
|
||||
marker.on("mouseover", function () {
|
||||
this.bindContextMenu({
|
||||
contextmenuItems: [
|
||||
{
|
||||
text: "Stützpunkt entfernen",
|
||||
icon: "/img/icons/gisLines/remove-support-point.svg",
|
||||
callback: () => {
|
||||
const newCoords = marker.getLatLng();
|
||||
const newCoordinates = [...lineData.coordinates];
|
||||
newCoordinates[index] = [newCoords.lat, newCoords.lng];
|
||||
|
||||
removeMarker(marker, lineData, currentZoom, currentCenter); // Pass currentZoom and currentCenter here
|
||||
polylines[lineIndex].remove();
|
||||
lineData.coordinates = newCoordinates;
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
});
|
||||
|
||||
marker.on("mouseout", function () {
|
||||
this.unbindContextMenu();
|
||||
});
|
||||
|
||||
lineMarkers.push(marker);
|
||||
});
|
||||
|
||||
const polyline = L.polyline(lineData.coordinates, {
|
||||
color: lineColors[lineData.idModul] || "#000000",
|
||||
contextmenu: true,
|
||||
contextmenuItems: [
|
||||
{
|
||||
text: "Stützpunkt hinzufügen",
|
||||
icon: "/img/icons/gisLines/add-support-point.svg",
|
||||
callback: (e) => {
|
||||
if (tempMarker) {
|
||||
tempMarker.remove();
|
||||
}
|
||||
const newPoint = e.latlng;
|
||||
const closestPoints = findClosestPoints(lineData.coordinates, newPoint, map);
|
||||
insertNewMarker(closestPoints, newPoint, lineData, map); // Make sure this is defined
|
||||
redrawPolyline(lineData, lineColors, tooltipContents, map); // Add missing parameters
|
||||
window.location.reload();
|
||||
},
|
||||
},
|
||||
],
|
||||
}).addTo(map);
|
||||
|
||||
polyline.on("mouseover", (e) => {
|
||||
polyline.setStyle({ weight: 10 });
|
||||
});
|
||||
|
||||
polyline.on("mouseout", (e) => {
|
||||
polyline.setStyle({ weight: 3 });
|
||||
polyline.setStyle({ color: lineColors[lineData.idModul] || "#000000" });
|
||||
});
|
||||
|
||||
polyline.bindTooltip(tooltipContents[lineData.idModul] || "Standard-Tooltip-Inhalt", {
|
||||
permanent: false,
|
||||
direction: "auto",
|
||||
});
|
||||
|
||||
polylines.push(polyline);
|
||||
markers.push(...lineMarkers);
|
||||
});
|
||||
|
||||
return { markers, polylines };
|
||||
};
|
||||
|
||||
// geometryUtils.js
|
||||
export const parsePoint = (position) => {
|
||||
const [longitude, latitude] = position.slice(6, -1).split(" ");
|
||||
return { latitude: parseFloat(latitude), longitude: parseFloat(longitude) };
|
||||
};
|
||||
75
utils/mapInitialization.js
Normal file
75
utils/mapInitialization.js
Normal file
@@ -0,0 +1,75 @@
|
||||
// /utils/mapInitialization.js
|
||||
import L from "leaflet";
|
||||
//import OverlappingMarkerSpiderfier from "overlapping-marker-spiderfier-leaflet";
|
||||
import "leaflet-contextmenu";
|
||||
import "leaflet/dist/leaflet.css";
|
||||
import "leaflet-contextmenu/dist/leaflet.contextmenu.css";
|
||||
import * as urls from "../config/urls.js";
|
||||
import * as layers from "../config/layers.js";
|
||||
import { addContextMenuToMarker, openInNewTab } from "../utils/contextMenuUtils.js";
|
||||
|
||||
export const initializeMap = (mapRef, setMap, setOms, setMenuItemAdded, addItemsToMapContextMenu, hasRights) => {
|
||||
const offlineTileLayer = urls.OFFLINE_TILE_LAYER;
|
||||
//const offlineTileLayer = process.env.OFFLINE_TILE_LAYER;
|
||||
const onlineTileLayer = urls.ONLINE_TILE_LAYER;
|
||||
//const onlineTileLayer = process.env.ONLINE_TILE_LAYER;
|
||||
const TALAS = layers.MAP_LAYERS.TALAS;
|
||||
const ECI = layers.MAP_LAYERS.ECI;
|
||||
const ULAF = layers.MAP_LAYERS.ULAF;
|
||||
const GSMModem = layers.MAP_LAYERS.GSMModem;
|
||||
const CiscoRouter = layers.MAP_LAYERS.CiscoRouter;
|
||||
const WAGO = layers.MAP_LAYERS.WAGO;
|
||||
const Siemens = layers.MAP_LAYERS.Siemens;
|
||||
const OTDR = layers.MAP_LAYERS.OTDR;
|
||||
const WDM = layers.MAP_LAYERS.WDM;
|
||||
const GMA = layers.MAP_LAYERS.GMA;
|
||||
const Sonstige = layers.MAP_LAYERS.Sonstige;
|
||||
const TALASICL = layers.MAP_LAYERS.TALASICL;
|
||||
|
||||
if (mapRef.current) {
|
||||
const initMap = L.map(mapRef.current, {
|
||||
center: [53.111111, 8.4625],
|
||||
zoom: 12,
|
||||
layers: [TALAS, ECI, ULAF, GSMModem, CiscoRouter, WAGO, Siemens, OTDR, WDM, GMA, Sonstige, TALASICL],
|
||||
minZoom: 5,
|
||||
maxZoom: 15,
|
||||
zoomControl: false,
|
||||
contextmenu: true,
|
||||
contextmenuItems: [
|
||||
{
|
||||
text: "Station öffnen (Tab)",
|
||||
icon: "/img/screen_new.png",
|
||||
callback: (e) => {
|
||||
const clickedMarker = e.relatedTarget;
|
||||
openInNewTab(e, clickedMarker);
|
||||
},
|
||||
},
|
||||
"-",
|
||||
],
|
||||
});
|
||||
|
||||
L.tileLayer(onlineTileLayer, {
|
||||
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
|
||||
}).addTo(initMap);
|
||||
|
||||
const overlappingMarkerSpiderfier = new OverlappingMarkerSpiderfier(initMap, {
|
||||
nearbyDistance: 20,
|
||||
});
|
||||
|
||||
setMap(initMap);
|
||||
setOms(overlappingMarkerSpiderfier);
|
||||
|
||||
initMap.on("zoomend", function () {
|
||||
if (initMap.getZoom() > 15) {
|
||||
initMap.setZoom(15);
|
||||
} else if (initMap.getZoom() < 5) {
|
||||
initMap.setZoom(5);
|
||||
}
|
||||
});
|
||||
|
||||
initMap.whenReady(() => {
|
||||
console.log("Karte ist jetzt bereit und initialisiert.");
|
||||
addItemsToMapContextMenu(hasRights);
|
||||
});
|
||||
}
|
||||
};
|
||||
110
utils/mapUtils.js
Normal file
110
utils/mapUtils.js
Normal file
@@ -0,0 +1,110 @@
|
||||
// /utils/mapUtils.js
|
||||
import L from "leaflet";
|
||||
|
||||
export const redrawPolyline = (lineData, lineColors, tooltipContents, map) => {
|
||||
if (!lineData || !lineColors || !tooltipContents || !map) {
|
||||
console.error("Invalid parameters for redrawPolyline");
|
||||
return;
|
||||
}
|
||||
|
||||
if (!lineData.coordinates || !Array.isArray(lineData.coordinates)) {
|
||||
console.error("Invalid coordinates in lineData");
|
||||
return;
|
||||
}
|
||||
|
||||
const color = lineColors[lineData.idModul] || "#000000";
|
||||
const tooltipContent = tooltipContents[lineData.idModul] || "Standard-Tooltip-Inhalt";
|
||||
|
||||
if (lineData.polyline) map.removeLayer(lineData.polyline);
|
||||
|
||||
lineData.polyline = L.polyline(lineData.coordinates, {
|
||||
color: color,
|
||||
}).addTo(map);
|
||||
|
||||
lineData.polyline.bindTooltip(tooltipContent, {
|
||||
permanent: false,
|
||||
direction: "auto",
|
||||
});
|
||||
|
||||
lineData.polyline.on("mouseover", () => {
|
||||
lineData.polyline.setStyle({ weight: 10 });
|
||||
lineData.polyline.bringToFront();
|
||||
});
|
||||
|
||||
lineData.polyline.on("mouseout", () => {
|
||||
lineData.polyline.setStyle({ weight: 5 });
|
||||
});
|
||||
};
|
||||
|
||||
export const saveLineData = (lineData) => {
|
||||
fetch("/api/talas_v5_DB/gisLines/updateLineCoordinates", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
idModul: lineData.idModul,
|
||||
idLD: lineData.idLD,
|
||||
newCoordinates: lineData.coordinates,
|
||||
}),
|
||||
})
|
||||
.then((response) => {
|
||||
if (!response.ok) {
|
||||
throw new Error("Fehler beim Speichern der Linienänderungen");
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then((data) => {
|
||||
//console.log("Linienänderungen gespeichert:", data);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Fehler beim Speichern der Linienänderungen:", error);
|
||||
});
|
||||
};
|
||||
// Call this function on page load to restore zoom and center
|
||||
export const restoreMapSettings = (map) => {
|
||||
const savedZoom = localStorage.getItem("mapZoom");
|
||||
const savedCenter = localStorage.getItem("mapCenter");
|
||||
|
||||
if (savedZoom && savedCenter) {
|
||||
try {
|
||||
const centerCoords = JSON.parse(savedCenter);
|
||||
map.setView(centerCoords, parseInt(savedZoom));
|
||||
} catch (e) {
|
||||
console.error("Error parsing stored map center:", e);
|
||||
map.setView([53.111111, 8.4625], 12); // Standardkoordinaten und -zoom
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Now update checkOverlappingMarkers to check if oms is initialized
|
||||
export const checkOverlappingMarkers = (map, markers, plusIcon) => {
|
||||
// Ensure markers is always an array
|
||||
if (!Array.isArray(markers)) {
|
||||
//console.error("The `markers` argument is not an array:", markers);
|
||||
return;
|
||||
}
|
||||
|
||||
const overlappingGroups = {};
|
||||
|
||||
// Group markers by coordinates as strings
|
||||
markers.forEach((marker) => {
|
||||
const latlngStr = marker.getLatLng().toString();
|
||||
if (overlappingGroups[latlngStr]) {
|
||||
overlappingGroups[latlngStr].push(marker);
|
||||
} else {
|
||||
overlappingGroups[latlngStr] = [marker];
|
||||
}
|
||||
});
|
||||
|
||||
// Add plus markers at coordinates where overlaps occur
|
||||
for (const coords in overlappingGroups) {
|
||||
if (overlappingGroups[coords].length > 1) {
|
||||
const latLng = L.latLng(coords.match(/[-.\d]+/g).map(Number));
|
||||
const plusMarker = L.marker(latLng, { icon: plusIcon });
|
||||
plusMarker.addTo(map);
|
||||
|
||||
//console.log("Adding plus icon marker at", latLng);
|
||||
}
|
||||
}
|
||||
};
|
||||
199
utils/markerUtils.js
Normal file
199
utils/markerUtils.js
Normal file
@@ -0,0 +1,199 @@
|
||||
// /utils/markerUtils.js
|
||||
import circleIcon from "../components/gisPolylines/icons/CircleIcon";
|
||||
import { saveLineData, redrawPolyline } from "./mapUtils";
|
||||
import L from "leaflet";
|
||||
import "leaflet.smooth_marker_bouncing";
|
||||
import { toast } from "react-toastify";
|
||||
import * as config from "../config/config.js";
|
||||
|
||||
export const insertNewMarker = (closestPoints, newPoint, lineData, map) => {
|
||||
const newMarker = L.marker(newPoint, {
|
||||
icon: circleIcon,
|
||||
draggable: true,
|
||||
}).addTo(map);
|
||||
lineData.coordinates.splice(closestPoints[2], 0, [newPoint.lat, newPoint.lng]);
|
||||
|
||||
// Hier direkt speichern nach Einfügen
|
||||
saveLineData(lineData);
|
||||
|
||||
redrawPolyline(lineData);
|
||||
|
||||
// Event-Listener für das Verschieben des Markers hinzufügen
|
||||
newMarker.on("dragend", () => {
|
||||
const newCoords = newMarker.getLatLng();
|
||||
setNewCoords(newCoords);
|
||||
const newCoordinates = [...lineData.coordinates];
|
||||
newCoordinates[closestPoints[2]] = [newCoords.lat, newCoords.lng];
|
||||
lineData.coordinates = newCoordinates;
|
||||
redrawPolyline(lineData);
|
||||
|
||||
updateMarkerPosition(newMarker.getLatLng(), lineData, newMarker);
|
||||
saveLineData(lineData); // Speichern der neuen Koordinaten nach dem Verschieben
|
||||
});
|
||||
};
|
||||
|
||||
export const removeMarker = (marker, lineData, currentZoom, currentCenter) => {
|
||||
// Save zoom and center to localStorage
|
||||
//localStorage.setItem("mapZoom", currentZoom);
|
||||
//localStorage.setItem("mapCenter", JSON.stringify(currentCenter));
|
||||
|
||||
// Find the index of the coordinate that matches the marker's position
|
||||
const index = lineData.coordinates.findIndex((coord) => L.latLng(coord[0], coord[1]).equals(marker.getLatLng()));
|
||||
|
||||
if (index !== -1) {
|
||||
// Remove the coordinate from the line data
|
||||
lineData.coordinates.splice(index, 1);
|
||||
|
||||
// Redraw the polyline with the updated coordinates
|
||||
redrawPolyline(lineData);
|
||||
|
||||
// Remove the marker from the map
|
||||
marker.remove();
|
||||
|
||||
// Save the updated line data
|
||||
saveLineData(lineData);
|
||||
|
||||
// Refresh the browser
|
||||
window.location.reload();
|
||||
}
|
||||
};
|
||||
|
||||
export const handleEditPoi = (
|
||||
marker,
|
||||
userRights,
|
||||
setCurrentPoiData,
|
||||
setShowPoiUpdateModal,
|
||||
fetchPoiData,
|
||||
toast // Hier toast als Parameter erhalten
|
||||
) => {
|
||||
//console.log("Selected Marker ID (idPoi):", marker.options.id);
|
||||
//console.log("Selected Marker Description:", marker.options.description);
|
||||
//console.log("User Rights:", userRights);
|
||||
|
||||
// Sicherstellen, dass userRights ein Array ist
|
||||
if (!Array.isArray(userRights)) {
|
||||
console.error("User Rights is not an array:", userRights);
|
||||
toast.error("Benutzerrechte sind ungültig.", {
|
||||
position: "top-center",
|
||||
autoClose: 5000,
|
||||
hideProgressBar: false,
|
||||
closeOnClick: true,
|
||||
pauseOnHover: true,
|
||||
draggable: true,
|
||||
progress: undefined,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
console.log("User Rights includes 56:", userRights.includes(56));
|
||||
|
||||
// Prüfung, ob der Benutzer die notwendigen Rechte hat
|
||||
if (!userRights.includes(56)) {
|
||||
toast.error("Benutzer hat keine Berechtigung zum Bearbeiten.", {
|
||||
position: "top-center",
|
||||
autoClose: 5000,
|
||||
hideProgressBar: false,
|
||||
closeOnClick: true,
|
||||
pauseOnHover: true,
|
||||
draggable: true,
|
||||
progress: undefined,
|
||||
});
|
||||
console.log("Benutzer hat keine Berechtigung zum Bearbeiten.");
|
||||
return; // Beendet die Funktion frühzeitig, wenn keine Berechtigung vorliegt
|
||||
}
|
||||
|
||||
setCurrentPoiData({
|
||||
idPoi: marker.options.id,
|
||||
name: marker.options.name,
|
||||
description: marker.options.description,
|
||||
});
|
||||
|
||||
fetchPoiData(marker.options.id);
|
||||
|
||||
setShowPoiUpdateModal(true);
|
||||
};
|
||||
//-------------------------------------------------------------------
|
||||
// Funktion zum Bestimmen der Priorität basierend auf dem Icon-Pfad
|
||||
const determinePriority = (iconPath, priorityConfig) => {
|
||||
for (let priority of priorityConfig) {
|
||||
if (iconPath.includes(priority.name.toLowerCase())) {
|
||||
return priority.level;
|
||||
}
|
||||
}
|
||||
return 5; // Standardpriorität (niedrigste)
|
||||
};
|
||||
|
||||
// Funktion zum Erstellen und Setzen von Markern
|
||||
export const createAndSetMarkers = async (systemId, setMarkersFunction, GisSystemStatic, priorityConfig) => {
|
||||
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]));
|
||||
|
||||
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) => {
|
||||
//console.log("Station: ", station);
|
||||
const statis = statisMap.get(station.IdLD);
|
||||
//console.log("Statis: ", statis);
|
||||
const iconPath = statis ? `img/icons/${statis.Na}-marker-icon-${station.Icon}.png` : `img/icons/marker-icon-${station.Icon}.png`;
|
||||
|
||||
const priority = determinePriority(iconPath, priorityConfig);
|
||||
//console.log("Priority: ", priority);
|
||||
//console.log("statis.Le: ", statis.Le);
|
||||
const zIndexOffset = 100 * (5 - priority); // Adjusted for simplicity and positive values
|
||||
//console.log("Z-Index Offset: ", 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,
|
||||
});
|
||||
|
||||
// Überprüfe, ob die bounce-Funktion verfügbar ist und verwende sie
|
||||
if (typeof marker.bounce === "function" && statis) {
|
||||
marker.on("add", () => marker.bounce(3));
|
||||
} else if (statis) {
|
||||
//console.error("Bounce function is not available on marker");
|
||||
}
|
||||
|
||||
const statusInfo = statusResponse.Statis.filter((status) => status.IdLD === station.IdLD)
|
||||
.reverse()
|
||||
.map(
|
||||
(status) => `
|
||||
<div class="flex items-center my-1">
|
||||
<div class="w-2 h-2 mr-2 inline-block rounded-full" style="background-color: ${status.Co};"></div>
|
||||
${status.Me} <span style="color: ${status.Co};">(${status.Na})</span>
|
||||
</div>
|
||||
`
|
||||
)
|
||||
.join("");
|
||||
|
||||
marker.bindPopup(`
|
||||
<div class="bg-white rounded-lg">
|
||||
<span class="text-lg font-semibold text-gray-900">${station.LD_Name}</span>
|
||||
<span class="text-md font-bold text-gray-800"> ${station.Device}</span><br>
|
||||
<span class="text-gray-800"><strong> ${station.Area_Short} </strong>(${station.Area_Name})</span><br>
|
||||
<span class="text-gray-800"><strong>${station.Location_Short} </strong> (${station.Location_Name})</span>
|
||||
<div class="mt-2">${statusInfo}</div>
|
||||
</div>
|
||||
`);
|
||||
|
||||
return marker;
|
||||
});
|
||||
|
||||
setMarkersFunction(markersData);
|
||||
}
|
||||
} catch (error) {
|
||||
//console.error("Error fetching data: ", error);
|
||||
}
|
||||
};
|
||||
10
utils/openInSameWindow.js
Normal file
10
utils/openInSameWindow.js
Normal file
@@ -0,0 +1,10 @@
|
||||
// utils/openInSameWindow.js
|
||||
|
||||
export function openInSameWindow(e, marker, baseUrl) {
|
||||
if (marker && marker.options && marker.options.link) {
|
||||
//console.log("Marker data:", baseUrl + marker.options.link);
|
||||
window.location.href = baseUrl + marker.options.link;
|
||||
} else {
|
||||
console.error("Fehler: Marker hat keine gültige 'link' Eigenschaft");
|
||||
}
|
||||
}
|
||||
45
utils/zoomAndCenterUtils.js
Normal file
45
utils/zoomAndCenterUtils.js
Normal file
@@ -0,0 +1,45 @@
|
||||
// utils/zoomAndCenterUtils.js
|
||||
/* export const zoomIn = (e, map) => {
|
||||
if (!map) {
|
||||
console.error("map is not defined in zoomIn");
|
||||
return;
|
||||
}
|
||||
map.flyTo(e.latlng, map.getZoom() + 1);
|
||||
localStorage.setItem("mapZoom", map.getZoom());
|
||||
localStorage.setItem("mapCenter", JSON.stringify(map.getCenter()));
|
||||
}; */
|
||||
|
||||
export const zoomIn = (e, map) => {
|
||||
if (!map) {
|
||||
console.error("map is not defined in zoomIn");
|
||||
return;
|
||||
}
|
||||
map.flyTo(e.latlng, 12);
|
||||
localStorage.setItem("mapZoom", map.getZoom());
|
||||
localStorage.setItem("mapCenter", JSON.stringify(map.getCenter()));
|
||||
};
|
||||
|
||||
export const zoomOut = (map) => {
|
||||
if (!map) {
|
||||
console.error("map is not defined in zoomOut");
|
||||
return;
|
||||
}
|
||||
const x = 51.41321407879154;
|
||||
const y = 7.739617925303934;
|
||||
const zoom = 7;
|
||||
//console.log("map");
|
||||
//console.log(map);
|
||||
map.flyTo([x, y], zoom);
|
||||
localStorage.setItem("mapZoom", map.getZoom());
|
||||
localStorage.setItem("mapCenter", JSON.stringify(map.getCenter()));
|
||||
};
|
||||
|
||||
export const centerHere = (e, map) => {
|
||||
if (!map) {
|
||||
console.error("map is not defined in centerHere");
|
||||
return;
|
||||
}
|
||||
map.panTo(e.latlng);
|
||||
localStorage.setItem("mapZoom", map.getZoom());
|
||||
localStorage.setItem("mapCenter", JSON.stringify(map.getCenter()));
|
||||
};
|
||||
Reference in New Issue
Block a user