@sapui5/sap.ui.vbm 1.131.0 → 1.133.0

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

@@ -6,9 +6,13 @@ sap.ui.define([
 	"./VectorUtils",
 	"./thirdparty/MaplibreStyles",
 	"./PayloadGenerator",
+	"./RectangularSelection",
+	"./LassoSelection",
+	"sap/ui/core/Lib",
+	//"../lib/sapscene",
 	"./thirdparty/maplibregl",
 	"./VBITransformer"
-], function (vb, VBIRenderer, VectorUtils, MaplibreStyles, PayloadGenerator) {
+], function (vb, VBIRenderer, VectorUtils, MaplibreStyles, PayloadGenerator, RectangularSelection, LassoSelection, Lib) {
 	'use strict';
 
 	VBI.MapRenderer = {};
@@ -16,29 +20,21 @@ sap.ui.define([
 	let isDragging = false;
 	let startY;
 	let startYpx;
-	let mapInitialZoom;
-	const scrollline_Length = 94 - 18;
-	const DRAG_THRESHOLD = 5;
 	let isDrawing = false;
 	let isCtrlPressed = false;
 	let lassoPoints = [];
 	var bounds = [];
-	let existingLines = [];
 	let predefinedMarkers = [];
-	let line = {};
 	let allMarkers = [];
 	let lineDrag = false;
 	let validDrop = false;
-	let start = null;
-	let current = null;
-	let isSelecting = false;
-
+	VBI.MapRenderer.name = undefined;
 
 	VBI.MapRenderer.setAdapter = (adapter) => {
 		this._adapter = adapter;
+		this._payloadGenerator = new PayloadGenerator(this._adapter);
 	}
 
-	this._payloadGenerator = new PayloadGenerator(this._adapter);
 	// Process the GeoJSON spots and its properties
 	VBI.MapRenderer._processGeoSpot = (source, data) => {
 
@@ -61,7 +57,16 @@ sap.ui.define([
 		document.head.appendChild(styleSheet);
 
 		const map = VectorUtils.createMap(geoJSON, map_container);
-
+		const canvas = map.getCanvasContainer();
+		const rectangularSelection = new RectangularSelection(map);
+		const lassoSelection = new LassoSelection(map);
+		// 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;
 		class SAPMapNavControl {
 			onAdd(map) {
 				this.map = map;
@@ -73,6 +78,68 @@ sap.ui.define([
 				this._container.setAttribute('tabindex', '-1');
 				this._container.style.opacity = '0.5';
 
+				// ensures the library is loaded
+				Lib.load({ name: "sap.ui.vbm.i18n" });
+
+				// ResourceBundle can be retrieved
+				var oResourceBundle = Lib.getResourceBundleFor("sap.ui.vbm.i18n")
+
+				var sTooltipMoveLeft = oResourceBundle.getText("NAVCTL_TITLE_MOVE_LEFT");
+				var sTooltipMoveRight = oResourceBundle.getText("NAVCTL_TITLE_MOVE_RIGHT");
+				var sTooltipMoveUp = oResourceBundle.getText("NAVCTL_TITLE_MOVE_UP");
+				var sTooltipMoveDown = oResourceBundle.getText("NAVCTL_TITLE_MOVE_DOWN");
+				var sTooltipMove = oResourceBundle.getText("NAVCTL_TITLE_MOVE");
+				var sTooltipZoom = oResourceBundle.getText("NAVCTL_TITLE_ZOOM");
+
+
+				//Create cursor left div
+
+				var cursorLeft = document.createElement('div');
+				cursorLeft.id = '__xmlview1--vbi-vbi-cursor-left';
+				cursorLeft.className = 'vbi-cursor-left';
+				cursorLeft.setAttribute('role', sap.ui.core.AccessibleRole.Button);
+				cursorLeft.setAttribute('aria-label', sTooltipMoveLeft);
+				cursorLeft.setAttribute('tabindex', '2');
+				cursorLeft.setAttribute('title', sTooltipMoveLeft);
+
+				// Create cursor right div
+
+				var cursorRight = document.createElement('div');
+				cursorRight.id = '__xmlview1--vbi-vbi-cursor-right';
+				cursorRight.className = 'vbi-cursor-right';
+				cursorRight.setAttribute('role', 'Button');
+				cursorRight.setAttribute('aria-label', sTooltipMoveRight);
+				cursorRight.setAttribute('tabindex', '4');
+				cursorRight.setAttribute('title', sTooltipMoveRight);
+
+				// Create cursor top div
+
+				var cursorTop = document.createElement('div');
+				cursorTop.id = '__xmlview1--vbi-vbi-cursor-top';
+				cursorTop.className = 'vbi-cursor-top';
+				cursorTop.setAttribute('role', 'Button');
+				cursorTop.setAttribute('aria-label', sTooltipMoveUp);
+				cursorTop.setAttribute('tabindex', '1');
+				cursorTop.setAttribute('title', sTooltipMoveUp);
+
+				// Create cursor down div
+
+				var cursorDown = document.createElement('div');
+				cursorDown.id = '__xmlview1--vbi-vbi-cursor-down';
+				cursorDown.className = 'vbi-cursor-down';
+				cursorDown.setAttribute('role', 'Button');
+				cursorDown.setAttribute('aria-label', sTooltipMoveDown);
+				cursorDown.setAttribute('tabindex', '5');
+				cursorDown.setAttribute('title', sTooltipMoveDown);
+
+				// Create cursor reset div
+				var cursorReset = document.createElement('div');
+				cursorReset.id = '__xmlview1--vbi-vbi-cursor-reset';
+				cursorReset.className = 'vbi-cursor-reset';
+				cursorReset.setAttribute('role', 'Button');
+				cursorReset.setAttribute('aria-label', sTooltipMove);
+				cursorReset.setAttribute('tabindex', '3');
+				cursorReset.setAttribute('title', sTooltipMove);
 
 				this._container.addEventListener('mouseover', function () {
 					this.style.opacity = '1';
@@ -101,7 +168,6 @@ sap.ui.define([
 				scrollLineUpperEnding.style.position = 'absolute';
 				scrollLineUpperEnding.top = '20px';
 
-
 				// Create scroll line div
 				var scrollLine = document.createElement('div');
 				scrollLine.id = '__xmlview1--vbi-vbi-scrollline';
@@ -109,7 +175,6 @@ sap.ui.define([
 				scrollLine.setAttribute('role', 'Img');
 				scrollLine.setAttribute('tabindex', '-1');
 
-
 				// Create scroll line lower ending div
 				var scrollLineLowerEnding = document.createElement('div');
 				scrollLineLowerEnding.id = '__xmlview1--vbi-vbi-scrolllinelowerending';
@@ -118,16 +183,16 @@ sap.ui.define([
 				scrollLineLowerEnding.setAttribute('tabindex', '-1');
 				scrollLineLowerEnding.style.cursor = 'pointer';
 				scrollLineLowerEnding.style.position = 'absolute';
-				scrollLineLowerEnding.style.top = '100px';
+				scrollLineLowerEnding.style.top = '90px';
 
 				// Create scroll point div
 				var scrollPoint = document.createElement('div');
 				scrollPoint.id = '__xmlview1--vbi-vbi-scrollpoint';
 				scrollPoint.className = 'vbi-scrollpoint';
 				scrollPoint.setAttribute('role', 'Button');
-				scrollPoint.setAttribute('aria-label', 'NAVCTL_TITLE_ZOOM');
+				scrollPoint.setAttribute('aria-label', sTooltipZoom);
 				scrollPoint.setAttribute('tabindex', '0');
-				scrollPoint.setAttribute('title', 'NAVCTL_TITLE_ZOOM');
+				scrollPoint.setAttribute('title', sTooltipZoom);
 				scrollPoint.style.top = '4.43911px';
 				startYpx = 4.43911;
 
@@ -164,54 +229,6 @@ sap.ui.define([
 				cursorMiddle.setAttribute('role', 'Img');
 				cursorMiddle.setAttribute('tabindex', '0');
 
-				// Create cursor left div
-				var cursorLeft = document.createElement('div');
-				cursorLeft.id = '__xmlview1--vbi-vbi-cursor-left';
-				cursorLeft.className = 'vbi-cursor-left';
-				cursorLeft.setAttribute('role', 'Button');
-				cursorLeft.setAttribute('aria-label', 'NAVCTL_TITLE_MOVE_LEFT');
-				cursorLeft.setAttribute('tabindex', '2');
-				cursorLeft.setAttribute('title', 'NAVCTL_TITLE_MOVE_LEFT');
-				// cursorLeft.style.backgroundPosition = '-134px 228px';
-
-				// Create cursor right div
-				var cursorRight = document.createElement('div');
-				cursorRight.id = '__xmlview1--vbi-vbi-cursor-right';
-				cursorRight.className = 'vbi-cursor-right';
-				cursorRight.setAttribute('role', 'Button');
-				cursorRight.setAttribute('aria-label', 'NAVCTL_TITLE_MOVE_RIGHT');
-				cursorRight.setAttribute('tabindex', '4');
-				cursorRight.setAttribute('title', 'NAVCTL_TITLE_MOVE_RIGHT');
-
-				// Create cursor top div
-				var cursorTop = document.createElement('div');
-				cursorTop.id = '__xmlview1--vbi-vbi-cursor-top';
-				cursorTop.className = 'vbi-cursor-top';
-				cursorTop.setAttribute('role', 'Button');
-				cursorTop.setAttribute('aria-label', 'NAVCTL_TITLE_MOVE_UP');
-				cursorTop.setAttribute('tabindex', '1');
-				cursorTop.setAttribute('title', 'NAVCTL_TITLE_MOVE_UP');
-				// cursorTop.style.backgroundPosition = '-82px 228px';
-
-				// Create cursor down div
-				var cursorDown = document.createElement('div');
-				cursorDown.id = '__xmlview1--vbi-vbi-cursor-down';
-				cursorDown.className = 'vbi-cursor-down';
-				cursorDown.setAttribute('role', 'Button');
-				cursorDown.setAttribute('aria-label', 'NAVCTL_TITLE_MOVE_DOWN');
-				cursorDown.setAttribute('tabindex', '5');
-				cursorDown.setAttribute('title', 'NAVCTL_TITLE_MOVE_DOWN');
-
-				// Create cursor reset div
-				var cursorReset = document.createElement('div');
-				cursorReset.id = '__xmlview1--vbi-vbi-cursor-reset';
-				cursorReset.className = 'vbi-cursor-reset';
-				cursorReset.setAttribute('role', 'Button');
-				cursorReset.setAttribute('aria-label', 'NAVCTL_TITLE_MOVE');
-				cursorReset.setAttribute('tabindex', '3');
-				cursorReset.setAttribute('title', 'NAVCTL_TITLE_MOVE');
-
-
 
 				// Append cursor buttons to cursor middle container
 				cursorMiddle.appendChild(cursorLeft);
@@ -340,6 +357,10 @@ sap.ui.define([
 			}
 		}
 		map.on('load', () => {
+
+			// Legend control
+			VBI.VBITransformer._createLegend(map_container);
+
 			// Custom attribution/copyright control
 			map.addControl(new maplibregl.AttributionControl({
 				customAttribution: '<span>' + geoJSON[0].copyright + '</span>',
@@ -360,36 +381,7 @@ sap.ui.define([
 
 
 			map.addControl(new SAPMapNavControl(), 'top-left');
-			// 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']
-			});
-
+			//	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,
@@ -397,6 +389,7 @@ sap.ui.define([
 			});
 			// add markers to map only for Points
 			bounds = [];
+			const pointFeatures = [];
 			geoJSON[1].features.forEach((marker) => {
 				let markerCoordinates = marker.geometry.coordinates;
 				if (marker.geometry.type === 'Point') {
@@ -411,11 +404,13 @@ sap.ui.define([
 					//	add marker to map
 					let spot = new maplibregl.Marker({
 						element: el,
-						draggable: true
+						draggable: true,
+						offset: [0, -25]
 					}).setLngLat(marker.geometry.coordinates)
 						.on('dragend', onDragEnd)
 						.addTo(map);
 					let originalpos = spot.getLngLat();
+					spot.customProperties = { Key: marker.properties.Key };
 					allMarkers.push(spot);
 
 					function onDragEnd() {
@@ -437,11 +432,19 @@ sap.ui.define([
 						//Check if a line is dragged here
 						if (lineDrag) {
 							validDrop = true;
-							el.style.cursor = 'copy';
+							if (!that.Apressed && !that.Rpressed) {
+								el.style.cursor = 'copy';
+							}
 						} else {
 							// Change the cursor style as a UI indicator
-							el.style.cursor = 'pointer';
-							popup.setLngLat(marker.geometry.coordinates).setHTML(marker.properties.ToolTip).addTo(map);
+							if (!that.Apressed && !that.Rpressed) {
+								el.style.cursor = 'pointer';
+							}
+							if (that.Apressed || that.Rpressed) {
+								el.style.cursor = 'crosshair';
+							} else {
+								popup.setLngLat(marker.geometry.coordinates).setHTML(marker.properties.ToolTip).addTo(map);
+							}
 						}
 
 					});
@@ -453,8 +456,9 @@ sap.ui.define([
 						} else {
 							clickCoordinates = { lng: marker.geometry.coordinates[0], lat: marker.geometry.coordinates[1] };
 						}
-						marker.properties.x = e.layerX;
-						marker.properties.y = e.layerY;
+						const xyobj = VectorUtils.GetEventVPCoordsObj(e, map_container);
+						marker.properties.x = xyobj.x;
+						marker.properties.y = xyobj.y;
 						PayloadGenerator.objectClick('Spot', event, marker, clickCoordinates);
 					};
 
@@ -466,73 +470,13 @@ sap.ui.define([
 					el.addEventListener('contextmenu', (e) => {
 						//Trigger payload
 						triggerPayloadSpot(e, 'CONTEXT_MENU_REQUEST');
-						var dropdown = marker.properties.menu;
-						var i, y;
-						var openDropdown = [];
-						for (i = 0; i < dropdown.MenuItem.length; i++) {
-							openDropdown[i] = dropdown.MenuItem[i].text + "<br>";
-						}
-						//		 document.getElementById("openDropdown[0]").innerHTML = "dsa";
-						//		 }
-						//  const e2 = document.createElement('div');
-						//  e2.className = 'contextmenu';
-						// Initialize the menu
-						const menuElement = document.getElementById('menu');
-						var dropdownContent = VectorUtils.createDropdownMenu(marker.properties.menu);
-						//	menuElement.appendChild(dropdownContent);
-						popup.setLngLat(marker.geometry.coordinates).setHTML(dropdownContent.innerHTML).addTo(map);
-						// Prevent popup from closing when hovering inside
-						popup._container.addEventListener('mouseenter', () => {
-							// 	// This keeps the popup open
-							popup.setLngLat(marker.geometry.coordinates).addTo(map);
-							// 	console.log(`Clicked on: ${item.text}`);
-						});
-						// Attach event listeners for interactivity after the popup opens
-						popup.on('open', () => {
-							const popupElement = popup.getElement();
-							const menuContainer = popupElement.querySelector('.dropdown-content');
-
-							// Toggle dropdown visibility
-							popupElement.addEventListener('click', (event) => {
-								event.stopPropagation();
-								menuContainer.style.display = menuContainer.style.display === 'block' ? 'none' : 'block';
-							});
-
-							// Hide menu when clicking outside
-							// document.addEventListener('click', () => {
-							// 	menuContainer.style.display = 'none';
-							// });
-
-							// Handle submenu toggling
-							popupElement.querySelectorAll('li').forEach(li => {
-								const submenu = li.querySelector('ul');
-
-								li.addEventListener('click', (event) => {
-									event.stopPropagation();
-
-									if (submenu) {
-										submenu.style.display = submenu.style.display === 'block' ? 'none' : 'block'; // Keep submenu open when hovered
-									}
-
-									if (submenu) {
-										submenu.addEventListener('click', () => {
-											submenu.style.display = submenu.style.display === 'block' ? 'none' : 'block'; // Keep submenu open when hovered
-										});
-
-										submenu.addEventListener('mouseleave', () => {
-											submenu.style.display = submenu.style.display === 'block' ? 'none' : 'block'; // Hide submenu when mouse leaves
-										});
-
-									}
-								});
-							});
-
-						});
 					});
 
 
 					el.addEventListener('mouseleave', () => {
-						map.getCanvas().style.cursor = '';
+						if (!that.Apressed && !that.Rpressed) {
+							map.getCanvas().style.cursor = '';
+						}
 						popup.remove();
 						validDrop = false;
 					});
@@ -547,10 +491,61 @@ sap.ui.define([
 						predefinedMarkers.push(markerCoordinates);
 					}
 				} else if (marker.geometry.type == "LineString") {
-					line.id = "line_" + marker.id;
-					line.coordinates = marker.geometry.coordinates;
-					existingLines.push(line);
+					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);
+						}
+					}
 				}
+
+				// Calculate bounds to Zoom
 				if (marker.geometry.type == "LineString") {
 					markerCoordinates.forEach((line) => {
 						let exists = bounds.some(
@@ -583,40 +578,127 @@ sap.ui.define([
 			map.fitBounds(zoombounds, {
 				padding: 150
 			});
-		});
 
+			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
+				map.addLayer({
+					'id': 'route-end-arrows-border',
+					'type': 'symbol',
+					'source': 'line-end-points',
+					'layout': {
+						'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
+					},
+					'paint': {
+						'icon-color': ['get', 'BorderColor']  // Match the arrow color with the line color
+					}
+				});
+
+				// Add a layer to display the arrows at the start/end points
+				map.addLayer({
+					'id': 'route-end-arrows',
+					'type': 'symbol',
+					'source': 'line-end-points',
+					'layout': {
+						'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
+					},
+					'paint': {
+						'icon-color': ['get', 'Color']  // Match the arrow color with the line color
+					}
+				});
+			});
+
+		});
 		// Change mouse cursor when hovering over the line
 		map.on('mouseenter', 'geojson-source-route', function () {
-			map.getCanvas().style.cursor = 'pointer';
+			if (!that.Apressed && !that.Rpressed) {
+				map.getCanvas().style.cursor = 'pointer';
+			}
 		});
 
 		// Revert mouse cursor back when not hovering
 		map.on('mouseleave', 'geojson-source-route', function () {
-			map.getCanvas().style.cursor = '';
+			if (!that.Apressed && !that.Rpressed) {
+				map.getCanvas().style.cursor = '';
+			}
 		});
 		map.on('click', 'geojson-source-route', function (e) {
 			//Trigger payload
 			triggerPayloadRoute(e, 'DETAIL_REQUEST');
 		});
 
-		map.on('contextmenu', 'geojson-source-route', function (e) {
-			//Trigger payload
-			triggerPayloadRoute(e, 'CONTEXT_MENU_REQUEST');
-		});
-
 		function triggerPayloadRoute(e, event) {
 			const coordinates = e.lngLat;
 			// Get the GeoJSON properties of the clicked line feature
+			const xyobj = VectorUtils.GetEventVPCoordsObj(e.originalEvent, map_container);
 			var route = e.features[0];
-			route.properties.x = e.point.x;
-			route.properties.y = e.point.y;
+			route.properties.x = xyobj.x;
+			route.properties.y = xyobj.y;
 
 			PayloadGenerator.objectClick('Link', event, route, coordinates);
 		}
-		function onUp(e) {
-			const coords = e.lngLat;
 
+		function onUp(e) {
+			// To be done
 			if (validDrop) {
 				// Perform action for valid drop
 				console.log('Dropped on valid target');
@@ -632,6 +714,7 @@ sap.ui.define([
 			lineDrag = false;
 			validDrop = false;
 		}
+
 		map.on('mousedown', 'geojson-source-route', (e) => {
 			// Check if the left mouse button is clicked (button === 0)
 			if (e.originalEvent.button === 0) {
@@ -650,222 +733,152 @@ sap.ui.define([
 				layers: ['geojson-source-route']
 			});
 
-			if (features.length || validDrop) {
-				map.getCanvas().style.cursor = 'copy';
+			if (!that.Apressed && !that.Rpressed) {
+				if (features.length || validDrop) {
+					map.getCanvas().style.cursor = 'copy';
 
-			} else {
-				// If not over a valid feature, show the "not-allowed" cursor
-				map.getCanvas().style.cursor = 'not-allowed';
+				} else {
+					// If not over a valid feature, show the "not-allowed" cursor
+					map.getCanvas().style.cursor = 'not-allowed';
+				}
 			}
 		};
 
-		// https://docs.mapbox.com/mapbox-gl-js/api/map/#map#flyto
 		map.on('contextmenu', (e) => {
-			// The event object (e) contains information like the
-			// coordinates of the point on the map that was clicked.
-			// FireAction
-			console.log('A contextmenu event has occurred at ' + e.lngLat);
-			//to be removed and replaced dynamically from file
-			// map.flyTo({
-			// 	center: [e.lngLat.lat,  e.lngLat.lng],
-			// 	zoom: 5,
-			// 	speed: 5
-			// });
-		})
-		//VBI.VBITransformer.clearTransformedJSON();
-
-		document.addEventListener('keydown', function (event) {
-			switch (event.code) {
-				case 'Plus':  // Zoom in when '+' is pressed
-					map.zoomIn();
-					break;
-				case 'Minus':  // Zoom out when '-' is pressed
-					map.zoomOut();
-					break;
-				case 'ArrowUp':  // Pan up when the up arrow key is pressed
-					map.panBy([0, -100]);
-					break;
-				case 'ArrowDown':  // Pan down when the down arrow key is pressed
-					map.panBy([0, 100]);
-					break;
-				case 'ArrowLeft':  // Pan left when the left arrow key is pressed
-					map.panBy([-100, 0]);
-					break;
-				case 'ArrowRight':  // Pan right when the right arrow key is pressed
-					map.panBy([100, 0]);
-					break;
-				case 'KeyR':  // Reset map to initial view when 'r' is pressed
-					map.setCenter([0, 0]);
-					map.setZoom(2);
-					break;
-				default:
-					break;
-			}
-		});
+			// Check if the right-click happened on the 'geojson-source-route' layer
+			const features = map.queryRenderedFeatures(e.point, { layers: ['geojson-source-route'] });
 
-		const box = document.createElement('div');
-		box.className = 'zoom-box';
-		//box.className = 'selection-box'
-		document.body.appendChild(box);
-		const mapContainer = document.getElementById('map');
-		const boxes = document.getElementById('selection-box');
-		window.addEventListener('keydown', (e) => {
-			if (e.code === 'ControlLeft') {
-				isCtrlPressed = true;
-				map.getCanvas().style.cursor = 'crosshair';
-				lassoPoints = [];
-			}
-			if (e.code === 'ShiftLeft') {
-				map.getCanvas().style.cursor = 'crosshair';
+			if (features.length > 0) {
+				e.features = features;
+				// The context menu is for the 'geojson-source-route' layer
+				triggerPayloadRoute(e, 'CONTEXT_MENU_REQUEST');
+			} else {
+				// The context menu is for the map
+				const coords = e.lngLat.lng + ";" + e.lngLat.lat + ";0.0";
+				const currentZoom = map.getZoom();
+				const center = map.getCenter();
+				const currentCenter = center.lng + ";" + center.lat;
+				const xyobj = VectorUtils.GetEventVPCoordsObj(e.originalEvent, map_container);
+				const screenX = xyobj.x;
+				const screenY = xyobj.y;
+				PayloadGenerator.onMapContextMenu(coords, currentZoom, currentCenter, screenX, screenY);
 			}
 		});
 
-		window.addEventListener('keyup', (e) => {
-			if (e.code === 'ControlLeft') {
-				isCtrlPressed = false;
-				if (lassoPoints.length > 2) {
-					completeLasso();
+		var that = this;
+		map.on('idle', () => {
+			const container = map.getContainer();
+			container.addEventListener('keydown', function (event) {
+				switch (event.keyCode) {
+					case 72:     // Reset map to initial view when 'h' is pressed
+						map.setCenter([0, 0]);
+						map.setZoom(2);
+						map.getCanvas().style.cursor = '';
+						break;
+					case 82:
+						if (!that.Rpressed) {
+							// Disable default box zooming.
+							that.Rpressed = true;
+							that.Apressed = false;
+							map.boxZoom.disable();
+							map.getCanvas().style.cursor = 'crosshair';
+						} else {
+							// Enable default box zooming.
+							that.Rpressed = false;
+							map.boxZoom.enable();
+							map.getCanvas().style.cursor = '';
+						}
+						break;
+					case 65:
+						if (!that.Apressed) {
+							// Disable default box zooming.
+							that.Apressed = true;
+							that.Rpressed = false;
+							map.boxZoom.disable();
+							map.getCanvas().style.cursor = 'crosshair';
+						} else {
+							// Enable default box zooming.
+							that.Apressed = false;
+							map.boxZoom.enable();
+							map.getCanvas().style.cursor = '';
+						}
+						break;
+					default:
+						break;
 				}
-				map.getCanvas().style.cursor = '';
-			}
-			if (e.code === 'ShiftLeft') {
-				map.getCanvas().style.cursor = '';
-			}
-		});
-		map.on('mousedown', (e) => {
-			if (isCtrlPressed) {
-				const clickedPoint = [e.lngLat.lng, e.lngLat.lat];
-				lassoPoints.push(clickedPoint);
-				isDrawing = true;
-			}
-
-			else if (e.originalEvent.shiftKey) {
-				isDrawing = true;
-				start = e.point;
-				box.style.display = 'block';
-				box.style.left = `${e.point.x}px`;
-				box.style.top = `${e.point.y}px`;
-			}
-		});
-		map.on('mousemove', (e) => {
-			if (isCtrlPressed) {
-				const movingPoint = [e.lngLat.lng, e.lngLat.lat];
-				lassoPoints.push(movingPoint);
-				drawLassoLine();
-			}
+				//Always trigger
+				PayloadGenerator.KeyboardHandler(event, VBI.MapRenderer.name);
+			});
+		})
 
-			else if (e.originalEvent.shiftKey) {
-				current = e.point;
-				const minX = Math.min(start.x, current.x);
-				const minY = Math.min(start.y, current.y);
-				const width = Math.abs(start.x - current.x);
-				const height = Math.abs(start.y - current.y);
-				box.style.left = `${minX}px`;
-				box.style.top = `${minY}px`;
-				box.style.width = `${width}px`;
-				box.style.height = `${height}px`;
 
-			}
-		});
+	}
+	VBI.MapRenderer.actionName = (obj) => {
+		const actions = Array.isArray(obj?.SAPVB?.Actions?.Set?.Action)
+			? obj.SAPVB.Actions.Set.Action
+			: [obj?.SAPVB?.Actions?.Set?.Action].filter(Boolean);
+
+		const action = actions.find(act => act.refEvent === "KeyPress");
+		VBI.MapRenderer.name = action?.name ?? undefined;
+	};
+
+	VBI.MapRenderer.createPopup = (htmlContent, posArray) => {
+		let lngLat;
+		switch (posArray[0]) {
+			case "Spots":
+				// Find the spot with the specified key
+				const foundSpot = allMarkers.find(spot => spot.customProperties.Key === posArray[1]);
+				lngLat = foundSpot?.getLngLat();
+				break;
+			default:
+		}
 
-		map.on('mouseup', (e) => {
-			if (isCtrlPressed) {
-				// Complete Lasso Selection
-				isDrawing = false;
-				if (lassoPoints.length > 2) {
-					lassoPoints.push(lassoPoints[0]);
-					completeLasso();
-				}
-			} else if (e.originalEvent.shiftKey) {
-				isDrawing = false;
-				box.style.display = 'none';
-				box.style.width = '0px';
-				box.style.height = '0px';
-				const bounds = [
-					map.unproject([Math.min(start.x, current.x), Math.min(start.y, current.y)]),
-					map.unproject([Math.max(start.x, current.x), Math.max(start.y, current.y)])
-				];
-				console.log("Rectangular Zoom Bounds: ", bounds);
-				map.fitBounds(bounds, {
-					padding: 20
-				});
-			}
+		if (this.popup) {
+			//Remove existing popups
+			this.popup.remove();
 		}
-		);
-		function drawLassoLine() {
-			if (map.getSource('lasso-line')) {
-				map.getSource('lasso-line').setData({
-					'type': 'LineString',
-					'coordinates': lassoPoints
-				});
-			} else {
-				map.addSource('lasso-line', {
-					'type': 'geojson',
-					'data': {
-						'type': 'LineString',
-						'coordinates': lassoPoints
-					}
-				});
-				map.addLayer({
-					'id': 'lasso-line-layer',
-					'type': 'line',
-					'source': 'lasso-line',
-					'paint': {
-						'line-color': '#000000',
-						'line-width': 2,
-						'line-dasharray': [2, 2]
-					}
-				});
+		// Create a Mapbox popup using the constructed HTML DOM
+		this.popup = new maplibregl.Popup({
+			closeButton: false,
+			offset: [19, 15]
+		}).setLngLat(lngLat)
+			.setDOMContent(htmlContent)
+			.addTo(this.map);
+	}
+
+	VBI.MapRenderer.closePopup = () => {
+		this.popup?.remove();
+	}
+	VBI.MapRenderer.setRefMapLayerStack = (style, header) => {
+		this.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) => {
+				return {
+					url: url,
+					headers: header // Add the header
+				};
 			}
 		}
+	}
 
-		function completeLasso() {
-			if (map.getSource('lasso-polygon')) {
-				map.getSource('lasso-polygon').setData({
-					'type': 'Polygon',
-					'coordinates': [lassoPoints]
-				});
-			} else {
-				map.addSource('lasso-polygon', {
-					'type': 'geojson',
-					'data': {
-						'type': 'Polygon',
-						'coordinates': [lassoPoints]
-					}
-				});
-				map.addLayer({
-					'id': 'lasso-polygon-layer',
-					'type': 'fill',
-					'source': 'lasso-polygon',
-					'paint': {
-						'fill-color': '#088',
-						'fill-opacity': 0.5
-					}
-				});
+	VBI.MapRenderer.createMenu = (Menu, data) => {
+		var contextMenuHandler = {};
+		contextMenuHandler.cnt = 0;
+		const xyparam = data.Params?.Param ? data.Params.Param : data.Param;
+		for (var i = 0; i < xyparam.length; ++i) {
+			if (xyparam[i].name === "x") {
+				contextMenuHandler.m_x = parseInt(xyparam[i]["#"], 10);
 			}
-
-			// Remove lasso line and polygon after the selection is completed
-			setTimeout(() => {
-				map.removeLayer('lasso-line-layer');
-				map.removeSource('lasso-line');
-				map.removeLayer('lasso-polygon-layer');
-				map.removeSource('lasso-polygon');
-				lassoPoints = [];
-			}, 1000);
-			map.getCanvas().style.cursor = '';  // Reset cursor after lasso is completed
-		}
-		map.on('click', () => {
-			if (isDrawing) {
-				clearSelectionBox();
-				isDrawing = false;
+			if (xyparam[i].name === "y") {
+				contextMenuHandler.m_y = parseInt(xyparam[i]["#"], 10);
+			}
+			if (xyparam[i].name === "scene") {
+				contextMenuHandler.m_scene = xyparam[i]["#"];
 			}
-		});
-		// Function to clear selection box
-		function clearSelectionBox() {
-			box.style.display = 'none';
-			box.style.width = '0px';
-			box.style.height = '0px';
 		}
+		Menu.findMenuByID(data.refID).open(true, 0, "begin top", "begin top", this.map._container, "" + contextMenuHandler.m_x + " " + contextMenuHandler.m_y + "", "fit");
 	}
 
 });