polylines tooltip content
This commit is contained in:
ISA
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) };
|
||||
};
|
||||
Reference in New Issue
Block a user