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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (19) hide show
  1. package/dist/cjs.js +260 -201
  2. package/dist/cjs.js.map +1 -1
  3. package/dist/cjs.min.js +1 -1
  4. package/dist/cjs.min.js.map +1 -1
  5. package/dist/esm.js +260 -201
  6. package/dist/esm.js.map +1 -1
  7. package/dist/esm.min.js +1 -1
  8. package/dist/esm.min.js.map +1 -1
  9. package/dist/index.d.ts +14 -4
  10. package/dist/umd.js +260 -201
  11. package/dist/umd.js.map +1 -1
  12. package/dist/umd.min.js +1 -1
  13. package/dist/umd.min.js.map +1 -1
  14. package/package.json +10 -47
  15. package/src/Cluster.tsx +9 -5
  16. package/src/ClusterIcon.tsx +171 -110
  17. package/src/Clusterer.tsx +88 -66
  18. package/src/index.ts +5 -5
  19. package/src/setup-tests.js +0 -356
package/dist/umd.js CHANGED
@@ -4,111 +4,156 @@
4
4
  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.markerClusterer = {}));
5
5
  })(this, (function (exports) { 'use strict';
6
6
 
7
- var ClusterIcon = /** @class */ (function () {
7
+ /******************************************************************************
8
+ Copyright (c) Microsoft Corporation.
9
+
10
+ Permission to use, copy, modify, and/or distribute this software for any
11
+ purpose with or without fee is hereby granted.
12
+
13
+ THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
14
+ REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
15
+ AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
16
+ INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
17
+ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
18
+ OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
19
+ PERFORMANCE OF THIS SOFTWARE.
20
+ ***************************************************************************** */
21
+ /* global Reflect, Promise */
22
+
23
+ var extendStatics = function(d, b) {
24
+ extendStatics = Object.setPrototypeOf ||
25
+ ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
26
+ function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
27
+ return extendStatics(d, b);
28
+ };
29
+
30
+ function __extends(d, b) {
31
+ if (typeof b !== "function" && b !== null)
32
+ throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
33
+ extendStatics(d, b);
34
+ function __() { this.constructor = d; }
35
+ d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
36
+ }
37
+
38
+ var ClusterIcon = /** @class */ (function (_super) {
39
+ __extends(ClusterIcon, _super);
8
40
  function ClusterIcon(cluster, styles) {
41
+ var _this = _super.call(this) || this;
9
42
  cluster.getClusterer().extend(ClusterIcon, google.maps.OverlayView);
10
- this.cluster = cluster;
11
- this.clusterClassName = this.cluster.getClusterer().getClusterClass();
12
- this.className = this.clusterClassName;
13
- this.styles = styles;
14
- this.center = undefined;
15
- this.div = null;
16
- this.sums = null;
17
- this.visible = false;
18
- this.boundsChangedListener = null;
19
- this.url = '';
20
- this.height = 0;
21
- this.width = 0;
22
- this.anchorText = [0, 0];
23
- this.anchorIcon = [0, 0];
24
- this.textColor = 'black';
25
- this.textSize = 11;
26
- this.textDecoration = 'none';
27
- this.fontWeight = 'bold';
28
- this.fontStyle = 'normal';
29
- this.fontFamily = 'Arial,sans-serif';
30
- this.backgroundPosition = '0 0';
31
- // @ts-ignore
32
- this.setMap(cluster.getMap()); // Note: this causes onAdd to be called
43
+ _this.cluster = cluster;
44
+ _this.clusterClassName = _this.cluster.getClusterer().getClusterClass();
45
+ _this.className = _this.clusterClassName;
46
+ _this.styles = styles;
47
+ _this.center = undefined;
48
+ _this.div = null;
49
+ _this.sums = null;
50
+ _this.visible = false;
51
+ _this.boundsChangedListener = null;
52
+ _this.url = '';
53
+ _this.height = 0;
54
+ _this.width = 0;
55
+ _this.anchorText = [0, 0];
56
+ _this.anchorIcon = [0, 0];
57
+ _this.textColor = 'black';
58
+ _this.textSize = 11;
59
+ _this.textDecoration = 'none';
60
+ _this.fontWeight = 'bold';
61
+ _this.fontStyle = 'normal';
62
+ _this.fontFamily = 'Arial,sans-serif';
63
+ _this.backgroundPosition = '0 0';
64
+ _this.cMouseDownInCluster = null;
65
+ _this.cDraggingMapByCluster = null;
66
+ _this.timeOut = null;
67
+ _this.setMap(cluster.getMap()); // Note: this causes onAdd to be called
68
+ return _this;
33
69
  }
70
+ ClusterIcon.prototype.onBoundsChanged = function () {
71
+ this.cDraggingMapByCluster = this.cMouseDownInCluster;
72
+ };
73
+ ClusterIcon.prototype.onMouseDown = function () {
74
+ this.cMouseDownInCluster = true;
75
+ this.cDraggingMapByCluster = false;
76
+ };
77
+ ClusterIcon.prototype.onClick = function (event) {
78
+ this.cMouseDownInCluster = false;
79
+ if (!this.cDraggingMapByCluster) {
80
+ var markerClusterer_1 = this.cluster.getClusterer();
81
+ /**
82
+ * This event is fired when a cluster marker is clicked.
83
+ * @name MarkerClusterer#click
84
+ * @param {Cluster} c The cluster that was clicked.
85
+ * @event
86
+ */
87
+ google.maps.event.trigger(markerClusterer_1, 'click', this.cluster);
88
+ google.maps.event.trigger(markerClusterer_1, 'clusterclick', this.cluster); // deprecated name
89
+ // The default click handler follows. Disable it by setting
90
+ // the zoomOnClick property to false.
91
+ if (markerClusterer_1.getZoomOnClick()) {
92
+ // Zoom into the cluster.
93
+ var maxZoom_1 = markerClusterer_1.getMaxZoom();
94
+ var bounds_1 = this.cluster.getBounds();
95
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
96
+ // @ts-ignore
97
+ markerClusterer_1.getMap().fitBounds(bounds_1);
98
+ // There is a fix for Issue 170 here:
99
+ this.timeOut = window.setTimeout(function () {
100
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
101
+ // @ts-ignore
102
+ markerClusterer_1.getMap().fitBounds(bounds_1);
103
+ // Don't zoom beyond the max zoom level
104
+ if (maxZoom_1 !== null &&
105
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
106
+ // @ts-ignore
107
+ markerClusterer_1.getMap().getZoom() > maxZoom_1) {
108
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
109
+ // @ts-ignore
110
+ markerClusterer_1.getMap().setZoom(maxZoom_1 + 1);
111
+ }
112
+ }, 100);
113
+ }
114
+ // Prevent event propagation to the map:
115
+ event.cancelBubble = true;
116
+ if (event.stopPropagation) {
117
+ event.stopPropagation();
118
+ }
119
+ }
120
+ };
121
+ ClusterIcon.prototype.onMouseOver = function () {
122
+ /**
123
+ * This event is fired when the mouse moves over a cluster marker.
124
+ * @name MarkerClusterer#mouseover
125
+ * @param {Cluster} c The cluster that the mouse moved over.
126
+ * @event
127
+ */
128
+ google.maps.event.trigger(this.cluster.getClusterer(), 'mouseover', this.cluster);
129
+ };
130
+ ClusterIcon.prototype.onMouseOut = function () {
131
+ /**
132
+ * This event is fired when the mouse moves out of a cluster marker.
133
+ * @name MarkerClusterer#mouseout
134
+ * @param {Cluster} c The cluster that the mouse moved out of.
135
+ * @event
136
+ */
137
+ google.maps.event.trigger(this.cluster.getClusterer(), 'mouseout', this.cluster);
138
+ };
34
139
  ClusterIcon.prototype.onAdd = function () {
35
- var _this = this;
36
- var cMouseDownInCluster;
37
- var cDraggingMapByCluster;
38
140
  this.div = document.createElement('div');
39
141
  this.div.className = this.className;
40
142
  if (this.visible) {
41
143
  this.show();
42
144
  }
145
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
43
146
  // @ts-ignore
44
147
  this.getPanes().overlayMouseTarget.appendChild(this.div);
45
148
  // Fix for Issue 157
46
149
  this.boundsChangedListener = google.maps.event.addListener(
150
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
47
151
  // @ts-ignore
48
- this.getMap(), 'boundschanged', function boundsChanged() {
49
- cDraggingMapByCluster = cMouseDownInCluster;
50
- });
51
- google.maps.event.addDomListener(this.div, 'mousedown', function onMouseDown() {
52
- cMouseDownInCluster = true;
53
- cDraggingMapByCluster = false;
54
- });
55
- google.maps.event.addDomListener(this.div, 'click', function (event) {
56
- cMouseDownInCluster = false;
57
- if (!cDraggingMapByCluster) {
58
- var markerClusterer_1 = _this.cluster.getClusterer();
59
- /**
60
- * This event is fired when a cluster marker is clicked.
61
- * @name MarkerClusterer#click
62
- * @param {Cluster} c The cluster that was clicked.
63
- * @event
64
- */
65
- google.maps.event.trigger(markerClusterer_1, 'click', _this.cluster);
66
- google.maps.event.trigger(markerClusterer_1, 'clusterclick', _this.cluster); // deprecated name
67
- // The default click handler follows. Disable it by setting
68
- // the zoomOnClick property to false.
69
- if (markerClusterer_1.getZoomOnClick()) {
70
- // Zoom into the cluster.
71
- var maxZoom_1 = markerClusterer_1.getMaxZoom();
72
- var bounds_1 = _this.cluster.getBounds();
73
- // @ts-ignore
74
- markerClusterer_1.getMap().fitBounds(bounds_1);
75
- // There is a fix for Issue 170 here:
76
- setTimeout(function timeout() {
77
- // @ts-ignore
78
- markerClusterer_1.getMap().fitBounds(bounds_1);
79
- // Don't zoom beyond the max zoom level
80
- // @ts-ignore
81
- if (maxZoom_1 !== null && markerClusterer_1.getMap().getZoom() > maxZoom_1) {
82
- // @ts-ignore
83
- markerClusterer_1.getMap().setZoom(maxZoom_1 + 1);
84
- }
85
- }, 100);
86
- }
87
- // Prevent event propagation to the map:
88
- event.cancelBubble = true;
89
- if (event.stopPropagation) {
90
- event.stopPropagation();
91
- }
92
- }
93
- });
94
- google.maps.event.addDomListener(this.div, 'mouseover', function () {
95
- /**
96
- * This event is fired when the mouse moves over a cluster marker.
97
- * @name MarkerClusterer#mouseover
98
- * @param {Cluster} c The cluster that the mouse moved over.
99
- * @event
100
- */
101
- google.maps.event.trigger(_this.cluster.getClusterer(), 'mouseover', _this.cluster);
102
- });
103
- google.maps.event.addDomListener(this.div, 'mouseout', function () {
104
- /**
105
- * This event is fired when the mouse moves out of a cluster marker.
106
- * @name MarkerClusterer#mouseout
107
- * @param {Cluster} c The cluster that the mouse moved out of.
108
- * @event
109
- */
110
- google.maps.event.trigger(_this.cluster.getClusterer(), 'mouseout', _this.cluster);
111
- });
152
+ this.getMap(), 'bounds_changed', this.onBoundsChanged);
153
+ this.div.addEventListener('mousedown', this.onMouseDown);
154
+ this.div.addEventListener('click', this.onClick);
155
+ this.div.addEventListener('mouseover', this.onMouseOver);
156
+ this.div.addEventListener('mouseout', this.onMouseOut);
112
157
  };
113
158
  ClusterIcon.prototype.onRemove = function () {
114
159
  if (this.div && this.div.parentNode) {
@@ -116,16 +161,23 @@
116
161
  if (this.boundsChangedListener !== null) {
117
162
  google.maps.event.removeListener(this.boundsChangedListener);
118
163
  }
119
- google.maps.event.clearInstanceListeners(this.div);
164
+ this.div.removeEventListener('mousedown', this.onMouseDown);
165
+ this.div.removeEventListener('click', this.onClick);
166
+ this.div.removeEventListener('mouseover', this.onMouseOver);
167
+ this.div.removeEventListener('mouseout', this.onMouseOut);
120
168
  this.div.parentNode.removeChild(this.div);
169
+ if (this.timeOut !== null) {
170
+ window.clearTimeout(this.timeOut);
171
+ this.timeOut = null;
172
+ }
121
173
  this.div = null;
122
174
  }
123
175
  };
124
176
  ClusterIcon.prototype.draw = function () {
125
177
  if (this.visible && this.div !== null && this.center) {
126
- var _a = this.getPosFromLatLng(this.center), x = _a.x, y = _a.y;
127
- this.div.style.top = y + 'px';
128
- this.div.style.left = x + 'px';
178
+ var pos = this.getPosFromLatLng(this.center);
179
+ this.div.style.top = pos !== null ? "".concat(pos.y, "px") : '0';
180
+ this.div.style.left = pos !== null ? "".concat(pos.x, "px") : '0';
129
181
  }
130
182
  };
131
183
  ClusterIcon.prototype.hide = function () {
@@ -143,7 +195,9 @@
143
195
  var spriteH = parseInt(bp[0].replace(/^\s+|\s+$/g, ''), 10);
144
196
  var spriteV = parseInt(bp[1].replace(/^\s+|\s+$/g, ''), 10);
145
197
  var pos = this.getPosFromLatLng(this.center);
146
- if (this.sums === null || typeof this.sums.title === 'undefined' || this.sums.title === '') {
198
+ if (this.sums === null ||
199
+ typeof this.sums.title === 'undefined' ||
200
+ this.sums.title === '') {
147
201
  divTitle = this.cluster.getClusterer().getTitle();
148
202
  }
149
203
  else {
@@ -151,8 +205,8 @@
151
205
  }
152
206
  this.div.style.cursor = 'pointer';
153
207
  this.div.style.position = 'absolute';
154
- this.div.style.top = "".concat(pos.y, "px");
155
- this.div.style.left = "".concat(pos.x, "px");
208
+ this.div.style.top = pos !== null ? "".concat(pos.y, "px") : '0';
209
+ this.div.style.left = pos !== null ? "".concat(pos.x, "px") : '0';
156
210
  this.div.style.width = "".concat(this.width, "px");
157
211
  this.div.style.height = "".concat(this.height, "px");
158
212
  var img = document.createElement('img');
@@ -209,20 +263,20 @@
209
263
  this.center = center;
210
264
  };
211
265
  ClusterIcon.prototype.getPosFromLatLng = function (latlng) {
212
- // @ts-ignore
213
266
  var pos = this.getProjection().fromLatLngToDivPixel(latlng);
214
- pos.x -= this.anchorIcon[1];
215
- pos.y -= this.anchorIcon[0];
216
- // pos.x = pos.x
217
- // pos.y = pos.y
267
+ if (pos !== null) {
268
+ pos.x -= this.anchorIcon[1];
269
+ pos.y -= this.anchorIcon[0];
270
+ }
218
271
  return pos;
219
272
  };
220
273
  return ClusterIcon;
221
- }());
274
+ }(google.maps.OverlayView));
222
275
 
223
276
  var Cluster = /** @class */ (function () {
224
277
  function Cluster(markerClusterer) {
225
278
  this.markerClusterer = markerClusterer;
279
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
226
280
  // @ts-ignore
227
281
  this.map = this.markerClusterer.getMap();
228
282
  this.gridSize = this.markerClusterer.getGridSize();
@@ -260,9 +314,11 @@
260
314
  return bounds;
261
315
  };
262
316
  Cluster.prototype.remove = function () {
317
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
263
318
  // @ts-ignore
264
319
  this.clusterIcon.setMap(null);
265
320
  this.markers = [];
321
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
266
322
  // @ts-ignore
267
323
  delete this.markers;
268
324
  };
@@ -350,11 +406,9 @@
350
406
  if (this.markers.includes) {
351
407
  return this.markers.includes(marker);
352
408
  }
353
- else {
354
- for (var i = 0; i < this.markers.length; i++) {
355
- if (marker === this.markers[i]) {
356
- return true;
357
- }
409
+ for (var i = 0; i < this.markers.length; i++) {
410
+ if (marker === this.markers[i]) {
411
+ return true;
358
412
  }
359
413
  }
360
414
  return false;
@@ -362,7 +416,6 @@
362
416
  return Cluster;
363
417
  }());
364
418
 
365
- /* global google */
366
419
  /**
367
420
  * Supports up to 9007199254740991 (Number.MAX_SAFE_INTEGER) markers
368
421
  * which is not a problem as max array length is 4294967296 (2**32)
@@ -383,85 +436,86 @@
383
436
  var IMAGE_EXTENSION = 'png';
384
437
  var IMAGE_SIZES = [53, 56, 66, 78, 90];
385
438
  var CLUSTERER_CLASS = 'cluster';
386
- var Clusterer = /** @class */ (function () {
439
+ var Clusterer = /** @class */ (function (_super) {
440
+ __extends(Clusterer, _super);
387
441
  function Clusterer(map, optMarkers, optOptions) {
388
442
  if (optMarkers === void 0) { optMarkers = []; }
389
443
  if (optOptions === void 0) { optOptions = {}; }
390
- this.extend(Clusterer, google.maps.OverlayView);
391
- this.markers = [];
392
- this.clusters = [];
393
- this.listeners = [];
394
- this.activeMap = null;
395
- this.ready = false;
396
- this.gridSize = optOptions.gridSize || 60;
397
- this.minClusterSize = optOptions.minimumClusterSize || 2;
398
- this.maxZoom = optOptions.maxZoom || null;
399
- this.styles = optOptions.styles || [];
400
- this.title = optOptions.title || '';
401
- this.zoomOnClick = true;
444
+ var _this = _super.call(this) || this;
445
+ _this.extend(Clusterer, google.maps.OverlayView);
446
+ _this.markers = [];
447
+ _this.clusters = [];
448
+ _this.listeners = [];
449
+ _this.activeMap = null;
450
+ _this.ready = false;
451
+ _this.gridSize = optOptions.gridSize || 60;
452
+ _this.minClusterSize = optOptions.minimumClusterSize || 2;
453
+ _this.maxZoom = optOptions.maxZoom || null;
454
+ _this.styles = optOptions.styles || [];
455
+ _this.title = optOptions.title || '';
456
+ _this.zoomOnClick = true;
402
457
  if (optOptions.zoomOnClick !== undefined) {
403
- this.zoomOnClick = optOptions.zoomOnClick;
458
+ _this.zoomOnClick = optOptions.zoomOnClick;
404
459
  }
405
- this.averageCenter = false;
460
+ _this.averageCenter = false;
406
461
  if (optOptions.averageCenter !== undefined) {
407
- this.averageCenter = optOptions.averageCenter;
462
+ _this.averageCenter = optOptions.averageCenter;
408
463
  }
409
- this.ignoreHidden = false;
464
+ _this.ignoreHidden = false;
410
465
  if (optOptions.ignoreHidden !== undefined) {
411
- this.ignoreHidden = optOptions.ignoreHidden;
466
+ _this.ignoreHidden = optOptions.ignoreHidden;
412
467
  }
413
- this.enableRetinaIcons = false;
468
+ _this.enableRetinaIcons = false;
414
469
  if (optOptions.enableRetinaIcons !== undefined) {
415
- this.enableRetinaIcons = optOptions.enableRetinaIcons;
416
- }
417
- this.imagePath = optOptions.imagePath || IMAGE_PATH;
418
- this.imageExtension = optOptions.imageExtension || IMAGE_EXTENSION;
419
- this.imageSizes = optOptions.imageSizes || IMAGE_SIZES;
420
- this.calculator = optOptions.calculator || CALCULATOR;
421
- this.batchSize = optOptions.batchSize || BATCH_SIZE;
422
- this.batchSizeIE = optOptions.batchSizeIE || BATCH_SIZE_IE;
423
- this.clusterClass = optOptions.clusterClass || CLUSTERER_CLASS;
470
+ _this.enableRetinaIcons = optOptions.enableRetinaIcons;
471
+ }
472
+ _this.imagePath = optOptions.imagePath || IMAGE_PATH;
473
+ _this.imageExtension = optOptions.imageExtension || IMAGE_EXTENSION;
474
+ _this.imageSizes = optOptions.imageSizes || IMAGE_SIZES;
475
+ _this.calculator = optOptions.calculator || CALCULATOR;
476
+ _this.batchSize = optOptions.batchSize || BATCH_SIZE;
477
+ _this.batchSizeIE = optOptions.batchSizeIE || BATCH_SIZE_IE;
478
+ _this.clusterClass = optOptions.clusterClass || CLUSTERER_CLASS;
424
479
  if (navigator.userAgent.toLowerCase().indexOf('msie') !== -1) {
425
480
  // Try to avoid IE timeout when processing a huge number of markers:
426
- this.batchSize = this.batchSizeIE;
481
+ _this.batchSize = _this.batchSizeIE;
427
482
  }
428
- this.timerRefStatic = null;
429
- this.setupStyles();
430
- this.addMarkers(optMarkers, true);
483
+ _this.timerRefStatic = null;
484
+ _this.setupStyles();
485
+ _this.addMarkers(optMarkers, true);
486
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
431
487
  // @ts-ignore
432
- this.setMap(map); // Note: this causes onAdd to be called
488
+ _this.setMap(map); // Note: this causes onAdd to be called
489
+ return _this;
433
490
  }
491
+ Clusterer.prototype.onZoomChanged = function () {
492
+ var _a, _b;
493
+ this.resetViewport(false);
494
+ // Workaround for this Google bug: when map is at level 0 and "-" of
495
+ // zoom slider is clicked, a "zoom_changed" event is fired even though
496
+ // the map doesn't zoom out any further. In this situation, no "idle"
497
+ // event is triggered so the cluster markers that have been removed
498
+ // do not get redrawn. Same goes for a zoom in at maxZoom.
499
+ if (((_a = this.getMap()) === null || _a === void 0 ? void 0 : _a.getZoom()) === (this.get('minZoom') || 0) ||
500
+ ((_b = this.getMap()) === null || _b === void 0 ? void 0 : _b.getZoom()) === this.get('maxZoom')) {
501
+ google.maps.event.trigger(this, 'idle');
502
+ }
503
+ };
504
+ Clusterer.prototype.onIdle = function () {
505
+ this.redraw();
506
+ };
434
507
  Clusterer.prototype.onAdd = function () {
435
- var _this = this;
436
- // @ts-ignore
437
- this.activeMap = this.getMap();
508
+ var map = this.getMap();
509
+ this.activeMap = map;
438
510
  this.ready = true;
439
511
  this.repaint();
440
- // Add the map event listeners
441
- this.listeners = [
442
- google.maps.event.addListener(
443
- // @ts-ignore
444
- this.getMap(), 'zoom_changed', function () {
445
- _this.resetViewport(false);
446
- // Workaround for this Google bug: when map is at level 0 and "-" of
447
- // zoom slider is clicked, a "zoom_changed" event is fired even though
448
- // the map doesn't zoom out any further. In this situation, no "idle"
449
- // event is triggered so the cluster markers that have been removed
450
- // do not get redrawn. Same goes for a zoom in at maxZoom.
451
- if (
452
- // @ts-ignore
453
- _this.getMap().getZoom() === (_this.get('minZoom') || 0) ||
454
- // @ts-ignore
455
- _this.getMap().getZoom() === _this.get('maxZoom')) {
456
- google.maps.event.trigger(_this, 'idle');
457
- }
458
- }),
459
- google.maps.event.addListener(
460
- // @ts-ignore
461
- this.getMap(), 'idle', function () {
462
- _this.redraw();
463
- }),
464
- ];
512
+ if (map !== null) {
513
+ // Add the map event listeners
514
+ this.listeners = [
515
+ google.maps.event.addListener(map, 'zoom_changed', this.onZoomChanged),
516
+ google.maps.event.addListener(map, 'idle', this.onIdle),
517
+ ];
518
+ }
465
519
  };
466
520
  Clusterer.prototype.onRemove = function () {
467
521
  // Put all the managed markers back on the map:
@@ -506,6 +560,7 @@
506
560
  bounds.extend(position);
507
561
  }
508
562
  }
563
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
509
564
  // @ts-ignore
510
565
  this.getMap().fitBounds(bounds);
511
566
  };
@@ -697,26 +752,39 @@
697
752
  }, 0);
698
753
  };
699
754
  Clusterer.prototype.getExtendedBounds = function (bounds) {
755
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
700
756
  // @ts-ignore
701
757
  var projection = this.getProjection();
702
758
  // Convert the points to pixels and the extend out by the grid size.
703
759
  var trPix = projection.fromLatLngToDivPixel(
704
760
  // Turn the bounds into latlng.
705
761
  new google.maps.LatLng(bounds.getNorthEast().lat(), bounds.getNorthEast().lng()));
706
- trPix.x += this.gridSize;
707
- trPix.y -= this.gridSize;
762
+ if (trPix !== null) {
763
+ trPix.x += this.gridSize;
764
+ trPix.y -= this.gridSize;
765
+ }
708
766
  var blPix = projection.fromLatLngToDivPixel(
709
767
  // Turn the bounds into latlng.
710
768
  new google.maps.LatLng(bounds.getSouthWest().lat(), bounds.getSouthWest().lng()));
711
- blPix.x -= this.gridSize;
712
- blPix.y += this.gridSize;
769
+ if (blPix !== null) {
770
+ blPix.x -= this.gridSize;
771
+ blPix.y += this.gridSize;
772
+ }
713
773
  // Extend the bounds to contain the new bounds.
714
- bounds.extend(
715
- // Convert the pixel points back to LatLng nw
716
- projection.fromDivPixelToLatLng(trPix));
717
- bounds.extend(
718
- // Convert the pixel points back to LatLng sw
719
- projection.fromDivPixelToLatLng(blPix));
774
+ if (trPix !== null) {
775
+ // Convert the pixel points back to LatLng nw
776
+ var point1 = projection.fromDivPixelToLatLng(trPix);
777
+ if (point1 !== null) {
778
+ bounds.extend(point1);
779
+ }
780
+ }
781
+ if (blPix !== null) {
782
+ // Convert the pixel points back to LatLng sw
783
+ var point2 = projection.fromDivPixelToLatLng(blPix);
784
+ if (point2 !== null) {
785
+ bounds.extend(point2);
786
+ }
787
+ }
720
788
  return bounds;
721
789
  };
722
790
  Clusterer.prototype.redraw = function () {
@@ -798,35 +866,29 @@
798
866
  google.maps.event.trigger(this, 'clusteringbegin', this);
799
867
  if (this.timerRefStatic !== null) {
800
868
  window.clearTimeout(this.timerRefStatic);
869
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
801
870
  // @ts-ignore
802
871
  delete this.timerRefStatic;
803
872
  }
804
873
  }
874
+ var map = this.getMap();
875
+ var bounds = map !== null && 'getBounds' in map ? map.getBounds() : null;
805
876
  // Get our current map view bounds.
806
877
  // Create a new bounds object so we don't affect the map.
807
878
  //
808
879
  // See Comments 9 & 11 on Issue 3651 relating to this workaround for a Google Maps bug:
809
880
  var mapBounds =
881
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
810
882
  // @ts-ignore
811
- this.getMap().getZoom() > 3
812
- ? new google.maps.LatLngBounds(
813
- // @ts-ignore
814
- this.getMap()
815
- .getBounds()
816
- .getSouthWest(),
817
- // @ts-ignore
818
- this.getMap()
819
- .getBounds()
820
- .getNorthEast())
883
+ map.getZoom() > 3
884
+ ? new google.maps.LatLngBounds(bounds === null || bounds === void 0 ? void 0 : bounds.getSouthWest(), bounds === null || bounds === void 0 ? void 0 : bounds.getNorthEast())
821
885
  : new google.maps.LatLngBounds(new google.maps.LatLng(85.02070771743472, -178.48388434375), new google.maps.LatLng(-85.08136444384544, 178.00048865625));
822
- var bounds = this.getExtendedBounds(mapBounds);
886
+ var extendedMapBounds = this.getExtendedBounds(mapBounds);
823
887
  var iLast = Math.min(iFirst + this.batchSize, this.markers.length);
824
888
  for (var i = iFirst; i < iLast; i++) {
825
889
  var marker = this.markers[i];
826
- if (!marker.isAdded && this.isMarkerInBounds(marker, bounds)) {
827
- if (!this.ignoreHidden || (this.ignoreHidden && marker.getVisible())) {
828
- this.addToClosestCluster(marker);
829
- }
890
+ if (!marker.isAdded && this.isMarkerInBounds(marker, extendedMapBounds) && (!this.ignoreHidden || (this.ignoreHidden && marker.getVisible()))) {
891
+ this.addToClosestCluster(marker);
830
892
  }
831
893
  }
832
894
  if (iLast < this.markers.length) {
@@ -851,17 +913,14 @@
851
913
  };
852
914
  Clusterer.prototype.extend = function (obj1, obj2) {
853
915
  return function applyExtend(object) {
854
- // eslint-disable-next-line guard-for-in
855
916
  for (var property in object.prototype) {
856
- // @ts-ignore
857
- this.prototype[property] = object.prototype[property];
917
+ this.prototype.set(property, object.prototype.get(property));
858
918
  }
859
- // @ts-ignore
860
919
  return this;
861
920
  }.apply(obj1, [obj2]);
862
921
  };
863
922
  return Clusterer;
864
- }());
923
+ }(google.maps.OverlayView));
865
924
 
866
925
  exports.Cluster = Cluster;
867
926
  exports.ClusterIcon = ClusterIcon;