feat(google-maps-utils): Android map clustering

NativeScript · NathanWalker · May 29, 2025 · Jul 5, 2022 · Jul 5, 2022 · Jul 6, 2022
commit 4cf82898b537a285afff362d5d00b89ea3de347e
diff --git a/packages/google-maps-utils/index.android.ts b/packages/google-maps-utils/index.android.ts
@@ -1,10 +1,11 @@
-import { Color } from '@nativescript/core';
-import { Coordinate, MapView } from '@nativescript/google-maps';
-import { IGeoJsonLayer, IGeometryStyle } from '.';
+import { Color, Utils } from '@nativescript/core';
+import { Coordinate, GoogleMap, MapView, Marker, MarkerOptions } from '@nativescript/google-maps';
+import { intoNativeMarkerOptions } from '../google-maps/utils';
+import { IClusterManager, IGeoJsonLayer, IGeometryStyle } from '.';
 import { GoogleMapsUtilsCommon } from './common';
 
 export class GoogleMapsUtils extends GoogleMapsUtilsCommon {
-	constructor(private map: MapView) {
+	constructor(private map: GoogleMap) {
 		super();
 	}
 
@@ -195,12 +196,12 @@ export class GeoJsonLayer extends DataLayer<com.google.maps.android.data.geojson
 	#native: com.google.maps.android.data.geojson.GeoJsonLayer;
 	style: GeometryStyle;
 
-	constructor(mapView: MapView, geoJson: any, geometryStyle?: IGeometryStyle) {
+	constructor(map: GoogleMap, geoJson: any, geometryStyle?: IGeometryStyle) {
 		super();
-		if (mapView && geoJson) {
+		if (map && geoJson) {
 			try {
 				const geoJsonData = new org.json.JSONObject(JSON.stringify(geoJson));
-				this.#native = new com.google.maps.android.data.geojson.GeoJsonLayer((mapView as any)._map, geoJsonData);
+				this.#native = new com.google.maps.android.data.geojson.GeoJsonLayer(map.native, geoJsonData);
 				this.style = new GeometryStyle(this.#native.getDefaultPolygonStyle(), this.#native.getDefaultLineStringStyle(), this.#native.getDefaultPointStyle());
 
 				if (geometryStyle) {
@@ -278,3 +279,81 @@ export class KmlLayer extends DataLayer<com.google.maps.android.data.kml.KmlLaye
 		return this.native.getGroundOverlays();
 	}
 }
+
+export class ClusterItem extends com.google.maps.android.clustering.ClusterItem {
+	constructor(public options: MarkerOptions) {
+		super({
+			getPosition: (): com.google.android.gms.maps.model.LatLng => {
+				return new com.google.android.gms.maps.model.LatLng(options?.position?.lat ?? 0, options?.position?.lng ?? 0);
+			},
+			getSnippet: (): string => {
+				return this.options?.snippet ?? '';
+			},
+			getTitle: (): string => {
+				return this.options?.title ?? '';
+			},
+		});
+	}
+}
+
+export class ClusterRenderer extends com.google.maps.android.clustering.view.DefaultClusterRenderer<any> {
+	constructor(map: GoogleMap, clusterManager: ClusterManager) {
+		console.log('custom renderer');
+		super(Utils.ad.getApplicationContext(), map.native, clusterManager.native);
+	}
+
+	onBeforeClusterItemRendered(item: com.google.maps.android.clustering.Cluster<any>, markerOptions: com.google.android.gms.maps.model.MarkerOptions): void {
+		console.log(item.getItems()?.[0]?.title);
+		super.onBeforeClusterItemRendered(item, markerOptions);
+		console.log(item.getItems());
+	}
+
+	public onClustersChanged(param0: java.util.Set<any>): void {
+		super.onClustersChanged(param0);
+	}
+}
+
+export class ClusterManager implements IClusterManager {
+	#native: com.google.maps.android.clustering.ClusterManager<com.google.maps.android.clustering.ClusterItem>;
+
+	constructor(private map: GoogleMap) {
+		this.#native = new com.google.maps.android.clustering.ClusterManager(Utils.ad.getApplicationContext(), map.native);
+
+		if (map?.native?.setOnCameraIdleListener) {
+			(map.native as com.google.android.gms.maps.GoogleMap).setOnCameraIdleListener(this.#native);
+		}
+	}
+
+	static fromNative(nativeClusterManager: com.google.maps.android.clustering.ClusterManager<any>) {
+		if (ClusterManager instanceof com.google.maps.android.clustering.ClusterManager) {
+			const geoJsonLayer = new ClusterManager(null);
+			geoJsonLayer.#native = nativeClusterManager;
+			return geoJsonLayer;
+		}
+		return null;
+	}
+
+	get native() {
+		return this.#native;
+	}
+
+	setRenderer(renderer) {
+		this.native.setRenderer(renderer);
+	}
+
+	addItem(clusterItem: ClusterItem) {
+		this.native.addItem(clusterItem);
+	}
+
+	addItems(clusterItems: ClusterItem[]) {
+		const clusterItemArray = new java.util.ArrayList();
+		for (const clusterItem of clusterItems) {
+			clusterItemArray.add(clusterItem);
+		}
+		this.native.addItems(clusterItemArray);
+	}
+
+	cluster() {
+		this.native.cluster();
+	}
+}
diff --git a/packages/google-maps-utils/index.d.ts b/packages/google-maps-utils/index.d.ts
@@ -1,9 +1,29 @@
 import { Color } from '@nativescript/core';
-import { MapView } from '@nativescript/google-maps';
+import { GoogleMap, Marker, MarkerOptions } from '@nativescript/google-maps';
 import { GoogleMapsUtilsCommon } from './common';
 
 export declare class GoogleMapsUtils extends GoogleMapsUtilsCommon {}
 
+export class ClusterItem {
+	constructor(markerOptions: MarkerOptions);
+}
+
+export interface IClusterManager {
+	native: any;
+}
+
+export class ClusterRenderer {
+	constructor(private map: GoogleMap, private manager: ClusterManager);
+}
+
+export class ClusterManager implements IClusterManager {
+	constructor(private map: GoogleMap);
+	addItems: (markers: ClusterItem[]) => void;
+	addItem: (marker: ClusterItem) => void;
+	cluster: () => void;
+	setRenderer(clusterRenderer: ClusterRenderer): () => void;
+}
+
 export interface IGeoJsonLayer {
 	style: GeometryStyle;
 	addLayerToMap: () => void;
@@ -15,7 +35,7 @@ export class GeoJsonLayer implements IGeoJsonLayer {
 	android: any;
 	native: any;
 	style: GeometryStyle;
-	constructor(map: MapView, geojson: any, styles?: Partial<IGeometryStyle>);
+	constructor(map: GoogleMap, geojson: any, styles?: Partial<IGeometryStyle>);
 	addLayerToMap: () => void;
 	removeLayerFromMap: () => void;
 }

diff --git a/packages/google-maps-utils/index.ios.ts b/packages/google-maps-utils/index.ios.ts
@@ -1,18 +1,18 @@
 import { Color, encoding } from '@nativescript/core';
-import { MapView } from '@nativescript/google-maps';
+import { GoogleMap, MapView } from '@nativescript/google-maps';
 import { IGeoJsonLayer, IGeometryStyle } from '.';
 import { GoogleMapsUtilsCommon } from './common';
 
 let UNIQUE_STYLE_ID = 0;
 
 export class GoogleMapsUtils extends GoogleMapsUtilsCommon {
-	constructor(private map: MapView) {
+	constructor(private map: GoogleMap) {
 		super();
 	}
 
 	addGeoJsonLayer(geoJson: any) {
 		try {
-			const layer = new GeoJsonLayer(this.map.nativeView, geoJson);
+			const layer = new GeoJsonLayer(this.map.native, geoJson);
 			layer.addLayerToMap();
 			return layer;
 		} catch (error) {
@@ -60,7 +60,7 @@ export class GeoJsonLayer implements IGeoJsonLayer {
 	#native: GMUGeometryRenderer;
 	style: GeometryStyle;
 
-	constructor(private map: MapView, private geometries: any, private styles?: Partial<IGeometryStyle>) {
+	constructor(private map: GoogleMap, private geometries: any, private styles?: Partial<IGeometryStyle>) {
 		this.style = new GeometryStyle(styles);
 
 		const jsonString = new NSString({ UTF8String: JSON.stringify(geometries) });
@@ -72,7 +72,7 @@ export class GeoJsonLayer implements IGeoJsonLayer {
 			feature.style = this.style.native;
 		}
 
-		this.#native = new GMUGeometryRenderer({ map: this.map.nativeView, geometries: features });
+		this.#native = new GMUGeometryRenderer({ map: this.map.native, geometries: features });
 	}
 
 	static fromNative(nativeGeoJsonLayer: GMUGeometryRenderer) {

diff --git a/tools/demo/google-maps-utils/index.ts b/tools/demo/google-maps-utils/index.ts
@@ -1,9 +1,9 @@
 import { DemoSharedBase } from '../utils';
-import { GeoJsonLayer, GeoJsonLayer, GoogleMapsUtils, IGeometryStyle } from '@nativescript/google-maps-utils';
+import { GeoJsonLayer, GeoJsonLayer, ClusterManager, GoogleMapsUtils, IGeometryStyle, ClusterItem, ClusterRenderer } from '@nativescript/google-maps-utils';
 import { Color, LoadEventData } from '@nativescript/core';
-import { CameraUpdate, MapReadyEvent, MapView } from '@nativescript/google-maps';
+import { CameraUpdate, GoogleMap, MapReadyEvent, MapView, Marker } from '@nativescript/google-maps';
 import { australia } from './geojson.example';
-import { intoNativeTileOverlayOptions } from '@nativescript/google-maps/utils';
+import { intoNativeMarkerOptions, intoNativeTileOverlayOptions } from '@nativescript/google-maps/utils';
 import { zoomProperty } from '@nativescript/google-maps/common';
 
 function generateRandomPosition(position, distance) {
@@ -26,6 +26,7 @@ function generateRandomPosition(position, distance) {
 
 export class DemoSharedGoogleMapsUtils extends DemoSharedBase {
 	mapView: MapView;
+	map: GoogleMap;
 	geoJson: GeoJsonLayer;
 	// heatmapProvider: HeatmapTileProvider;
 	heatmapOverlay;
@@ -37,17 +38,43 @@ export class DemoSharedGoogleMapsUtils extends DemoSharedBase {
 		}
 
 		this.geoJson.removeLayerFromMap();
+
+		//creating cluster manager');
+		const clusterManager = new ClusterManager(this.map);
+		const clusterRenderer = new ClusterRenderer(this.map, clusterManager);
+		clusterManager.setRenderer(clusterRenderer);
+
+		//building marker list');
+		const clusterSet: ClusterItem[] = [];
+		for (var i = 0; i < 100; i++) {
+			//creating new markers to cluster
+			const position = generateRandomPosition([-32.093407, 116.240609], 10000);
+
+			const clusterItem = new ClusterItem({
+				position: position,
+				color: 'blue',
+			});
+
+			clusterSet.push(clusterItem);
+		}
+
+		//adding markers to cluster manager
+		clusterManager.addItems(clusterSet);
+
+		//clustering!
+		clusterManager.cluster();
+
 		// this.heatmapProvider.setData(positionSet);
 		// this.heatmapProvider.opacity = 0.1;
 		// Need to clear cache to show adjustments
 		// this.heatmapOverlay.clearTileCache();
 	}
 
 	async onMapReady(args: MapReadyEvent) {
-		this.mapView = args.object as unknown as MapView;
+		this.mapView = args.object as MapView;
 
-		const map = args.map;
-		map.animateCamera(
+		this.map = args.map;
+		this.map.animateCamera(
 			CameraUpdate.fromCoordinate(
 				{
 					lat: -27.74278,
@@ -57,7 +84,7 @@ export class DemoSharedGoogleMapsUtils extends DemoSharedBase {
 			)
 		);
 
-		this.geoJson = new GeoJsonLayer(this.mapView, australia, {
+		this.geoJson = new GeoJsonLayer(this.map, australia, {
 			fillColor: new Color('blue'),
 			strokeColor: new Color('red'),
 			width: 4,