@react-google-maps/marker-clusterer 2.11.1 → 2.11.4

package/src/Clusterer.tsx

@@ -15,7 +15,7 @@ import {
  * Supports up to 9007199254740991 (Number.MAX_SAFE_INTEGER) markers
  * which is not a problem as max array length is 4294967296 (2**32)
  */
-const CALCULATOR = function CALCULATOR(
+function CALCULATOR(
   markers: MarkerExtended[],
   numStyles: number
 ): ClusterIconInfo {
@@ -45,7 +45,7 @@ const IMAGE_SIZES = [53, 56, 66, 78, 90]
 
 const CLUSTERER_CLASS = 'cluster'
 
-export class Clusterer extends google.maps.OverlayView {
+export class Clusterer {
   markers: MarkerExtended[]
   clusters: Cluster[]
   listeners: google.maps.MapsEventListener[]
@@ -74,8 +74,6 @@ export class Clusterer extends google.maps.OverlayView {
     optMarkers: MarkerExtended[] = [],
     optOptions: ClustererOptions = {}
   ) {
-    super()
-
     this.extend(Clusterer, google.maps.OverlayView)
 
     this.markers = []
@@ -136,9 +134,64 @@ export class Clusterer extends google.maps.OverlayView {
 
     this.setupStyles()
 
-    this.addMarkers(optMarkers, true)
-
-    this.setMap(map) // Note: this causes onAdd to be called
+    this.addMarkers(optMarkers, true);
+
+    (this as unknown as google.maps.OverlayView).setMap(map) // Note: this causes onAdd to be called
+
+    this.onZoomChanged = this.onZoomChanged.bind(this)
+    this.onIdle = this.onIdle.bind(this)
+    this.onAdd = this.onAdd.bind(this)
+    this.onRemove = this.onRemove.bind(this)
+    this.draw = this.draw.bind(this)
+    this.setupStyles = this.setupStyles.bind(this)
+    this.fitMapToMarkers = this.fitMapToMarkers.bind(this)
+    this.getGridSize = this.getGridSize.bind(this)
+    this.setGridSize = this.setGridSize.bind(this)
+    this.getMinimumClusterSize = this.getMinimumClusterSize.bind(this)
+    this.setMinimumClusterSize = this.setMinimumClusterSize.bind(this)
+    this.getMaxZoom = this.getMaxZoom.bind(this)
+    this.setMaxZoom = this.setMaxZoom.bind(this)
+    this.getStyles = this.getStyles.bind(this)
+    this.setStyles = this.setStyles.bind(this)
+    this.getTitle = this.getTitle.bind(this)
+    this.setTitle = this.setTitle.bind(this)
+    this.getZoomOnClick = this.getZoomOnClick.bind(this)
+    this.setZoomOnClick = this.setZoomOnClick.bind(this)
+    this.getAverageCenter = this.getAverageCenter.bind(this)
+    this.setAverageCenter = this.setAverageCenter.bind(this)
+    this.getIgnoreHidden = this.getIgnoreHidden.bind(this)
+    this.setIgnoreHidden = this.setIgnoreHidden.bind(this)
+    this.getEnableRetinaIcons = this.getEnableRetinaIcons.bind(this)
+    this.setEnableRetinaIcons = this.setEnableRetinaIcons.bind(this)
+    this.getImageExtension = this.getImageExtension.bind(this)
+    this.setImageExtension = this.setImageExtension.bind(this)
+    this.getImagePath = this.getImagePath.bind(this)
+    this.setImagePath = this.setImagePath.bind(this)
+    this.getImageSizes = this.getImageSizes.bind(this)
+    this.setImageSizes = this.setImageSizes.bind(this)
+    this.getCalculator = this.getCalculator.bind(this)
+    this.setCalculator = this.setCalculator.bind(this)
+    this.getBatchSizeIE = this.getBatchSizeIE.bind(this)
+    this.setBatchSizeIE = this.setBatchSizeIE.bind(this)
+    this.getClusterClass = this.getClusterClass.bind(this)
+    this.setClusterClass = this.setClusterClass.bind(this)
+    this.getMarkers = this.getMarkers.bind(this)
+    this.getTotalMarkers = this.getTotalMarkers.bind(this)
+    this.getClusters = this.getClusters.bind(this)
+    this.getTotalClusters = this.getTotalClusters.bind(this)
+    this.addMarker = this.addMarker.bind(this)
+    this.addMarkers = this.addMarkers.bind(this)
+    this.pushMarkerTo = this.pushMarkerTo.bind(this)
+    this.removeMarker = this.removeMarker.bind(this)
+    this.removeMarkers = this.removeMarkers.bind(this)
+    this.clearMarkers = this.clearMarkers.bind(this)
+    this.repaint = this.repaint.bind(this)
+    this.getExtendedBounds = this.getExtendedBounds.bind(this)
+    this.redraw = this.redraw.bind(this)
+    this.resetViewport = this.resetViewport.bind(this)
+    this.addToClosestCluster = this.addToClosestCluster.bind(this)
+    this.createClusters = this.createClusters.bind(this)
+    this.extend = this.extend.bind(this)
   }
 
   onZoomChanged() {
@@ -150,9 +203,8 @@ export class Clusterer extends google.maps.OverlayView {
     // event is triggered so the cluster markers that have been removed
     // do not get redrawn. Same goes for a zoom in at maxZoom.
     if (
-      this.getMap()?.getZoom() === (this.get('minZoom') || 0) ||
-
-      this.getMap()?.getZoom() === this.get('maxZoom')
+      (this as unknown as google.maps.OverlayView).getMap()?.getZoom() === ((this as unknown as google.maps.OverlayView).get('minZoom') || 0) ||
+      (this as unknown as google.maps.OverlayView).getMap()?.getZoom() === (this as unknown as google.maps.OverlayView).get('maxZoom')
     ) {
       google.maps.event.trigger(this, 'idle')
     }
@@ -163,7 +215,7 @@ export class Clusterer extends google.maps.OverlayView {
   }
 
   onAdd() {
-    const map = this.getMap()
+    const map = (this as unknown as google.maps.OverlayView).getMap()
 
     this.activeMap = map
 
@@ -215,8 +267,7 @@ export class Clusterer extends google.maps.OverlayView {
     this.ready = false
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  draw() {}
+  draw() { return }
 
   setupStyles() {
     if (this.styles.length > 0) {
@@ -225,7 +276,7 @@ export class Clusterer extends google.maps.OverlayView {
 
     for (let i = 0; i < this.imageSizes.length; i++) {
       this.styles.push({
-        url: this.imagePath + (i + 1) + '.' + this.imageExtension,
+        url: `${this.imagePath + (i + 1)}.${this.imageExtension}`,
         height: this.imageSizes[i],
         width: this.imageSizes[i],
       })
@@ -245,7 +296,7 @@ export class Clusterer extends google.maps.OverlayView {
       }
     }
 
-    const map = this.getMap()
+    const map = (this as unknown as google.maps.OverlayView).getMap()
 
     if (map !== null && 'fitBounds' in map) {
       map.fitBounds(bounds)
@@ -502,7 +553,7 @@ export class Clusterer extends google.maps.OverlayView {
   }
 
   getExtendedBounds(bounds: google.maps.LatLngBounds): google.maps.LatLngBounds {
-    const projection = this.getProjection()
+    const projection = (this as unknown as google.maps.OverlayView).getProjection()
 
     // Convert the points to pixels and the extend out by the grid size.
     const trPix = projection.fromLatLngToDivPixel(
@@ -663,7 +714,7 @@ export class Clusterer extends google.maps.OverlayView {
       }
     }
 
-    const map = this.getMap()
+    const map = (this as unknown as google.maps.OverlayView).getMap()
 
     const bounds = map !== null && 'getBounds' in map ? map.getBounds() : null
 
@@ -719,10 +770,10 @@ export class Clusterer extends google.maps.OverlayView {
     }
   }
 
-  extend<A extends typeof ClusterIcon | typeof Clusterer>(obj1: A, obj2: typeof google.maps.OverlayView) {
-    return function applyExtend(this: A, object: typeof google.maps.OverlayView) {
+  extend<A extends typeof ClusterIcon | typeof Clusterer>(obj1: A, obj2: typeof google.maps.OverlayView): A {
+    return function applyExtend(this: A, object: typeof google.maps.OverlayView): A {
       for (const property in object.prototype) {
-        this.prototype.set(property, object.prototype.get(property))
+        (this.prototype as unknown as google.maps.OverlayView).set(property, object.prototype.get(property))
       }
 
       return this