@react-google-maps/marker-clusterer 2.11.6 → 2.14.0

package/dist/Cluster.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="google.maps" />
+import { Clusterer } from './Clusterer';
+import { ClusterIcon } from './ClusterIcon';
+import { 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 { Cluster } from './Cluster';
+import { 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[];
+    anchorIcon: 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 { ClusterIcon } from './ClusterIcon';
+import { 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

@@ -1,7 +1,5 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var ClusterIcon = /** @class */ (function () {
     function ClusterIcon(cluster, styles) {
         cluster.getClusterer().extend(ClusterIcon, google.maps.OverlayView);
@@ -164,54 +162,33 @@ var ClusterIcon = /** @class */ (function () {
         this.visible = false;
     };
     ClusterIcon.prototype.show = function () {
-        var _a;
+        var _a, _b, _c, _d;
         if (this.div && this.center) {
-            var divTitle = '';
+            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 pos = this.getPosFromLatLng(this.center);
-            if (this.sums === null ||
-                typeof this.sums.title === 'undefined' ||
-                this.sums.title === '') {
-                divTitle = this.cluster.getClusterer().getTitle();
-            }
-            else {
-                divTitle = this.sums.title;
-            }
             this.div.className = this.className;
-            this.div.style.cursor = 'pointer';
-            this.div.style.position = 'absolute';
-            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");
+            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;
             img.width = this.width;
             img.height = this.height;
-            img.style.position = 'absolute';
-            img.style.top = "".concat(spriteV, "px");
-            img.style.left = "".concat(spriteH, "px");
+            img.setAttribute('style', "position: absolute; top: ".concat(spriteV, "px; left: ").concat(spriteH, "px"));
             if (!this.cluster.getClusterer().enableRetinaIcons) {
                 img.style.clip = "rect(-".concat(spriteV, "px, -").concat(spriteH + this.width, "px, -").concat(spriteV + this.height, ", -").concat(spriteH, ")");
             }
             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);
+            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);
             this.div.innerHTML = '';
             this.div.appendChild(img);
             this.div.appendChild(textElm);
@@ -431,59 +408,60 @@ var Clusterer = /** @class */ (function () {
     function Clusterer(map, optMarkers, optOptions) {
         if (optMarkers === void 0) { optMarkers = []; }
         if (optOptions === void 0) { optOptions = {}; }
-        this.onZoomChanged = this.onZoomChanged.bind(this);
-        this.onIdle = this.onIdle.bind(this);
-        this.onAdd = this.onAdd.bind(this);
-        this.onRemove = this.onRemove.bind(this);
-        this.draw = this.draw.bind(this);
-        this.setupStyles = this.setupStyles.bind(this);
-        this.fitMapToMarkers = this.fitMapToMarkers.bind(this);
-        this.getGridSize = this.getGridSize.bind(this);
-        this.setGridSize = this.setGridSize.bind(this);
         this.getMinimumClusterSize = this.getMinimumClusterSize.bind(this);
         this.setMinimumClusterSize = this.setMinimumClusterSize.bind(this);
-        this.getMaxZoom = this.getMaxZoom.bind(this);
-        this.setMaxZoom = this.setMaxZoom.bind(this);
-        this.getStyles = this.getStyles.bind(this);
-        this.setStyles = this.setStyles.bind(this);
-        this.getTitle = this.getTitle.bind(this);
-        this.setTitle = this.setTitle.bind(this);
-        this.getZoomOnClick = this.getZoomOnClick.bind(this);
-        this.setZoomOnClick = this.setZoomOnClick.bind(this);
-        this.getAverageCenter = this.getAverageCenter.bind(this);
-        this.setAverageCenter = this.setAverageCenter.bind(this);
-        this.getIgnoreHidden = this.getIgnoreHidden.bind(this);
-        this.setIgnoreHidden = this.setIgnoreHidden.bind(this);
         this.getEnableRetinaIcons = this.getEnableRetinaIcons.bind(this);
         this.setEnableRetinaIcons = this.setEnableRetinaIcons.bind(this);
+        this.addToClosestCluster = this.addToClosestCluster.bind(this);
         this.getImageExtension = this.getImageExtension.bind(this);
         this.setImageExtension = this.setImageExtension.bind(this);
-        this.getImagePath = this.getImagePath.bind(this);
-        this.setImagePath = this.setImagePath.bind(this);
+        this.getExtendedBounds = this.getExtendedBounds.bind(this);
+        this.getAverageCenter = this.getAverageCenter.bind(this);
+        this.setAverageCenter = this.setAverageCenter.bind(this);
+        this.getTotalClusters = this.getTotalClusters.bind(this);
+        this.fitMapToMarkers = this.fitMapToMarkers.bind(this);
+        this.getIgnoreHidden = this.getIgnoreHidden.bind(this);
+        this.setIgnoreHidden = this.setIgnoreHidden.bind(this);
+        this.getClusterClass = this.getClusterClass.bind(this);
+        this.setClusterClass = this.setClusterClass.bind(this);
+        this.getTotalMarkers = this.getTotalMarkers.bind(this);
+        this.getZoomOnClick = this.getZoomOnClick.bind(this);
+        this.setZoomOnClick = this.setZoomOnClick.bind(this);
+        this.getBatchSizeIE = this.getBatchSizeIE.bind(this);
+        this.setBatchSizeIE = this.setBatchSizeIE.bind(this);
+        this.createClusters = this.createClusters.bind(this);
+        this.onZoomChanged = this.onZoomChanged.bind(this);
         this.getImageSizes = this.getImageSizes.bind(this);
         this.setImageSizes = this.setImageSizes.bind(this);
         this.getCalculator = this.getCalculator.bind(this);
         this.setCalculator = this.setCalculator.bind(this);
-        this.getBatchSizeIE = this.getBatchSizeIE.bind(this);
-        this.setBatchSizeIE = this.setBatchSizeIE.bind(this);
-        this.getClusterClass = this.getClusterClass.bind(this);
-        this.setClusterClass = this.setClusterClass.bind(this);
-        this.getMarkers = this.getMarkers.bind(this);
-        this.getTotalMarkers = this.getTotalMarkers.bind(this);
-        this.getClusters = this.getClusters.bind(this);
-        this.getTotalClusters = this.getTotalClusters.bind(this);
-        this.addMarker = this.addMarker.bind(this);
-        this.addMarkers = this.addMarkers.bind(this);
+        this.removeMarkers = this.removeMarkers.bind(this);
+        this.resetViewport = this.resetViewport.bind(this);
+        this.getImagePath = this.getImagePath.bind(this);
+        this.setImagePath = this.setImagePath.bind(this);
         this.pushMarkerTo = this.pushMarkerTo.bind(this);
         this.removeMarker = this.removeMarker.bind(this);
-        this.removeMarkers = this.removeMarkers.bind(this);
         this.clearMarkers = this.clearMarkers.bind(this);
+        this.setupStyles = this.setupStyles.bind(this);
+        this.getGridSize = this.getGridSize.bind(this);
+        this.setGridSize = this.setGridSize.bind(this);
+        this.getClusters = this.getClusters.bind(this);
+        this.getMaxZoom = this.getMaxZoom.bind(this);
+        this.setMaxZoom = this.setMaxZoom.bind(this);
+        this.getMarkers = this.getMarkers.bind(this);
+        this.addMarkers = this.addMarkers.bind(this);
+        this.getStyles = this.getStyles.bind(this);
+        this.setStyles = this.setStyles.bind(this);
+        this.addMarker = this.addMarker.bind(this);
+        this.onRemove = this.onRemove.bind(this);
+        this.getTitle = this.getTitle.bind(this);
+        this.setTitle = this.setTitle.bind(this);
         this.repaint = this.repaint.bind(this);
-        this.getExtendedBounds = this.getExtendedBounds.bind(this);
+        this.onIdle = this.onIdle.bind(this);
         this.redraw = this.redraw.bind(this);
-        this.resetViewport = this.resetViewport.bind(this);
-        this.addToClosestCluster = this.addToClosestCluster.bind(this);
-        this.createClusters = this.createClusters.bind(this);
+        this.extend = this.extend.bind(this);
+        this.onAdd = this.onAdd.bind(this);
+        this.draw = this.draw.bind(this);
         this.extend(Clusterer, google.maps.OverlayView);
         this.markers = [];
         this.clusters = [];
@@ -949,7 +927,8 @@ var Clusterer = /** @class */ (function () {
     Clusterer.prototype.extend = function (obj1, obj2) {
         return function applyExtend(object) {
             for (var property in object.prototype) {
-                this.prototype.set(property, object.prototype.get(property));
+                // @ts-ignore
+                this.prototype[property] = object.prototype[property];
             }
             return this;
         }.apply(obj1, [obj2]);