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

package/dist/esm.js

@@ -22,7 +22,6 @@ var ClusterIcon = /** @class */ (function () {
         this.fontStyle = 'normal';
         this.fontFamily = 'Arial,sans-serif';
         this.backgroundPosition = '0 0';
-        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
         // @ts-ignore
         this.setMap(cluster.getMap()); // Note: this causes onAdd to be called
     }
@@ -35,24 +34,19 @@ var ClusterIcon = /** @class */ (function () {
         if (this.visible) {
             this.show();
         }
-        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
         // @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-ignore
         // @ts-ignore
         this.getMap(), 'boundschanged', function boundsChanged() {
             cDraggingMapByCluster = cMouseDownInCluster;
         });
-        google.maps.event.addDomListener(this.div, 'mousedown', function onMouseDown() {
+        google.maps.event.addListener(this.div, 'mousedown', function onMouseDown() {
             cMouseDownInCluster = true;
             cDraggingMapByCluster = false;
         });
-        // eslint-disable-next-line  @getify/proper-arrows/this, @getify/proper-arrows/name
-        google.maps.event.addDomListener(this.div, 'click', 
-        // eslint-disable-next-line  @getify/proper-arrows/this, @getify/proper-arrows/name
-        function (event) {
+        google.maps.event.addListener(this.div, 'click', function (event) {
             cMouseDownInCluster = false;
             if (!cDraggingMapByCluster) {
                 var markerClusterer_1 = _this.cluster.getClusterer();
@@ -70,19 +64,15 @@ var ClusterIcon = /** @class */ (function () {
                     // Zoom into the cluster.
                     var maxZoom_1 = markerClusterer_1.getMaxZoom();
                     var bounds_1 = _this.cluster.getBounds();
-                    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                     // @ts-ignore
                     markerClusterer_1.getMap().fitBounds(bounds_1);
                     // There is a fix for Issue 170 here:
                     setTimeout(function timeout() {
-                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                         // @ts-ignore
                         markerClusterer_1.getMap().fitBounds(bounds_1);
                         // Don't zoom beyond the max zoom level
-                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                         // @ts-ignore
                         if (maxZoom_1 !== null && markerClusterer_1.getMap().getZoom() > maxZoom_1) {
-                            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                             // @ts-ignore
                             markerClusterer_1.getMap().setZoom(maxZoom_1 + 1);
                         }
@@ -95,9 +85,7 @@ var ClusterIcon = /** @class */ (function () {
                 }
             }
         });
-        google.maps.event.addDomListener(this.div, 'mouseover', 
-        // eslint-disable-next-line  @getify/proper-arrows/this, @getify/proper-arrows/name
-        function () {
+        google.maps.event.addListener(this.div, 'mouseover', function () {
             /**
              * This event is fired when the mouse moves over a cluster marker.
              * @name MarkerClusterer#mouseover
@@ -106,10 +94,7 @@ var ClusterIcon = /** @class */ (function () {
              */
             google.maps.event.trigger(_this.cluster.getClusterer(), 'mouseover', _this.cluster);
         });
-        // eslint-disable-next-line  @getify/proper-arrows/this, @getify/proper-arrows/name
-        google.maps.event.addDomListener(this.div, 'mouseout', 
-        // eslint-disable-next-line  @getify/proper-arrows/this, @getify/proper-arrows/name
-        function () {
+        google.maps.event.addListener(this.div, 'mouseout', function () {
             /**
              * This event is fired when the mouse moves out of a cluster marker.
              * @name MarkerClusterer#mouseout
@@ -144,8 +129,9 @@ var ClusterIcon = /** @class */ (function () {
         this.visible = false;
     };
     ClusterIcon.prototype.show = function () {
+        var _a;
         if (this.div && this.center) {
-            var img = '', divTitle = '';
+            var divTitle = '';
             // NOTE: values must be specified in px units
             var bp = this.backgroundPosition.split(' ');
             var spriteH = parseInt(bp[0].replace(/^\s+|\s+$/g, ''), 10);
@@ -157,72 +143,38 @@ var ClusterIcon = /** @class */ (function () {
             else {
                 divTitle = this.sums.title;
             }
-            this.div.style.cssText = this.createCss(pos);
-            img =
-                "<img alt='" +
-                    divTitle +
-                    "' src='" +
-                    this.url +
-                    "' style='position: absolute; top: " +
-                    spriteV +
-                    'px; left: ' +
-                    spriteH +
-                    'px; ';
-            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-            //@ts-ignore
+            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.width = "".concat(this.width, "px");
+            this.div.style.height = "".concat(this.height, "px");
+            var img = document.createElement('img');
+            img.alt = divTitle;
+            img.src = this.url;
+            img.style.position = 'absolute';
+            img.style.top = "".concat(spriteV, "px");
+            img.style.left = "".concat(spriteH, "px");
             if (!this.cluster.getClusterer().enableRetinaIcons) {
-                img +=
-                    'clip: rect(' +
-                        -1 * spriteV +
-                        'px, ' +
-                        (-1 * spriteH + this.width) +
-                        'px, ' +
-                        (-1 * spriteV + this.height) +
-                        'px, ' +
-                        -1 * spriteH +
-                        'px);';
+                img.style.clip = "rect(-".concat(spriteV, "px, -").concat(spriteH + this.width, "px, -").concat(spriteV + this.height, ", -").concat(spriteH, ")");
             }
-            img += "'>";
-            this.div.innerHTML =
-                img +
-                    "<div style='" +
-                    'position: absolute;' +
-                    'top: ' +
-                    this.anchorText[0] +
-                    'px;' +
-                    'left: ' +
-                    this.anchorText[1] +
-                    'px;' +
-                    'color: ' +
-                    this.textColor +
-                    ';' +
-                    'font-size: ' +
-                    this.textSize +
-                    'px;' +
-                    'font-family: ' +
-                    this.fontFamily +
-                    ';' +
-                    'font-weight: ' +
-                    this.fontWeight +
-                    ';' +
-                    'font-style: ' +
-                    this.fontStyle +
-                    ';' +
-                    'text-decoration: ' +
-                    this.textDecoration +
-                    ';' +
-                    'text-align: center;' +
-                    'width: ' +
-                    this.width +
-                    'px;' +
-                    'line-height:' +
-                    this.height +
-                    'px;' +
-                    "'>" +
-                    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                    // @ts-ignore
-                    this.sums.text +
-                    '</div>';
+            var textElm = document.createElement('div');
+            textElm.style.position = 'absolute';
+            textElm.style.top = "".concat(this.anchorText[0], "px");
+            textElm.style.left = "".concat(this.anchorText[1], "px");
+            textElm.style.color = this.textColor;
+            textElm.style.fontSize = "".concat(this.textSize, "px");
+            textElm.style.fontFamily = this.fontFamily;
+            textElm.style.fontWeight = this.fontWeight;
+            textElm.style.fontStyle = this.fontStyle;
+            textElm.style.textDecoration = this.textDecoration;
+            textElm.style.textAlign = 'center';
+            textElm.style.width = "".concat(this.width, "px");
+            textElm.style.lineHeight = "".concat(this.height, "px");
+            textElm.innerText = "".concat((_a = this.sums) === null || _a === void 0 ? void 0 : _a.text);
+            this.div.innerHTML = '';
+            this.div.appendChild(img);
+            this.div.appendChild(textElm);
             this.div.title = divTitle;
             this.div.style.display = '';
         }
@@ -236,7 +188,7 @@ var ClusterIcon = /** @class */ (function () {
         this.height = style.height;
         this.width = style.width;
         if (style.className)
-            this.className = this.clusterClassName + " " + style.className;
+            this.className = "".concat(this.clusterClassName, " ").concat(style.className);
         this.anchorText = style.anchorText || [0, 0];
         this.anchorIcon = style.anchorIcon || [this.height / 2, this.width / 2];
         this.textColor = style.textColor || 'black';
@@ -250,15 +202,7 @@ var ClusterIcon = /** @class */ (function () {
     ClusterIcon.prototype.setCenter = function (center) {
         this.center = center;
     };
-    ClusterIcon.prototype.createCss = function (pos) {
-        var style = [];
-        style.push('cursor: pointer;');
-        style.push('position: absolute; top: ' + pos.y + 'px; left: ' + pos.x + 'px;');
-        style.push('width: ' + this.width + 'px; height: ' + this.height + 'px;');
-        return style.join('');
-    };
     ClusterIcon.prototype.getPosFromLatLng = function (latlng) {
-        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
         // @ts-ignore
         var pos = this.getProjection().fromLatLngToDivPixel(latlng);
         pos.x -= this.anchorIcon[1];
@@ -273,7 +217,7 @@ var ClusterIcon = /** @class */ (function () {
 var Cluster = /** @class */ (function () {
     function Cluster(markerClusterer) {
         this.markerClusterer = markerClusterer;
-        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
         this.map = this.markerClusterer.getMap();
         this.gridSize = this.markerClusterer.getGridSize();
@@ -311,10 +255,11 @@ var Cluster = /** @class */ (function () {
         return bounds;
     };
     Cluster.prototype.remove = function () {
-        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+        // 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;
     };
@@ -402,11 +347,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;
@@ -480,13 +423,13 @@ var Clusterer = /** @class */ (function () {
         this.timerRefStatic = null;
         this.setupStyles();
         this.addMarkers(optMarkers, true);
-        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+        // 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-ignore
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
         this.activeMap = this.getMap();
         this.ready = true;
@@ -494,11 +437,9 @@ var Clusterer = /** @class */ (function () {
         // Add the map event listeners
         this.listeners = [
             google.maps.event.addListener(
-            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
             // @ts-ignore
-            this.getMap(), 'zoom_changed', 
-            // eslint-disable-next-line  @getify/proper-arrows/this, @getify/proper-arrows/name
-            function () {
+            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
@@ -506,26 +447,23 @@ 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-ignore
+                // 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-ignore
+                    // 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-ignore
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
             // @ts-ignore
-            this.getMap(), 'idle', 
-            // eslint-disable-next-line  @getify/proper-arrows/this, @getify/proper-arrows/name
-            function () {
+            this.getMap(), 'idle', function () {
                 _this.redraw();
             }),
         ];
     };
-    // eslint-disable-next-line @getify/proper-arrows/this
     Clusterer.prototype.onRemove = function () {
         // Put all the managed markers back on the map:
         for (var i = 0; i < this.markers.length; i++) {
@@ -569,7 +507,7 @@ var Clusterer = /** @class */ (function () {
                 bounds.extend(position);
             }
         }
-        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
         this.getMap().fitBounds(bounds);
     };
@@ -683,7 +621,7 @@ var Clusterer = /** @class */ (function () {
     };
     Clusterer.prototype.addMarkers = function (markers, optNoDraw) {
         for (var key in markers) {
-            if (markers.hasOwnProperty(key)) {
+            if (Object.prototype.hasOwnProperty.call(markers, key)) {
                 this.pushMarkerTo(markers[key]);
             }
         }
@@ -695,7 +633,6 @@ var Clusterer = /** @class */ (function () {
         var _this = this;
         // If the marker is draggable add a listener so we can update the clusters on the dragend:
         if (marker.getDraggable()) {
-            // eslint-disable-next-line @getify/proper-arrows/name, @getify/proper-arrows/this
             google.maps.event.addListener(marker, 'dragend', function () {
                 if (_this.ready) {
                     marker.isAdded = false;
@@ -762,7 +699,7 @@ var Clusterer = /** @class */ (function () {
         }, 0);
     };
     Clusterer.prototype.getExtendedBounds = function (bounds) {
-        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+        // 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.
@@ -864,6 +801,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;
             }
@@ -873,16 +811,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-ignore
+        // 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-ignore
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
             // @ts-ignore
             this.getMap()
                 .getBounds()
                 .getSouthWest(), 
-            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
             // @ts-ignore
             this.getMap()
                 .getBounds()
@@ -892,16 +830,12 @@ 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) {
-            this.timerRefStatic = window.setTimeout(
-            // eslint-disable-next-line @getify/proper-arrows/this, @getify/proper-arrows/name
-            function () {
+            this.timerRefStatic = window.setTimeout(function () {
                 _this.createClusters(iLast);
             }, 0);
         }
@@ -924,11 +858,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-ignore
+                // 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-ignore
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
             // @ts-ignore
             return this;
         }.apply(obj1, [obj2]);