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

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,146 +25,189 @@ 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
+  }
 
-    this.div = document.createElement('div')
-    this.div.className = this.className
-    if (this.visible) {
-      this.show()
-    }
+  onMouseDown() {
+    this.cMouseDownInCluster = true
 
-    // @ts-ignore
-    this.getPanes().overlayMouseTarget.appendChild(this.div)
+    this.cDraggingMapByCluster = false
+  }
 
-    // Fix for Issue 157
-    this.boundsChangedListener = google.maps.event.addListener(
-      // @ts-ignore
-      this.getMap(),
-      'boundschanged',
-      function boundsChanged() {
-        cDraggingMapByCluster = cMouseDownInCluster
-      }
-    )
+  onClick(event: Event) {
+    this.cMouseDownInCluster = false
 
-    google.maps.event.addListener(this.div, 'mousedown', function onMouseDown() {
-      cMouseDownInCluster = true
-      cDraggingMapByCluster = false
-    })
-
-    google.maps.event.addListener(
-      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()
-
-            // @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)
-          }
+    if (!this.cDraggingMapByCluster) {
+      const markerClusterer = this.cluster.getClusterer()
 
-          // Prevent event propagation to the map:
-          event.cancelBubble = true
+      /**
+       * 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
 
-          if (event.stopPropagation) {
-            event.stopPropagation()
-          }
+      // 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()
+
+        const map = markerClusterer.getMap()
+
+        if (map !== null && 'fitBounds' in map) {
+          map.fitBounds(bounds)
         }
+
+
+        // There is a fix for Issue 170 here:
+        this.timeOut = window.setTimeout(() => {
+          const map = markerClusterer.getMap()
+
+          if (map !== null) {
+            if ('fitBounds' in map) {
+              map.fitBounds(bounds)
+            }
+
+            const zoom = map.getZoom() || 0
+
+            // Don't zoom beyond the max zoom level
+            if (
+              maxZoom !== null &&
+              zoom > maxZoom
+            ) {
+              map.setZoom(maxZoom + 1)
+            }
+          }
+        }, 100)
       }
-    )
 
-    google.maps.event.addListener(
-      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)
+      // 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
     )
+  }
 
-    google.maps.event.addListener(
-      this.div,
+  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 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.cluster
     )
   }
 
+  onAdd() {
+    this.div = document.createElement('div')
+
+    this.div.className = this.className
+
+    if (this.visible) {
+      this.show()
+    }
+
+    this.getPanes()?.overlayMouseTarget.appendChild(this.div)
+
+    const map = this.getMap()
+
+    if (map !== null) {
+      // Fix for Issue 157
+      this.boundsChangedListener = google.maps.event.addListener(
+        map,
+        'bounds_changed',
+        this.onBoundsChanged
+      )
+
+      this.div.addEventListener('mousedown', this.onMouseDown)
+
+      this.div.addEventListener('click', this.onClick)
+
+      this.div.addEventListener('mouseover', this.onMouseOver)
+
+      this.div.addEventListener('mouseout', this.onMouseOut)
+    }
+  }
+
   onRemove() {
     if (this.div && this.div.parentNode) {
       this.hide()
@@ -173,20 +216,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 +265,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 +277,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 +293,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 +315,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 +329,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 +364,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
   }