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({
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],
iconAnchor: [5, 5],
});

6
components/EndIcon.js
View File

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

21
components/MapComponent.js
View File

@@ -82,6 +82,7 @@ import useMapContextMenu from "./useMapContextMenu.js";
//---------------------------------------------------------------------
//-------------------- MapComponent -----------------------------------
const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
const [loading, setLoading] = useState(true); // Ladezustand hinzufügen
const [currentZoom, setCurrentZoom] = useState(() => {
const storedZoom = localStorage.getItem("mapZoom");
return storedZoom ? parseInt(storedZoom, 10) : 12;
@@ -1435,25 +1436,9 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
useEffect(() => {
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) => {
if (isVisible) {
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 {
talasMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
}
@@ -1959,9 +1944,11 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
updatedPolyline.on("mouseover", () => {
updatedPolyline.setStyle({ weight: 10 });
updatedPolyline.bringToFront();
console.log("Mouse over");
});
updatedPolyline.on("mouseout", () => {
updatedPolyline.setStyle({ weight: 5 });
console.log("Mouse out");
});
newPolylines[lineIndex].remove();
@@ -2050,8 +2037,6 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
insertNewMarker(closestPoints, newPoint, lineData, map);
redrawPolyline(lineData);
//Browser aktualisieren
//localStorage.setItem("mapZoom", currentZoom);
//localStorage.setItem("mapCenter", JSON.stringify(currentCenter));
window.location.reload();
},
},

9
components/StartIcon.js
View File

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