@react-google-maps/marker-clusterer 2.16.0 → 2.19.0

package/dist/Cluster.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="google.maps" />
+import type { Clusterer } from './Clusterer';
+import { ClusterIcon } from './ClusterIcon';
+import type { MarkerExtended } from './types';
+export declare class Cluster {
+    markerClusterer: Clusterer;
+    map: google.maps.Map | google.maps.StreetViewPanorama | null;
+    gridSize: number;
+    minClusterSize: number;
+    averageCenter: boolean;
+    markers: MarkerExtended[];
+    center: google.maps.LatLng | undefined;
+    bounds: google.maps.LatLngBounds | null;
+    clusterIcon: ClusterIcon;
+    constructor(markerClusterer: Clusterer);
+    getSize(): number;
+    getMarkers(): MarkerExtended[];
+    getCenter(): google.maps.LatLng | undefined;
+    getMap(): google.maps.Map | google.maps.StreetViewPanorama | null;
+    getClusterer(): Clusterer;
+    getBounds(): google.maps.LatLngBounds;
+    remove(): void;
+    addMarker(marker: MarkerExtended): boolean;
+    isMarkerInClusterBounds(marker: MarkerExtended): boolean;
+    calculateBounds(): void;
+    updateIcon(): void;
+    isMarkerAlreadyAdded(marker: MarkerExtended): boolean;
+}

package/dist/ClusterIcon.d.ts

@@ -0,0 +1,43 @@
+/// <reference types="google.maps" />
+import type { Cluster } from './Cluster';
+import type { ClusterIconStyle, ClusterIconInfo } from './types';
+export declare class ClusterIcon {
+    cluster: Cluster;
+    className: string;
+    clusterClassName: string;
+    styles: ClusterIconStyle[];
+    center: google.maps.LatLng | undefined;
+    div: HTMLDivElement | null;
+    sums: ClusterIconInfo | null;
+    visible: boolean;
+    url: string;
+    height: number;
+    width: number;
+    anchorText: [number, number];
+    anchorIcon: [number, number];
+    textColor: string;
+    textSize: number;
+    textDecoration: string;
+    fontWeight: string;
+    fontStyle: string;
+    fontFamily: string;
+    backgroundPosition: string;
+    cMouseDownInCluster: boolean | null;
+    cDraggingMapByCluster: boolean | null;
+    timeOut: number | null;
+    boundsChangedListener: google.maps.MapsEventListener | null;
+    constructor(cluster: Cluster, styles: ClusterIconStyle[]);
+    onBoundsChanged(): void;
+    onMouseDown(): void;
+    onClick(event: Event): void;
+    onMouseOver(): void;
+    onMouseOut(): void;
+    onAdd(): void;
+    onRemove(): void;
+    draw(): void;
+    hide(): void;
+    show(): void;
+    useStyle(sums: ClusterIconInfo): void;
+    setCenter(center: google.maps.LatLng): void;
+    getPosFromLatLng(latlng: google.maps.LatLng): google.maps.Point | null;
+}

package/dist/Clusterer.d.ts

@@ -0,0 +1,86 @@
+/// <reference types="google.maps" />
+import { Cluster } from './Cluster';
+import type { ClusterIcon } from './ClusterIcon';
+import type { MarkerExtended, ClustererOptions, ClusterIconStyle, TCalculator } from './types';
+export declare class Clusterer {
+    markers: MarkerExtended[];
+    clusters: Cluster[];
+    listeners: google.maps.MapsEventListener[];
+    activeMap: google.maps.Map | google.maps.StreetViewPanorama | null;
+    ready: boolean;
+    gridSize: number;
+    minClusterSize: number;
+    maxZoom: number | null;
+    styles: ClusterIconStyle[];
+    title: string;
+    zoomOnClick: boolean;
+    averageCenter: boolean;
+    ignoreHidden: boolean;
+    enableRetinaIcons: boolean;
+    imagePath: string;
+    imageExtension: string;
+    imageSizes: number[];
+    calculator: TCalculator;
+    batchSize: number;
+    batchSizeIE: number;
+    clusterClass: string;
+    timerRefStatic: number | null;
+    constructor(map: google.maps.Map, optMarkers?: MarkerExtended[], optOptions?: ClustererOptions);
+    onZoomChanged(): void;
+    onIdle(): void;
+    onAdd(): void;
+    onRemove(): void;
+    draw(): void;
+    setupStyles(): void;
+    fitMapToMarkers(): void;
+    getGridSize(): number;
+    setGridSize(gridSize: number): void;
+    getMinimumClusterSize(): number;
+    setMinimumClusterSize(minimumClusterSize: number): void;
+    getMaxZoom(): number | null;
+    setMaxZoom(maxZoom: number): void;
+    getStyles(): ClusterIconStyle[];
+    setStyles(styles: ClusterIconStyle[]): void;
+    getTitle(): string;
+    setTitle(title: string): void;
+    getZoomOnClick(): boolean;
+    setZoomOnClick(zoomOnClick: boolean): void;
+    getAverageCenter(): boolean;
+    setAverageCenter(averageCenter: boolean): void;
+    getIgnoreHidden(): boolean;
+    setIgnoreHidden(ignoreHidden: boolean): void;
+    getEnableRetinaIcons(): boolean;
+    setEnableRetinaIcons(enableRetinaIcons: boolean): void;
+    getImageExtension(): string;
+    setImageExtension(imageExtension: string): void;
+    getImagePath(): string;
+    setImagePath(imagePath: string): void;
+    getImageSizes(): number[];
+    setImageSizes(imageSizes: number[]): void;
+    getCalculator(): TCalculator;
+    setCalculator(calculator: TCalculator): void;
+    getBatchSizeIE(): number;
+    setBatchSizeIE(batchSizeIE: number): void;
+    getClusterClass(): string;
+    setClusterClass(clusterClass: string): void;
+    getMarkers(): MarkerExtended[];
+    getTotalMarkers(): number;
+    getClusters(): Cluster[];
+    getTotalClusters(): number;
+    addMarker(marker: MarkerExtended, optNoDraw: boolean): void;
+    addMarkers(markers: MarkerExtended[], optNoDraw: boolean): void;
+    pushMarkerTo(marker: MarkerExtended): void;
+    removeMarker_(marker: MarkerExtended): boolean;
+    removeMarker(marker: MarkerExtended, optNoDraw: boolean): boolean;
+    removeMarkers(markers: MarkerExtended[], optNoDraw: boolean): boolean;
+    clearMarkers(): void;
+    repaint(): void;
+    getExtendedBounds(bounds: google.maps.LatLngBounds): google.maps.LatLngBounds;
+    redraw(): void;
+    resetViewport(optHide: boolean): void;
+    distanceBetweenPoints(p1: google.maps.LatLng, p2: google.maps.LatLng): number;
+    isMarkerInBounds(marker: MarkerExtended, bounds: google.maps.LatLngBounds): boolean;
+    addToClosestCluster(marker: MarkerExtended): void;
+    createClusters(iFirst: number): void;
+    extend<A extends typeof ClusterIcon | typeof Clusterer>(obj1: A, obj2: typeof google.maps.OverlayView): A;
+}

package/dist/__tests__/clusterer.test.d.ts

@@ -0,0 +1,4 @@
+/**
+ * @jest-environment jsdom
+ */
+export {};

package/dist/cjs.js

@@ -164,18 +164,18 @@ var ClusterIcon = /** @class */ (function () {
         this.visible = false;
     };
     ClusterIcon.prototype.show = function () {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e, _f;
         if (this.div && this.center) {
             var divTitle = this.sums === null ||
                 typeof this.sums.title === 'undefined' ||
                 this.sums.title === '' ? this.cluster.getClusterer().getTitle() : this.sums.title;
             // NOTE: values must be specified in px units
             var bp = this.backgroundPosition.split(' ');
-            var spriteH = parseInt(bp[0].replace(/^\s+|\s+$/g, ''), 10);
-            var spriteV = parseInt(bp[1].replace(/^\s+|\s+$/g, ''), 10);
+            var spriteH = parseInt(((_a = bp[0]) === null || _a === void 0 ? void 0 : _a.replace(/^\s+|\s+$/g, '')) || '0', 10);
+            var spriteV = parseInt(((_b = bp[1]) === null || _b === void 0 ? void 0 : _b.replace(/^\s+|\s+$/g, '')) || '0', 10);
             var pos = this.getPosFromLatLng(this.center);
             this.div.className = this.className;
-            this.div.setAttribute('style', "cursor: 'pointer'; position: 'absolute'; top: ".concat(pos !== null ? "".concat(pos.y, "px") : '0', "; left: ").concat(pos !== null ? "".concat(pos.x, "px") : '0', "; width: ").concat(this.width, "px; height: ").concat(this.height, "px; "));
+            this.div.setAttribute('style', "cursor: pointer; position: absolute; top: ".concat(pos !== null ? "".concat(pos.y, "px") : '0', "; left: ").concat(pos !== null ? "".concat(pos.x, "px") : '0', "; width: ").concat(this.width, "px; height: ").concat(this.height, "px; "));
             var img = document.createElement('img');
             img.alt = divTitle;
             img.src = this.url;
@@ -187,10 +187,10 @@ var ClusterIcon = /** @class */ (function () {
             }
             var textElm = document.createElement('div');
             textElm.setAttribute('style', "position: absolute; top: ".concat(this.anchorText[0], "px; left: ").concat(this.anchorText[1], "px; color: ").concat(this.textColor, "; font-size: ").concat(this.textSize, "px; font-family: ").concat(this.fontFamily, "; font-weight: ").concat(this.fontWeight, "; fontStyle: ").concat(this.fontStyle, "; text-decoration: ").concat(this.textDecoration, "; text-align: center; width: ").concat(this.width, "px; line-height: ").concat(this.height, "px"));
-            if ((_a = this.sums) === null || _a === void 0 ? void 0 : _a.text)
-                textElm.innerText = "".concat((_b = this.sums) === null || _b === void 0 ? void 0 : _b.text);
-            if ((_c = this.sums) === null || _c === void 0 ? void 0 : _c.html)
-                textElm.innerHTML = "".concat((_d = this.sums) === null || _d === void 0 ? void 0 : _d.html);
+            if ((_c = this.sums) === null || _c === void 0 ? void 0 : _c.text)
+                textElm.innerText = "".concat((_d = this.sums) === null || _d === void 0 ? void 0 : _d.text);
+            if ((_e = this.sums) === null || _e === void 0 ? void 0 : _e.html)
+                textElm.innerHTML = "".concat((_f = this.sums) === null || _f === void 0 ? void 0 : _f.html);
             this.div.innerHTML = '';
             this.div.appendChild(img);
             this.div.appendChild(textElm);
@@ -203,20 +203,23 @@ var ClusterIcon = /** @class */ (function () {
         this.sums = sums;
         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 = "".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';
-        this.textSize = style.textSize || 11;
-        this.textDecoration = style.textDecoration || 'none';
-        this.fontWeight = style.fontWeight || 'bold';
-        this.fontStyle = style.fontStyle || 'normal';
-        this.fontFamily = style.fontFamily || 'Arial,sans-serif';
-        this.backgroundPosition = style.backgroundPosition || '0 0';
+        if (style) {
+            this.url = style.url;
+            this.height = style.height;
+            this.width = style.width;
+            if (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';
+            this.textSize = style.textSize || 11;
+            this.textDecoration = style.textDecoration || 'none';
+            this.fontWeight = style.fontWeight || 'bold';
+            this.fontStyle = style.fontStyle || 'normal';
+            this.fontFamily = style.fontFamily || 'Arial,sans-serif';
+            this.backgroundPosition = style.backgroundPosition || '0 0';
+        }
     };
     ClusterIcon.prototype.setCenter = function (center) {
         this.center = center;
@@ -232,6 +235,7 @@ var ClusterIcon = /** @class */ (function () {
     return ClusterIcon;
 }());
 
+/* global google */
 var Cluster = /** @class */ (function () {
     function Cluster(markerClusterer) {
         this.markerClusterer = markerClusterer;
@@ -274,8 +278,9 @@ var Cluster = /** @class */ (function () {
     Cluster.prototype.getBounds = function () {
         var bounds = new google.maps.LatLngBounds(this.center, this.center);
         var markers = this.getMarkers();
-        for (var i = 0; i < markers.length; i++) {
-            var position = markers[i].getPosition();
+        for (var _i = 0, markers_1 = markers; _i < markers_1.length; _i++) {
+            var marker = markers_1[_i];
+            var position = marker.getPosition();
             if (position) {
                 bounds.extend(position);
             }
@@ -330,8 +335,9 @@ var Cluster = /** @class */ (function () {
         }
         else if (mCount === this.minClusterSize) {
             // Hide the markers that were showing.
-            for (var i = 0; i < mCount; i++) {
-                this.markers[i].setMap(null);
+            for (var _i = 0, _b = this.markers; _i < _b.length; _i++) {
+                var markerElement = _b[_i];
+                markerElement.setMap(null);
             }
         }
         else {
@@ -538,19 +544,22 @@ var Clusterer = /** @class */ (function () {
     };
     Clusterer.prototype.onRemove = function () {
         // Put all the managed markers back on the map:
-        for (var i = 0; i < this.markers.length; i++) {
-            if (this.markers[i].getMap() !== this.activeMap) {
-                this.markers[i].setMap(this.activeMap);
+        for (var _i = 0, _a = this.markers; _i < _a.length; _i++) {
+            var marker = _a[_i];
+            if (marker.getMap() !== this.activeMap) {
+                marker.setMap(this.activeMap);
             }
         }
         // Remove all clusters:
-        for (var i = 0; i < this.clusters.length; i++) {
-            this.clusters[i].remove();
+        for (var _b = 0, _c = this.clusters; _b < _c.length; _b++) {
+            var cluster = _c[_b];
+            cluster.remove();
         }
         this.clusters = [];
         // Remove map event listeners:
-        for (var i = 0; i < this.listeners.length; i++) {
-            google.maps.event.removeListener(this.listeners[i]);
+        for (var _d = 0, _e = this.listeners; _d < _e.length; _d++) {
+            var listener = _e[_d];
+            google.maps.event.removeListener(listener);
         }
         this.listeners = [];
         this.activeMap = null;
@@ -564,16 +573,17 @@ var Clusterer = /** @class */ (function () {
         for (var i = 0; i < this.imageSizes.length; i++) {
             this.styles.push({
                 url: "".concat(this.imagePath + (i + 1), ".").concat(this.imageExtension),
-                height: this.imageSizes[i],
-                width: this.imageSizes[i],
+                height: this.imageSizes[i] || 0,
+                width: this.imageSizes[i] || 0,
             });
         }
     };
     Clusterer.prototype.fitMapToMarkers = function () {
         var markers = this.getMarkers();
         var bounds = new google.maps.LatLngBounds();
-        for (var i = 0; i < markers.length; i++) {
-            var position = markers[i].getPosition();
+        for (var _i = 0, markers_1 = markers; _i < markers_1.length; _i++) {
+            var marker = markers_1[_i];
+            var position = marker.getPosition();
             if (position) {
                 bounds.extend(position);
             }
@@ -694,7 +704,10 @@ var Clusterer = /** @class */ (function () {
     Clusterer.prototype.addMarkers = function (markers, optNoDraw) {
         for (var key in markers) {
             if (Object.prototype.hasOwnProperty.call(markers, key)) {
-                this.pushMarkerTo(markers[key]);
+                var marker = markers[key];
+                if (marker) {
+                    this.pushMarkerTo(marker);
+                }
             }
         }
         if (!optNoDraw) {
@@ -745,8 +758,9 @@ var Clusterer = /** @class */ (function () {
     };
     Clusterer.prototype.removeMarkers = function (markers, optNoDraw) {
         var removed = false;
-        for (var i = 0; i < markers.length; i++) {
-            removed = removed || this.removeMarker_(markers[i]);
+        for (var _i = 0, markers_2 = markers; _i < markers_2.length; _i++) {
+            var marker = markers_2[_i];
+            removed = removed || this.removeMarker_(marker);
         }
         if (!optNoDraw && removed) {
             this.repaint();
@@ -765,8 +779,9 @@ var Clusterer = /** @class */ (function () {
         // Remove the old clusters.
         // Do it in a timeout to prevent blinking effect.
         setTimeout(function timeout() {
-            for (var i = 0; i < oldClusters.length; i++) {
-                oldClusters[i].remove();
+            for (var _i = 0, oldClusters_1 = oldClusters; _i < oldClusters_1.length; _i++) {
+                var oldCluster = oldClusters_1[_i];
+                oldCluster.remove();
             }
         }, 0);
     };
@@ -810,13 +825,14 @@ var Clusterer = /** @class */ (function () {
     };
     Clusterer.prototype.resetViewport = function (optHide) {
         // Remove all the clusters
-        for (var i = 0; i < this.clusters.length; i++) {
-            this.clusters[i].remove();
+        for (var _i = 0, _a = this.clusters; _i < _a.length; _i++) {
+            var cluster = _a[_i];
+            cluster.remove();
         }
         this.clusters = [];
         // Reset the markers to not be added and to be removed from the map.
-        for (var i = 0; i < this.markers.length; i++) {
-            var marker = this.markers[i];
+        for (var _b = 0, _c = this.markers; _b < _c.length; _b++) {
+            var marker = _c[_b];
             marker.isAdded = false;
             if (optHide) {
                 marker.setMap(null);
@@ -845,8 +861,9 @@ var Clusterer = /** @class */ (function () {
         var cluster;
         var distance = 40000; // Some large number
         var clusterToAddTo = null;
-        for (var i = 0; i < this.clusters.length; i++) {
-            cluster = this.clusters[i];
+        for (var _i = 0, _a = this.clusters; _i < _a.length; _i++) {
+            var clusterElement = _a[_i];
+            cluster = clusterElement;
             var center = cluster.getCenter();
             var position = marker.getPosition();
             if (center && position) {
@@ -902,7 +919,7 @@ 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, extendedMapBounds) && (!this.ignoreHidden || (this.ignoreHidden && marker.getVisible()))) {
+            if (marker && !marker.isAdded && this.isMarkerInBounds(marker, extendedMapBounds) && (!this.ignoreHidden || (this.ignoreHidden && marker.getVisible()))) {
                 this.addToClosestCluster(marker);
             }
         }
@@ -921,18 +938,21 @@ var Clusterer = /** @class */ (function () {
              * @event
              */
             google.maps.event.trigger(this, 'clusteringend', this);
-            for (var i = 0; i < this.clusters.length; i++) {
-                this.clusters[i].updateIcon();
+            for (var _i = 0, _a = this.clusters; _i < _a.length; _i++) {
+                var cluster = _a[_i];
+                cluster.updateIcon();
             }
         }
     };
     Clusterer.prototype.extend = function (obj1, obj2) {
         return function applyExtend(object) {
             for (var property in object.prototype) {
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                 // @ts-ignore
                 this.prototype[property] = object.prototype[property];
             }
             return this;
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
         }.apply(obj1, [obj2]);
     };
     return Clusterer;