polylines tooltip content

components/gisPolylines/icons/CircleIcon.js

@@ -0,0 +1,12 @@
+// /components/gisPolylines/icons/CircleIcon.js
+import L from "leaflet";
+import "leaflet/dist/leaflet.css";
+
+const CircleIcon = new L.DivIcon({
+  className: "custom-circle-icon leaflet-marker-icon",
+  html: '<div style="background-color:gray; width:10px; height:10px; border-radius:50%; border: solid black 1px;"></div>',
+  iconSize: [25, 25],
+  iconAnchor: [5, 5],
+});
+
+export default CircleIcon;

components/gisPolylines/icons/EndIcon.js

@@ -0,0 +1,11 @@
+// /components/gisPolylines/icons/EndIcon.js
+// Viereck als End-Icon für die Route
+import L from "leaflet";
+const EndIcon = L.divIcon({
+  className: "custom-end-icon",
+  html: "<div style='background-color: gray; width: 14px; height: 14px; border: solid black 2px;'></div>", // Graues Viereck
+  iconSize: [14, 14],
+  iconAnchor: [7, 7], // Mittelpunkt des Vierecks als Anker
+});
+
+export default EndIcon;

components/gisPolylines/icons/StartIcon.js

@@ -0,0 +1,17 @@
+// /components/gisPolylines/icons/StartIcon.js
+//Custom triangle icon for draggable markers
+import L from "leaflet";
+
+const StartIcon = L.divIcon({
+  className: "custom-start-icon",
+  html: `
+    <svg width="18" height="18" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+      <polygon points="10,2 18,18 2,18" fill="black" />
+      <polygon points="10,5 16,16 4,16" fill="gray" />
+    </svg>
+  `, // Schwarzes Dreieck innerhalb eines grauen Dreiecks
+  iconSize: [18, 18],
+  iconAnchor: [9, 10],
+});
+
+export default StartIcon;

components/gisPolylines/icons/SupportPointIcons.js

@@ -0,0 +1,27 @@
+// komponents/gisPolylines/icons/SupportPointIcons
+import L from "leaflet";
+import "leaflet/dist/leaflet.css";
+
+// Icon für Stützpunkt hinzufügen
+export const AddSupportPointIcon = L.divIcon({
+  className: "custom-add-support-point-icon",
+  html: `
+    <div style='background-color:green;border-radius:50%;width:12px;height:12px;border: solid white 2px;'>
+      <div style='color: white; font-size: 10px; text-align: center; line-height: 12px;'>+</div>
+    </div>
+  `,
+  iconSize: [24, 24],
+  iconAnchor: [12, 12],
+});
+
+// Icon für Stützpunkt entfernen
+export const RemoveSupportPointIcon = L.divIcon({
+  className: "custom-remove-support-point-icon",
+  html: `
+    <div style='background-color:red;border-radius:50%;width:12px;height:12px;border: solid white 2px;'>
+      <div style='color: white; font-size: 10px; text-align: center; line-height: 12px;'>-</div>
+    </div>
+  `,
+  iconSize: [24, 24],
+  iconAnchor: [12, 12],
+});