@sapui5/sap.ui.vbm 1.138.0 → 1.140.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sapui5/sap.ui.vbm",
-  "version": "1.138.0",
+  "version": "1.140.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.138.0</version>
+	<version>1.140.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.138.0
+	 * @version 1.140.0
 	 * @extends sap.ui.core.Element
 	 * @constructor
 	 * @public

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.138.0
+	 * @version 1.140.0
 	 * @extends sap.ui.core.Element
 	 * @constructor
 	 * @public

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

@@ -300,7 +300,7 @@ sap.ui.define([
 				xhr.open("GET", sPathGeoJSON, false); // set 'false' to make it synchronous
 				xhr.send();
 
-				  if (xhr.status === 200) {
+				  if (xhr.status === 200 && !!xhr.responseText) {
 					oData = JSON.parse(xhr.responseText);
 				  } else {
 					// Handle error

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

@@ -23,7 +23,7 @@ sap.ui.define([
 	 *
 	 * @public
 	 * @author SAP SE
-	 * @version 1.138.0
+	 * @version 1.140.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.138.0
+		 * @version 1.140.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.138.0
+	 * @version 1.140.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.138.0
+	 * @version 1.140.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.138.0
+	 * @version 1.140.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.138.0
+	 * @version 1.140.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.138.0
+	 * @version 1.140.0
 	 * @alias sap.ui.vbm.adapter3d.RectangleTracker
 	 */
 	var RectangleTracker = BaseObject.extend("sap.ui.vbm.adapter3d.RectangleTracker", /** @lends sap.ui.vbm.adapter3d.RectangleTracker.prototype */ {
@@ -496,7 +496,7 @@ sap.ui.define([
 
 	RectangleTracker.prototype.searchChildInFrustum = function (frustum, object) {
 		var count = 0;
-		if (object._sapInstance != undefined && !object.geomtry) {
+		if (object._sapInstance != undefined && ((object._sapInstance["VB:c"] == 'true' ) || !(object._sapInstance["VB:c"]) )) {
 			var box1 = new THREE.BoxHelper(object, 0x000000);
 			var vertices = box1.geometry.attributes.position.array;
 			for (var i = 0, l = vertices.length; i < l; i += 3) {

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

@@ -47,7 +47,7 @@ sap.ui.define([
 	 *
 	 * @private
 	 * @author SAP SE
-	 * @version 1.138.0
+	 * @version 1.140.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.138.0
+	 * @version 1.140.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/library.js

@@ -20,7 +20,7 @@ sap.ui.define([
 	 * @namespace
 	 * @alias sap.ui.vbm
 	 * @author SAP SE
-	 * @version 1.138.0
+	 * @version 1.140.0
 	 * @public
 	 */
 
@@ -46,7 +46,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.138.0"
+		version: "1.140.0"
 	});
 
 	sap.ui.loader.config({

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

@@ -39,7 +39,7 @@ sap.ui.define([
 	let fixedBounds;
 	var containerID;
 	let previousCenter = null;
-    let previousZoom = null;
+	let previousZoom = null;
 
 
 
@@ -59,11 +59,11 @@ sap.ui.define([
 	}
 
 	VBI.MapRenderer.renderMap = () => {
-		
+
 		if (this.map) {
 			previousCenter = this.map.getCenter();
 			previousZoom = this.map.getZoom();
-			this.map.remove();  
+			this.map.remove();
 		}
 
 		let geoJSON = VBI.VBITransformer.getTransformedJSON();
@@ -76,6 +76,7 @@ sap.ui.define([
 		document.head.appendChild(styleSheet);
 
 		const map = VectorUtils.createMap(geoJSON, map_container);
+		map.doubleClickZoom.disable();
 
 		if (previousCenter && previousZoom !== null) {
 			map.jumpTo({
@@ -104,13 +105,13 @@ sap.ui.define([
 		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';
-            });
-			
+			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);
@@ -163,8 +164,12 @@ sap.ui.define([
 				if (marker.geometry.type === 'Point') {
 					// create a DOM element for the marker (parent div)
 					const el = VectorUtils.createSpotElement(marker);
+					if (marker.properties.Label) {
+						const child_e1 = VectorUtils.createMarkerLabel(marker.properties.Label, marker.properties.LabelBGColor);
+						el.appendChild(child_e1);
+					}
 					if (marker.properties.Icon) {
-						const iconColor = marker.properties.contentColor? marker.properties.contentColor : "#000000";
+						const iconColor = marker.properties.contentColor ? marker.properties.contentColor : "#000000";
 						// Create child element for the SAP icon (icon overlay)
 						const child_el = VectorUtils.createIconElement(marker.properties.Icon, iconColor);
 						child_el.id = '__mapspot' + spotid++;
@@ -396,9 +401,69 @@ sap.ui.define([
 							if (that.Apressed || that.Rpressed) {
 								el.style.cursor = 'crosshair';
 							} else {
-								const tooltipContent = marker.properties.ToolTip.replace(/\n/g, '<br>');
-								const tooltip = `<div style="background-color: white; color: black;">${tooltipContent}</div>`;
-								popup.setLngLat(marker.geometry.coordinates).setHTML(tooltip).addTo(map);
+								function renderTooltip(marker, popup, map) {
+									if (!document.getElementById('custom-maplibre-tooltip-style')) {
+										const style = document.createElement('style');
+										style.id = 'custom-maplibre-tooltip-style';
+										style.innerHTML = `
+                                            .maplibregl-popup {
+                                                background: transparent !important;
+                                                box-shadow: none !important;
+                                                padding: 0 !important;
+                                                width: auto;
+                                            }
+                                            .maplibregl-popup-content {
+                                                background: transparent !important;
+                                                padding: 0 !important;
+                                                box-shadow: none !important;
+                                                border-radius: 0 !important;
+                                                width: auto;
+                                            }
+                                        `;
+										document.head.appendChild(style);
+									}
+
+									const isDarkTheme = window.matchMedia &&
+										window.matchMedia('(prefers-color-scheme: dark)').matches;
+
+									const outerBorderColor = 'none';
+									const innerBgColor = isDarkTheme ? '#545555' : '#f0f0f0';
+									const textColor = isDarkTheme ? 'white' : 'f0f0f0';
+
+									const tooltipContent = marker.properties.ToolTip.replace(/\n/g, '<br>');
+
+								const tooltip = `
+
+								<div style="
+							      background-color: ${innerBgColor};
+								  color: ${textColor};
+                                  padding: 8px;
+                                  border-radius: 6px;
+                                  max-height: 180px;
+                                  display: inline-block;
+                                  font-family: Arial;
+                                  font-size: 0.875rem;
+                                  width: auto;
+                                  white-space: nowrap;
+                                  border: 2px solid ${outerBorderColor};
+                                  ">
+                                  ${tooltipContent}
+                                  </div>`;
+
+									popup.setLngLat(marker.geometry.coordinates)
+										.setHTML(tooltip)
+										.addTo(map);
+								}
+
+								// 2. Initial render
+								renderTooltip(marker, popup, map);
+
+								// 3. Re-render tooltip on system theme change
+								window.matchMedia('(prefers-color-scheme: dark)')
+									.addEventListener('change', () => {
+										popup.remove();
+										renderTooltip(marker, popup, map);
+									});
 							}
 						}
 
@@ -417,6 +482,10 @@ sap.ui.define([
 						PayloadGenerator.objectClick('Spot', event, marker, clickCoordinates);
 					};
 
+                    el.addEventListener('dblclick', (e) => {
+						triggerPayloadSpot(e, 'DOUBLE_CLICK');
+					});
+					
 					el.addEventListener('click', (e) => {
 						//Trigger payload
 						triggerPayloadSpot(e, 'DETAIL_REQUEST');
@@ -444,6 +513,16 @@ sap.ui.define([
 						predefinedMarkers.push(markerCoordinates);
 					}
 				} else if (marker.geometry.type == "LineString") {
+
+					const colorStr = marker.properties.LineColor; 
+					let textColor = '#000000'; // Default color
+
+					if (colorStr) {
+						const [r, g, b, a] = VectorUtils.parseRGBAString(colorStr);
+						textColor = VectorUtils.getContrastTextColor(r, g, b);
+					    marker.properties.labelHaloColor = `rgba(${r}, ${g}, ${b}, ${a})`;
+					}
+					marker.properties.textColor = textColor;
 					const coords = marker.geometry.coordinates;
 					const startCoord = coords[0];  // First coordinate
 					const endCoord = coords[coords.length - 1];  // Last coordinate
@@ -499,10 +578,10 @@ sap.ui.define([
 				}
 
 			});
-			if(VBI.mapFlags.automations){
+			if (VBI.mapFlags.automations) {
 				let automations = new SAPAutomationManager(map, maplibregl.LngLatBounds);
 				automations.load(VBI.mapFlags.automations);
-				}
+			}
 			map.addLayer({
 				'id': 'geojson-source-point',
 				'type': 'circle',
@@ -542,6 +621,30 @@ sap.ui.define([
 				},
 				'filter': ['==', '$type', 'LineString']
 			});
+
+			map.addLayer({
+				id: 'line-labels',
+				type: 'symbol',
+				source: 'geojson-source',
+				layout: {
+					'symbol-placement': 'line-center',
+					'text-field': ['get', 'Label'],
+					'text-font': ['Open Sans Regular', 'Arial Unicode MS Regular'],
+					'text-size': 14,
+					'text-rotation-alignment': 'map',
+					'text-keep-upright': true
+				},
+                paint: {
+                    'text-color': ['get', 'lineLabelTextColor'], 
+                    'text-halo-color': ['get', 'labelHaloColor'], 
+                    'text-halo-width': 4,              
+                    'text-halo-blur': 0.8,
+                    'text-opacity': ['get', 'opacity']
+                },
+
+				filter: ['all', ['==', ['get', 'ShowLabel'], true]]
+			});
+
 			// Create a new FeatureCollection for the points
 			const pointGeoJSON = {
 				'type': 'FeatureCollection',
@@ -590,18 +693,62 @@ sap.ui.define([
 					}
 				});
 			});
-
 		});
+
 		// Change mouse cursor when hovering over the line
 		map.on('mouseenter', 'geojson-source-route', function (event) {
 			if (!that.Apressed && !that.Rpressed) {
 				map.getCanvas().style.cursor = 'pointer';
 			}
+				if (!document.getElementById('custom-maplibre-tooltip-style')) {
+				const style = document.createElement('style');
+				style.id = 'custom-maplibre-tooltip-style';
+				style.innerHTML = `
+                                            .maplibregl-popup {
+                                                background: transparent !important;
+                                                box-shadow: none !important;
+                                                padding: 0 !important;
+                                                width: auto;
+                                            }
+                                            .maplibregl-popup-content {
+                                                background: transparent !important;
+                                                padding: 0 !important;
+                                                box-shadow: none !important;
+                                                border-radius: 0 !important;
+                                                width: auto;
+                                            } `;
+				document.head.appendChild(style);
+			}
+
+			const isDarkTheme = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+			
+			const outerBorderColor = 'none';
+			const innerBgColor = isDarkTheme ? '#545555' : '#f0f0f0';
+			const textColor = isDarkTheme ? 'white' : 'f0f0f0';
+
 			const coordinates = event.lngLat;
-			const description = event.features[0].properties.ToolTip;
+			const description = event.features[0].properties.ToolTip || "";
+
 			const tooltipContent = description.replace(/\n/g, '<br>');
-			const tooltip = `<div style="background-color: white; color: black;">${tooltipContent}</div>`;
+
+			const tooltip = ` <div style="
+			                      background-color: ${innerBgColor};
+                                  color: ${textColor};
+                                  padding: 8px;
+                                  border-radius: 6px;
+                                  max-height: 180px;
+                                  display: inline-block;
+                                  font-family: Arial;
+                                  font-size: 0.875rem;
+                                  width: auto;
+                                  white-space: nowrap;
+                                  border: 2px solid ${outerBorderColor};
+                                  ">
+                                  ${tooltipContent}
+                                  </div> `;
+
 			popupLink.setLngLat(coordinates).setHTML(tooltip).addTo(map);
+
 		});
 
 		// Revert mouse cursor back when not hovering
@@ -611,14 +758,12 @@ sap.ui.define([
 			}
 			popupLink.remove();
 		});
+		
 		map.on('click', 'geojson-source-route', function (e) {
 			//Trigger payload
 			triggerPayloadRoute(e, 'DETAIL_REQUEST');
 		});
-		// map.getContainer().addEventListener('contextmenu', 'geojson-source-route', function (e) {
-		// 	//Trigger payload
-		// 	triggerPayloadRoute(e, 'DETAIL_REQUEST');
-		// });
+
 		function triggerPayloadRoute(e, event) {
 			// Get the mouse coordinates within the map container
 			const offsetX = e.offsetX;
@@ -636,7 +781,7 @@ sap.ui.define([
 		function triggerPayloaddnd() {
 			PayloadGenerator.objectDrop(action, dropItems);
 		}
-		
+
 		map.on('mousedown', 'geojson-source-route', (e) => {
 			dragInstance = map.queryRenderedFeatures(e.point, {
 				layers: ['geojson-source-route']
@@ -667,7 +812,7 @@ sap.ui.define([
 				map.on('mousemove', onMove);
 				map.on('mouseup', onUp);
 
-		
+
 				if (!that.Apressed && !that.Rpressed) {
 					map.getCanvas().style.cursor = 'pointer';
 				}
@@ -722,10 +867,10 @@ sap.ui.define([
 			}
 
 			// Reset cursor and remove event listeners
-			map.getCanvas().style.cursor = 'default'; 
+			map.getCanvas().style.cursor = 'default';
 			setTimeout(() => {
-				map.getCanvas().style.cursor = 'default'; 
-			}, 100); 
+				map.getCanvas().style.cursor = 'default';
+			}, 100);
 			map.off('mousemove', onMove);
 			map.off('mouseup', onUp);
 			lineDrag = false;
@@ -752,12 +897,12 @@ sap.ui.define([
 					map.getCanvas().style.cursor = validDrop ? 'copy' : 'not-allowed';
 				}
 				else {
-					
+
 					map.getCanvas().style.cursor = 'default';
 				}
 			}
 		}
-		
+
 		mapCanvas.oncontextmenu = (e) => {
 			e.preventDefault();
 			// Get the mouse coordinates within the map container

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

@@ -12,7 +12,7 @@ sap.ui.define([
          *
          * @private
          * @author SAP SE
-         * @version 1.138.0
+         * @version 1.140.0
          * @alias sap.ui.vbm.vector.PayloadGenerator
          */
     var adapter = {};

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

@@ -12,7 +12,7 @@ sap.ui.define([
          *
          * @private
          * @author SAP SE
-         * @version 1.138.0
+         * @version 1.140.0
          * @alias sap.ui.vbm.vector.RectangularSelection
          */
 

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

@@ -320,7 +320,6 @@ sap.ui.define([
                     let routeProperties = {
                         "GeoPosition": currRoute.A ? currRoute.A : "",
                         "ToolTip": currRoute.B ? currRoute.B : "",
-                        "Label": currRoute.L ? currRoute.L : "",
                         "LabelBGColor": currRoute.LC ? currRoute.LC : "",
                         "LabelAlignment": currRoute.LA ? currRoute.LA : "",
                         "Color": currRoute.C ? VectorUtils.argbToRgba(currRoute.C) : "",
@@ -337,10 +336,30 @@ sap.ui.define([
                         "DotWidth": currRoute.DW ? currRoute.DW : "",
                         "DotColor": currRoute.DC ? currRoute.DC : "",
                         "LineDash": currRoute.LD ? currRoute.LD : "",
+                        "LineColor": currRoute.F ? currRoute.F : "",
                         "DirectionIndicator": currRoute.DI ? currRoute.DI : "",
                         "DragData": currRoute.DD ? currRoute.DD : "",
                         "type": "{00100000-2012-0004-B001-C46BD7336A1A}"
                     };
+                    let labeledRoutes = new Set();
+                    if (currRoute.L) {
+                        routeProperties["Label"] = currRoute.L;
+                    // ✅ Only label the first route with this Label
+                    if (!labeledRoutes.has(currRoute.L)) {
+                        routeProperties["ShowLabel"] = true;
+                        labeledRoutes.add(currRoute.L);
+                    }
+                    }
+                    const colorStr = currRoute.F; 
+                    routeProperties["lineLabelTextColor"] = '#000000'; // Default color
+
+                    if (colorStr) {
+                        const [r, g, b, a] = VectorUtils.parseRGBAString(colorStr);
+                        routeProperties["lineLabelTextColor"] = VectorUtils.getContrastTextColor(r, g, b);
+                        const { hexColor, opacity } = VectorUtils.rgbaToHexAndOpacity(colorStr);
+                        routeProperties["labelHaloColor"] = hexColor;
+                        routeProperties["opacity"] = opacity;
+                        }
 
                     //itearate through the route points and add the coordinates to the GeoJSON
                     let coord_array = currRoute.H.split(";");
@@ -360,7 +379,7 @@ sap.ui.define([
                         "properties": routeProperties,
                         "geometry": geometry,
                         // "id"           :  currRoute['VB:ix'],
-                        "id": route_id++,
+                        "id": route_id++
                     };
                     let indexNum = featureCollection.findIndex(item => item.properties.Key === route_data.properties.Key)
                     if (indexNum !== -1) {
@@ -378,7 +397,6 @@ sap.ui.define([
                 let routeProperties = {
                     "GeoPosition": currRoute.A ? currRoute.A : "",
                     "ToolTip": currRoute.B ? currRoute.B : "",
-                    "Label": currRoute.L ? currRoute.L : "",
                     "LabelBGColor": currRoute.LC ? currRoute.LC : "",
                     "LabelAlignment": currRoute.LA ? currRoute.LA : "",
                     "Color": currRoute.C ? VectorUtils.argbToRgba(currRoute.C) : "",
@@ -395,11 +413,32 @@ sap.ui.define([
                     "DotWidth": currRoute.DW ? currRoute.DW : "",
                     "DotColor": currRoute.DC ? currRoute.DC : "",
                     "LineDash": currRoute.LD ? currRoute.LD : "",
+                    "LineColor": currRoute.F ? currRoute.F : "",
                     "DirectionIndicator": currRoute.DI ? currRoute.DI : "",
                     "DragData": currRoute.DD ? currRoute.DD : "",
                     "type": "{00100000-2012-0004-B001-C46BD7336A1A}"
+                    
 
                 };
+                    let labeledRoutes = new Set();
+                    if (currRoute.L) {
+                        routeProperties["Label"] = currRoute.L;
+                    // ✅ Only label the first route with this Label
+                    if (!labeledRoutes.has(currRoute.L)) {
+                        routeProperties["ShowLabel"] = true;
+                        labeledRoutes.add(currRoute.L);
+                    }
+                    }
+                    const colorStr = currRoute.F; 
+                    routeProperties["lineLabelTextColor"] = '#000000'; // Default color
+
+                    if (colorStr) {
+                        const [r, g, b, a] = VectorUtils.parseRGBAString(colorStr);
+                        routeProperties["lineLabelTextColor"] = VectorUtils.getContrastTextColor(r, g, b);
+                        const { hexColor, opacity } = VectorUtils.rgbaToHexAndOpacity(colorStr);
+                        routeProperties["labelHaloColor"] = hexColor;
+                        routeProperties["opacity"] = opacity;
+                        }
 
                 //itearate through the route points and add the coordinates to the GeoJSON
                 let coord_array = currRoute.H.split(";");

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

@@ -37,7 +37,7 @@ sap.ui.define([
     VectorUtils.createSpotElement = (marker) => {
         // create a DOM element for the marker (parent div)
         const el = document.createElement('div');
-        
+
         // Set background image for the marker
         var base64decoded = "data:image/png;base64," + marker.properties.base64;
         el.style.backgroundImage = `url(${base64decoded})`;
@@ -65,10 +65,10 @@ sap.ui.define([
         return child_el;
     }
     //Function to set the canvas id
-	VectorUtils._setcanvasid = () => {
-		var mapCanvas = '__mapcanvas';
+    VectorUtils._setcanvasid = () => {
+        var mapCanvas = '__mapcanvas';
         return mapCanvas;
-	}
+    }
 
     VectorUtils.createDropdownMenu = (menuData) => {
         const dropdown = document.createElement('div');
@@ -232,6 +232,72 @@ sap.ui.define([
 
         return windowContainer;
     };
+
+    VectorUtils.createMarkerLabel = (label, labelcolor) => {
+        var r, g, b, a;
+        const obj = document.createElement('div');
+        obj.className = 'marker-label';
+        obj.textContent = label;
+        obj.style.color = labelcolor;
+        obj.style.position = 'absolute';
+        obj.style.top = '100%';
+        if (!labelcolor) {
+            [r, g, b, a] = [211, 211, 211, 1];
+        } else {
+            [r, g, b, a] = VectorUtils.parseRGBAString(labelcolor);
+        }
+        obj.style.backgroundColor = `rgba(${r}, ${g}, ${b}, ${a})`;
+        obj.style.border = `2px solid rgba(${r}, ${g}, ${b}, ${a})`;
+        const textColor = VectorUtils.getContrastTextColor(r, g, b);
+        obj.style.color = textColor;
+        obj.style.fontFamily = 'Arial, sans-serif';
+        obj.style.fontSize = '14px';
+        return obj;
+    }
+    VectorUtils.rgbaToHexAndOpacity = (rgbaString) => {
+        const rgbaRegex = /rgba?\s*\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d*\.?\d+)\s*\)/i;
+        const match = rgbaString.match(rgbaRegex);
+
+        if (!match) {
+            throw new Error("Invalid RGBA format");
+        }
+
+        const r = parseInt(match[1], 10);
+        const g = parseInt(match[2], 10);
+        const b = parseInt(match[3], 10);
+        const a = parseFloat(match[4]);
+
+        const toHex = (value) => value.toString(16).padStart(2, '0');
+
+        const hex = `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+
+        return {
+            hexColor: hex,
+            opacity: a
+        };
+        }
+
+
+    VectorUtils.parseRGBAString = (rgbaStr) => {
+        const match = rgbaStr.match(/rgba?\s*\(\s*(\d+),\s*(\d+),\s*(\d+),\s*(\d+)\s*\)/i);
+
+        if (!match) return null;
+
+        const r = parseInt(match[1]);
+        const g = parseInt(match[2]);
+        const b = parseInt(match[3]);
+        const a = parseInt(match[4]) / 255; 
+
+        return [r, g, b, parseFloat(a.toFixed(3))];
+    }
+
+    VectorUtils.getContrastTextColor = (r, g, b) => {
+        if (r === 0 && g === 0 && b === 0) {
+            return '#000000';
+        }
+        const brightness = 0.299 * r + 0.587 * g + 0.114 * b;
+        return brightness < 128 ? '#FFFFFF' : '#000000';
+    }
     VectorUtils.createSubCaption = (item) => {
         const obj = document.createElement('div');
         obj.setAttribute("role", sap.ui.core.AccessibleRole.Secondary);