From 3feb791828f45066170e89aa94120a3cec36c447 Mon Sep 17 00:00:00 2001
From: Husam Ibrahim <39692071+HusamIbrahim@users.noreply.github.com>
Date: Sat, 12 Aug 2023 05:57:04 +0300
Subject: [PATCH] feat(perf): new default clustering algo (#152)

---
 package.json                    |  2 +-
 pnpm-lock.yaml                  | 20 ++++++++++----------
 src/components/MarkerCluster.ts | 17 +++++++++++++++--
 3 files changed, 26 insertions(+), 13 deletions(-)

diff --git a/package.json b/package.json
index 751fb37..a4f3c12 100644
--- a/package.json
+++ b/package.json
@@ -52,7 +52,7 @@
   },
   "dependencies": {
     "@googlemaps/js-api-loader": "^1.12.11",
-    "@googlemaps/markerclusterer": "^2.0.6",
+    "@googlemaps/markerclusterer": "^2.4.0",
     "fast-deep-equal": "^3.1.3",
     "vite-plugin-css-injected-by-js": "^3.2.1"
   },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0de47e9..1c2cf61 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -9,8 +9,8 @@ dependencies:
     specifier: ^1.12.11
     version: 1.12.11
   '@googlemaps/markerclusterer':
-    specifier: ^2.0.6
-    version: 2.0.6
+    specifier: ^2.4.0
+    version: 2.4.0
   fast-deep-equal:
     specifier: ^3.1.3
     version: 3.1.3
@@ -482,11 +482,11 @@ packages:
       fast-deep-equal: 3.1.3
     dev: false
 
-  /@googlemaps/markerclusterer@2.0.6:
-    resolution: {integrity: sha512-kO8Q77V3aqR2tVZ3SDXs9ycCiWYpd+FadxIJVtDKlO9LlMs415GS686+XvDLMLorR/RvwQHkquHZM8RbZ3bCrg==}
+  /@googlemaps/markerclusterer@2.4.0:
+    resolution: {integrity: sha512-yjHrqaaYMzclbPERoCP/6r2w+wJfTCW/+Wblr7eJ4dyQcRFeOxZ8bsdoqvsyj1UbgNt91ly2aiww8h0uDOD6zw==}
     dependencies:
       fast-deep-equal: 3.1.3
-      supercluster: 7.1.5
+      supercluster: 8.0.1
     dev: false
 
   /@hutson/parse-repository-url@3.0.2:
@@ -2687,8 +2687,8 @@ packages:
     engines: {'0': node >= 0.2.0}
     dev: true
 
-  /kdbush@3.0.0:
-    resolution: {integrity: sha512-hRkd6/XW4HTsA9vjVpY9tuXJYLSlelnkTmVFu4M9/7MIYQtFcHpbugAU7UbOfjOiVSVYl2fqgBuJ32JUmRo5Ew==}
+  /kdbush@4.0.2:
+    resolution: {integrity: sha512-WbCVYJ27Sz8zi9Q7Q0xHC+05iwkm3Znipc2XTlrnJbsHMYktW4hPhXUE8Ys1engBrvffoSCqbil1JQAa7clRpA==}
     dev: false
 
   /kind-of@6.0.3:
@@ -3769,10 +3769,10 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
-  /supercluster@7.1.5:
-    resolution: {integrity: sha512-EulshI3pGUM66o6ZdH3ReiFcvHpM3vAigyK+vcxdjpJyEbIIrtbmBdY23mGgnI24uXiGFvrGq9Gkum/8U7vJWg==}
+  /supercluster@8.0.1:
+    resolution: {integrity: sha512-IiOea5kJ9iqzD2t7QJq/cREyLHTtSmUT6gQsweojg9WH2sYJqZK9SswTu6jrscO6D1G5v5vYZ9ru/eq85lXeZQ==}
     dependencies:
-      kdbush: 3.0.0
+      kdbush: 4.0.2
     dev: false
 
   /supports-color@5.5.0:
diff --git a/src/components/MarkerCluster.ts b/src/components/MarkerCluster.ts
index a24fe23..06f7909 100644
--- a/src/components/MarkerCluster.ts
+++ b/src/components/MarkerCluster.ts
@@ -1,5 +1,10 @@
 import { defineComponent, PropType, ref, provide, inject, watch, markRaw, onBeforeUnmount } from "vue";
-import { MarkerClusterer, MarkerClustererOptions, MarkerClustererEvents } from "@googlemaps/markerclusterer";
+import {
+  MarkerClusterer,
+  MarkerClustererOptions,
+  MarkerClustererEvents,
+  SuperClusterViewportAlgorithm,
+} from "@googlemaps/markerclusterer";
 import { mapSymbol, apiSymbol, markerClusterSymbol } from "../shared/index";
 
 const markerClusterEvents = Object.values(MarkerClustererEvents);
@@ -24,7 +29,15 @@ export default defineComponent({
       map,
       () => {
         if (map.value) {
-          markerCluster.value = markRaw(new MarkerClusterer({ map: map.value, ...props.options }));
+          markerCluster.value = markRaw(
+            new MarkerClusterer({
+              map: map.value,
+              // Better perf than the default `SuperClusterAlgorithm`. See:
+              // https://github.com/googlemaps/js-markerclusterer/pull/640
+              algorithm: new SuperClusterViewportAlgorithm(props.options.algorithmOptions ?? {}),
+              ...props.options,
+            })
+          );
 
           markerClusterEvents.forEach((event) => {
             markerCluster.value?.addListener(event, (e: unknown) => emit(event, e));