@sapui5/sap.ui.vbm 1.145.0 → 1.146.0

package/src/sap/ui/vbm/vector/MapRenderer.js

@@ -12,21 +12,14 @@ sap.ui.define([
 	"./SAPNavControl",
 	"./SAPAutomationManager",
 	"sap/ui/core/Lib",
-	//"../lib/sapscene",
 	"./thirdparty/maplibregl",
 	"./VBITransformer"
-], function (vb, visualobjects, actions, VBIRenderer, VectorUtils, MaplibreStyles, PayloadGenerator, RectangularSelection, LassoSelection, SAPMapNavControl, SAPAutomationManager, Lib) {
+ ], function (vb, visualobjects, actions, VBIRenderer, VectorUtils, MaplibreStyles, PayloadGenerator, RectangularSelection, LassoSelection, SAPMapNavControl, SAPAutomationManager, Lib) {
 	'use strict';
 	visualobjects = {};
 	VBI.MapRenderer = {};
 	actions = {};
 	var map_container = "";
-	//let isDragging = false;
-	//let startY;
-	//let startYpx;
-	// let isDrawing = false;
-	// let isCtrlPressed = false;
-	// let lassoPoints = [];
 	let predefinedMarkers = [];
 	let allMarkers = [];
 	let lineDrag = false;
@@ -35,12 +28,15 @@ sap.ui.define([
 	let dropItems = {};
 	let dragInstance = {};
 	VBI.MapRenderer.name = undefined;
+	VBI.MapRenderer.allMarkers = undefined;
 	let spotid = 0;
 	let fixedBounds;
 	var containerID;
-	let previousCenter = null;
-	let previousZoom = null;
-
+    let geoJSON;
+	var map;
+    let mapCanvas;
+	const renderedSpots = new Map();
+    const renderedRouteLabels = new Map();
 
 
 	VBI.MapRenderer.setAdapter = (adapter) => {
@@ -48,120 +44,147 @@ sap.ui.define([
 		this._payloadGenerator = new PayloadGenerator(this._adapter);
 	}
 
-	// Process the GeoJSON spots and its properties
-	VBI.MapRenderer._processGeoSpot = (source, data) => {
+    VBI.MapRenderer.renderMap = () => {
+
+        // if (this.map) {
+        //     previousCenter = this.map.getCenter();
+        //     previousZoom = this.map.getZoom();
+        //     this.map.remove();
+        // }
+
+        geoJSON = VBI.VBITransformer.getTransformedJSON();
+
+        map_container = VBIRenderer.getId();
+
+        var styleSheet = document.createElement("style");
+
+        styleSheet.textContent = MaplibreStyles.loadStyles();
+        document.head.appendChild(styleSheet);
+        if (!window._maplibreMap) {
+            window._maplibreMap = VectorUtils.createMap(geoJSON, map_container);
+        }
+		map = window._maplibreMap;
+        const canvas = map.getCanvasContainer();
+        const rectangularSelection = new RectangularSelection(map);
+        const lassoSelection = new LassoSelection(map);
+        const popupLink = new maplibregl.Popup({
+            closeButton: false,
+            closeOnClick: false
+        });
+        // Set `true` to dispatch the event before other functions
+        // call it. This is necessary for disabling the default map
+        // dragging behaviour.
+        canvas.addEventListener('mousedown', (e) => rectangularSelection.mouseDown(e, this.Rpressed), true);
+        canvas.addEventListener('mousedown', (e) => lassoSelection.mouseDown(e, this.Apressed), true);
+        map.touchZoomRotate.enable();
+		mapCanvas = map.getCanvas();
+        mapCanvas.id = VectorUtils._setcanvasid();
+		mapCanvas.oncontextmenu = (e) => {
+			e.preventDefault();
+			// Get the mouse coordinates within the map container
+			const rect = canvas.getBoundingClientRect(); // Get map container position
+			const x = e.clientX - rect.left;  // Relative to map
+			const y = e.clientY - rect.top;
+			const lngLat = map.unproject([x, y]);
+			// Check if the right-click happened on the 'geojson-source-route' layer
+			const features = map.queryRenderedFeatures([x, y], { layers: ['geojson-source-route'] });
 
+			if (features.length > 0) {
+				e.features = features;
+				// The context menu is for the 'geojson-source-route' layer
+				triggerPayloadRoute(e, 'CONTEXT_MENU_REQUEST');
+			} else {
+				// Get the mouse coordinates within the map container
+				const offsetX = e.offsetX;
+				const offsetY = e.offsetY;
+				const lngLat = map.unproject([offsetX, offsetY]);
+				// The context menu is for the map
+				const coords = lngLat.lng + ";" + lngLat.lat + ";0.0";
+				const currentZoom = map.getZoom();
+				const center = map.getCenter();
+				const currentCenter = center.lng + ";" + center.lat;
+				const xyobj = VectorUtils.GetEventVPCoordsObj(e, map_container);
+				const screenX = xyobj.x;
+				const screenY = xyobj.y;
+				PayloadGenerator.onMapContextMenu(coords, currentZoom, currentCenter, screenX, screenY);
+			}
+		};
+		
+        map.on('load', () => {
+
+            map.getCanvas().style.cursor = 'default';
+            map.on('mouseup', function () {
+                map.getCanvas().style.cursor = 'default';
+            });
+            map.getCanvas().addEventListener('mousemove', function () {
+                map.getCanvas().style.cursor = 'default';
+            });
+
+            if (VBI.mapFlags.isLegendExists) {
+                // Legend control
+                VBI.VBITransformer._createLegend(map_container);
+            }
+            // Custom attribution/copyright control
+            map.addControl(new maplibregl.AttributionControl({
+                customAttribution: '<span>' + geoJSON[0].copyright + '</span>',
+                compact: false
+            })
+            );
+            //validate scale visiblity 
+            var scaleControl = new maplibregl.ScaleControl({
+                maxWidth: 80,
+                unit: geoJSON[0].scaleType
+            })
+            if (VBI.mapFlags.scaleVisible) {
+                // Scale control in mi,km or nm
+                map.addControl(scaleControl);
+            } else if (!VBI.mapFlags.scaleVisible && map.hasControl(scaleControl)) {
+                map.removeControl(scaleControl);
+            }
+
+            // Parsing GeoJSON for each type of object
+
+            map.addSource('geojson-source', {
+                'type': 'geojson',
+                'data': geoJSON[1]
+            });
+
+            let sapNavControl = new SAPMapNavControl(VBI.mapFlags.moveDisable, VBI.mapFlags.zoomDisable);
+            if (VBI.mapFlags.navControlVisible) {
+                map.addControl(sapNavControl, 'top-left');
+            } else if (!VBI.mapFlags.navControlVisible && map.hasControl(sapNavControl)) {
+                map.removeControl(sapNavControl);
+            }
+            // Create a popup, but don't add it to the map yet.
+            const popup = new maplibregl.Popup({
+                closeButton: false,
+                closeOnClick: false,
+                offset: {
+                    'top': [0, 0],
+                    'bottom': [0, -25]
+                }
+            });
+		});
 	}
 
-	// Process the GeoJSON routes/links and its properties
-	VBI.MapRenderer._processGeoRoutes = (source, data) => {
-
+	VBI.MapRenderer._processAutomation = () => {
+		 let automations = new SAPAutomationManager(map, maplibregl.LngLatBounds);
+        automations.load(VBI.mapFlags.automations);
 	}
 
-	VBI.MapRenderer.renderMap = () => {
-
-		if (this.map) {
-			previousCenter = this.map.getCenter();
-			previousZoom = this.map.getZoom();
-			this.map.remove();
-		}
+			VBI.MapRenderer._processGeoSpot = () => {
 
-		let geoJSON = VBI.VBITransformer.getTransformedJSON();
-
-		map_container = VBIRenderer.getId();
-
-		var styleSheet = document.createElement("style");
-
-		styleSheet.textContent = MaplibreStyles.loadStyles();
-		document.head.appendChild(styleSheet);
-
-		const map = VectorUtils.createMap(geoJSON, map_container);
-		map.doubleClickZoom.disable();
-
-		if (previousCenter && previousZoom !== null) {
-			map.jumpTo({
-				center: [previousCenter.lng, previousCenter.lat],
-				zoom: previousZoom
-
-			});
-		}
-
-		const canvas = map.getCanvasContainer();
-		const rectangularSelection = new RectangularSelection(map);
-		const lassoSelection = new LassoSelection(map);
-		const mapCanvas = map.getCanvas();
-		const popupLink = new maplibregl.Popup({
-			closeButton: false,
-			closeOnClick: false
-		});
-		mapCanvas.id = VectorUtils._setcanvasid();
-		// Set `true` to dispatch the event before other functions
-		// call it. This is necessary for disabling the default map
-		// dragging behaviour.
-		canvas.addEventListener('mousedown', (e) => rectangularSelection.mouseDown(e, this.Rpressed), true);
-		canvas.addEventListener('mousedown', (e) => lassoSelection.mouseDown(e, this.Apressed), true);
-		map.touchZoomRotate.enable();
-		this.map = map;
-		map.on('load', () => {
-
-			map.getCanvas().style.cursor = 'default';
-			map.on('mouseup', function () {
-				map.getCanvas().style.cursor = 'default';
-			});
-			map.getCanvas().addEventListener('mousemove', function () {
-				map.getCanvas().style.cursor = 'default';
-			});
-
-			if (VBI.mapFlags.isLegendExists) {
-				// Legend control
-				VBI.VBITransformer._createLegend(map_container);
-			}
-			// Custom attribution/copyright control
-			map.addControl(new maplibregl.AttributionControl({
-				customAttribution: '<span>' + geoJSON[0].copyright + '</span>',
-				compact: false
-			})
-			);
-			//validate scale visiblity 
-			var scaleControl = new maplibregl.ScaleControl({
-				maxWidth: 80,
-				unit: geoJSON[0].scaleType
-			})
-			if (VBI.mapFlags.scaleVisible) {
-				// Scale control in mi,km or nm
-				map.addControl(scaleControl);
-			} else if (!VBI.mapFlags.scaleVisible && map.hasControl(scaleControl)) {
-				map.removeControl(scaleControl);
-			}
-
-			// Parsing GeoJSON for each type of object
-			map.addSource('geojson-source', {
-				'type': 'geojson',
-				'data': geoJSON[1]
-			});
-
-			let sapNavControl = new SAPMapNavControl(VBI.mapFlags.moveDisable, VBI.mapFlags.zoomDisable);
-			if (VBI.mapFlags.navControlVisible) {
-				map.addControl(sapNavControl, 'top-left');
-			} else if (!VBI.mapFlags.navControlVisible && map.hasControl(sapNavControl)) {
-				map.removeControl(sapNavControl);
-			}
-
-			//	map.addControl(new SAPMAPLgndControl(), 'top-right');
-			// Create a popup, but don't add it to the map yet.
-			const popup = new maplibregl.Popup({
-				closeButton: false,
-				closeOnClick: false,
-				offset: {
-					'top': [0, 0],
-					'bottom': [0, -25]
-				}
-			});
 			// add markers to map only for Points
 			const pointFeatures = [];
+			geoJSON = VBI.VBITransformer.getTransformedJSON();
 			geoJSON[1].features.forEach((marker) => {
 				let markerCoordinates = marker.geometry.coordinates;
 				if (marker.geometry.type === 'Point') {
+					const key = marker.properties.Key;
+					// Skip if this spot already exists
+					if (renderedSpots.has(key)) {
+						return;
+					}
 					// create a DOM element for the marker (parent div)
 					let createdSpot = VectorUtils.createSpotElement(marker, spotid);
 					const el = createdSpot.spotEl;
@@ -178,107 +201,17 @@ sap.ui.define([
 						// Append the icon inside the marker
 						el.appendChild(child_el);
 					}
-					//  add marker to map
-					let spot = new maplibregl.Marker({
-						element: el,
-						draggable: true,
-						anchor: 'bottom'
-					}).setLngLat(marker.geometry.coordinates)
-						.on('dragend', onDragEnd)
-						.addTo(map);
-					let originalpos = spot.getLngLat();
-					spot.customProperties = { Key: marker.properties.Key };
-					allMarkers.push(spot);
-					function calculateBBox(featureCollection) {
-						let minLon = Infinity, minLat = Infinity;
-						let maxLon = -Infinity, maxLat = -Infinity;
-						featureCollection.features.forEach(feature => {
-							const featureCoordsStr = feature.properties.GeoPosition;
-							const featureCoords = featureCoordsStr.split(";").slice(0, 2).map(Number);
-							const lon = featureCoords[0];
-							const lat = featureCoords[1];
-							if (lon < minLon) minLon = lon;
-							if (lon > maxLon) maxLon = lon;
-							if (lat < minLat) minLat = lat;
-							if (lat > maxLat) maxLat = lat;
-						});
-						return { minLon, minLat, maxLon, maxLat };
-					}
-					function isSpotInsideBBox(pos, bbox, tolerance = 0.05) {
-						const [lon, lat] = [parseFloat(pos.lng), parseFloat(pos.lat)];
-						return (
-							lon >= bbox.minLon - tolerance &&
-							lon <= bbox.maxLon + tolerance &&
-							lat >= bbox.minLat - tolerance &&
-							lat <= bbox.maxLat + tolerance
-						);
-					}
-					function findDropSpots(pos, featureCollection, tolerance = 0.05) {
-						let bbox = calculateBBox(featureCollection);
-
-						if (!isSpotInsideBBox(pos, bbox, tolerance = 0.05)) {
-							return null;
-						}
-
-						let dropSpots = featureCollection.features.filter(feature => {
-							const featureCoordsStr = feature.properties.GeoPosition;
-							const featureCoords = featureCoordsStr.split(";").slice(0, 2).map(Number);
-							return isSpotInsideBBox({ lng: featureCoords[0], lat: featureCoords[1] }, bbox);
-						});
-						return dropSpots.length > 0 ? dropSpots : null;
-					}
-					VBI.MapRenderer.findNearestSpot = (pos, features1) => {
-						let dropInstance = null;
-						let minDistance = 100000;
-						if (!Array.isArray(pos)) {
-							pos = [parseFloat(pos.lng), parseFloat(pos.lat)];
-						}
-
-						features1.forEach(feature => {
-
-							const featureCoordsStr = feature.properties.GeoPosition;
-							const featureCoords = featureCoordsStr.split(";").slice(0, 2).map(Number);
-
-							let distance = VBI.MapRenderer.haversineDistance(pos, featureCoords);
-
-							// Check if this is the nearest spot
-							if (distance < minDistance) {
-								minDistance = distance;
-								dropInstance = feature;
-							}
+									const onDragEnd = (e) => {
+					map.getCanvas().style.cursor = 'default';
+					let dragItems = [];
+					let dropItems = [];
+					const key = e.target.customProperties;
+					const pos = e.target._lngLat;
+					try {
+						// Query all features from the layer "geojson-source-point"
+						const features1 = map.queryRenderedFeatures({
+							layers: ['geojson-source-point']
 						});
-						return dropInstance;
-					}
-					VBI.MapRenderer.haversineDistance = (pos, featureCoords) => {
-						const R = 6371000;
-						const lat1 = pos[0]
-						const lon1 = pos[1]
-						const lat2 = featureCoords[0]
-						const lon2 = featureCoords[1];
-						const dLat = VBI.MapRenderer.toRad(lat2 - lat1);
-						const dLon = VBI.MapRenderer.toRad(lon2 - lon1);
-						const a =
-							Math.sin(dLat / 2) * Math.sin(dLat / 2) +
-							Math.cos(VBI.MapRenderer.toRad(lat1)) * Math.cos(VBI.MapRenderer.toRad(lat2)) *
-							Math.sin(dLon / 2) * Math.sin(dLon / 2);
-						const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
-						return R * c;
-					}
-					// Helper function to convert degrees to radians
-					VBI.MapRenderer.toRad = (value) => {
-						return value * Math.PI / 180;
-					}
-					function onDragEnd(e) {
-						map.getCanvas().style.cursor = 'default';
-						let dragItems = [];
-						let dropItems = [];
-						const key = e.target.customProperties;
-						const pos = e.target._lngLat;
-						try {
-							// Query all features from the layer "geojson-source-point"
-							const features1 = map.queryRenderedFeatures({
-								layers: ['geojson-source-point']
-							});
 
 							features1.forEach((feature, index) => {
 								if (feature.properties && typeof feature.properties.Key !== 'undefined') {
@@ -366,18 +299,118 @@ sap.ui.define([
 								var dragInsId = VBI.VBITransformer.findObject(dragInstance.properties.type);
 								var dropInsId = VBI.VBITransformer.findObject(dropInstance.properties.type);
 
-								PayloadGenerator.triggerPayloaddnd(dragInsId, dropInsId, dragInstance, dropInstance, containerID);
-							}
-						} catch (error) {
-							console.error('Error in onDragEnd:', error);
-						}
-						// Reset the dragged spot position if needed
-						const lngLat = spot.getLngLat();
-						if (lngLat.lng !== 0 && lngLat.lat !== 0) {
-							spot.setLngLat(originalpos);
+							PayloadGenerator.triggerPayloaddnd(dragInsId, dropInsId, dragInstance, dropInstance, containerID);
 						}
-						map.getCanvas().style.cursor = 'default';
+					} catch (error) {
+						console.error('Error in onDragEnd:', error);
+					}
+					// Reset the dragged spot position if needed
+					const lngLat = spot.getLngLat();
+					if (lngLat.lng !== 0 && lngLat.lat !== 0) {
+						spot.setLngLat(originalpos);
 					}
+					map.getCanvas().style.cursor = 'default';
+				}
+					//  add marker to map
+					let spot = new maplibregl.Marker({
+						element: el,
+						draggable: true,
+						anchor: 'bottom'
+					}).setLngLat(marker.geometry.coordinates)
+						.on('dragend', onDragEnd)
+						.addTo(map);
+					let originalpos = spot.getLngLat();
+					spot.customProperties = { Key: marker.properties.Key };
+					allMarkers.push(spot);
+					VBI.MapRenderer.allMarkers = allMarkers;
+					function calculateBBox(featureCollection) {
+						let minLon = Infinity, minLat = Infinity;
+						let maxLon = -Infinity, maxLat = -Infinity;
+						featureCollection.features.forEach(feature => {
+							const featureCoordsStr = feature.properties.GeoPosition;
+							const featureCoords = featureCoordsStr.split(";").slice(0, 2).map(Number);
+							const lon = featureCoords[0];
+							const lat = featureCoords[1];
+							if (lon < minLon) minLon = lon;
+							if (lon > maxLon) maxLon = lon;
+							if (lat < minLat) minLat = lat;
+							if (lat > maxLat) maxLat = lat;
+						});
+						return { minLon, minLat, maxLon, maxLat };
+					}
+					function isSpotInsideBBox(pos, bbox, tolerance = 0.05) {
+						const [lon, lat] = [parseFloat(pos.lng), parseFloat(pos.lat)];
+						return (
+							lon >= bbox.minLon - tolerance &&
+							lon <= bbox.maxLon + tolerance &&
+							lat >= bbox.minLat - tolerance &&
+							lat <= bbox.maxLat + tolerance
+						);
+					}
+					function findDropSpots(pos, featureCollection, tolerance = 0.05) {
+						let bbox = calculateBBox(featureCollection);
+
+				// 	if (!isSpotInsideBBox(pos, bbox, tolerance = 0.05)) {
+				// 		return null;
+				// 	}
+
+				// 	let dropSpots = featureCollection.features.filter(feature => {
+				// 		const featureCoordsStr = feature.properties.GeoPosition;
+				// 		const featureCoords = featureCoordsStr.split(";").slice(0, 2).map(Number);
+				// 		return isSpotInsideBBox({ lng: featureCoords[0], lat: featureCoords[1] }, bbox);
+				// 	});
+				// 	return dropSpots.length > 0 ? dropSpots : null;
+				// }
+				VBI.MapRenderer.findNearestSpot = (pos, features1) => {
+					let dropInstance = null;
+					let minDistance = Infinity;
+
+					var zoom = window._maplibreMap.getZoom();
+					const tolerance = getToleranceMeters(zoom);
+
+					function getToleranceMeters(zoom) {
+					return Math.max(2, Math.pow(1.6, zoom - 6)); 
+					}
+
+
+					if (!Array.isArray(pos)) {
+						pos = [parseFloat(pos.lng), parseFloat(pos.lat)];
+					}
+
+					features1.forEach(feature => {
+
+						const featureCoordsStr = feature.properties.GeoPosition;
+						const featureCoords = featureCoordsStr.split(";").slice(0, 2).map(Number);
+
+						let distance = VBI.MapRenderer.haversineDistance(pos, featureCoords);
+
+						// Check if this is the nearest spot
+						if (distance < tolerance && distance < minDistance) {
+							minDistance = distance;
+							dropInstance = feature;
+						}
+					});
+					return dropInstance;
+				}
+				VBI.MapRenderer.haversineDistance = (pos, featureCoords) => {
+					const R = 6371000;
+					const lat1 = pos[0]
+					const lon1 = pos[1]
+					const lat2 = featureCoords[0]
+					const lon2 = featureCoords[1];
+					const dLat = VBI.MapRenderer.toRad(lat2 - lat1);
+					const dLon = VBI.MapRenderer.toRad(lon2 - lon1);
+					const a =
+						Math.sin(dLat / 2) * Math.sin(dLat / 2) +
+						Math.cos(VBI.MapRenderer.toRad(lat1)) * Math.cos(VBI.MapRenderer.toRad(lat2)) *
+						Math.sin(dLon / 2) * Math.sin(dLon / 2);
+					const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+					return R * c;
+				}
+				// Helper function to convert degrees to radians
+				VBI.MapRenderer.toRad = (value) => {
+					return value * Math.PI / 180;
+				}
 
 					// Function to return a promise that resolves when the map is clicked
 					function getClickCoordinates() {
@@ -514,185 +547,220 @@ sap.ui.define([
 					if (!exists) {
 						predefinedMarkers.push(markerCoordinates);
 					}
-				} else if (marker.geometry.type == "LineString") {
 					
-					if (marker.properties.Label) {
-						const coords = marker.geometry.coordinates;            
-						let midpoint = VectorUtils.getVisualMidpoint(coords, map);           
-				
-						const routeLabelEl = VectorUtils.createRouteLabel(
-							marker.properties.Label,
-							marker.properties.LabelBGColor
-						);
-						const labelMarker = new maplibregl.Marker({
-							element: routeLabelEl,
-							anchor: 'left',
-							offset: [10, 0]
-						})
-						.setLngLat(midpoint)
-						.addTo(map);
-						
-						map.on('move', () => {
-							try {
-								const newPos = VectorUtils.getVisualMidpoint(coords, map);
-								labelMarker.setLngLat(newPos);
-							} catch (e) {
-								console.warn("Label update failed:", e);
-							}
-						});
-					}
-
-					const coords = marker.geometry.coordinates;
-					const startCoord = coords[0];  // First coordinate
-					const endCoord = coords[coords.length - 1];  // Last coordinate
-
-					// Calculate angle between the two points
-					const angle = VectorUtils.calculateBearing(startCoord, endCoord);
-
-					// Determine the arrow rotations
-					const normalizedStartRotation = VectorUtils.normalizeAngle(90 + angle);  // Adjust for start arrow
-					const normalizedEndRotation = angle > 90 ? VectorUtils.normalizeAngle(270 + angle) : VectorUtils.normalizeAngle(90 - angle);  // Adjust for end arrow
-
-					if (coords.length > 1) {
-						// Create start point
-						const startPoint = {
-							'type': 'Feature',
-							'geometry': {
-								'type': 'Point',
-								'coordinates': coords[0]  // First coordinate
-							},
-							'properties': {
-								'Color': marker.properties.Color,
-								'BorderColor': marker.properties.BorderColor,
-								'arrowRotation': normalizedStartRotation,
-								'size': 0.07 * parseFloat(marker.properties.LineWidth),
-								'borderSize': 0.07 * (parseFloat(marker.properties.LineWidth) + 1)
-							}
-						};
-
-						// Create end point
-						const endPoint = {
-							'type': 'Feature',
-							'geometry': {
-								'type': 'Point',
-								'coordinates': coords[coords.length - 1]  // Last coordinate
-							},
-							'properties': {
-								'Color': marker.properties.Color,
-								'BorderColor': marker.properties.BorderColor,
-								'arrowRotation': normalizedEndRotation,
-								'size': 0.07 * parseFloat(marker.properties.LineWidth),
-								'borderSize': 0.07 * (parseFloat(marker.properties.LineWidth) + 1)
-							}
-						};
-
-						// Add the points only if the arrow is supposed to be shown
-						if (marker.properties.StartStyle === '1') {
-							pointFeatures.push(startPoint);
-						}
-						if (marker.properties.EndStyle === '1') {
-							pointFeatures.push(endPoint);
-						}
-					}
+					if (!map.getLayer('geojson-source-point')){
+					map.addLayer({
+						'id': 'geojson-source-point',
+						'type': 'circle',
+						'source': 'geojson-source',
+						'paint': {
+							'circle-opacity': 0 // Hide points by making them fully transparent
+						},
+						'filter': ['==', '$type', 'Point']
+					});
 				}
-
-			});
-			if (VBI.mapFlags.automations) {
-				let automations = new SAPAutomationManager(map, maplibregl.LngLatBounds);
-				automations.load(VBI.mapFlags.automations);
 			}
-			map.addLayer({
-				'id': 'geojson-source-point',
-				'type': 'circle',
-				'source': 'geojson-source',
-				'paint': {
-					'circle-opacity': 0 // Hide points by making them fully transparent
-				},
-				'filter': ['==', '$type', 'Point']
-			});
-
-			// First layer for the border (wider line)
-			map.addLayer({
-				'id': 'geojson-source-route-border',
-				'type': 'line',
-				'source': 'geojson-source',
-				'layout': {
-					'line-join': 'round',
-					'line-cap': 'butt'
-				},
-				'paint': {
-					'line-color': ['get', 'BorderColor'],
-					'line-width': ['get', 'BorderWidth']  // Slightly wider for border effect
-				},
-				'filter': ['==', '$type', 'LineString']
-			});
-			map.addLayer({
-				'id': 'geojson-source-route',
-				'type': 'line',
-				'source': 'geojson-source',
-				'layout': {
-					'line-join': 'round',
-					'line-cap': 'butt'
-				},
-				'paint': {
-					'line-color': ['get', 'Color'],
-					'line-width': ['get', 'LineWidth']
-				},
-				'filter': ['==', '$type', 'LineString']
-			});
-			
-			// Create a new FeatureCollection for the points
-			const pointGeoJSON = {
-				'type': 'FeatureCollection',
-				'features': pointFeatures
 			};
-
-			// Add the GeoJSON source for the points to the map
-			map.addSource('line-end-points', {
-				'type': 'geojson',
-				'data': pointGeoJSON
-			});
-
-			VectorUtils.getArrowHead((image) => {
-				map.addImage('arrow-icon', image, { sdf: true });
-				// Add a layer to display the arrows borders at the start/end points
+		 });
+		}
+		 	VBI.MapRenderer._processGeoRoutes = () => {
+        const pointFeatures = [];
+        let geoJSON = VBI.VBITransformer.getTransformedJSON();
+        if (map.getSource('geojson-source')) {
+            map.getSource('geojson-source').setData(geoJSON[1]);
+        } else {
+            map.addSource('geojson-source', {
+                'type': 'geojson',
+                'data': geoJSON[1]
+            });
+        }
+        geoJSON[1].features.forEach((marker) => {
+            if (marker.geometry.type == "LineString") {
+
+                const routeKey = marker.properties.Key;
+
+                if (marker.properties.Label) {
+
+                    if (!renderedRouteLabels.has(routeKey)) {
+
+                        const midpoint = VectorUtils.getVisualMidpoint(marker.geometry.coordinates, map);
+
+                        const routeLabelEl = VectorUtils.createRouteLabel(
+                            marker.properties.Label,
+                            marker.properties.LabelBGColor
+                        );
+
+                        const labelMarker = new maplibregl.Marker({
+                            element: routeLabelEl,
+                            anchor: 'left',
+                            offset: [10, 0]
+                        })
+                            .setLngLat(midpoint)
+                            .addTo(map);
+
+                        renderedRouteLabels.set(routeKey, labelMarker);
+                    }
+                }
+
+                const coords = marker.geometry.coordinates;
+                const startCoord = coords[0];  // First coordinate
+                const endCoord = coords[coords.length - 1];  // Last coordinate
+
+                // Calculate angle between the two points
+                const angle = VectorUtils.calculateBearing(startCoord, endCoord);
+
+                // Determine the arrow rotations
+                const normalizedStartRotation = VectorUtils.normalizeAngle(90 + angle);  // Adjust for start arrow
+                const normalizedEndRotation = angle > 90 ? VectorUtils.normalizeAngle(270 + angle) : VectorUtils.normalizeAngle(90 - angle);  // Adjust for end arrow
+
+                if (coords.length > 1) {
+                    // Create start point
+                    const startPoint = {
+                        'type': 'Feature', 
+                        'geometry': {
+                            'type': 'Point',
+                            'coordinates': coords[0]  // First coordinate
+                        },
+                        'properties': {
+                            'Color': marker.properties.Color,
+                            'BorderColor': marker.properties.BorderColor,
+                            'arrowRotation': normalizedStartRotation,
+                            'size': 0.07 * parseFloat(marker.properties.LineWidth),
+                            'borderSize': 0.07 * (parseFloat(marker.properties.LineWidth) + 1)
+                        }
+                    };
+
+                    // Create end point
+                    const endPoint = {
+                        'type': 'Feature',
+                        'geometry': {
+                            'type': 'Point',
+                            'coordinates': coords[coords.length - 1]  // Last coordinate
+                        },
+                        'properties': {
+                            'Color': marker.properties.Color,
+                            'BorderColor': marker.properties.BorderColor,
+                            'arrowRotation': normalizedEndRotation,
+                            'size': 0.07 * parseFloat(marker.properties.LineWidth),
+                            'borderSize': 0.07 * (parseFloat(marker.properties.LineWidth) + 1)
+                        }
+                    };
+
+                    // Add the points only if the arrow is supposed to be shown
+                    if (marker.properties.StartStyle === '1') {
+                        pointFeatures.push(startPoint);
+                    }
+                    if (marker.properties.EndStyle === '1') {
+                        pointFeatures.push(endPoint);
+                    }
+                }
+                //  });
+            } })
+        // Create a new FeatureCollection for the points
+        const pointGeoJSON = {
+            'type': 'FeatureCollection',
+            'features': pointFeatures
+        };
+
+        // Update the GeoJSON source for the points
+        if (map.getSource('line-end-points')) {
+            map.getSource('line-end-points').setData(pointGeoJSON);
+        } else {
+            map.addSource('line-end-points', {
+                'type': 'geojson',
+                'data': pointGeoJSON
+            });
+        }
+        if (!map.getLayer('geojson-source-point')) {
+            map.addLayer({
+                'id': 'geojson-source-point',
+                'type': 'circle',
+                'source': 'geojson-source',
+                'paint': {
+                    'circle-opacity': 0 // Hide points by making them fully transparent
+                },
+                'filter': ['==', '$type', 'Point']
+            });
+        }
+        if (!map.getLayer('geojson-source-route-border')) {
+            // First layer for the border (wider line)
+            map.addLayer({
+                'id': 'geojson-source-route-border',
+                'type': 'line',
+                'source': 'geojson-source',
+                'layout': {
+                    'line-join': 'round',
+                    'line-cap': 'butt'
+                },
+                'paint': {
+                    'line-color': ['get', 'BorderColor'],
+                    'line-width': ['get', 'BorderWidth']  // Slightly wider for border effect
+                },
+                'filter': ['==', '$type', 'LineString']
+            });
+        }
+        if (!map.getLayer('geojson-source-route')) {
+            map.addLayer({
+                'id': 'geojson-source-route',
+                'type': 'line',
+                'source': 'geojson-source',
+                'layout': {
+                    'line-join': 'round',
+                    'line-cap': 'butt'
+                },
+                'paint': {
+                    'line-color': ['get', 'Color'],
+                    'line-width': ['get', 'LineWidth']
+                },
+                'filter': ['==', '$type', 'LineString']
+            });
+        }
+	
+			// Add a layer to display the arrows at the start/end points
+				if (!map.getLayer('route-end-arrows')){
 				map.addLayer({
-					'id': 'route-end-arrows-border',
+					'id': 'route-end-arrows',
 					'type': 'symbol',
 					'source': 'line-end-points',
 					'layout': {
-						'icon-image': 'arrow-icon',  // base64 arrow icon
-						'icon-size': ['get', 'borderSize'],
+						'icon-image': 'arrow-icon',  // Use your base64 arrow icon
+						'icon-size': ['get', 'size'],
 						'icon-allow-overlap': true,
 						'icon-rotation-alignment': 'map',
 						'icon-rotate': ['get', 'arrowRotation'],  // Rotate based on calculated angle
 						'icon-offset': [-12, 4]
 					},
 					'paint': {
-						'icon-color': ['get', 'BorderColor']  // Match the arrow color with the line color
+						'icon-color': ['get', 'Color']  // Match the arrow color with the line color
 					}
 				});
+			}
 
-				// Add a layer to display the arrows at the start/end points
+			VectorUtils.getArrowHead((image) => {
+				if (!map.hasImage('arrow-icon')) {
+				map.addImage('arrow-icon', image, { sdf: true });
+				}
+				// Add a layer to display the arrows borders at the start/end points
+				if (!map.getLayer('route-end-arrows-border')){
 				map.addLayer({
-					'id': 'route-end-arrows',
+					'id': 'route-end-arrows-border',
 					'type': 'symbol',
 					'source': 'line-end-points',
 					'layout': {
-						'icon-image': 'arrow-icon',  // Use your base64 arrow icon
-						'icon-size': ['get', 'size'],
+						'icon-image': 'arrow-icon',  // base64 arrow icon
+						'icon-size': ['get', 'borderSize'],
 						'icon-allow-overlap': true,
 						'icon-rotation-alignment': 'map',
 						'icon-rotate': ['get', 'arrowRotation'],  // Rotate based on calculated angle
 						'icon-offset': [-12, 4]
 					},
 					'paint': {
-						'icon-color': ['get', 'Color']  // Match the arrow color with the line color
+						'icon-color': ['get', 'BorderColor']  // Match the arrow color with the line color
 					}
-				});
-			});
-		});
-
+				}, 'route-end-arrows');
+			}
+            });
+        
 		// Change mouse cursor when hovering over the line
 		map.on('mouseenter', 'geojson-source-route', function (event) {
 			if (!that.Apressed && !that.Rpressed) {
@@ -900,40 +968,8 @@ sap.ui.define([
 				}
 			}
 		}
-
-		mapCanvas.oncontextmenu = (e) => {
-			e.preventDefault();
-			// Get the mouse coordinates within the map container
-			const rect = canvas.getBoundingClientRect(); // Get map container position
-			const x = e.clientX - rect.left;  // Relative to map
-			const y = e.clientY - rect.top;
-			const lngLat = map.unproject([x, y]);
-			// Check if the right-click happened on the 'geojson-source-route' layer
-			const features = map.queryRenderedFeatures([x, y], { layers: ['geojson-source-route'] });
-
-			if (features.length > 0) {
-				e.features = features;
-				// The context menu is for the 'geojson-source-route' layer
-				triggerPayloadRoute(e, 'CONTEXT_MENU_REQUEST');
-			} else {
-				// Get the mouse coordinates within the map container
-				const offsetX = e.offsetX;
-				const offsetY = e.offsetY;
-				const lngLat = map.unproject([offsetX, offsetY]);
-				// The context menu is for the map
-				const coords = lngLat.lng + ";" + lngLat.lat + ";0.0";
-				const currentZoom = map.getZoom();
-				const center = map.getCenter();
-				const currentCenter = center.lng + ";" + center.lat;
-				const xyobj = VectorUtils.GetEventVPCoordsObj(e, map_container);
-				const screenX = xyobj.x;
-				const screenY = xyobj.y;
-				PayloadGenerator.onMapContextMenu(coords, currentZoom, currentCenter, screenX, screenY);
-			}
-		};
-		
 		var that = this;
-		map.on('idle', () => {
+	map.on('idle', () => {
 			const container = map.getContainer();
 			containerID = container.id;
 			console.log("Map container ID:", containerID);
@@ -978,10 +1014,57 @@ sap.ui.define([
 				}
 				//Always trigger
 				PayloadGenerator.KeyboardHandler(event, VBI.MapRenderer.name);
-			});
-		})
+            });
+        }) ;  
+ }		
+	VBI.MapRenderer._processDeletion = (featureCollection) => {
+
+	const geoJSON = VBI.VBITransformer.getTransformedJSON();
+	if (!geoJSON[1].features || !geoJSON[1].features.length) {
+    geoJSON[1].features = featureCollection;
+    return;
+  	}
+	const oldFeatures = geoJSON[1].features;
+
+	// Collect IDs that still exist
+	const remainingIds = {};
+	for (let i = 0; i < featureCollection.length; i++) {
+		remainingIds[featureCollection[i].properties.Key] = true;
+	}
 
+	// Find deleted feature IDs
+	const deletedIds = [];
+	for (let i = 0; i < oldFeatures.length; i++) {
+		const oldId = oldFeatures[i].properties.Key;
+		if (!remainingIds[oldId]) {
+		deletedIds.push(oldId);
+		}
 	}
+
+	const deletedIds1 = new Set(deletedIds.map(id => String(id).trim()));
+	// Remove all matching markers
+	for (let i = VBI.MapRenderer.allMarkers.length - 1; i >= 0; i--) {
+		const marker = VBI.MapRenderer.allMarkers[i];
+		const key = marker.customProperties?.Key;
+		if (!key) continue;
+		if (deletedIds1.has(String(key).trim())) {
+		marker.getElement().remove();
+		VBI.MapRenderer.allMarkers.splice(i, 1);
+		}
+	}
+
+	// Update GeoJSON source
+	geoJSON[1].features = featureCollection;
+	map.getSource('geojson-source').setData(geoJSON [1]);
+	if (map.getSource('line-end-points')) {
+        map.getSource('line-end-points').setData({
+            type: 'FeatureCollection',
+            features: []
+        });
+    }
+	 VBI.MapRenderer._processGeoRoutes();
+	}
+
 	VBI.MapRenderer.actionName = (obj) => {
 		const actions = Array.isArray(obj?.SAPVB?.Actions?.Set?.Action)
 			? obj.SAPVB.Actions.Set.Action
@@ -1033,18 +1116,18 @@ sap.ui.define([
 			offset: [19, 15]
 		}).setLngLat(lngLat)
 			.setDOMContent(htmlContent)
-			.addTo(this.map);
+			.addTo(map);
 	}
 
 	VBI.MapRenderer.closePopup = () => {
 		this.popup?.remove();
 	}
 	VBI.MapRenderer.setRefMapLayerStack = (style, header) => {
-		this.map.setStyle(style);
+		map.setStyle(style);
 		// Add the headers only for the specific types of requests
 		if (Object.keys(header).length != 0) {
 			// Use transformRequest to modify requests for specific maps
-			this.map.transformRequest = (url, resourceType) => {
+			map.transformRequest = (url, resourceType) => {
 				return {
 					url: url,
 					headers: header // Add the header
@@ -1068,9 +1151,7 @@ sap.ui.define([
 				contextMenuHandler.m_scene = xyparam[i]["#"];
 			}
 		}
-		Menu.findMenuByID(data.refID).open(true, 0, "begin top", "begin top", this.map._container, "" + contextMenuHandler.m_x + " " + contextMenuHandler.m_y + "", "fit");
+		Menu.findMenuByID(data.refID).open(true, 0, "begin top", "begin top", map._container, "" + contextMenuHandler.m_x + " " + contextMenuHandler.m_y + "", "fit");
 	}
 
 });
-
-