@react-google-maps/marker-clusterer 2.8.0 → 2.10.1

package/src/ClusterIcon.tsx

@@ -25,6 +25,9 @@ export class ClusterIcon {
   fontStyle: string
   fontFamily: string
   backgroundPosition: string
+  cMouseDownInCluster: boolean | null
+  cDraggingMapByCluster: boolean | null
+  timeOut: number | null
 
   boundsChangedListener: google.maps.MapsEventListener | null
 
@@ -51,118 +54,135 @@ export class ClusterIcon {
     this.fontStyle = 'normal'
     this.fontFamily = 'Arial,sans-serif'
     this.backgroundPosition = '0 0'
+
+    this.cMouseDownInCluster = null
+    this.cDraggingMapByCluster = null
+    this.timeOut = null
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
     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)
-          }
-
-          // Prevent event propagation to the map:
-          event.cancelBubble = true
-
-          if (event.stopPropagation) {
-            event.stopPropagation()
-          }
-        }
-      }
-    )
+    this.div.addEventListener('click', this.onClick)
 
-    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)
-      }
-    )
+    this.div.addEventListener('mouseover', this.onMouseOver)
 
-    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,10 +193,22 @@ 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
     }
   }
@@ -185,8 +217,8 @@ export class ClusterIcon {
     if (this.visible && this.div !== null && this.center) {
       const { x, y } = this.getPosFromLatLng(this.center)
 
-      this.div.style.top = y + 'px'
-      this.div.style.left = x + 'px'
+      this.div.style.top = `${y}px`
+      this.div.style.left = `${x}px`
     }
   }
 
@@ -210,7 +242,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
@@ -231,10 +267,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 +289,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 +303,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]
@@ -300,10 +346,6 @@ export class ClusterIcon {
 
     pos.y -= this.anchorIcon[0]
 
-    // pos.x = pos.x
-
-    // pos.y = pos.y
-
     return pos
   }
 }

package/src/Clusterer.tsx

@@ -134,11 +134,13 @@ 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
   }
 
   onAdd() {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
     this.activeMap = this.getMap()
 
@@ -149,6 +151,7 @@ export class Clusterer {
     // Add the map event listeners
     this.listeners = [
       google.maps.event.addListener(
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
         this.getMap(),
         'zoom_changed',
@@ -160,8 +163,10 @@ export class Clusterer {
           // event is triggered so the cluster markers that have been removed
           // do not get redrawn. Same goes for a zoom in at maxZoom.
           if (
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
             // @ts-ignore
             this.getMap().getZoom() === (this.get('minZoom') || 0) ||
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
             // @ts-ignore
             this.getMap().getZoom() === this.get('maxZoom')
           ) {
@@ -170,6 +175,7 @@ export class Clusterer {
         }
       ),
       google.maps.event.addListener(
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
         this.getMap(),
         'idle',
@@ -236,6 +242,7 @@ export class Clusterer {
       }
     }
 
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
     this.getMap().fitBounds(bounds)
   }
@@ -489,6 +496,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.
@@ -628,6 +636,7 @@ 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
       }
@@ -638,13 +647,16 @@ export class Clusterer {
     //
     // 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
         ? new google.maps.LatLngBounds(
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
             // @ts-ignore
             this.getMap()
               .getBounds()
               .getSouthWest(),
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
             // @ts-ignore
             this.getMap()
               .getBounds()
@@ -662,10 +674,8 @@ export class Clusterer {
     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, bounds) && (!this.ignoreHidden || (this.ignoreHidden && marker.getVisible()))) {
+        this.addToClosestCluster(marker)
       }
     }
 
@@ -698,10 +708,12 @@ export class Clusterer {
     return function applyExtend(object: any) {
       // eslint-disable-next-line guard-for-in
       for (const property in object.prototype) {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
         this.prototype[property] = object.prototype[property]
       }
 
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
       return this
     }.apply(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'