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

package/dist/umd.js

@@ -4,36 +4,68 @@
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.markerClusterer = {}));
 })(this, (function (exports) { 'use strict';
 
-    var ClusterIcon = /** @class */ (function () {
+    /******************************************************************************
+    Copyright (c) Microsoft Corporation.
+
+    Permission to use, copy, modify, and/or distribute this software for any
+    purpose with or without fee is hereby granted.
+
+    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+    PERFORMANCE OF THIS SOFTWARE.
+    ***************************************************************************** */
+    /* global Reflect, Promise */
+
+    var extendStatics = function(d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+
+    function __extends(d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    }
+
+    var ClusterIcon = /** @class */ (function (_super) {
+        __extends(ClusterIcon, _super);
         function ClusterIcon(cluster, styles) {
+            var _this = _super.call(this) || this;
             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';
-            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
+            _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';
+            _this.cMouseDownInCluster = null;
+            _this.cDraggingMapByCluster = null;
+            _this.timeOut = null;
+            _this.setMap(cluster.getMap()); // Note: this causes onAdd to be called
+            return _this;
         }
         ClusterIcon.prototype.onBoundsChanged = function () {
             this.cDraggingMapByCluster = this.cMouseDownInCluster;
@@ -143,9 +175,9 @@
         };
         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 = "".concat(y, "px");
-                this.div.style.left = "".concat(x, "px");
+                var pos = this.getPosFromLatLng(this.center);
+                this.div.style.top = pos !== null ? "".concat(pos.y, "px") : '0';
+                this.div.style.left = pos !== null ? "".concat(pos.x, "px") : '0';
             }
         };
         ClusterIcon.prototype.hide = function () {
@@ -173,8 +205,8 @@
                 }
                 this.div.style.cursor = 'pointer';
                 this.div.style.position = 'absolute';
-                this.div.style.top = "".concat(pos.y, "px");
-                this.div.style.left = "".concat(pos.x, "px");
+                this.div.style.top = pos !== null ? "".concat(pos.y, "px") : '0';
+                this.div.style.left = pos !== null ? "".concat(pos.x, "px") : '0';
                 this.div.style.width = "".concat(this.width, "px");
                 this.div.style.height = "".concat(this.height, "px");
                 var img = document.createElement('img');
@@ -231,14 +263,15 @@
             this.center = center;
         };
         ClusterIcon.prototype.getPosFromLatLng = function (latlng) {
-            // @ts-ignore
             var pos = this.getProjection().fromLatLngToDivPixel(latlng);
-            pos.x -= this.anchorIcon[1];
-            pos.y -= this.anchorIcon[0];
+            if (pos !== null) {
+                pos.x -= this.anchorIcon[1];
+                pos.y -= this.anchorIcon[0];
+            }
             return pos;
         };
         return ClusterIcon;
-    }());
+    }(google.maps.OverlayView));
 
     var Cluster = /** @class */ (function () {
         function Cluster(markerClusterer) {
@@ -383,7 +416,6 @@
         return Cluster;
     }());
 
-    /* global google */
     /**
      * Supports up to 9007199254740991 (Number.MAX_SAFE_INTEGER) markers
      * which is not a problem as max array length is 4294967296 (2**32)
@@ -404,91 +436,86 @@
     var IMAGE_EXTENSION = 'png';
     var IMAGE_SIZES = [53, 56, 66, 78, 90];
     var CLUSTERER_CLASS = 'cluster';
-    var Clusterer = /** @class */ (function () {
+    var Clusterer = /** @class */ (function (_super) {
+        __extends(Clusterer, _super);
         function Clusterer(map, optMarkers, optOptions) {
             if (optMarkers === void 0) { optMarkers = []; }
             if (optOptions === void 0) { optOptions = {}; }
-            this.extend(Clusterer, google.maps.OverlayView);
-            this.markers = [];
-            this.clusters = [];
-            this.listeners = [];
-            this.activeMap = null;
-            this.ready = false;
-            this.gridSize = optOptions.gridSize || 60;
-            this.minClusterSize = optOptions.minimumClusterSize || 2;
-            this.maxZoom = optOptions.maxZoom || null;
-            this.styles = optOptions.styles || [];
-            this.title = optOptions.title || '';
-            this.zoomOnClick = true;
+            var _this = _super.call(this) || this;
+            _this.extend(Clusterer, google.maps.OverlayView);
+            _this.markers = [];
+            _this.clusters = [];
+            _this.listeners = [];
+            _this.activeMap = null;
+            _this.ready = false;
+            _this.gridSize = optOptions.gridSize || 60;
+            _this.minClusterSize = optOptions.minimumClusterSize || 2;
+            _this.maxZoom = optOptions.maxZoom || null;
+            _this.styles = optOptions.styles || [];
+            _this.title = optOptions.title || '';
+            _this.zoomOnClick = true;
             if (optOptions.zoomOnClick !== undefined) {
-                this.zoomOnClick = optOptions.zoomOnClick;
+                _this.zoomOnClick = optOptions.zoomOnClick;
             }
-            this.averageCenter = false;
+            _this.averageCenter = false;
             if (optOptions.averageCenter !== undefined) {
-                this.averageCenter = optOptions.averageCenter;
+                _this.averageCenter = optOptions.averageCenter;
             }
-            this.ignoreHidden = false;
+            _this.ignoreHidden = false;
             if (optOptions.ignoreHidden !== undefined) {
-                this.ignoreHidden = optOptions.ignoreHidden;
+                _this.ignoreHidden = optOptions.ignoreHidden;
             }
-            this.enableRetinaIcons = false;
+            _this.enableRetinaIcons = false;
             if (optOptions.enableRetinaIcons !== undefined) {
-                this.enableRetinaIcons = optOptions.enableRetinaIcons;
-            }
-            this.imagePath = optOptions.imagePath || IMAGE_PATH;
-            this.imageExtension = optOptions.imageExtension || IMAGE_EXTENSION;
-            this.imageSizes = optOptions.imageSizes || IMAGE_SIZES;
-            this.calculator = optOptions.calculator || CALCULATOR;
-            this.batchSize = optOptions.batchSize || BATCH_SIZE;
-            this.batchSizeIE = optOptions.batchSizeIE || BATCH_SIZE_IE;
-            this.clusterClass = optOptions.clusterClass || CLUSTERER_CLASS;
+                _this.enableRetinaIcons = optOptions.enableRetinaIcons;
+            }
+            _this.imagePath = optOptions.imagePath || IMAGE_PATH;
+            _this.imageExtension = optOptions.imageExtension || IMAGE_EXTENSION;
+            _this.imageSizes = optOptions.imageSizes || IMAGE_SIZES;
+            _this.calculator = optOptions.calculator || CALCULATOR;
+            _this.batchSize = optOptions.batchSize || BATCH_SIZE;
+            _this.batchSizeIE = optOptions.batchSizeIE || BATCH_SIZE_IE;
+            _this.clusterClass = optOptions.clusterClass || CLUSTERER_CLASS;
             if (navigator.userAgent.toLowerCase().indexOf('msie') !== -1) {
                 // Try to avoid IE timeout when processing a huge number of markers:
-                this.batchSize = this.batchSizeIE;
+                _this.batchSize = _this.batchSizeIE;
             }
-            this.timerRefStatic = null;
-            this.setupStyles();
-            this.addMarkers(optMarkers, true);
+            _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
+            _this.setMap(map); // Note: this causes onAdd to be called
+            return _this;
         }
+        Clusterer.prototype.onZoomChanged = function () {
+            var _a, _b;
+            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 (((_a = this.getMap()) === null || _a === void 0 ? void 0 : _a.getZoom()) === (this.get('minZoom') || 0) ||
+                ((_b = this.getMap()) === null || _b === void 0 ? void 0 : _b.getZoom()) === this.get('maxZoom')) {
+                google.maps.event.trigger(this, 'idle');
+            }
+        };
+        Clusterer.prototype.onIdle = function () {
+            this.redraw();
+        };
         Clusterer.prototype.onAdd = function () {
-            var _this = this;
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-ignore
-            this.activeMap = this.getMap();
+            var map = this.getMap();
+            this.activeMap = map;
             this.ready = true;
             this.repaint();
-            // 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);
-                    // 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 (
-                    // 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();
-                }),
-            ];
+            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),
+                ];
+            }
         };
         Clusterer.prototype.onRemove = function () {
             // Put all the managed markers back on the map:
@@ -732,20 +759,32 @@
             var trPix = projection.fromLatLngToDivPixel(
             // Turn the bounds into latlng.
             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;
+            }
             var 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(
-            // Convert the pixel points back to LatLng nw
-            projection.fromDivPixelToLatLng(trPix));
-            bounds.extend(
-            // Convert the pixel points back to LatLng sw
-            projection.fromDivPixelToLatLng(blPix));
+            if (trPix !== null) {
+                // Convert the pixel points back to LatLng nw
+                var point1 = projection.fromDivPixelToLatLng(trPix);
+                if (point1 !== null) {
+                    bounds.extend(point1);
+                }
+            }
+            if (blPix !== null) {
+                // Convert the pixel points back to LatLng sw
+                var point2 = projection.fromDivPixelToLatLng(blPix);
+                if (point2 !== null) {
+                    bounds.extend(point2);
+                }
+            }
             return bounds;
         };
         Clusterer.prototype.redraw = function () {
@@ -832,6 +871,8 @@
                     delete this.timerRefStatic;
                 }
             }
+            var map = this.getMap();
+            var 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.
             //
@@ -839,24 +880,14 @@
             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()
-                    .getNorthEast())
+            map.getZoom() > 3
+                ? new google.maps.LatLngBounds(bounds === null || bounds === void 0 ? void 0 : bounds.getSouthWest(), bounds === null || bounds === void 0 ? void 0 : bounds.getNorthEast())
                 : new google.maps.LatLngBounds(new google.maps.LatLng(85.02070771743472, -178.48388434375), new google.maps.LatLng(-85.08136444384544, 178.00048865625));
-            var bounds = this.getExtendedBounds(mapBounds);
+            var extendedMapBounds = this.getExtendedBounds(mapBounds);
             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) && (!this.ignoreHidden || (this.ignoreHidden && marker.getVisible()))) {
+                if (!marker.isAdded && this.isMarkerInBounds(marker, extendedMapBounds) && (!this.ignoreHidden || (this.ignoreHidden && marker.getVisible()))) {
                     this.addToClosestCluster(marker);
                 }
             }
@@ -882,19 +913,14 @@
         };
         Clusterer.prototype.extend = function (obj1, obj2) {
             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];
+                    this.prototype.set(property, object.prototype.get(property));
                 }
-                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                // @ts-ignore
                 return this;
             }.apply(obj1, [obj2]);
         };
         return Clusterer;
-    }());
+    }(google.maps.OverlayView));
 
     exports.Cluster = Cluster;
     exports.ClusterIcon = ClusterIcon;