@sapui5/sap.ui.vbm 1.131.0 → 1.133.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sapui5/sap.ui.vbm",
-  "version": "1.131.0",
+  "version": "1.133.0",
   "description": "SAPUI5 Library sap.ui.vbm",
   "homepage": "https://sap.github.io/ui5-tooling/pages/SAPUI5/",
   "author": "SAP SE (https://www.sap.com)",

package/src/sap/ui/vbm/.library

@@ -3,7 +3,7 @@
 	<name>sap.ui.vbm</name>
 	<vendor>SAP SE</vendor>
 	<copyright>SAP UI development toolkit for HTML5 (SAPUI5) (c) Copyright 2009-2012 SAP AG. All rights reserved</copyright>
-	<version>1.131.0</version>
+	<version>1.133.0</version>
 
 	<documentation>SAP UI library: sap.ui.vbm</documentation>
 

package/src/sap/ui/vbm/Adapter.js

@@ -24,7 +24,7 @@ sap.ui.define([
 	 * @param {string} [sId] id for the new control, generated automatically if no id is given
 	 * @param {object} [mSettings] initial settings for the new object
 	 * @author SAP SE
-	 * @version 1.131.0
+	 * @version 1.133.0
 	 * @extends sap.ui.core.Element
 	 * @constructor
 	 * @public
@@ -288,7 +288,11 @@ sap.ui.define([
 					}
 			}
 		} else if (obj?.SAPVB?.Scenes?.Merge) {
-			// Verify map type when map layer stack is switched
+			var mapLayerStack = obj?.SAPVB?.Scenes?.Merge?.SceneGeo?.refMapLayerStack
+			if (mapLayerStack) {
+				const provider = this._mapConfiguration.MapProvider.find(provider => provider.name === mapLayerStack);
+				return provider.type === "vector" ? true : false;
+			}
 		}
 	}
 
@@ -344,10 +348,12 @@ sap.ui.define([
 			this._processClusters(obj.SAPVB.Clustering);
 		}
 
-		VBI.MapRenderer.setAdapter(this);
+		if (VBI.VBITransformer.getVectorFlag() == true) {
+		    VBI.MapRenderer.setAdapter(this);
+		}
 		return (obj.SAPVB.MapProviders ? this._processMapProviders(obj.SAPVB.MapProviders)
 			: Promise.resolve()).then(function() {
-				if (obj.SAPVB.MapLayerStacks) {
+				if (obj.SAPVB.MapLayerStacks && VBI.VBITransformer.getVectorFlag() == false) {
 					this._processMapLayerStacks(obj.SAPVB.MapLayerStacks);
 				}
 
@@ -363,11 +369,11 @@ sap.ui.define([
 					this._processActions(obj.SAPVB.Actions);
 				}
 
-				if (obj.SAPVB.Automation && obj.SAPVB.Automation.Call) {
+				if (obj.SAPVB.Automation && obj.SAPVB.Automation.Call && VBI.VBITransformer.getVectorFlag() == false) {
 					this._processAutomation(obj.SAPVB.Automation, obj.SAPVB.Menus);
 				}
 
-				if (obj.SAPVB.Windows) {
+				if (obj.SAPVB.Windows && VBI.VBITransformer.getVectorFlag() == false) {
 					this._processDetailWindows(obj);
 				}
 			}.bind(this));
@@ -925,7 +931,7 @@ sap.ui.define([
 				oMap.addVo(voAggregation);
 			}.bind(this));
 		} else if (oScenes.Merge && oScenes.Merge.SceneGeo
-			&& oScenes.Merge.SceneGeo.refMapLayerStack) {
+			&& oScenes.Merge.SceneGeo.refMapLayerStack && VBI.VBITransformer.getVectorFlag() == false) {
 				this._map().setRefMapLayerStack(oScenes.Merge.SceneGeo.refMapLayerStack);
 		}
 		return this;

package/src/sap/ui/vbm/Adapter3D.js

@@ -47,7 +47,7 @@ sap.ui.define([
 	 * @param {string} [sId] id for the new control, generated automatically if no id is given
 	 * @param {object} [mSettings] initial settings for the new object
 	 * @author SAP SE
-	 * @version 1.131.0
+	 * @version 1.133.0
 	 * @extends sap.ui.core.Element
 	 * @constructor
 	 * @public

package/src/sap/ui/vbm/Viewport.js

@@ -23,7 +23,7 @@ sap.ui.define([
 	 *
 	 * @public
 	 * @author SAP SE
-	 * @version 1.131.0
+	 * @version 1.133.0
 	 * @extends sap.ui.core.Control
 	 * @alias sap.ui.vbm.Viewport
 	 */

package/src/sap/ui/vbm/adapter3d/ColladaBounds.js

@@ -22,7 +22,7 @@ sap.ui.define([
 		 *
 		 * @private
 		 * @author SAP SE
-		 * @version 1.131.0
+		 * @version 1.133.0
 		 * @alias sap.ui.vbm.adapter3d.ColladaBounds
 		 */
 	var ColladaBounds = BaseObject.extend("sap.ui.vbm.adapter3d.ColladaBounds", /** @lends sap.ui.vbm.adapter3d.ColladaBounds.prototype */ {

package/src/sap/ui/vbm/adapter3d/DragDropHandler.js

@@ -83,7 +83,7 @@ sap.ui.define([
 	 *
 	 * @private
 	 * @author SAP SE
-	 * @version 1.131.0
+	 * @version 1.133.0
 	 * @alias sap.ui.vbm.adapter3d.DragDropHandler
 	 */
 	var DragDropHandler = BaseObject.extend("sap.ui.vbm.adapter3d.DragDropHandler", /** @lends sap.ui.vbm.adapter3d.DragDropHandler.prototype */ {

package/src/sap/ui/vbm/adapter3d/ModelHandler.js

@@ -29,7 +29,7 @@ sap.ui.define([
 	 *
 	 * @private
 	 * @author SAP SE
-	 * @version 1.131.0
+	 * @version 1.133.0
 	 * @alias sap.ui.vbm.adapter3d.ModelHandler
 	 */
 	var ModelHandler = BaseObject.extend("sap.ui.vbm.adapter3d.ModelHandler", /** @lends sap.ui.vbm.adapter3d.ModelHandler.prototype */ {

package/src/sap/ui/vbm/adapter3d/ObjectFactory.js

@@ -377,7 +377,7 @@ sap.ui.define([
 	 *
 	 * @private
 	 * @author SAP SE
-	 * @version 1.131.0
+	 * @version 1.133.0
 	 * @alias sap.ui.vbm.adapter3d.ObjectFactory
 	 */
 	var ObjectFactory = BaseObject.extend("sap.ui.vbm.adapter3d.ObjectFactory", /** @lends sap.ui.vbm.adapter3d.ObjectFactory.prototype */ {});

package/src/sap/ui/vbm/adapter3d/PolygonHandler.js

@@ -32,7 +32,7 @@ sap.ui.define([
 	 *
 	 * @private
 	 * @author SAP SE
-	 * @version 1.131.0
+	 * @version 1.133.0
 	 * @alias sap.ui.vbm.adapter3d.PolygonHandler
 	 */
 	var PolygonHandler = BaseObject.extend("sap.ui.vbm.adapter3d.PolygonHandler", /** @lends sap.ui.vbm.adapter3d.PolygonHandler.prototype */ {

package/src/sap/ui/vbm/adapter3d/RectangleTracker.js

@@ -39,7 +39,7 @@ sap.ui.define([
 	 *
 	 * @private
 	 * @author SAP SE
-	 * @version 1.131.0
+	 * @version 1.133.0
 	 * @alias sap.ui.vbm.adapter3d.RectangleTracker
 	 */
 	var RectangleTracker = BaseObject.extend("sap.ui.vbm.adapter3d.RectangleTracker", /** @lends sap.ui.vbm.adapter3d.RectangleTracker.prototype */ {

package/src/sap/ui/vbm/adapter3d/SceneBuilder.js

@@ -47,7 +47,7 @@ sap.ui.define([
 	 *
 	 * @private
 	 * @author SAP SE
-	 * @version 1.131.0
+	 * @version 1.133.0
 	 * @alias sap.ui.vbm.adapter3d.SceneBuilder
 	 */
 	var SceneBuilder = BaseObject.extend("sap.ui.vbm.adapter3d.SceneBuilder", /** @lends sap.ui.vbm.adapter3d.SceneBuilder.prototype */ {

package/src/sap/ui/vbm/adapter3d/VBIJSONParser.js

@@ -56,7 +56,7 @@ sap.ui.define([
 	 *
 	 * @private
 	 * @author SAP SE
-	 * @version 1.131.0
+	 * @version 1.133.0
 	 * @alias sap.ui.vbm.adapter3d.VBIJSONParser
 	 */
 	var VBIJSONParser = BaseObject.extend("sap.ui.vbm.adapter3d.VBIJSONParser", /** @lends sap.ui.vbm.adapter3d.VBIJSONParser.prototype */ {

package/src/sap/ui/vbm/i18n/messagebundle_ar.properties

@@ -4,7 +4,7 @@ NAVCTL_TITLE_ZOOM=\u062A\u0643\u0628\u064A\u0631 {0}
 NAVCTL_TITLE_MOVE_UP=\u062A\u062D\u0631\u064A\u0643 \u0644\u0623\u0639\u0644\u0649
 NAVCTL_TITLE_MOVE_DOWN=\u062A\u062D\u0631\u064A\u0643 \u0644\u0623\u0633\u0641\u0644
 NAVCTL_TITLE_MOVE_LEFT=\u0627\u0644\u0627\u0646\u062A\u0642\u0627\u0644 \u0625\u0644\u0649 \u0627\u0644\u064A\u0645\u064A\u0646
-NAVCTL_TITLE_MOVE_RIGHT=\u0627\u0644\u0627\u0646\u062A\u0642\u0627\u0644 \u0625\u0644\u0649 \u0627\u0644\u064A\u0633\u0627\u0631
+NAVCTL_TITLE_MOVE_RIGHT=\u0627\u0644\u0627\u0646\u062A\u0642\u0627\u0644 \u0625\u0644\u0649 \u0627\u0644\u064A\u0645\u064A\u0646
 WINDOW_CLOSE=\u0625\u063A\u0644\u0627\u0642
 LEGEND_COLLAPSE=\u0637\u064A
 LEGEND_EXPAND=\u062A\u0648\u0633\u064A\u0639

package/src/sap/ui/vbm/i18n/messagebundle_en_US_saptrc.properties

@@ -1,28 +1,28 @@
 
-NAVCTL_TITLE_MOVE=GVhE5Ha+3GeyEl/D4S/Xlw_Double-click to return to start position
-NAVCTL_TITLE_ZOOM=Xe4nHybqat8cqS5nA8Igdg_Zoom {0}
-NAVCTL_TITLE_MOVE_UP=SKJX9CeQbQWR6ExpjpTzuQ_Move Up
-NAVCTL_TITLE_MOVE_DOWN=at8MEOgUZqrkQrvmBjk8Tw_Move Down
-NAVCTL_TITLE_MOVE_LEFT=setSDZ4YH9T017pvdvOsFg_Move Left
-NAVCTL_TITLE_MOVE_RIGHT=1hCdseyRp5Ce02fQMr6oRQ_Move Right
-WINDOW_CLOSE=5cU27i8fYUkGCCXXD6f11g_Close
-LEGEND_COLLAPSE=zCPuoYr8AHXOC3S4OtCZSQ_Collapse
-LEGEND_EXPAND=aBeE4bN4YnI7ZV9Gg87Y9Q_Expand
-CAPTION_LEGEND=pGfo/2E/gWoX0z37VcEc/A_Legend
+NAVCTL_TITLE_MOVE=970/69gkzkdj6OaR6IEeRg_Double-click to return to start position
+NAVCTL_TITLE_ZOOM=BihGfsldx1AOxxTRxnOc2A_Zoom {0}
+NAVCTL_TITLE_MOVE_UP=sBGfHpJN1US/+w19T9TrEA_Move Up
+NAVCTL_TITLE_MOVE_DOWN=EgEN3ozMG5ix9G/JIgo7Ew_Move Down
+NAVCTL_TITLE_MOVE_LEFT=t4DfFmHFqa06hM6fp/rnlg_Move Left
+NAVCTL_TITLE_MOVE_RIGHT=ChseCQWrpiKnkOMpYgTB0A_Move Right
+WINDOW_CLOSE=NvNXt+Dni3zr+OIQoGQy6g_Close
+LEGEND_COLLAPSE=Yim/keZQzOF2cxfEdEQ56A_Collapse
+LEGEND_EXPAND=3c6HMI1fgHX/S63bC+16+w_Expand
+CAPTION_LEGEND=KtbTQvnhPQFzFf7zcjqaNw_Legend
 
-GEOMAP_INVALID_CENTER_POSITION=sPu18Epl8fiVuIOVMIT7nQ_Invalid center position given
-GEOMAP_INVALID_ZOOM_LEVEL=GqCxN/VPKaaC1zapYcaKlw_Invalid zoom level given
+GEOMAP_INVALID_CENTER_POSITION=R8Ad0kUscG7KSrY6j5OhJA_Invalid center position given
+GEOMAP_INVALID_ZOOM_LEVEL=SPIIRdu0m+Q8Ieqj790+rA_Invalid zoom level given
 
-CONTAINERBASE_FULLSCREEN=kVo7e2vXEVl+JEr2AsjVeg_Full Screen
-CONTAINERBASE_SETTINGS=kv42g9Tf77+6SkR63b4mCA_Settings
-CONTAINERBASE_MENU=lRnKAK3p4+HfVxEE79ZIwQ_Menu
-CONTAINERBASE_SELECTION=pfwBJF71u8u1IS0RJLBBdA_Selection Mode
-CONTAINERBASE_MENU_RECT=uZymTjRq1Wk7B6ZCCB+qyg_Rectangular Selection
-CONTAINERBASE_MENU_LASSO=+Mr8bsCyKak9Qga1GWhguw_Lasso Selection
-CONTAINERBASE_MENU_SINGLE=SK+vK2VDvgMzHVXOXkYgfg_Single Selection
+CONTAINERBASE_FULLSCREEN=l92Y4q9p+urWIT2+sAKZfA_Full Screen
+CONTAINERBASE_SETTINGS=+M9V7u3bfMIdfiukOgZHJA_Settings
+CONTAINERBASE_MENU=IdZ9EmX+P3tVtICpu7kzDw_Menu
+CONTAINERBASE_SELECTION=E314dAx1Fv7fscTpa9bdfw_Selection Mode
+CONTAINERBASE_MENU_RECT=wIeLGRVNQxAhJB3EevbJzg_Rectangular Selection
+CONTAINERBASE_MENU_LASSO=FBwPDfuk0U5enzDROggvZA_Lasso Selection
+CONTAINERBASE_MENU_SINGLE=t6hkbrNBJkMGNFS8nrdT7Q_Single Selection
 
 
-MAPCONTAINER_ZOOMIN=guWK+LQE0Ii70guuL8xLhw_Zoom In
-MAPCONTAINER_ZOOMOUT=9KD6XYyYDuuWqANi/lu5xQ_Zoom Out
-MAPCONTAINER_HOME=mncs7mwovo7HZW2r9+TyIw_Home
-MAPCONTAINER_RECT_ZOOM=/TSsGUzrK4JjrKtWiNnEUg_Rectangular Zoom
+MAPCONTAINER_ZOOMIN=36demzd2ZEdd6KJNnhlroA_Zoom In
+MAPCONTAINER_ZOOMOUT=TMXZHw75FiMOLMLog73qww_Zoom Out
+MAPCONTAINER_HOME=jGKXlprGCAFO5Tol2tls/Q_Home
+MAPCONTAINER_RECT_ZOOM=YIbGeSk7RnurJHo1VeHxPA_Rectangular Zoom

package/src/sap/ui/vbm/lib/sapvbmenu.js

@@ -10,8 +10,9 @@
 sap.ui.define([
 	"sap/ui/unified/Menu",
 	"sap/ui/unified/MenuItem",
+	"sap/ui/vbm/vector/PayloadGenerator",
 	"./sapvbi"
-], function(Menu, MenuItem) {
+], function(Menu, MenuItem, PayloadGenerator) {
 	"use strict";
 
 VBI.Menus = function() {
@@ -34,7 +35,10 @@ VBI.Menus = function() {
 		oMenuObject.vbi_data = {};
 		oMenuObject.vbi_data.menuRef = dat.id;
 		oMenuObject.vbi_data.VBIName = dat.name;
-
+		if (VBI.vectorFlag == true) {
+			oMenuObject.vbi_data.object = ctx.object;
+			oMenuObject.vbi_data.instance = ctx.instance;
+		};
 		oMenuObject.attachItemSelect(function(e) {
 			var retval = {};
 			retval.refid = e.mParameters.item.vbi_data.refid;
@@ -162,6 +166,13 @@ VBI.Menus = function() {
 
 	menus.OnSelected = function(retval) {
 		var refObj = retval.menu.vbi_data.object;
+		if (VBI.vectorFlag == true) {
+			if (_adapter._actions) {
+				var m_name = "FCODE_SELECT";
+				var refid = retval.refid;
+				PayloadGenerator.fcodeSelect(m_name, refid, refObj, retval.menu.vbi_data.instance);
+			}
+		} else {
 		if (retval.refid == undefined) {
 			return;
 		}
@@ -176,7 +187,7 @@ VBI.Menus = function() {
 			}
 		}
 	};
-
+}
 	return menus;
 };
 

package/src/sap/ui/vbm/library.js

@@ -20,7 +20,7 @@ sap.ui.define([
 	 * @namespace
 	 * @alias sap.ui.vbm
 	 * @author SAP SE
-	 * @version 1.131.0
+	 * @version 1.133.0
 	 * @public
 	 */
 
@@ -45,7 +45,7 @@ sap.ui.define([
 			"sap.ui.vbm.ClusterBase", "sap.ui.vbm.ClusterTree", "sap.ui.vbm.ClusterGrid", "sap.ui.vbm.ClusterDistance", "sap.ui.vbm.Heatmap",
 			"sap.ui.vbm.HeatPoint", "sap.ui.vbm.ClusterContainer", "sap.ui.vbm.Adapter", "sap.ui.vbm.Adapter3D"
 		],
-		version: "1.131.0"
+		version: "1.133.0"
 	});
 
 	sap.ui.loader.config({

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

@@ -0,0 +1,201 @@
+sap.ui.define([
+    "sap/ui/base/Object",
+    "./PayloadGenerator"
+], function (BaseObject, PayloadGenerator) {
+    'use strict';
+
+    /**
+         * Constructor for a new LassoSelection.
+         *
+         * @class
+         * Provides a class for doing Lasso Selection on map.
+         *
+         * @private
+         * @alias sap.ui.vbm.vector.LassoSelection
+         */
+    const LassoSelection = BaseObject.extend("sap.ui.vbm.vector.LassoSelection", {
+        constructor: function (map) {
+            BaseObject.call(this);
+            this._map = map;
+            this._coordinates = [];
+        },
+
+        mouseDown(e, aPressed) {
+            const map = this._map;
+            const canvas = map.getCanvasContainer();
+            const lassoPolygon = createLassoSVG();
+
+            if (!(aPressed && e.button === 0)) return;
+
+            map.dragPan.disable();
+            var that = this;
+            this._coordinates = [mousePos(e)];
+
+            document.addEventListener('mousemove', onMouseMove);
+            document.addEventListener('mouseup', onMouseUp);
+            document.addEventListener('keydown', onKeyDown);
+
+            function mousePos(e) {
+                const rect = canvas.getBoundingClientRect();
+                return new maplibregl.Point(
+                    e.clientX - rect.left - canvas.clientLeft,
+                    e.clientY - rect.top - canvas.clientTop
+                );
+            }
+
+            function onMouseMove(e) {
+                const point = mousePos(e);
+
+                that._coordinates.push(point);
+
+                updateLassoPath(lassoPolygon, that._coordinates);
+            }
+
+            function onMouseUp(e) {
+                const selectedFeatures = finishLasso();
+                // Only trigger payload if something is selected
+                if (selectedFeatures && selectedFeatures.length > 0) {
+                    PayloadGenerator.selectObjects(selectedFeatures);
+                }
+            }
+
+            function onKeyDown(e) {
+                if (e.keyCode === 27) finishLasso();
+            }
+
+            function updateLassoPath(polygon, coordinates) {
+                let points = '';
+                for (let i = 0; i < coordinates.length; i++) {
+                    points += `${coordinates[i].x},${coordinates[i].y} `;
+                }
+                polygon.setAttribute("points", points.trim());
+            }
+
+            function finishLasso() {
+                document.removeEventListener('mousemove', onMouseMove);
+                document.removeEventListener('keydown', onKeyDown);
+                document.removeEventListener('mouseup', onMouseUp);
+
+                // Remove the lasso
+                lassoPolygon?.parentNode?.remove();
+
+                // Convert lasso points to geographic coordinates
+                const lassoGeoCoords = that._coordinates.map(point =>
+                    that._map.unproject([point.x, point.y])
+                );
+
+                // Find the pixel bounding box for the lasso coordinates
+                const bounds = that._coordinates.reduce((bbox, point) => {
+                    bbox.minX = Math.min(bbox.minX, point.x);
+                    bbox.minY = Math.min(bbox.minY, point.y);
+                    bbox.maxX = Math.max(bbox.maxX, point.x);
+                    bbox.maxY = Math.max(bbox.maxY, point.y);
+                    return bbox;
+                }, { minX: Infinity, minY: Infinity, maxX: -Infinity, maxY: -Infinity });
+
+                // Create a pixel-based bounding box for queryRenderedFeatures
+                const bbox = [
+                    new maplibregl.Point(bounds.minX, bounds.minY),
+                    new maplibregl.Point(bounds.maxX, bounds.maxY)
+                ];
+
+                // Query features within the pixel bounding box
+                const candidates = that._map.queryRenderedFeatures(bbox, {
+                    layers: ['geojson-source-route', 'geojson-source-point']
+                });
+
+                // Filter candidates by checking if they fall within the geographic lasso polygon
+                const selectedFeatures = candidates.filter(feature => {
+                    const coordinates = feature.geometry.coordinates;
+
+                    if (feature.geometry.type === 'Point') {
+                        // Handle points
+                        return pointInPolygon(coordinates, lassoGeoCoords);
+                    } else if (feature.geometry.type === 'LineString') {
+                        // Handle lines by checking if any segment intersects the lasso polygon
+                        return lineInPolygonOrIntersects(coordinates, lassoGeoCoords);
+                    }
+                    return false;
+                });
+                that._map.dragPan.enable();
+                return selectedFeatures;
+            }
+
+            // Helper function to check if a point is inside the lasso polygon
+            function pointInPolygon(point, polygon) {
+                let inside = false;
+                for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
+                    const xi = polygon[i].lng, yi = polygon[i].lat;
+                    const xj = polygon[j].lng, yj = polygon[j].lat;
+
+                    const intersect = ((yi > point[1]) !== (yj > point[1])) &&
+                        (point[0] < (xj - xi) * (point[1] - yi) / (yj - yi) + xi);
+                    if (intersect) inside = !inside;
+                }
+                return inside;
+            }
+
+            function lineInPolygonOrIntersects(line, polygon) {
+                // First, check if any point in the line is inside the polygon
+                if (line.some(point => pointInPolygon(point, polygon))) {
+                    return true;
+                }
+
+                // If no points are inside, check if any line segment intersects the polygon
+                for (let i = 0; i < line.length - 1; i++) {
+                    const lineStart = line[i];
+                    const lineEnd = line[i + 1];
+
+                    for (let j = 0; j < polygon.length - 1; j++) {
+                        const polyStart = [polygon[j].lng, polygon[j].lat];
+                        const polyEnd = [polygon[j + 1].lng, polygon[j + 1].lat];
+
+                        if (segmentsIntersect(lineStart, lineEnd, polyStart, polyEnd)) {
+                            return true;
+                        }
+                    }
+                }
+                return false;
+            }
+            function segmentsIntersect(p1, p2, q1, q2) {
+                const orientation = (p, q, r) => {
+                    const val = (q[1] - p[1]) * (r[0] - q[0]) - (q[0] - p[0]) * (r[1] - q[1]);
+                    return val === 0 ? 0 : (val > 0 ? 1 : 2);
+                };
+
+                const o1 = orientation(p1, p2, q1);
+                const o2 = orientation(p1, p2, q2);
+                const o3 = orientation(q1, q2, p1);
+                const o4 = orientation(q1, q2, p2);
+
+                if (o1 !== o2 && o3 !== o4) return true;
+
+                return false;
+            }
+
+            function createLassoSVG() {
+                // Create the SVG namespace
+                const svgNS = "http://www.w3.org/2000/svg";
+
+                // Create the SVG element
+                const svg = document.createElementNS(svgNS, "svg");
+                svg.setAttribute("class", "lasso-svg");
+                svg.setAttribute("style", "position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none;");
+
+                // Create the polygon element for the lasso
+                const polygon = document.createElementNS(svgNS, "polygon");
+                polygon.setAttribute("style", "fill: rgba(205, 245, 255, 0.5); stroke: #000000; stroke-width: 2; stroke-dasharray: 1, 1;");
+
+                // Append the polygon to the SVG
+                svg.appendChild(polygon);
+
+                // Append the SVG to the document, e.g., within the map container
+                canvas.appendChild(svg);
+
+                return polygon; // Return the polygon so we can update its points dynamically
+            }
+        }
+    });
+
+    return LassoSelection;
+});