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

package/dist/cjs.js

@@ -6,7 +6,8 @@ var ClusterIcon = /** @class */ (function () {
     function ClusterIcon(cluster, styles) {
         cluster.getClusterer().extend(ClusterIcon, google.maps.OverlayView);
         this.cluster = cluster;
-        this.className = this.cluster.getClusterer().getClusterClass();
+        this.clusterClassName = this.cluster.getClusterer().getClusterClass();
+        this.className = this.clusterClassName;
         this.styles = styles;
         this.center = undefined;
         this.div = null;
@@ -25,7 +26,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
     }
@@ -38,12 +38,10 @@ 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;
@@ -52,10 +50,7 @@ var ClusterIcon = /** @class */ (function () {
             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.addDomListener(this.div, 'click', function (event) {
             cMouseDownInCluster = false;
             if (!cDraggingMapByCluster) {
                 var markerClusterer_1 = _this.cluster.getClusterer();
@@ -73,19 +68,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);
                         }
@@ -98,9 +89,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.addDomListener(this.div, 'mouseover', function () {
             /**
              * This event is fired when the mouse moves over a cluster marker.
              * @name MarkerClusterer#mouseover
@@ -109,10 +98,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.addDomListener(this.div, 'mouseout', function () {
             /**
              * This event is fired when the mouse moves out of a cluster marker.
              * @name MarkerClusterer#mouseout
@@ -147,8 +133,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);
@@ -160,72 +147,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 = '';
         }
@@ -233,12 +186,13 @@ var ClusterIcon = /** @class */ (function () {
     };
     ClusterIcon.prototype.useStyle = function (sums) {
         this.sums = sums;
-        var style = this.styles[Math.min(this.styles.length - 1, Math.max(0, sums.index - 1))];
+        var styles = this.cluster.getClusterer().getStyles();
+        var 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.className + " " + 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';
@@ -252,15 +206,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];
@@ -275,7 +221,6 @@ var ClusterIcon = /** @class */ (function () {
 var Cluster = /** @class */ (function () {
     function Cluster(markerClusterer) {
         this.markerClusterer = markerClusterer;
-        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
         // @ts-ignore
         this.map = this.markerClusterer.getMap();
         this.gridSize = this.markerClusterer.getGridSize();
@@ -313,7 +258,6 @@ var Cluster = /** @class */ (function () {
         return bounds;
     };
     Cluster.prototype.remove = function () {
-        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
         // @ts-ignore
         this.clusterIcon.setMap(null);
         this.markers = [];
@@ -482,13 +426,11 @@ var Clusterer = /** @class */ (function () {
         this.timerRefStatic = null;
         this.setupStyles();
         this.addMarkers(optMarkers, true);
-        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
         // @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
         // @ts-ignore
         this.activeMap = this.getMap();
         this.ready = true;
@@ -496,11 +438,8 @@ var Clusterer = /** @class */ (function () {
         // Add the map event listeners
         this.listeners = [
             google.maps.event.addListener(
-            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
             // @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
@@ -508,26 +447,20 @@ 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
                 // @ts-ignore
                 _this.getMap().getZoom() === (_this.get('minZoom') || 0) ||
-                    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                     // @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
             // @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++) {
@@ -571,7 +504,6 @@ var Clusterer = /** @class */ (function () {
                 bounds.extend(position);
             }
         }
-        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
         // @ts-ignore
         this.getMap().fitBounds(bounds);
     };
@@ -685,7 +617,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]);
             }
         }
@@ -697,7 +629,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;
@@ -764,7 +695,6 @@ var Clusterer = /** @class */ (function () {
         }, 0);
     };
     Clusterer.prototype.getExtendedBounds = function (bounds) {
-        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
         // @ts-ignore
         var projection = this.getProjection();
         // Convert the points to pixels and the extend out by the grid size.
@@ -875,16 +805,13 @@ 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
         // @ts-ignore
         this.getMap().getZoom() > 3
             ? new google.maps.LatLngBounds(
-            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
             // @ts-ignore
             this.getMap()
                 .getBounds()
                 .getSouthWest(), 
-            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
             // @ts-ignore
             this.getMap()
                 .getBounds()
@@ -901,9 +828,7 @@ var Clusterer = /** @class */ (function () {
             }
         }
         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);
         }
@@ -926,11 +851,9 @@ 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
                 // @ts-ignore
                 this.prototype[property] = object.prototype[property];
             }
-            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
             // @ts-ignore
             return this;
         }.apply(obj1, [obj2]);