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

feat: Startpunkt Dreieck , Endpunkt Viereck, alle Punkt (Stützpunkt,Start un end) grau färben

Browse Source
This commit is contained in:
ISA
2024-07-11 12:00:25 +02:00
parent f52fd2ccd9
commit cd3d84f12c
4 changed files with 13 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/CircleIcon.js
View File

@@ -5,7 +5,7 @@ import "leaflet/dist/leaflet.css";
const circleIcon = L.divIcon({ const circleIcon = L.divIcon({
className: "custom-div-icon", className: "custom-div-icon",
html: "<div style='background-color:#298a00;border-radius:50%;width:10px;height:10px;'></div>", html: "<div style='background-color:gray;border-radius:50%;width:10px;height:10px;'></div>",
iconSize: [25, 25], iconSize: [25, 25],
iconAnchor: [5, 5], iconAnchor: [5, 5],
}); });

6
components/EndIcon.js
View File

@@ -2,9 +2,9 @@
import L from "leaflet"; import L from "leaflet";
const endIcon = L.divIcon({ const endIcon = L.divIcon({
className: "custom-end-icon", className: "custom-end-icon",
html: "<div style='background-color:#ffffff;border-radius:50%;width:10px;height:10px;'></div>", // Blau für den Endpunkt html: "<div style='background-color: gray; width: 14px; height: 14px;'></div>", // Graues Viereck
iconSize: [25, 25], iconSize: [14, 14],
iconAnchor: [5, 5], iconAnchor: [7, 7], // Mittelpunkt des Vierecks als Anker
}); });
export default endIcon; export default endIcon;

21
components/MapComponent.js
View File

@@ -82,6 +82,7 @@ import useMapContextMenu from "./useMapContextMenu.js";
//--------------------------------------------------------------------- //---------------------------------------------------------------------
//-------------------- MapComponent ----------------------------------- //-------------------- MapComponent -----------------------------------
const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
const [loading, setLoading] = useState(true); // Ladezustand hinzufügen
const [currentZoom, setCurrentZoom] = useState(() => { const [currentZoom, setCurrentZoom] = useState(() => {
const storedZoom = localStorage.getItem("mapZoom"); const storedZoom = localStorage.getItem("mapZoom");
return storedZoom ? parseInt(storedZoom, 10) : 12; return storedZoom ? parseInt(storedZoom, 10) : 12;
@@ -1435,25 +1436,9 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
useEffect(() => { useEffect(() => {
if (!map || !talasMarkers) return; if (!map || !talasMarkers) return;
/* const someLineCoordinatesforTalas = [
[53.111111, 8.4625],
[53.111111, 8.4625],
[53.111111, 8.4625],
[53.111111, 8.4625],
]; */
const toggleLayer = (isVisible) => { const toggleLayer = (isVisible) => {
if (isVisible) { if (isVisible) {
talasMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added talasMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
//console.log("talasMarkers", talasMarkers);
//console.log("talasMarkers.color", talasMarkers.color);
//talasMarkers.forEach((marker) => map.removeLayer(marker));
/* console.log("talasMarkers linePositions ", linePositions);
const polyline = L.polyline(someLineCoordinatesforTalas, {
color: "green",
}).addTo(
//Linien-Farbe /Farbe für die Strecke zwischen den Markern
TALAS
); */
} else { } else {
talasMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually talasMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
} }
@@ -1959,9 +1944,11 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
updatedPolyline.on("mouseover", () => { updatedPolyline.on("mouseover", () => {
updatedPolyline.setStyle({ weight: 10 }); updatedPolyline.setStyle({ weight: 10 });
updatedPolyline.bringToFront(); updatedPolyline.bringToFront();
console.log("Mouse over");
}); });
updatedPolyline.on("mouseout", () => { updatedPolyline.on("mouseout", () => {
updatedPolyline.setStyle({ weight: 5 }); updatedPolyline.setStyle({ weight: 5 });
console.log("Mouse out");
}); });
newPolylines[lineIndex].remove(); newPolylines[lineIndex].remove();
@@ -2050,8 +2037,6 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
insertNewMarker(closestPoints, newPoint, lineData, map); insertNewMarker(closestPoints, newPoint, lineData, map);
redrawPolyline(lineData); redrawPolyline(lineData);
//Browser aktualisieren //Browser aktualisieren
//localStorage.setItem("mapZoom", currentZoom);
//localStorage.setItem("mapCenter", JSON.stringify(currentCenter));
window.location.reload(); window.location.reload();
}, },
}, },

9
components/StartIcon.js
View File

@@ -1,9 +1,12 @@
// Custom circle icon for draggable markers // Custom circle icon for draggable markers
// Custom triangle icon for draggable markers
import L from "leaflet"; import L from "leaflet";
const startIcon = L.divIcon({ const startIcon = L.divIcon({
className: "custom-start-icon", className: "custom-start-icon",
html: "<div style='background-color:#000000;border-radius:50%;width:10px;height:10px;'></div>", // Rot für den Startpunkt html: "<div style='width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 14px solid gray;'></div>", // Graues Dreieck
iconSize: [25, 25], iconSize: [10, 10],
iconAnchor: [5, 5], iconAnchor: [8, 8],
}); });
export default startIcon; export default startIcon;