fix(google-maps): polygon holes (#526)

NativeScript · NathanWalker · Jul 10, 2023 · Jul 11, 2023 · Jul 11, 2023 · Jul 12, 2023
commit b0982b4195589eed0177371f81ef101cd00964fa
diff --git a/packages/google-maps/index.android.ts b/packages/google-maps/index.android.ts
@@ -1356,26 +1356,36 @@ export class Polygon extends OverLayBase implements IPolygon {
 		}
 	}
 
-	get holes(): Coordinate[] {
-		const array: androidNative.Array<com.google.android.gms.maps.model.LatLng> = this.native.getHoles().toArray();
-		const holes: Coordinate[] = [];
+	get holes(): Coordinate[][] {
+		const array: androidNative.Array<java.util.List<com.google.android.gms.maps.model.LatLng>> = this.native.getHoles().toArray();
+		const holes: Coordinate[][] = [];
 		for (let i = 0; i < array.length; i++) {
-			const hole = array[i];
-			holes.push({
-				lat: hole.latitude,
-				lng: hole.longitude,
-			});
+			const nativeHole = array[i].toArray();
+			const hole: Coordinate[] = [];
+			for (let j = 0; j < nativeHole.length; j++) {
+				hole.push({
+					lat: nativeHole[j].latitude,
+					lng: nativeHole[j].longitude,
+				});
+			}
+			holes.push(hole);
 		}
 		return holes;
 	}
 
-	set holes(value) {
+	set holes(value: Coordinate[][]) {
 		if (Array.isArray(value)) {
-			const nativeArray = new java.util.ArrayList<com.google.android.gms.maps.model.LatLng>();
+			const nativeHoles = new java.util.ArrayList<java.util.ArrayList<com.google.android.gms.maps.model.LatLng>>();
 			value.forEach((hole) => {
-				nativeArray.add(new com.google.android.gms.maps.model.LatLng(hole.lat, hole.lng));
+				if (Array.isArray(hole) && hole.length) {
+					const nativeHole = new java.util.ArrayList<com.google.android.gms.maps.model.LatLng>();
+					hole.forEach((coordinate) => {
+						nativeHole.add(new com.google.android.gms.maps.model.LatLng(coordinate.lat, coordinate.lng));
+					});
+					nativeHoles.add(nativeHole);
+				}
 			});
-			this.native.setHoles(nativeArray);
+			this.native.setHoles(nativeHoles);
 		}
 	}
 

diff --git a/packages/google-maps/index.d.ts b/packages/google-maps/index.d.ts
@@ -494,7 +494,7 @@ export class Circle implements ICircle {
 
 export interface IPolygon {
 	points: Coordinate[];
-	holes: Coordinate[];
+	holes: Coordinate[][];
 	tappable: boolean;
 	strokeWidth: number;
 	strokeColor: Color | string;
@@ -512,7 +512,7 @@ export interface PolygonOptions extends Partial<IPolygon> {}
 export class Polygon implements IPolygon {
 	fillColor: Color | string;
 	geodesic: boolean;
-	holes: Coordinate[];
+	holes: Coordinate[][];
 	points: Coordinate[];
 	strokeColor: Color | string;
 	strokeJointType: JointType;

diff --git a/packages/google-maps/index.ios.ts b/packages/google-maps/index.ios.ts
@@ -1336,31 +1336,39 @@ export class Polygon extends OverLayBase implements IPolygon {
 		this.native.path = points;
 	}
 
-	get holes(): Coordinate[] {
+	get holes(): Coordinate[][] {
 		const nativeHoles = this.native?.holes;
 		const count = nativeHoles?.count || 0;
-		const holes: Coordinate[] = [];
+		const holes: Coordinate[][] = [];
 		for (let i = 0; i < count; i++) {
-			const hole = nativeHoles.objectAtIndex(i);
-			const coord = hole.coordinateAtIndex(0);
-			holes.push({
-				lat: coord.latitude,
-				lng: coord.longitude,
-			});
+			const nativeHole = nativeHoles.objectAtIndex(i);
+			const hole: Coordinate[] = [];
+			for (let j = 0; j < nativeHole.count(); j++) {
+				const coord = nativeHole.coordinateAtIndex(j);
+				hole.push({
+					lat: coord.latitude,
+					lng: coord.longitude,
+				});
+			}
+			holes.push(hole);
 		}
 		return holes;
 	}
 
-	set holes(value) {
-		const holes = [];
+	set holes(value: Coordinate[][]) {
+		const nativeHoles = [];
 		if (Array.isArray(value)) {
 			value.forEach((hole) => {
-				const path = GMSMutablePath.path();
-				path.addCoordinate(CLLocationCoordinate2DMake(hole.lat, hole.lng));
-				holes.push(path);
+				if (Array.isArray(hole) && hole.length) {
+					const path = GMSMutablePath.path();
+					hole.forEach((coordinate) => {
+						path.addCoordinate(CLLocationCoordinate2DMake(coordinate.lat, coordinate.lng));
+					});
+					nativeHoles.push(path);
+				}
 			});
 		}
-		this.native.holes = holes as any;
+		this.native.holes = nativeHoles as any;
 	}
 
 	get tappable(): boolean {

diff --git a/packages/google-maps/utils/index.android.ts b/packages/google-maps/utils/index.android.ts
@@ -76,7 +76,7 @@ export function intoNativeMarkerOptions(options: MarkerOptions) {
 		opts.icon(com.google.android.gms.maps.model.BitmapDescriptorFactory.defaultMarker(hueFromColor(color)));
 	}
 
-	if(typeof options?.opacity === 'number') {
+	if (typeof options?.opacity === 'number') {
 		opts.alpha(options.opacity);
 	}
 
@@ -153,14 +153,15 @@ export function intoNativePolygonOptions(options: PolygonOptions) {
 	}
 
 	if (Array.isArray(options?.holes)) {
-		const holes = new java.util.ArrayList();
 		options.holes.forEach((hole) => {
-			holes.add(new com.google.android.gms.maps.model.LatLng(hole.lat, hole.lng));
+			if (Array.isArray(hole) && hole.length) {
+				const nativeHole = new java.util.ArrayList<com.google.android.gms.maps.model.LatLng>();
+				hole.forEach((coordinate) => {
+					nativeHole.add(new com.google.android.gms.maps.model.LatLng(coordinate.lat, coordinate.lng));
+				});
+				opts.addHole(nativeHole);
+			}
 		});
-
-		if (options.holes.length) {
-			opts.addHole(holes);
-		}
 	}
 
 	if (typeof options?.tappable === 'boolean') {
@@ -275,10 +276,7 @@ export function intoNativeGroundOverlayOptions(options: GroundOverlayOptions) {
 	}
 
 	if (options?.bounds) {
-		opts.positionFromBounds(new com.google.android.gms.maps.model.LatLngBounds(
-			new com.google.android.gms.maps.model.LatLng(options.bounds.southwest.lat, options.bounds.southwest.lng),
-			new com.google.android.gms.maps.model.LatLng(options.bounds.northeast.lat, options.bounds.northeast.lng)
-		));
+		opts.positionFromBounds(new com.google.android.gms.maps.model.LatLngBounds(new com.google.android.gms.maps.model.LatLng(options.bounds.southwest.lat, options.bounds.southwest.lng), new com.google.android.gms.maps.model.LatLng(options.bounds.northeast.lat, options.bounds.northeast.lng)));
 	}
 
 	if (typeof options?.transparency) {

diff --git a/packages/google-maps/utils/index.ios.ts b/packages/google-maps/utils/index.ios.ts
@@ -144,12 +144,17 @@ export function intoNativePolygonOptions(options: PolygonOptions) {
 	const opts = path ? GMSPolygon.polygonWithPath(path) : GMSPolygon.new();
 
 	if (Array.isArray(options?.holes)) {
-		if (options.holes.length) {
-			opts.holes = options.holes.map((hole) => {
-				const res = GMSMutablePath.path();
-				res.addCoordinate(CLLocationCoordinate2DMake(hole.lat, hole.lng));
-			}) as any;
-		}
+		const nativeHoles = NSMutableArray.new<GMSMutablePath>();
+		options.holes.forEach((hole) => {
+			if (Array.isArray(hole) && hole.length) {
+				const path = GMSMutablePath.path();
+				hole.forEach((coordinate) => {
+					path.addCoordinate(CLLocationCoordinate2DMake(coordinate.lat, coordinate.lng));
+				});
+				nativeHoles.addObject(path);
+			}
+		});
+		opts.holes = nativeHoles;
 	}
 
 	if (typeof options?.tappable === 'boolean') {