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

package/dist/esm.js

@@ -1,33 +1,65 @@
-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;
@@ -137,9 +169,9 @@ var ClusterIcon = /** @class */ (function () {
     };
     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 () {
@@ -167,8 +199,8 @@ var ClusterIcon = /** @class */ (function () {
             }
             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');
@@ -225,14 +257,15 @@ var ClusterIcon = /** @class */ (function () {
         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) {
@@ -377,7 +410,6 @@ var Cluster = /** @class */ (function () {
     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)
@@ -398,91 +430,86 @@ var IMAGE_PATH = 'https://developers.google.com/maps/documentation/javascript/ex
 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:
@@ -726,20 +753,32 @@ var Clusterer = /** @class */ (function () {
         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 () {
@@ -826,6 +865,8 @@ var Clusterer = /** @class */ (function () {
                 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.
         //
@@ -833,24 +874,14 @@ var Clusterer = /** @class */ (function () {
         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);
             }
         }
@@ -876,19 +907,14 @@ var Clusterer = /** @class */ (function () {
     };
     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));
 
 export { Cluster, ClusterIcon, Clusterer };
 //# sourceMappingURL=esm.js.map