ROU-12040: Change code to use the new Routes API (#210)

* ROU-11865: Spike for supporting the new Routes API (#205)

* Adding new types of google maps

* Adding new helper method

* Adding new constants

* Adding new library

* Adding new type checker method

* Simplifying the code with new helper methods

* Adding new class to render Routes

* Changing directions to use new API

* Creating helper function

Co-authored-by: Marta Carlos <101343976+OS-martacarlos@users.noreply.github.com>

* Fixing directions

* Update Directions.ts

* Centering the map

---------

Co-authored-by: Marta Carlos <101343976+OS-martacarlos@users.noreply.github.com>

* Adding comments

* Fixing regex

* Adding new types for the new route API

* Transform coordinates to new type

* Storing developer sent way points to show on route

* Storing route markers

* Building route with intermediate points

* Move file to location

* Rename file

* Renaming class

* Removing unnecessary code

* Improving the security of the regex

---------

Co-authored-by: Marta Carlos <101343976+OS-martacarlos@users.noreply.github.com>

Author: rugoncalves

src/Providers/Maps/Google/Constants/Constants.ts

@@ -1,4 +1,7 @@
 namespace Provider.Maps.Google.Constants {
+	// Regular expression to validate if a string is a set of coordinates. Accepts "12.300,-8.220", "12.300 ,-8.220", and "12.300, -8.220".
+	export const coordinateValidator = /^-?\d+(?:\.\d+)? ?, ?-?\d+(?:\.\d+)?$/;
+
 	// Name of the Google Maps Version in the LocalStorage
 	export const googleMapsLocalStorageVersionKey = 'gmVersion';
 
@@ -27,14 +30,22 @@ namespace Provider.Maps.Google.Constants {
 	/** URL for GoogleMapsApis  */
 	/************************** */
 	export const googleMapsApiURL = 'https://maps.googleapis.com/maps/api';
+	// URL for GoogleMaps API to make use of the routes API
+	export const googleMapsRoutesApiURL = 'https://routes.googleapis.com/directions/v2:computeRoutes';
 	// URL for GoogleMaps API to make use of the Google Map
 	export const googleMapsApiMap = `${googleMapsApiURL}/js`;
 	// URL for GoogleMaps API to make use of the Google StaticMap
 	export const googleMapsApiStaticMap = `${googleMapsApiURL}/staticmap`;
+
+	/****************************** */
+	/** Options for GoogleMapsApis  */
+	/****************************** */
+	// When using Google Maps Routes API, these are the options that we want to retrieve.
+	export const GoogleMapsRouteOptions = 'routes.duration,routes.distanceMeters,routes.polyline.encodedPolyline';
 	// 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 GoogleMapsLibraries = 'drawing,visualization,places,marker';
+	export const GoogleMapsLibraries = 'drawing,visualization,places,marker,geometry';
 	// Used to check if modules are available on cycles of 100ms */
 	export const checkGoogleMapsLibrariesMaxAttempts = 25;
 	// Version of the Google Maps to be loaded.

src/Providers/Maps/Google/Features/Directions.Renderer.ts

@@ -0,0 +1,112 @@
+namespace Provider.Maps.Google.Feature {
+	export class DirectionsRenderer implements OSFramework.Maps.Interface.IDisposable {
+		private _isRouteRendered: boolean;
+		private _map: OSMap.IMapGoogle;
+		private _pathPolyline: google.maps.Polyline;
+		private _routeMarkers: google.maps.marker.AdvancedMarkerElement[];
+
+		constructor(map: OSMap.IMapGoogle) {
+			this._map = map;
+			this._isRouteRendered = false;
+			this._routeMarkers = [];
+		}
+
+		private _buildMarker(
+			position: google.maps.LatLng | google.maps.LatLngLiteral,
+			label: string
+		): google.maps.marker.AdvancedMarkerElement {
+			// The pin element is the colored teardrop shape.
+			const pin = new google.maps.marker.PinElement({
+				background: '#EA4335', // Red background
+				borderColor: '#D6352D', // Dark red border
+				glyphColor: '#FFFFFF', // White letter
+				scale: 1,
+			});
+
+			// Create the advanced marker.
+			const marker = new google.maps.marker.AdvancedMarkerElement({
+				position: {
+					lat: Helper.Conversions.GetCoordinateValue(position.lat),
+					lng: Helper.Conversions.GetCoordinateValue(position.lng),
+				},
+				map: this._map.provider,
+				content: pin.element,
+			});
+
+			pin.glyph = label;
+
+			return marker;
+		}
+
+		public dispose(): void {
+			this.removeRoute();
+			this._map = undefined;
+		}
+
+		public removeRoute(): void {
+			if (this._pathPolyline) {
+				this._pathPolyline.setMap(null);
+				this._pathPolyline = undefined;
+			}
+			this._routeMarkers.forEach((marker) => {
+				marker.map = undefined;
+			});
+			this._routeMarkers = [];
+			this._isRouteRendered = false;
+		}
+
+		public renderRoute(
+			encodedPolyline: string,
+			_waypoints?: string[]
+		): OSFramework.Maps.OSStructures.ReturnMessage {
+			this._isRouteRendered && this.removeRoute();
+
+			if (encodedPolyline) {
+				const bounds = new google.maps.LatLngBounds();
+				const routePath = google.maps.geometry.encoding.decodePath(encodedPolyline);
+
+				// Create the polyline for the route path.
+				this._pathPolyline = new google.maps.Polyline({
+					path: routePath,
+					strokeColor: '#4285F470', // A solid red color
+					strokeWeight: 6,
+					map: this._map.provider,
+				});
+
+				let pointCharacter = 65; // ASCII code for 'A'
+
+				const buildMarkerWithLabel = (point: google.maps.LatLng | google.maps.LatLngLiteral) => {
+					// Create a marker for each point in the route path.
+					const label = String.fromCharCode(pointCharacter++);
+					// Build the marker with the point and label.
+					const marker = this._buildMarker(point, label);
+					// Store the marker in the route markers array.
+					this._routeMarkers.push(marker);
+					bounds.extend(point);
+				};
+
+				buildMarkerWithLabel(routePath[0]);
+
+				_waypoints.forEach((waypoint) => {
+					buildMarkerWithLabel(Helper.Conversions.GetCoordinatesFromString(waypoint));
+				});
+
+				buildMarkerWithLabel(routePath[routePath.length - 1]);
+
+				// Set the map bounds to fit the route.
+				this._map.provider.fitBounds(bounds);
+
+				this._isRouteRendered = true;
+
+				return {
+					isSuccess: true,
+				};
+			} else {
+				return {
+					code: OSFramework.Maps.Enum.ErrorCodes.LIB_FailedSetDirections,
+					message: 'Encoded polyline is empty or undefined.',
+				};
+			}
+		}
+	}
+}