ROU-11055: Adding Google Advanced Markers and Map Style Id properties

README.md

@@ -1,4 +1,4 @@
-# OutSystems Maps · v1.8.0
+# OutSystems Maps · v2.0.0
 
 ![GitHub License](https://img.shields.io/badge/License-BSD%203--Clause-blue.svg) ![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)
 

gulp/DefaultSpecs.js

@@ -19,7 +19,7 @@ const constants = {
 
 // Store the default project specifications
 const specs = {
-	version: '1.8.0',
+	version: '2.0.0',
 	name: 'OutSystems Maps',
 	description: '',
 	url: 'Website:\n • ' + constants.websiteUrl,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "outsystems-maps",
-  "version": "1.8.0",
+  "version": "2.0.0",
   "description": "OutSystems Maps",
   "author": "UI Components Team",
   "license": "BSD-3-Clause",
@@ -25,7 +25,7 @@
   "homepage": "https://outsystemsui.outsystems.com/OutSystemsMapsSample/",
   "devDependencies": {
     "@googlemaps/markerclusterer": "^2.5.3",
-    "@types/google.maps": "^3.46.0",
+    "@types/google.maps": "^3.55.10",
     "@types/leaflet-routing-machine": "^3.2.3",
     "@types/leaflet": "^1.7.5",
     "@typescript-eslint/eslint-plugin": "^6.21.0",

src/Global.d.ts

@@ -21,6 +21,7 @@ declare global {
     type GoogleMapsAlgorithm = OriginalAlgorithm;
     type GoogleMapsCluster = OriginalCluster;
     type GoogleMapsMarker = google.maps.Marker | google.maps.marker.AdvancedMarkerElement;
+    type GoogleMapsMarkerOptions = google.maps.MarkerOptions | google.maps.marker.AdvancedMarkerElementOptions;
     type GoogleMapsMarkerClusterer = OriginalMarkerClusterer;
     type GoogleMapsMarkerClustererOptions = OriginalMarkerClustererOptions;
     type GoogleMapsClusterRenderer = OriginalRenderer;

src/OSFramework/Maps/Constants.ts

@@ -1,7 +1,7 @@
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 namespace OSFramework.Maps.Constants {
 	/* OutSystems Maps Version */
-	export const OSMapsVersion = '1.8.0';
+	export const OSMapsVersion = '2.0.0';
 
 	/**
 	 * DataGrid Set platform in use.

src/OSFramework/Maps/Enum/ErrorCodes.ts

@@ -72,6 +72,7 @@ namespace OSFramework.Maps.Enum {
 		GEN_InvalidChangePropertyShape = 'MAPS-GEN-05001',
 		GEN_InvalidChangePropertyDrawingTools = 'MAPS-GEN-06001',
 		GEN_InvalidChangePropertyTools = 'MAPS-GEN-06002',
+		GEN_InvalidChangePropertyUseAdvancedMarkers = 'MAPS-GEN-06005',
 		GEN_UnsupportedEventShape = 'MAPS-GEN-05002',
 		GEN_UnsupportedEventDrawingTools = 'MAPS-GEN-06003',
 		GEN_ToolTypeAlreadyExists = 'MAPS-GEN-06004',

src/OSFramework/Maps/Enum/OS_Config_Map.ts

@@ -9,6 +9,7 @@ namespace OSFramework.Maps.Enum {
 		height,
 		center,
 		localization,
+		mapStyleId,
 		markerClustererActive,
 		markerClustererMaxZoom,
 		markerClustererMinClusterSize,
@@ -20,6 +21,7 @@ namespace OSFramework.Maps.Enum {
 		style,
 		type,
 		uniqueId,
+		useAdvancedMarkers,
 		zoom,
 	}
 }

src/OSFramework/Maps/Helper/Constants.ts

@@ -111,11 +111,11 @@ namespace OSFramework.Maps.Helper.Constants {
 	/** URL for GoogleMaps API to make use of the Google StaticMap */
 	export const googleMapsApiStaticMap = `${googleMapsApiURL}/staticmap`;
 	/** Version of the Google Maps to be loaded. */
-	export const gmversion = '3.55'; //Stable version Mid-February 2024.
+	export const gmversion = '3.57'; //Stable version Mid-February 2024.
 	// In order to use the drawingTools we need to add it into the libraries via the URL = drawing
 	// In order to use the heatmap we need to add it into the libraries via the URL = visualization
 	// In order to use the searchplaces we need to add it into the libraries via the URL = places (in case the Map is the first to import the scripts)
-	export const gmlibraries = 'drawing,visualization,places';
+	export const gmlibraries = 'drawing,visualization,places,marker';
 
 	/******************** */
 	/** URLs for Leaflet  */

src/OSFramework/Maps/Marker/AbstractMarker.ts

@@ -93,6 +93,19 @@ namespace OSFramework.Maps.Marker {
 			return id === this._uniqueId || id === this._widgetId;
 		}
 
+		public getPosition(): OSFramework.Maps.OSStructures.OSMap.ICoordenates {
+			// As we don't have the provider defined in the interface, we need to cast it
+			// to any to access the position property that is different between providers
+			// and even versions of Markers being used (google maps).
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any
+			const provider = this._provider as any;
+			// Until version 3.55 of google maps the position of the marker is a function
+			// same as in Leaflet maps. From version 3.56 the position is an object, when
+			// using the AdvancedMarkerElement.
+			const position = provider.getPosition ? provider.getPosition() : provider.position;
+			return position as OSFramework.Maps.OSStructures.OSMap.ICoordenates;
+		}
+
 		public getProviderConfig(): unknown {
 			return this.config.getProviderConfig();
 		}

src/OSFramework/Maps/Marker/IMarker.ts

@@ -15,6 +15,8 @@ namespace OSFramework.Maps.Marker {
 		build(): void;
 		changeProperty(propertyName: string, propertyValue: unknown): void;
 		dispose(): void;
+
+		getPosition(): OSFramework.Maps.OSStructures.OSMap.ICoordenates;
 		/**
 		 * Refreshes the Events of the Marker Provider after Subscribing/Unsubscribing events
 		 */

src/OSFramework/Maps/OSStructures/OSMap.Coordinates.ts

@@ -1,6 +1,11 @@
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 namespace OSFramework.Maps.OSStructures.OSMap {
-	export class Coordinates {
+	export interface ICoordenates {
+		lat: number | (() => number);
+		lng: number | (() => number);
+	}
+
+	export class Coordinates implements ICoordenates {
 		public lat: number | (() => number);
 		public lng: number | (() => number);
 	}

src/OutSystems/Maps/MapAPI/MarkerManager.ts

@@ -3,6 +3,35 @@ namespace OutSystems.Maps.MapAPI.MarkerManager {
 	const markerMap = new Map<string, string>(); //marker.uniqueId -> map.uniqueId
 	const markerArr = new Array<OSFramework.Maps.Marker.IMarker>();
 
+	/**
+	 * Gets the Map to which the Marker belongs to
+	 *
+	 * @param {string} markerId Id of the Marker that exists on the Map
+	 * @returns {*}  {MarkerMapper} this structure has the id of Map, and the reference to the instance of the Map
+	 */
+	function GetMapByMarkerId(markerId: string): OSFramework.Maps.OSMap.IMap {
+		let map: OSFramework.Maps.OSMap.IMap;
+
+		//markerId is the UniqueId
+		if (markerMap.has(markerId)) {
+			map = MapManager.GetMapById(markerMap.get(markerId), false);
+		}
+		//UniqueID not found
+		else {
+			// Try to find its reference on DOM
+			const elem = OSFramework.Maps.Helper.GetElementByUniqueId(markerId, false);
+
+			// If element is found, means that the DOM was rendered
+			if (elem !== undefined) {
+				//Find the closest Map
+				const mapId = OSFramework.Maps.Helper.GetClosestMapId(elem);
+				map = MapManager.GetMapById(mapId);
+			}
+		}
+
+		return map;
+	}
+
 	/**
 	 * Creates and adds a marker to a map.
 	 *
@@ -97,8 +126,7 @@ namespace OutSystems.Maps.MapAPI.MarkerManager {
 				// Check if the feature is enabled!
 				if (map.hasMarkerClusterer()) {
 					const marker = map.markers.find((marker) => {
-						// eslint-disable-next-line @typescript-eslint/no-explicit-any
-						return (marker.provider as any).location === markerPosition;
+						return marker.config.location === markerPosition;
 					});
 
 					// Check if there is a marker with the given Position/Location
@@ -140,20 +168,24 @@ namespace OutSystems.Maps.MapAPI.MarkerManager {
 	 */
 	export function CreateMarker(mapId: string, markerId: string, configs: string): OSFramework.Maps.Marker.IMarker {
 		const map = MapManager.GetMapById(mapId, true);
-		if (!map.hasMarker(markerId)) {
-			const _marker = Provider.Maps.Google.Marker.MarkerFactory.MakeMarker(
-				map,
-				markerId,
-				OSFramework.Maps.Enum.MarkerType.Marker,
-				JSON.parse(configs)
-			);
-			markerArr.push(_marker);
-			markerMap.set(markerId, map.uniqueId);
-			map.addMarker(_marker);
-
-			return _marker;
+		if (map.providerType === OSFramework.Maps.Enum.ProviderType.Google) {
+			if (!map.hasMarker(markerId)) {
+				const _marker = Provider.Maps.Google.Marker.MarkerFactory.MakeMarker(
+					map,
+					markerId,
+					OSFramework.Maps.Enum.MarkerType.Marker,
+					JSON.parse(configs)
+				);
+				markerArr.push(_marker);
+				markerMap.set(markerId, map.uniqueId);
+				map.addMarker(_marker);
+
+				return _marker;
+			} else {
+				throw new Error(`There is already a Marker registered on the specified Map under id:${markerId}`);
+			}
 		} else {
-			throw new Error(`There is already a Marker registered on the specified Map under id:${markerId}`);
+			throw new Error(`The provider type '${map.providerType}' does not support this operation.`);
 		}
 	}
 
@@ -189,37 +221,6 @@ namespace OutSystems.Maps.MapAPI.MarkerManager {
 		}
 	}
 
-	/**
-	 * [Not used]
-	 * Gets the Map to which the Marker belongs to
-	 *
-	 * @param {string} markerId Id of the Marker that exists on the Map
-	 * @returns {*}  {MarkerMapper} this structure has the id of Map, and the reference to the instance of the Map
-	 */
-	// eslint-disable-next-line @typescript-eslint/no-unused-vars
-	function GetMapByMarkerId(markerId: string): OSFramework.Maps.OSMap.IMap {
-		let map: OSFramework.Maps.OSMap.IMap;
-
-		//markerId is the UniqueId
-		if (markerMap.has(markerId)) {
-			map = MapManager.GetMapById(markerMap.get(markerId), false);
-		}
-		//UniqueID not found
-		else {
-			// Try to find its reference on DOM
-			const elem = OSFramework.Maps.Helper.GetElementByUniqueId(markerId, false);
-
-			// If element is found, means that the DOM was rendered
-			if (elem !== undefined) {
-				//Find the closest Map
-				const mapId = OSFramework.Maps.Helper.GetClosestMapId(elem);
-				map = MapManager.GetMapById(mapId);
-			}
-		}
-
-		return map;
-	}
-
 	/**
 	 * Returns a Marker based on Id
 	 * @param markerId Id of the Marker
@@ -232,16 +233,18 @@ namespace OutSystems.Maps.MapAPI.MarkerManager {
 			// Get all maps
 			const allMaps = [...MapManager.GetMapsFromPage().values()];
 
-			// On each map, look for all drawingTools and on each one look, on the createdElements array, for the markerId passed
+			// On each map, look for all drawingTools and on each one look,
+			// on the createdElements array, for the markerId passed.
 			allMaps.find((map: OSFramework.Maps.OSMap.IMap) => {
-				return (marker =
-					map.drawingTools &&
-					(map.drawingTools.createdElements.find((marker: OSFramework.Maps.Marker.IMarker) =>
-						marker.equalsToID(markerId)
-					) as OSFramework.Maps.Marker.IMarker));
+				if (map.drawingTools) {
+					marker = map.drawingTools.createdElements.find(
+						(marker: OSFramework.Maps.Marker.IMarker) => marker && marker.equalsToID(markerId)
+					) as OSFramework.Maps.Marker.IMarker;
+				}
+				return marker;
 			});
 
-			// If still wasn't found, then it does not exist and throw error
+			// If still wasn't found, then it does not exist - throw error
 			if (marker === undefined && raiseError) {
 				throw new Error(`Marker id:${markerId} not found`);
 			}

src/Providers/Maps/Google/Configuration/DrawingTools/DrawMarkerConfig.ts

@@ -7,7 +7,10 @@ namespace Provider.Maps.Google.Configuration.DrawingTools {
 
 		public getProviderConfig(): unknown[] {
 			const provider = super.getProviderConfig();
+			// The property icon is used by the DeprecatedMarker
 			provider.icon = this.iconUrl;
+			// The property iconUrl is used by the AdvancedMarker
+			provider.iconUrl = this.iconUrl;
 
 			Object.keys(provider).forEach((key) => {
 				if (provider[key] === undefined) delete provider[key];

src/Providers/Maps/Google/Configuration/Marker/DeprecatedGoogleMarkerConfig.ts

@@ -0,0 +1,34 @@
+/// <reference path="../../../../../OSFramework/Maps/Configuration/AbstractConfiguration.ts" />
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+namespace Provider.Maps.Google.Configuration.Marker {
+	export class DeprecatedGoogleMarkerConfig
+		extends OSFramework.Maps.Configuration.AbstractConfiguration
+		implements OSFramework.Maps.Configuration.IConfigurationMarker
+	{
+		public allowDrag: boolean;
+		public iconHeight: number;
+		public iconUrl: string;
+		public iconWidth: number;
+		public label: string;
+		public location: string;
+		public title: string;
+
+		public getProviderConfig(): unknown {
+			const provider = {
+				draggable: this.allowDrag,
+				icon: this.iconUrl,
+				label: this.label,
+				location: this.location,
+				title: this.title,
+			};
+
+			//Deleting all the undefined properties
+			Object.keys(provider).forEach((key) => {
+				if (provider[key] === undefined) delete provider[key];
+			});
+
+			return provider;
+		}
+	}
+}

src/Providers/Maps/Google/Configuration/Marker/GoogleMarkerConfig.ts

@@ -16,10 +16,7 @@ namespace Provider.Maps.Google.Configuration.Marker {
 
 		public getProviderConfig(): unknown {
 			const provider = {
-				draggable: this.allowDrag,
-				icon: this.iconUrl,
-				label: this.label,
-				location: this.location,
+				gmpDraggable: this.allowDrag,
 				title: this.title,
 			};
 

src/Providers/Maps/Google/Configuration/OSMap/GoogleMapConfig.ts

@@ -10,21 +10,41 @@ namespace Provider.Maps.Google.Configuration.OSMap {
 		public center: string | OSFramework.Maps.OSStructures.OSMap.Coordinates;
 		public height: string;
 		public localization: OSFramework.Maps.OSStructures.OSMap.Localization;
+		public mapStyleId: string;
 		public markerClusterer: OSFramework.Maps.Configuration.IConfigurationMarkerClusterer;
 		public offset: OSFramework.Maps.OSStructures.OSMap.Offset;
 		public respectUserZoom: boolean;
 		public showTraffic: boolean;
 		public style: OSFramework.Maps.Enum.OSMap.Style;
 		public type: OSFramework.Maps.Enum.OSMap.Type;
 		public uniqueId: string;
+		public useAdvancedMarkers: boolean;
 		public zoom: OSFramework.Maps.Enum.OSMap.Zoom;
 
 		public getProviderConfig(): unknown {
+			let mapStyleId = this.mapStyleId;
+			let style = this.style;
+
+			//Safe guard to assure that the mapId is not set when advancedMarkers is false
+			if (this.useAdvancedMarkers === false) {
+				mapStyleId = undefined;
+			} else {
+				// In Low-Code the style is 1-based, so we need to subtract 1 to match the enum
+				// which is 0-based.
+				const styleId = this.style - 1;
+				if (styleId === OSFramework.Maps.Enum.OSMap.Style.Standard) {
+					// If the developer is using the advanced markers and the style is standard, the style will be set
+					// to undefined (and subsequently removed) to avoid conflicts with the mapId.
+					style = undefined;
+				}
+			}
+
 			const provider = {
 				center: this.center,
-				zoom: this.zoom,
-				styles: this.style,
+				mapId: mapStyleId,
 				mapTypeId: this.type,
+				styles: style,
+				zoom: this.zoom,
 			};
 
 			//Cleanning undefined properties

src/Providers/Maps/Google/Configuration/OSMap/GoogleStaticMapConfig.ts

@@ -10,6 +10,7 @@ namespace Provider.Maps.Google.Configuration.OSMap {
 		public localization: OSFramework.Maps.OSStructures.OSMap.Localization;
 		public type: OSFramework.Maps.Enum.OSMap.Type;
 		public uniqueId: string;
+		public useAdvancedMarkers: boolean;
 		public zoom: OSFramework.Maps.Enum.OSMap.Zoom;
 
 		public getProviderConfig(): unknown {