@sapui5/sap.ui.vbm 1.129.0 → 1.131.0

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

@@ -0,0 +1,872 @@
+
+
+sap.ui.define([
+	"../lib/sapvbi",
+	"../VBIRenderer",
+	"./VectorUtils",
+	"./thirdparty/MaplibreStyles",
+	"./PayloadGenerator",
+	"./thirdparty/maplibregl",
+	"./VBITransformer"
+], function (vb, VBIRenderer, VectorUtils, MaplibreStyles, PayloadGenerator) {
+	'use strict';
+
+	VBI.MapRenderer = {};
+	var map_container = "";
+	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.setAdapter = (adapter) => {
+		this._adapter = adapter;
+	}
+
+	this._payloadGenerator = new PayloadGenerator(this._adapter);
+	// Process the GeoJSON spots and its properties
+	VBI.MapRenderer._processGeoSpot = (source, data) => {
+
+	}
+
+	// Process the GeoJSON routes/links and its properties
+	VBI.MapRenderer._processGeoRoutes = (source, data) => {
+
+	}
+
+	VBI.MapRenderer.renderMap = () => {
+
+		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);
+
+		class SAPMapNavControl {
+			onAdd(map) {
+				this.map = map;
+				// Create main container
+				this._container = document.createElement('div');
+				this._container.id = '__xmlview1--vbi-vbi-nav';
+				this._container.className = 'vbi-nav my-custom-control';
+				this._container.setAttribute('role', 'Navigation');
+				this._container.setAttribute('tabindex', '-1');
+				this._container.style.opacity = '0.5';
+
+
+				this._container.addEventListener('mouseover', function () {
+					this.style.opacity = '1';
+					this.style.boxShadow = '0 0 25px rgba(255, 0, 0, 0.8)';
+				});
+
+				this._container.addEventListener('mouseout', function () {
+					this.style.opacity = '0.5';
+					this.style.boxShadow = 'none';
+				});
+
+				// Create scroll area container
+				var scrollArea = document.createElement('div');
+				scrollArea.id = '__xmlview1--vbi-vbi-scrollarea';
+				scrollArea.className = 'vbi-scrollarea';
+				scrollArea.setAttribute('role', 'Slider');
+				scrollArea.setAttribute('tabindex', '0');
+
+				// Create scroll line upper ending div
+				var scrollLineUpperEnding = document.createElement('div');
+				scrollLineUpperEnding.id = '__xmlview1--vbi-vbi-scrolllineupperending';
+				scrollLineUpperEnding.className = 'vbi-scrolllineupperending';
+				scrollLineUpperEnding.setAttribute('role', 'Img');
+				scrollLineUpperEnding.setAttribute('tabindex', '-1');
+				scrollLineUpperEnding.style.cursor = 'pointer';
+				scrollLineUpperEnding.style.position = 'absolute';
+				scrollLineUpperEnding.top = '20px';
+
+
+				// Create scroll line div
+				var scrollLine = document.createElement('div');
+				scrollLine.id = '__xmlview1--vbi-vbi-scrollline';
+				scrollLine.className = 'vbi-scrollline';
+				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';
+				scrollLineLowerEnding.className = 'vbi-scrolllinelowerending';
+				scrollLineLowerEnding.setAttribute('role', 'Img');
+				scrollLineLowerEnding.setAttribute('tabindex', '-1');
+				scrollLineLowerEnding.style.cursor = 'pointer';
+				scrollLineLowerEnding.style.position = 'absolute';
+				scrollLineLowerEnding.style.top = '100px';
+
+				// 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('tabindex', '0');
+				scrollPoint.setAttribute('title', 'NAVCTL_TITLE_ZOOM');
+				scrollPoint.style.top = '4.43911px';
+				startYpx = 4.43911;
+
+				// Append scroll line elements to scroll area
+				scrollArea.appendChild(scrollLineUpperEnding);
+				scrollArea.appendChild(scrollLine);
+				scrollArea.appendChild(scrollLineLowerEnding);
+				scrollArea.appendChild(scrollPoint);
+				// Append scroll area to main container
+				this._container.appendChild(scrollArea);
+
+				// Create cursor div
+				var cursor = document.createElement('div');
+				cursor.id = '__xmlview1--vbi-vbi-cursor';
+				cursor.className = 'vbi-cursor';
+				cursor.setAttribute('role', 'Presentation');
+				cursor.setAttribute('tabindex', '-1');
+				// cursor.style.backgroundPosition = '-5px 305px';
+
+				// Append cursor to main container
+				this._container.appendChild(cursor);
+
+				// Create cursor grip container
+				var cursorGrip = document.createElement('div');
+				cursorGrip.id = '__xmlview1--vbi-vbi-cursor-grip';
+				cursorGrip.className = 'vbi-cursor-grip';
+				cursorGrip.setAttribute('role', 'Img');
+				cursorGrip.setAttribute('tabindex', '-1');
+
+				// Create cursor middle container
+				var cursorMiddle = document.createElement('div');
+				cursorMiddle.id = '__xmlview1--vbi-vbi-cursor-middle';
+				cursorMiddle.className = 'vbi-cursor-middle';
+				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);
+				cursorMiddle.appendChild(cursorRight);
+				cursorMiddle.appendChild(cursorTop);
+				cursorMiddle.appendChild(cursorDown);
+				cursorMiddle.appendChild(cursorReset);
+
+				cursorTop.addEventListener('click', function () {
+					map.panBy([0, -100]); // Move map up
+				});
+
+				cursorDown.addEventListener('click', function () {
+					map.panBy([0, 100]); // Move map down
+				});
+
+				cursorLeft.addEventListener('click', function () {
+					map.panBy([-100, 0]); // Move map left
+				});
+
+				cursorRight.addEventListener('click', function () {
+					map.panBy([100, 0]); // Move map right
+				});
+				cursorReset.addEventListener('click', function () {
+					map.setCenter([0, 0]); // Reset map 
+					map.setZoom(0);
+				});
+
+
+
+				// Function to handle mouse movement during dragging
+				function onMouseMove(event) {
+					if (!isDragging) return;
+
+					const currentY = event.clientY;
+					const deltaY = currentY - startY; // Calculate the difference in Y movement
+
+					// Get the current position of the scroll point
+					let newTop = parseInt(scrollPoint.style.top || "0px") + deltaY;
+
+					// Get the boundaries of the scroll line
+					const upperBoundary = 0;
+					const lowerBoundary = scrollLine.offsetHeight - scrollPoint.offsetHeight; // Full scroll range
+
+					// Enforce the boundaries
+					newTop = Math.max(upperBoundary, Math.min(newTop, lowerBoundary));
+
+					// Update the scroll point position to match mouse drag
+					scrollPoint.style.top = `${newTop}px`;
+
+					// Calculate zoom level based on the position of the scroll point
+					const zoomRange = map.getMaxZoom() - map.getMinZoom();
+					const scrollPositionRatio = (newTop - upperBoundary) / (lowerBoundary - upperBoundary);
+					const newZoom = map.getMinZoom() + scrollPositionRatio * zoomRange;
+
+					// Apply the zoom to the map
+					map.setZoom(newZoom);
+
+					// Reset `startY` to current Y position after each drag movement
+					startY = currentY;
+				}
+
+				// Function to update scroll line position based on the map's zoom level
+				function updateScrollLinePosition() {
+					const zoomLevel = map.getZoom();
+
+					// Define boundaries
+					const upperBoundary = 0;
+					const lowerBoundary = scrollLine.offsetHeight - scrollPoint.offsetHeight;
+
+					// Calculate the maximum scrollable height
+					const maxScrollHeight = lowerBoundary - upperBoundary;
+
+					const minZoom = map.getMinZoom();
+					const maxZoom = map.getMaxZoom();
+
+					// Calculate the new scroll position based on the zoom level
+					const scrollPosition = ((zoomLevel - minZoom) / (maxZoom - minZoom)) * maxScrollHeight;
+
+					// Update the scroll point's position
+					scrollPoint.style.top = `${upperBoundary + scrollPosition}px`;
+				}
+
+				// Attach event listeners to update the scroll line position on zoom and move
+				map.on('zoom', updateScrollLinePosition);
+				map.on('move', updateScrollLinePosition);
+
+				// Initialize the scroll line position when the map loads
+				updateScrollLinePosition();
+
+				// Event listeners for drag functionality
+				scrollPoint.addEventListener('mousedown', (event) => {
+					isDragging = true;
+					startY = event.clientY;
+					document.addEventListener('mousemove', onMouseMove);
+					document.addEventListener('mouseup', onMouseUp);
+				});
+
+				// Function to stop dragging
+				function onMouseUp() {
+					isDragging = false;
+					document.removeEventListener('mousemove', onMouseMove);
+					document.removeEventListener('mouseup', onMouseUp);
+				}
+
+				// Attach the onMouseUp event listener globally
+				document.addEventListener('mouseup', onMouseUp);
+
+				// Append cursor middle to cursor grip
+				cursorGrip.appendChild(cursorMiddle);
+
+				// Append cursor grip to main container
+				this._container.appendChild(cursorGrip);
+
+				// Append main container to the map if available
+				if (map && map.getContainer()) {
+					map.getContainer().appendChild(this._container);
+				}
+
+				// Return the main container
+				return this._container;
+			}
+			onRemove() {
+				this._container.parentNode.removeChild(this._container);
+				this.map = undefined;
+			}
+		}
+		map.on('load', () => {
+			// Custom attribution/copyright control
+			map.addControl(new maplibregl.AttributionControl({
+				customAttribution: '<span>' + geoJSON[0].copyright + '</span>',
+				compact: false
+			})
+			);
+			// Scale control in mi,km or nm
+			map.addControl(new maplibregl.ScaleControl({
+				maxWidth: 80,
+				unit: geoJSON[0].scaleType
+			}));
+
+			// Parsing GeoJSON for each type of object
+			map.addSource('geojson-source', {
+				'type': 'geojson',
+				'data': geoJSON[1]
+			});
+
+
+			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']
+			});
+
+			// Create a popup, but don't add it to the map yet.
+			const popup = new maplibregl.Popup({
+				closeButton: false,
+				closeOnClick: false
+			});
+			// add markers to map only for Points
+			bounds = [];
+			geoJSON[1].features.forEach((marker) => {
+				let markerCoordinates = marker.geometry.coordinates;
+				if (marker.geometry.type === 'Point') {
+					// create a DOM element for the marker (parent div)
+					const el = VectorUtils.createSpotElement(marker);
+
+					// Create child element for the SAP icon (icon overlay)
+					const child_el = VectorUtils.createIconElement(marker.properties.Icon);
+
+					// Append the icon inside the marker
+					el.appendChild(child_el);
+					//	add marker to map
+					let spot = new maplibregl.Marker({
+						element: el,
+						draggable: true
+					}).setLngLat(marker.geometry.coordinates)
+						.on('dragend', onDragEnd)
+						.addTo(map);
+					let originalpos = spot.getLngLat();
+					allMarkers.push(spot);
+
+					function onDragEnd() {
+						const lngLat = spot.getLngLat();
+						if (lngLat !== 0) {
+							spot.setLngLat(originalpos);
+						}
+					}
+					// Function to return a promise that resolves when the map is clicked
+					function getClickCoordinates() {
+						return new Promise((resolve) => {
+							map.once('click', function (e) {
+								resolve(e.lngLat); // Resolve with the clicked coordinates
+							});
+						});
+					};
+
+					el.addEventListener('mouseenter', () => {
+						//Check if a line is dragged here
+						if (lineDrag) {
+							validDrop = true;
+							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);
+						}
+
+					});
+					async function triggerPayloadSpot(e, event) {
+						let clickCoordinates = null;
+						if (event === 'DETAIL_REQUEST') {
+							// First, wait for the map click and get the coordinates
+							clickCoordinates = await getClickCoordinates();
+						} else {
+							clickCoordinates = { lng: marker.geometry.coordinates[0], lat: marker.geometry.coordinates[1] };
+						}
+						marker.properties.x = e.layerX;
+						marker.properties.y = e.layerY;
+						PayloadGenerator.objectClick('Spot', event, marker, clickCoordinates);
+					};
+
+					el.addEventListener('click', (e) => {
+						//Trigger payload
+						triggerPayloadSpot(e, 'DETAIL_REQUEST');
+					});
+
+					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 = '';
+						popup.remove();
+						validDrop = false;
+					});
+
+					// Check if the coordinates already exist in predefinedMarkers
+					let exists = predefinedMarkers.some(
+						(coords) => coords[0] === markerCoordinates[0] && coords[1] === markerCoordinates[1]
+					);
+
+					// If it doesn't exist, push the new coordinates
+					if (!exists) {
+						predefinedMarkers.push(markerCoordinates);
+					}
+				} else if (marker.geometry.type == "LineString") {
+					line.id = "line_" + marker.id;
+					line.coordinates = marker.geometry.coordinates;
+					existingLines.push(line);
+				}
+				if (marker.geometry.type == "LineString") {
+					markerCoordinates.forEach((line) => {
+						let exists = bounds.some(
+							(coords) => coords[0] === line[0] && coords[1] === line[1]
+						);
+						//If it doesn't exist, push the new coordinates
+						if (!exists) {
+							bounds.push(line);
+						}
+					});
+				} else {
+					// Check if the coordinates already exist in predefinedMarkers
+					let exists = bounds.some(
+						(coords) => coords[0] === markerCoordinates[0] && coords[1] === markerCoordinates[1]
+					);
+
+					// If it doesn't exist, push the new coordinates
+					if (!exists) {
+						bounds.push(markerCoordinates);
+					}
+				}
+
+			});
+
+			//Focus the map into the features
+			var zoombounds = bounds.reduce((zoombounds, coord) => {
+				return zoombounds.extend(coord);
+			}, new maplibregl.LngLatBounds(bounds[0], bounds[0]));
+
+			map.fitBounds(zoombounds, {
+				padding: 150
+			});
+		});
+
+
+		// Change mouse cursor when hovering over the line
+		map.on('mouseenter', 'geojson-source-route', function () {
+			map.getCanvas().style.cursor = 'pointer';
+		});
+
+		// Revert mouse cursor back when not hovering
+		map.on('mouseleave', 'geojson-source-route', function () {
+			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
+			var route = e.features[0];
+			route.properties.x = e.point.x;
+			route.properties.y = e.point.y;
+
+			PayloadGenerator.objectClick('Link', event, route, coordinates);
+		}
+		function onUp(e) {
+			const coords = e.lngLat;
+
+			if (validDrop) {
+				// Perform action for valid drop
+				console.log('Dropped on valid target');
+			} else {
+				// Perform action for invalid drop
+				console.log('Invalid drop');
+			}
+
+			// Reset cursor and remove event listeners
+			map.getCanvas().style.cursor = '';
+			map.off('mousemove', onMove);
+			map.off('touchmove', onMove);
+			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) {
+				// Prevent the default map drag behavior.
+				e.preventDefault();
+				lineDrag = true;
+
+				// Add move and up event listeners
+				map.on('mousemove', onMove);
+				map.once('mouseup', onUp);
+			}
+		});
+
+		function onMove(e) {
+			const features = map.queryRenderedFeatures(e.point, {
+				layers: ['geojson-source-route']
+			});
+
+			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';
+			}
+		};
+
+		// 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;
+			}
+		});
+
+		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';
+			}
+		});
+
+		window.addEventListener('keyup', (e) => {
+			if (e.code === 'ControlLeft') {
+				isCtrlPressed = false;
+				if (lassoPoints.length > 2) {
+					completeLasso();
+				}
+				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();
+			}
+
+			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`;
+
+			}
+		});
+
+		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
+				});
+			}
+		}
+		);
+		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]
+					}
+				});
+			}
+		}
+
+		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
+					}
+				});
+			}
+
+			// 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;
+			}
+		});
+		// Function to clear selection box
+		function clearSelectionBox() {
+			box.style.display = 'none';
+			box.style.width = '0px';
+			box.style.height = '0px';
+		}
+	}
+
+});
+