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

package/dist/cjs.js

@@ -26,87 +26,100 @@ var ClusterIcon = /** @class */ (function () {
         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
     }
+    ClusterIcon.prototype.onBoundsChanged = function () {
+        this.cDraggingMapByCluster = this.cMouseDownInCluster;
+    };
+    ClusterIcon.prototype.onMouseDown = function () {
+        this.cMouseDownInCluster = true;
+        this.cDraggingMapByCluster = false;
+    };
+    ClusterIcon.prototype.onClick = function (event) {
+        this.cMouseDownInCluster = false;
+        if (!this.cDraggingMapByCluster) {
+            var markerClusterer_1 = 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_1, 'click', this.cluster);
+            google.maps.event.trigger(markerClusterer_1, 'clusterclick', this.cluster); // deprecated name
+            // The default click handler follows. Disable it by setting
+            // the zoomOnClick property to false.
+            if (markerClusterer_1.getZoomOnClick()) {
+                // Zoom into the cluster.
+                var maxZoom_1 = markerClusterer_1.getMaxZoom();
+                var bounds_1 = this.cluster.getBounds();
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-ignore
+                markerClusterer_1.getMap().fitBounds(bounds_1);
+                // There is a fix for Issue 170 here:
+                this.timeOut = window.setTimeout(function () {
+                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                    // @ts-ignore
+                    markerClusterer_1.getMap().fitBounds(bounds_1);
+                    // Don't zoom beyond the max zoom level
+                    if (maxZoom_1 !== null &&
+                        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                        // @ts-ignore
+                        markerClusterer_1.getMap().getZoom() > maxZoom_1) {
+                        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                        // @ts-ignore
+                        markerClusterer_1.getMap().setZoom(maxZoom_1 + 1);
+                    }
+                }, 100);
+            }
+            // Prevent event propagation to the map:
+            event.cancelBubble = true;
+            if (event.stopPropagation) {
+                event.stopPropagation();
+            }
+        }
+    };
+    ClusterIcon.prototype.onMouseOver = function () {
+        /**
+         * 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);
+    };
+    ClusterIcon.prototype.onMouseOut = function () {
+        /**
+         * 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);
+    };
     ClusterIcon.prototype.onAdd = function () {
-        var _this = this;
-        var cMouseDownInCluster;
-        var cDraggingMapByCluster;
         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;
-        });
-        google.maps.event.addDomListener(this.div, 'mousedown', function onMouseDown() {
-            cMouseDownInCluster = true;
-            cDraggingMapByCluster = false;
-        });
-        google.maps.event.addDomListener(this.div, 'click', function (event) {
-            cMouseDownInCluster = false;
-            if (!cDraggingMapByCluster) {
-                var markerClusterer_1 = _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_1, 'click', _this.cluster);
-                google.maps.event.trigger(markerClusterer_1, 'clusterclick', _this.cluster); // deprecated name
-                // The default click handler follows. Disable it by setting
-                // the zoomOnClick property to false.
-                if (markerClusterer_1.getZoomOnClick()) {
-                    // Zoom into the cluster.
-                    var maxZoom_1 = markerClusterer_1.getMaxZoom();
-                    var bounds_1 = _this.cluster.getBounds();
-                    // @ts-ignore
-                    markerClusterer_1.getMap().fitBounds(bounds_1);
-                    // There is a fix for Issue 170 here:
-                    setTimeout(function timeout() {
-                        // @ts-ignore
-                        markerClusterer_1.getMap().fitBounds(bounds_1);
-                        // Don't zoom beyond the max zoom level
-                        // @ts-ignore
-                        if (maxZoom_1 !== null && markerClusterer_1.getMap().getZoom() > maxZoom_1) {
-                            // @ts-ignore
-                            markerClusterer_1.getMap().setZoom(maxZoom_1 + 1);
-                        }
-                    }, 100);
-                }
-                // Prevent event propagation to the map:
-                event.cancelBubble = true;
-                if (event.stopPropagation) {
-                    event.stopPropagation();
-                }
-            }
-        });
-        google.maps.event.addDomListener(this.div, 'mouseover', function () {
-            /**
-             * 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', function () {
-            /**
-             * 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.getMap(), '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);
     };
     ClusterIcon.prototype.onRemove = function () {
         if (this.div && this.div.parentNode) {
@@ -114,16 +127,23 @@ var ClusterIcon = /** @class */ (function () {
             if (this.boundsChangedListener !== null) {
                 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;
         }
     };
     ClusterIcon.prototype.draw = function () {
         if (this.visible && this.div !== null && this.center) {
             var _a = this.getPosFromLatLng(this.center), x = _a.x, y = _a.y;
-            this.div.style.top = y + 'px';
-            this.div.style.left = x + 'px';
+            this.div.style.top = "".concat(y, "px");
+            this.div.style.left = "".concat(x, "px");
         }
     };
     ClusterIcon.prototype.hide = function () {
@@ -141,7 +161,9 @@ var ClusterIcon = /** @class */ (function () {
             var spriteH = parseInt(bp[0].replace(/^\s+|\s+$/g, ''), 10);
             var spriteV = parseInt(bp[1].replace(/^\s+|\s+$/g, ''), 10);
             var 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 {
@@ -211,8 +233,6 @@ var ClusterIcon = /** @class */ (function () {
         var pos = this.getProjection().fromLatLngToDivPixel(latlng);
         pos.x -= this.anchorIcon[1];
         pos.y -= this.anchorIcon[0];
-        // pos.x = pos.x
-        // pos.y = pos.y
         return pos;
     };
     return ClusterIcon;
@@ -221,6 +241,7 @@ var ClusterIcon = /** @class */ (function () {
 var Cluster = /** @class */ (function () {
     function Cluster(markerClusterer) {
         this.markerClusterer = markerClusterer;
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
         this.map = this.markerClusterer.getMap();
         this.gridSize = this.markerClusterer.getGridSize();
@@ -258,9 +279,11 @@ var Cluster = /** @class */ (function () {
         return bounds;
     };
     Cluster.prototype.remove = function () {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
         this.clusterIcon.setMap(null);
         this.markers = [];
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
         delete this.markers;
     };
@@ -348,11 +371,9 @@ var Cluster = /** @class */ (function () {
         if (this.markers.includes) {
             return this.markers.includes(marker);
         }
-        else {
-            for (var i = 0; i < this.markers.length; i++) {
-                if (marker === this.markers[i]) {
-                    return true;
-                }
+        for (var i = 0; i < this.markers.length; i++) {
+            if (marker === this.markers[i]) {
+                return true;
             }
         }
         return false;
@@ -426,11 +447,13 @@ var Clusterer = /** @class */ (function () {
         this.timerRefStatic = null;
         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
     }
     Clusterer.prototype.onAdd = function () {
         var _this = this;
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
         this.activeMap = this.getMap();
         this.ready = true;
@@ -438,6 +461,7 @@ var Clusterer = /** @class */ (function () {
         // 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', function () {
                 _this.resetViewport(false);
@@ -447,14 +471,17 @@ var Clusterer = /** @class */ (function () {
                 // 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')) {
                     google.maps.event.trigger(_this, 'idle');
                 }
             }),
             google.maps.event.addListener(
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
             // @ts-ignore
             this.getMap(), 'idle', function () {
                 _this.redraw();
@@ -504,6 +531,7 @@ var Clusterer = /** @class */ (function () {
                 bounds.extend(position);
             }
         }
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
         this.getMap().fitBounds(bounds);
     };
@@ -695,6 +723,7 @@ var Clusterer = /** @class */ (function () {
         }, 0);
     };
     Clusterer.prototype.getExtendedBounds = function (bounds) {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
         var projection = this.getProjection();
         // Convert the points to pixels and the extend out by the grid size.
@@ -796,6 +825,7 @@ var Clusterer = /** @class */ (function () {
             google.maps.event.trigger(this, 'clusteringbegin', this);
             if (this.timerRefStatic !== null) {
                 window.clearTimeout(this.timerRefStatic);
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                 // @ts-ignore
                 delete this.timerRefStatic;
             }
@@ -805,13 +835,16 @@ var Clusterer = /** @class */ (function () {
         //
         // See Comments 9 & 11 on Issue 3651 relating to this workaround for a Google Maps bug:
         var 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()
@@ -821,10 +854,8 @@ var Clusterer = /** @class */ (function () {
         var iLast = Math.min(iFirst + this.batchSize, this.markers.length);
         for (var i = iFirst; i < iLast; i++) {
             var 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);
             }
         }
         if (iLast < this.markers.length) {
@@ -851,9 +882,11 @@ var Clusterer = /** @class */ (function () {
         return function applyExtend(object) {
             // eslint-disable-next-line guard-for-in
             for (var 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]);