how can I calibrate clusters, I have 4000 points in poland.
import { MapMarker } from "@/types/workspace-map-types";

type Cluster = {
	lat: number;
	lng: number;
	markers: MapMarker[];
};

function getThreshold(zoom: number): number {
	if (zoom < 1) return 4;
	if (zoom < 2) return 2;
	if (zoom < 3) return 1;
	if (zoom < 5) return 0.4;
	if (zoom < 7) return 0.15;
	if (zoom < 9) return 0.08;
	if (zoom < 11) return 0.04;
	if (zoom < 13) return 0.01;
	if (zoom < 15) return 0.005;
	if (zoom < 17) return 0.002;
	if (zoom < 20) return 0.001;
	return 0;
}

export function AppleClusterMarkers(markers: MapMarker[], zoomLevel: number): Cluster[] {
	const threshold = getThreshold(zoomLevel);
	const clusters: Cluster[] = [];

	markers.forEach((marker) => {
		const match = clusters.find(
			(cluster) => Math.abs(cluster.lat - marker.lat) < threshold && Math.abs(cluster.lng - marker.lng) < threshold
		);

		if (match) {
			match.markers.push(marker);
		} else {
			clusters.push({ lat: marker.lat, lng: marker.lng, markers: [marker] });
		}
	});

	return clusters;
}


import { useEffect, useRef } from "react";

import { MapProps } from "@/types/workspace-map-types";

import { AppleClusterMarkers } from "../utils/appleClusterMarkers";
import { countryCenters, countrySpans } from "../utils/map-utils";

const APPLE_MAPKIT_TOKEN = import.meta.env.VITE_APPLE_MAPKIT_TOKEN;

declare global {
	interface Window {
		mapkit: any;
	}
}

function MapAppleCluster({ selectedCountryId, markerLimit, markers }: MapProps) {
	const mapRef = useRef<HTMLDivElement>(null);
	const mapInstanceRef = useRef<any>(null);
	const center = countryCenters[selectedCountryId ?? "PL"];
	const span = countrySpans[selectedCountryId ?? "PL"];

	useEffect(() => {
		if (!window.mapkit || !mapRef.current || mapInstanceRef.current) return;

		window.mapkit.init({
			authorizationCallback: (done: (token: string) => void) => {
				done(APPLE_MAPKIT_TOKEN);
			},
		});

		mapInstanceRef.current = new window.mapkit.Map(mapRef.current, {
			region: new window.mapkit.CoordinateRegion(
				new window.mapkit.Coordinate(center[0], center[1]),
				new window.mapkit.CoordinateSpan(span[0], span[1])
			),
			showsCompass: window.mapkit.FeatureVisibility.Visible,
			showsZoomControl: true,
			showsMapTypeControl: true,
		});
	}, []);

	useEffect(() => {
		const map = mapInstanceRef.current;
		if (!map || !window.mapkit) return;

		const updateMapRegion = () => {
			const region = new window.mapkit.CoordinateRegion(
				new window.mapkit.Coordinate(center[0], center[1]),
				new window.mapkit.CoordinateSpan(span[0], span[1])
			);
			map.setRegionAnimated(region);
		};

		const createAnnotation = (cluster: ReturnType<typeof AppleClusterMarkers>[number], zoom: number): any => {
			const coordinate = new window.mapkit.Coordinate(cluster.lat, cluster.lng);
			const annotation = new window.mapkit.MarkerAnnotation(coordinate, {
				title: cluster.markers.length > 1 ? `${cluster.markers.length} locations` : cluster.markers[0].name,
				subtitle: getSubtitle(cluster),
				color: getColor(cluster),
			});

			if (cluster.markers.length > 1) {
				annotation.addEventListener("select", () => {
					map.setRegionAnimated(
						new window.mapkit.CoordinateRegion(
							coordinate,
							new window.mapkit.CoordinateSpan(map.region.span.latitudeDelta / 2, map.region.span.longitudeDelta / 2)
						)
					);
				});
			}

			return annotation;
		};

		const updateClusters = () => {
			map.removeAnnotations(map.annotations);

			const span = map.region.span;
			const approxZoom = Math.max(1, Math.round(10 / span.latitudeDelta));
			const limitedMarkers = markers.slice(0, markerLimit);
			const clusters = AppleClusterMarkers(limitedMarkers, approxZoom);

			const annotations = clusters.map((cluster) => createAnnotation(cluster, approxZoom));
			map.addAnnotations(annotations);
		};

		updateMapRegion();
		updateClusters();
		map.addEventListener("region-change-end", updateClusters);

		return () => {
			map.removeEventListener("region-change-end", updateClusters);
		};
	}, [selectedCountryId, markers, markerLimit]);

	return <div ref={mapRef} style={{ width: "100%", height: "100vh" }} />;
}

function getSubtitle(cluster: any): string {
	if (cluster.markers.length > 1) {
		return "Click to zoom in";
	}
	const marker = cluster.markers[0];
	return `${marker.available ? "Available" : "Not available"} • Max: ${marker.maxPower ?? "?"} kW`;
}

function getColor(cluster: any): string {
	if (cluster.markers.length > 1) {
		return "#007AFF";
	}
	return cluster.markers[0].available ? "#34C759" : "#FF3B30";
}

export default MapAppleCluster;