feat(perf): new default clustering algo (#152)

Author: HusamElbashir

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"
   },

pnpm-lock.yaml

@@ -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));