@react-google-maps/marker-clusterer 2.9.0 → 2.11.0

package/src/ClusterIcon.tsx

@@ -4,7 +4,7 @@ import { Cluster } from './Cluster'
 
 import { ClusterIconStyle, ClusterIconInfo } from './types'
 
-export class ClusterIcon {
+export class ClusterIcon extends google.maps.OverlayView {
   cluster: Cluster
   className: string
   clusterClassName: string
@@ -25,144 +25,179 @@ export class ClusterIcon {
   fontStyle: string
   fontFamily: string
   backgroundPosition: string
+  cMouseDownInCluster: boolean | null
+  cDraggingMapByCluster: boolean | null
+  timeOut: number | null
 
   boundsChangedListener: google.maps.MapsEventListener | null
 
   constructor(cluster: Cluster, styles: ClusterIconStyle[]) {
+    super()
     cluster.getClusterer().extend(ClusterIcon, google.maps.OverlayView)
+
     this.cluster = cluster
+
     this.clusterClassName = this.cluster.getClusterer().getClusterClass()
+
     this.className = this.clusterClassName
+
     this.styles = styles
+
     this.center = undefined
+
     this.div = null
+
     this.sums = null
+
     this.visible = false
+
     this.boundsChangedListener = null
+
     this.url = ''
+
     this.height = 0
     this.width = 0
+
     this.anchorText = [0, 0]
     this.anchorIcon = [0, 0]
+
     this.textColor = 'black'
     this.textSize = 11
     this.textDecoration = 'none'
     this.fontWeight = 'bold'
     this.fontStyle = 'normal'
     this.fontFamily = 'Arial,sans-serif'
+
     this.backgroundPosition = '0 0'
-    // @ts-ignore
+
+    this.cMouseDownInCluster = null
+    this.cDraggingMapByCluster = null
+    this.timeOut = null
+
+
     this.setMap(cluster.getMap()) // Note: this causes onAdd to be called
   }
 
-  onAdd() {
-    let cMouseDownInCluster: boolean
-    let cDraggingMapByCluster: boolean
+  onBoundsChanged() {
+    this.cDraggingMapByCluster = this.cMouseDownInCluster
+  }
 
+  onMouseDown() {
+    this.cMouseDownInCluster = true
+
+    this.cDraggingMapByCluster = false
+  }
+
+  onClick(event: Event) {
+    this.cMouseDownInCluster = false
+
+    if (!this.cDraggingMapByCluster) {
+      const markerClusterer = this.cluster.getClusterer()
+
+      /**
+       * This event is fired when a cluster marker is clicked.
+       * @name MarkerClusterer#click
+       * @param {Cluster} c The cluster that was clicked.
+       * @event
+       */
+      google.maps.event.trigger(markerClusterer, 'click', this.cluster)
+      google.maps.event.trigger(markerClusterer, 'clusterclick', this.cluster) // deprecated name
+
+      // The default click handler follows. Disable it by setting
+      // the zoomOnClick property to false.
+      if (markerClusterer.getZoomOnClick()) {
+        // Zoom into the cluster.
+        const maxZoom = markerClusterer.getMaxZoom()
+
+        const bounds = this.cluster.getBounds()
+
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        markerClusterer.getMap().fitBounds(bounds)
+
+        // There is a fix for Issue 170 here:
+        this.timeOut = window.setTimeout(() => {
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore
+          markerClusterer.getMap().fitBounds(bounds)
+
+          // Don't zoom beyond the max zoom level
+          if (
+            maxZoom !== null &&
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            markerClusterer.getMap().getZoom() > maxZoom
+          ) {
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            markerClusterer.getMap().setZoom(maxZoom + 1)
+          }
+        }, 100)
+      }
+
+      // Prevent event propagation to the map:
+      event.cancelBubble = true
+
+      if (event.stopPropagation) {
+        event.stopPropagation()
+      }
+    }
+  }
+
+  onMouseOver() {
+    /**
+     * This event is fired when the mouse moves over a cluster marker.
+     * @name MarkerClusterer#mouseover
+     * @param {Cluster} c The cluster that the mouse moved over.
+     * @event
+     */
+    google.maps.event.trigger(
+      this.cluster.getClusterer(),
+      'mouseover',
+      this.cluster
+    )
+  }
+
+  onMouseOut() {
+    /**
+     * This event is fired when the mouse moves out of a cluster marker.
+     * @name MarkerClusterer#mouseout
+     * @param {Cluster} c The cluster that the mouse moved out of.
+     * @event
+     */
+    google.maps.event.trigger(
+      this.cluster.getClusterer(),
+      'mouseout',
+      this.cluster
+    )
+  }
+
+  onAdd() {
     this.div = document.createElement('div')
     this.div.className = this.className
     if (this.visible) {
       this.show()
     }
 
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
     this.getPanes().overlayMouseTarget.appendChild(this.div)
-
     // Fix for Issue 157
     this.boundsChangedListener = google.maps.event.addListener(
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
       this.getMap(),
-      'boundschanged',
-      function boundsChanged() {
-        cDraggingMapByCluster = cMouseDownInCluster
-      }
+      'bounds_changed',
+      this.onBoundsChanged
     )
 
-    google.maps.event.addDomListener(this.div, 'mousedown', function onMouseDown() {
-      cMouseDownInCluster = true
-      cDraggingMapByCluster = false
-    })
-
-    google.maps.event.addDomListener(
-      this.div,
-      'click',
-      (event: Event) => {
-        cMouseDownInCluster = false
-
-        if (!cDraggingMapByCluster) {
-          const markerClusterer = this.cluster.getClusterer()
-
-          /**
-           * This event is fired when a cluster marker is clicked.
-           * @name MarkerClusterer#click
-           * @param {Cluster} c The cluster that was clicked.
-           * @event
-           */
-          google.maps.event.trigger(markerClusterer, 'click', this.cluster)
-          google.maps.event.trigger(markerClusterer, 'clusterclick', this.cluster) // deprecated name
-
-          // The default click handler follows. Disable it by setting
-          // the zoomOnClick property to false.
-          if (markerClusterer.getZoomOnClick()) {
-            // Zoom into the cluster.
-            const maxZoom = markerClusterer.getMaxZoom()
-
-            const bounds = this.cluster.getBounds()
+    this.div.addEventListener('mousedown', this.onMouseDown)
 
-            // @ts-ignore
-            markerClusterer.getMap().fitBounds(bounds)
-
-            // There is a fix for Issue 170 here:
-            setTimeout(function timeout() {
-              // @ts-ignore
-              markerClusterer.getMap().fitBounds(bounds)
-
-              // Don't zoom beyond the max zoom level
-              // @ts-ignore
-              if (maxZoom !== null && markerClusterer.getMap().getZoom() > maxZoom) {
-                // @ts-ignore
-                markerClusterer.getMap().setZoom(maxZoom + 1)
-              }
-            }, 100)
-          }
+    this.div.addEventListener('click', this.onClick)
 
-          // Prevent event propagation to the map:
-          event.cancelBubble = true
+    this.div.addEventListener('mouseover', this.onMouseOver)
 
-          if (event.stopPropagation) {
-            event.stopPropagation()
-          }
-        }
-      }
-    )
-
-    google.maps.event.addDomListener(
-      this.div,
-      'mouseover',
-      () => {
-        /**
-         * This event is fired when the mouse moves over a cluster marker.
-         * @name MarkerClusterer#mouseover
-         * @param {Cluster} c The cluster that the mouse moved over.
-         * @event
-         */
-        google.maps.event.trigger(this.cluster.getClusterer(), 'mouseover', this.cluster)
-      }
-    )
-
-    google.maps.event.addDomListener(
-      this.div,
-      'mouseout',
-      () => {
-        /**
-         * This event is fired when the mouse moves out of a cluster marker.
-         * @name MarkerClusterer#mouseout
-         * @param {Cluster} c The cluster that the mouse moved out of.
-         * @event
-         */
-        google.maps.event.trigger(this.cluster.getClusterer(), 'mouseout', this.cluster)
-      }
-    )
+    this.div.addEventListener('mouseout', this.onMouseOut)
   }
 
   onRemove() {
@@ -173,20 +208,32 @@ export class ClusterIcon {
         google.maps.event.removeListener(this.boundsChangedListener)
       }
 
-      google.maps.event.clearInstanceListeners(this.div)
+      this.div.removeEventListener('mousedown', this.onMouseDown)
+
+      this.div.removeEventListener('click', this.onClick)
+
+      this.div.removeEventListener('mouseover', this.onMouseOver)
+
+      this.div.removeEventListener('mouseout', this.onMouseOut)
 
       this.div.parentNode.removeChild(this.div)
 
+      if (this.timeOut !== null) {
+        window.clearTimeout(this.timeOut)
+
+        this.timeOut = null
+      }
+
       this.div = null
     }
   }
 
   draw() {
     if (this.visible && this.div !== null && this.center) {
-      const { x, y } = this.getPosFromLatLng(this.center)
+      const pos = this.getPosFromLatLng(this.center)
 
-      this.div.style.top = y + 'px'
-      this.div.style.left = x + 'px'
+      this.div.style.top = pos !== null ? `${pos.y}px` : '0'
+      this.div.style.left = pos !== null ? `${pos.x}px` : '0'
     }
   }
 
@@ -210,7 +257,11 @@ export class ClusterIcon {
 
       const pos = this.getPosFromLatLng(this.center)
 
-      if (this.sums === null || typeof this.sums.title === 'undefined' || this.sums.title === '') {
+      if (
+        this.sums === null ||
+        typeof this.sums.title === 'undefined' ||
+        this.sums.title === ''
+      ) {
         divTitle = this.cluster.getClusterer().getTitle()
       } else {
         divTitle = this.sums.title
@@ -218,12 +269,15 @@ export class ClusterIcon {
 
       this.div.style.cursor = 'pointer'
       this.div.style.position = 'absolute'
-      this.div.style.top = `${pos.y}px`
-      this.div.style.left = `${pos.x}px`
+
+      this.div.style.top = pos !== null ? `${pos.y}px` : '0'
+      this.div.style.left = pos !== null ? `${pos.x}px` : '0'
+
       this.div.style.width = `${this.width}px`
       this.div.style.height = `${this.height}px`
 
       const img = document.createElement('img')
+
       img.alt = divTitle
       img.src = this.url
       img.style.position = 'absolute'
@@ -231,10 +285,13 @@ export class ClusterIcon {
       img.style.left = `${spriteH}px`
 
       if (!this.cluster.getClusterer().enableRetinaIcons) {
-        img.style.clip = `rect(-${spriteV}px, -${spriteH + this.width}px, -${spriteV + this.height}, -${spriteH})`
+        img.style.clip = `rect(-${spriteV}px, -${spriteH + this.width}px, -${
+          spriteV + this.height
+        }, -${spriteH})`
       }
 
       const textElm = document.createElement('div')
+
       textElm.style.position = 'absolute'
       textElm.style.top = `${this.anchorText[0]}px`
       textElm.style.left = `${this.anchorText[1]}px`
@@ -250,9 +307,12 @@ export class ClusterIcon {
       textElm.innerText = `${this.sums?.text}`
 
       this.div.innerHTML = ''
+
       this.div.appendChild(img)
       this.div.appendChild(textElm)
+
       this.div.title = divTitle
+
       this.div.style.display = ''
     }
 
@@ -261,14 +321,18 @@ export class ClusterIcon {
 
   useStyle(sums: ClusterIconInfo) {
     this.sums = sums
+
     const styles = this.cluster.getClusterer().getStyles()
-    const style = styles[Math.min(styles.length - 1, Math.max(0, sums.index - 1))]
+
+    const style =
+      styles[Math.min(styles.length - 1, Math.max(0, sums.index - 1))]
 
     this.url = style.url
     this.height = style.height
     this.width = style.width
 
-    if (style.className) this.className = `${this.clusterClassName} ${style.className}`
+    if (style.className)
+      this.className = `${this.clusterClassName} ${style.className}`
 
     this.anchorText = style.anchorText || [0, 0]
     this.anchorIcon = style.anchorIcon || [this.height / 2, this.width / 2]
@@ -292,17 +356,14 @@ export class ClusterIcon {
     this.center = center
   }
 
-  getPosFromLatLng(latlng: google.maps.LatLng): google.maps.Point {
-    // @ts-ignore
+  getPosFromLatLng(latlng: google.maps.LatLng): google.maps.Point | null {
     const pos = this.getProjection().fromLatLngToDivPixel(latlng)
 
-    pos.x -= this.anchorIcon[1]
-
-    pos.y -= this.anchorIcon[0]
+    if (pos !== null) {
+      pos.x -= this.anchorIcon[1]
 
-    // pos.x = pos.x
-
-    // pos.y = pos.y
+      pos.y -= this.anchorIcon[0]
+    }
 
     return pos
   }

package/src/Clusterer.tsx

@@ -1,6 +1,7 @@
 /* global google */
 /* eslint-disable filenames/match-regex */
 import { Cluster } from './Cluster'
+import { ClusterIcon } from './ClusterIcon'
 
 import {
   MarkerExtended,
@@ -44,7 +45,7 @@ const IMAGE_SIZES = [53, 56, 66, 78, 90]
 
 const CLUSTERER_CLASS = 'cluster'
 
-export class Clusterer {
+export class Clusterer extends google.maps.OverlayView {
   markers: MarkerExtended[]
   clusters: Cluster[]
   listeners: google.maps.MapsEventListener[]
@@ -73,6 +74,8 @@ export class Clusterer {
     optMarkers: MarkerExtended[] = [],
     optOptions: ClustererOptions = {}
   ) {
+    super()
+
     this.extend(Clusterer, google.maps.OverlayView)
 
     this.markers = []
@@ -134,50 +137,56 @@ export class Clusterer {
     this.setupStyles()
 
     this.addMarkers(optMarkers, true)
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
     this.setMap(map) // Note: this causes onAdd to be called
   }
 
+  onZoomChanged() {
+    this.resetViewport(false)
+
+    // Workaround for this Google bug: when map is at level 0 and "-" of
+    // zoom slider is clicked, a "zoom_changed" event is fired even though
+    // the map doesn't zoom out any further. In this situation, no "idle"
+    // 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')
+    ) {
+      google.maps.event.trigger(this, 'idle')
+    }
+  }
+
+  onIdle() {
+    this.redraw()
+  }
+
   onAdd() {
-    // @ts-ignore
-    this.activeMap = this.getMap()
+    const map = this.getMap()
+
+    this.activeMap = map
 
     this.ready = true
 
     this.repaint()
 
-    // Add the map event listeners
-    this.listeners = [
-      google.maps.event.addListener(
-        // @ts-ignore
-        this.getMap(),
-        'zoom_changed',
-        () => {
-          this.resetViewport(false)
-          // Workaround for this Google bug: when map is at level 0 and "-" of
-          // zoom slider is clicked, a "zoom_changed" event is fired even though
-          // the map doesn't zoom out any further. In this situation, no "idle"
-          // event is triggered so the cluster markers that have been removed
-          // do not get redrawn. Same goes for a zoom in at maxZoom.
-          if (
-            // @ts-ignore
-            this.getMap().getZoom() === (this.get('minZoom') || 0) ||
-            // @ts-ignore
-            this.getMap().getZoom() === this.get('maxZoom')
-          ) {
-            google.maps.event.trigger(this, 'idle')
-          }
-        }
-      ),
-      google.maps.event.addListener(
-        // @ts-ignore
-        this.getMap(),
-        'idle',
-        () => {
-          this.redraw()
-        }
-      ),
-    ]
+    if (map !== null) {
+      // Add the map event listeners
+      this.listeners = [
+        google.maps.event.addListener(
+          map,
+          'zoom_changed',
+          this.onZoomChanged
+        ),
+        google.maps.event.addListener(
+          map,
+          'idle',
+          this.onIdle
+        ),
+      ]
+    }
   }
 
   onRemove() {
@@ -236,6 +245,7 @@ export class Clusterer {
       }
     }
 
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
     this.getMap().fitBounds(bounds)
   }
@@ -489,6 +499,7 @@ export class Clusterer {
   }
 
   getExtendedBounds(bounds: google.maps.LatLngBounds): google.maps.LatLngBounds {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
     const projection = this.getProjection()
     // Convert the points to pixels and the extend out by the grid size.
@@ -497,27 +508,43 @@ export class Clusterer {
       new google.maps.LatLng(bounds.getNorthEast().lat(), bounds.getNorthEast().lng())
     )
 
-    trPix.x += this.gridSize
-    trPix.y -= this.gridSize
+    if (trPix !== null) {
+      trPix.x += this.gridSize
+      trPix.y -= this.gridSize
+    }
 
     const blPix = projection.fromLatLngToDivPixel(
       // Turn the bounds into latlng.
       new google.maps.LatLng(bounds.getSouthWest().lat(), bounds.getSouthWest().lng())
     )
 
-    blPix.x -= this.gridSize
-    blPix.y += this.gridSize
+    if (blPix !== null) {
+      blPix.x -= this.gridSize
+      blPix.y += this.gridSize
+    }
+
 
     // Extend the bounds to contain the new bounds.
-    bounds.extend(
+    if (trPix !== null) {
       // Convert the pixel points back to LatLng nw
-      projection.fromDivPixelToLatLng(trPix)
-    )
+      const point1 = projection.fromDivPixelToLatLng(trPix)
 
-    bounds.extend(
+      if (point1 !== null) {
+        bounds.extend(point1)
+      }
+    }
+
+    if (blPix !== null) {
       // Convert the pixel points back to LatLng sw
-      projection.fromDivPixelToLatLng(blPix)
-    )
+      const point2 =  projection.fromDivPixelToLatLng(blPix)
+
+      if (point2 !== null) {
+        bounds.extend(
+          point2
+        )
+      }
+    }
+
 
     return bounds
   }
@@ -628,44 +655,42 @@ export class Clusterer {
       if (this.timerRefStatic !== null) {
         window.clearTimeout(this.timerRefStatic)
 
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
         delete this.timerRefStatic
       }
     }
 
+    const map = this.getMap()
+
+    const bounds = map !== null && 'getBounds' in map ? map.getBounds() : null
+
     // Get our current map view bounds.
     // Create a new bounds object so we don't affect the map.
     //
     // See Comments 9 & 11 on Issue 3651 relating to this workaround for a Google Maps bug:
     const mapBounds =
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
-      this.getMap().getZoom() > 3
+      map.getZoom() > 3
         ? new google.maps.LatLngBounds(
-            // @ts-ignore
-            this.getMap()
-              .getBounds()
-              .getSouthWest(),
-            // @ts-ignore
-            this.getMap()
-              .getBounds()
-              .getNorthEast()
+            bounds?.getSouthWest(),
+            bounds?.getNorthEast()
           )
         : new google.maps.LatLngBounds(
             new google.maps.LatLng(85.02070771743472, -178.48388434375),
             new google.maps.LatLng(-85.08136444384544, 178.00048865625)
           )
 
-    const bounds = this.getExtendedBounds(mapBounds)
+    const extendedMapBounds = this.getExtendedBounds(mapBounds)
 
     const iLast = Math.min(iFirst + this.batchSize, this.markers.length)
 
     for (let i = iFirst; i < iLast; i++) {
       const marker = this.markers[i]
 
-      if (!marker.isAdded && this.isMarkerInBounds(marker, bounds)) {
-        if (!this.ignoreHidden || (this.ignoreHidden && marker.getVisible())) {
-          this.addToClosestCluster(marker)
-        }
+      if (!marker.isAdded && this.isMarkerInBounds(marker, extendedMapBounds) && (!this.ignoreHidden || (this.ignoreHidden && marker.getVisible()))) {
+        this.addToClosestCluster(marker)
       }
     }
 
@@ -694,16 +719,13 @@ export class Clusterer {
     }
   }
 
-  extend(obj1: any, obj2: any): any {
-    return function applyExtend(object: any) {
-      // eslint-disable-next-line guard-for-in
+  extend<A extends typeof ClusterIcon | typeof Clusterer>(obj1: A, obj2: typeof google.maps.OverlayView) {
+    return function applyExtend(this: A, object: typeof google.maps.OverlayView) {
       for (const property in object.prototype) {
-        // @ts-ignore
-        this.prototype[property] = object.prototype[property]
+        this.prototype.set(property, object.prototype.get(property))
       }
 
-      // @ts-ignore
       return this
-    }.apply(obj1, [obj2])
+    }.apply<A, [typeof google.maps.OverlayView], any>(obj1, [obj2])
   }
 }

package/src/index.ts

@@ -43,9 +43,9 @@ export { Cluster } from './Cluster'
 export { ClusterIcon } from './ClusterIcon'
 
 export {
-  ClusterIconInfo,
-  ClusterIconStyle,
-  MarkerExtended,
-  TCalculator,
-  ClustererOptions,
+  type ClusterIconInfo,
+  type ClusterIconStyle,
+  type MarkerExtended,
+  type TCalculator,
+  type ClustererOptions,
 } from './types'