@react-google-maps/marker-clusterer 2.6.0 → 2.10.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 (21) hide show
  1. package/dist/cjs.js +63 -129
  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 +63 -129
  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 +15 -16
  10. package/dist/umd.js +63 -129
  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 -39
  15. package/src/Cluster.tsx +9 -7
  16. package/src/ClusterIcon.tsx +38 -101
  17. package/src/Clusterer.tsx +18 -24
  18. package/src/__tests__/clusterer.test.ts +4 -0
  19. package/src/index.ts +5 -5
  20. package/src/types.tsx +16 -16
  21. package/src/setup-tests.js +0 -356
package/dist/umd.js CHANGED
@@ -28,7 +28,6 @@
28
28
  this.fontStyle = 'normal';
29
29
  this.fontFamily = 'Arial,sans-serif';
30
30
  this.backgroundPosition = '0 0';
31
- // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
32
31
  // @ts-ignore
33
32
  this.setMap(cluster.getMap()); // Note: this causes onAdd to be called
34
33
  }
@@ -41,24 +40,19 @@
41
40
  if (this.visible) {
42
41
  this.show();
43
42
  }
44
- // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
45
43
  // @ts-ignore
46
44
  this.getPanes().overlayMouseTarget.appendChild(this.div);
47
45
  // Fix for Issue 157
48
46
  this.boundsChangedListener = google.maps.event.addListener(
49
- // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
50
47
  // @ts-ignore
51
48
  this.getMap(), 'boundschanged', function boundsChanged() {
52
49
  cDraggingMapByCluster = cMouseDownInCluster;
53
50
  });
54
- google.maps.event.addDomListener(this.div, 'mousedown', function onMouseDown() {
51
+ google.maps.event.addListener(this.div, 'mousedown', function onMouseDown() {
55
52
  cMouseDownInCluster = true;
56
53
  cDraggingMapByCluster = false;
57
54
  });
58
- // eslint-disable-next-line @getify/proper-arrows/this, @getify/proper-arrows/name
59
- google.maps.event.addDomListener(this.div, 'click',
60
- // eslint-disable-next-line @getify/proper-arrows/this, @getify/proper-arrows/name
61
- function (event) {
55
+ google.maps.event.addListener(this.div, 'click', function (event) {
62
56
  cMouseDownInCluster = false;
63
57
  if (!cDraggingMapByCluster) {
64
58
  var markerClusterer_1 = _this.cluster.getClusterer();
@@ -76,19 +70,15 @@
76
70
  // Zoom into the cluster.
77
71
  var maxZoom_1 = markerClusterer_1.getMaxZoom();
78
72
  var bounds_1 = _this.cluster.getBounds();
79
- // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
80
73
  // @ts-ignore
81
74
  markerClusterer_1.getMap().fitBounds(bounds_1);
82
75
  // There is a fix for Issue 170 here:
83
76
  setTimeout(function timeout() {
84
- // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
85
77
  // @ts-ignore
86
78
  markerClusterer_1.getMap().fitBounds(bounds_1);
87
79
  // Don't zoom beyond the max zoom level
88
- // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
89
80
  // @ts-ignore
90
81
  if (maxZoom_1 !== null && markerClusterer_1.getMap().getZoom() > maxZoom_1) {
91
- // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
92
82
  // @ts-ignore
93
83
  markerClusterer_1.getMap().setZoom(maxZoom_1 + 1);
94
84
  }
@@ -101,9 +91,7 @@
101
91
  }
102
92
  }
103
93
  });
104
- google.maps.event.addDomListener(this.div, 'mouseover',
105
- // eslint-disable-next-line @getify/proper-arrows/this, @getify/proper-arrows/name
106
- function () {
94
+ google.maps.event.addListener(this.div, 'mouseover', function () {
107
95
  /**
108
96
  * This event is fired when the mouse moves over a cluster marker.
109
97
  * @name MarkerClusterer#mouseover
@@ -112,10 +100,7 @@
112
100
  */
113
101
  google.maps.event.trigger(_this.cluster.getClusterer(), 'mouseover', _this.cluster);
114
102
  });
115
- // eslint-disable-next-line @getify/proper-arrows/this, @getify/proper-arrows/name
116
- google.maps.event.addDomListener(this.div, 'mouseout',
117
- // eslint-disable-next-line @getify/proper-arrows/this, @getify/proper-arrows/name
118
- function () {
103
+ google.maps.event.addListener(this.div, 'mouseout', function () {
119
104
  /**
120
105
  * This event is fired when the mouse moves out of a cluster marker.
121
106
  * @name MarkerClusterer#mouseout
@@ -150,8 +135,9 @@
150
135
  this.visible = false;
151
136
  };
152
137
  ClusterIcon.prototype.show = function () {
138
+ var _a;
153
139
  if (this.div && this.center) {
154
- var img = '', divTitle = '';
140
+ var divTitle = '';
155
141
  // NOTE: values must be specified in px units
156
142
  var bp = this.backgroundPosition.split(' ');
157
143
  var spriteH = parseInt(bp[0].replace(/^\s+|\s+$/g, ''), 10);
@@ -163,72 +149,38 @@
163
149
  else {
164
150
  divTitle = this.sums.title;
165
151
  }
166
- this.div.style.cssText = this.createCss(pos);
167
- img =
168
- "<img alt='" +
169
- divTitle +
170
- "' src='" +
171
- this.url +
172
- "' style='position: absolute; top: " +
173
- spriteV +
174
- 'px; left: ' +
175
- spriteH +
176
- 'px; ';
177
- // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
178
- //@ts-ignore
152
+ this.div.style.cursor = 'pointer';
153
+ this.div.style.position = 'absolute';
154
+ this.div.style.top = "".concat(pos.y, "px");
155
+ this.div.style.left = "".concat(pos.x, "px");
156
+ this.div.style.width = "".concat(this.width, "px");
157
+ this.div.style.height = "".concat(this.height, "px");
158
+ var img = document.createElement('img');
159
+ img.alt = divTitle;
160
+ img.src = this.url;
161
+ img.style.position = 'absolute';
162
+ img.style.top = "".concat(spriteV, "px");
163
+ img.style.left = "".concat(spriteH, "px");
179
164
  if (!this.cluster.getClusterer().enableRetinaIcons) {
180
- img +=
181
- 'clip: rect(' +
182
- -1 * spriteV +
183
- 'px, ' +
184
- (-1 * spriteH + this.width) +
185
- 'px, ' +
186
- (-1 * spriteV + this.height) +
187
- 'px, ' +
188
- -1 * spriteH +
189
- 'px);';
165
+ img.style.clip = "rect(-".concat(spriteV, "px, -").concat(spriteH + this.width, "px, -").concat(spriteV + this.height, ", -").concat(spriteH, ")");
190
166
  }
191
- img += "'>";
192
- this.div.innerHTML =
193
- img +
194
- "<div style='" +
195
- 'position: absolute;' +
196
- 'top: ' +
197
- this.anchorText[0] +
198
- 'px;' +
199
- 'left: ' +
200
- this.anchorText[1] +
201
- 'px;' +
202
- 'color: ' +
203
- this.textColor +
204
- ';' +
205
- 'font-size: ' +
206
- this.textSize +
207
- 'px;' +
208
- 'font-family: ' +
209
- this.fontFamily +
210
- ';' +
211
- 'font-weight: ' +
212
- this.fontWeight +
213
- ';' +
214
- 'font-style: ' +
215
- this.fontStyle +
216
- ';' +
217
- 'text-decoration: ' +
218
- this.textDecoration +
219
- ';' +
220
- 'text-align: center;' +
221
- 'width: ' +
222
- this.width +
223
- 'px;' +
224
- 'line-height:' +
225
- this.height +
226
- 'px;' +
227
- "'>" +
228
- // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
229
- // @ts-ignore
230
- this.sums.text +
231
- '</div>';
167
+ var textElm = document.createElement('div');
168
+ textElm.style.position = 'absolute';
169
+ textElm.style.top = "".concat(this.anchorText[0], "px");
170
+ textElm.style.left = "".concat(this.anchorText[1], "px");
171
+ textElm.style.color = this.textColor;
172
+ textElm.style.fontSize = "".concat(this.textSize, "px");
173
+ textElm.style.fontFamily = this.fontFamily;
174
+ textElm.style.fontWeight = this.fontWeight;
175
+ textElm.style.fontStyle = this.fontStyle;
176
+ textElm.style.textDecoration = this.textDecoration;
177
+ textElm.style.textAlign = 'center';
178
+ textElm.style.width = "".concat(this.width, "px");
179
+ textElm.style.lineHeight = "".concat(this.height, "px");
180
+ textElm.innerText = "".concat((_a = this.sums) === null || _a === void 0 ? void 0 : _a.text);
181
+ this.div.innerHTML = '';
182
+ this.div.appendChild(img);
183
+ this.div.appendChild(textElm);
232
184
  this.div.title = divTitle;
233
185
  this.div.style.display = '';
234
186
  }
@@ -242,7 +194,7 @@
242
194
  this.height = style.height;
243
195
  this.width = style.width;
244
196
  if (style.className)
245
- this.className = this.clusterClassName + " " + style.className;
197
+ this.className = "".concat(this.clusterClassName, " ").concat(style.className);
246
198
  this.anchorText = style.anchorText || [0, 0];
247
199
  this.anchorIcon = style.anchorIcon || [this.height / 2, this.width / 2];
248
200
  this.textColor = style.textColor || 'black';
@@ -256,15 +208,7 @@
256
208
  ClusterIcon.prototype.setCenter = function (center) {
257
209
  this.center = center;
258
210
  };
259
- ClusterIcon.prototype.createCss = function (pos) {
260
- var style = [];
261
- style.push('cursor: pointer;');
262
- style.push('position: absolute; top: ' + pos.y + 'px; left: ' + pos.x + 'px;');
263
- style.push('width: ' + this.width + 'px; height: ' + this.height + 'px;');
264
- return style.join('');
265
- };
266
211
  ClusterIcon.prototype.getPosFromLatLng = function (latlng) {
267
- // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
268
212
  // @ts-ignore
269
213
  var pos = this.getProjection().fromLatLngToDivPixel(latlng);
270
214
  pos.x -= this.anchorIcon[1];
@@ -279,7 +223,7 @@
279
223
  var Cluster = /** @class */ (function () {
280
224
  function Cluster(markerClusterer) {
281
225
  this.markerClusterer = markerClusterer;
282
- // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
226
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
283
227
  // @ts-ignore
284
228
  this.map = this.markerClusterer.getMap();
285
229
  this.gridSize = this.markerClusterer.getGridSize();
@@ -317,10 +261,11 @@
317
261
  return bounds;
318
262
  };
319
263
  Cluster.prototype.remove = function () {
320
- // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
264
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
321
265
  // @ts-ignore
322
266
  this.clusterIcon.setMap(null);
323
267
  this.markers = [];
268
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
324
269
  // @ts-ignore
325
270
  delete this.markers;
326
271
  };
@@ -408,11 +353,9 @@
408
353
  if (this.markers.includes) {
409
354
  return this.markers.includes(marker);
410
355
  }
411
- else {
412
- for (var i = 0; i < this.markers.length; i++) {
413
- if (marker === this.markers[i]) {
414
- return true;
415
- }
356
+ for (var i = 0; i < this.markers.length; i++) {
357
+ if (marker === this.markers[i]) {
358
+ return true;
416
359
  }
417
360
  }
418
361
  return false;
@@ -486,13 +429,13 @@
486
429
  this.timerRefStatic = null;
487
430
  this.setupStyles();
488
431
  this.addMarkers(optMarkers, true);
489
- // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
432
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
490
433
  // @ts-ignore
491
434
  this.setMap(map); // Note: this causes onAdd to be called
492
435
  }
493
436
  Clusterer.prototype.onAdd = function () {
494
437
  var _this = this;
495
- // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
438
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
496
439
  // @ts-ignore
497
440
  this.activeMap = this.getMap();
498
441
  this.ready = true;
@@ -500,11 +443,9 @@
500
443
  // Add the map event listeners
501
444
  this.listeners = [
502
445
  google.maps.event.addListener(
503
- // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
446
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
504
447
  // @ts-ignore
505
- this.getMap(), 'zoom_changed',
506
- // eslint-disable-next-line @getify/proper-arrows/this, @getify/proper-arrows/name
507
- function () {
448
+ this.getMap(), 'zoom_changed', function () {
508
449
  _this.resetViewport(false);
509
450
  // Workaround for this Google bug: when map is at level 0 and "-" of
510
451
  // zoom slider is clicked, a "zoom_changed" event is fired even though
@@ -512,26 +453,23 @@
512
453
  // event is triggered so the cluster markers that have been removed
513
454
  // do not get redrawn. Same goes for a zoom in at maxZoom.
514
455
  if (
515
- // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
456
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
516
457
  // @ts-ignore
517
458
  _this.getMap().getZoom() === (_this.get('minZoom') || 0) ||
518
- // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
459
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
519
460
  // @ts-ignore
520
461
  _this.getMap().getZoom() === _this.get('maxZoom')) {
521
462
  google.maps.event.trigger(_this, 'idle');
522
463
  }
523
464
  }),
524
465
  google.maps.event.addListener(
525
- // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
466
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
526
467
  // @ts-ignore
527
- this.getMap(), 'idle',
528
- // eslint-disable-next-line @getify/proper-arrows/this, @getify/proper-arrows/name
529
- function () {
468
+ this.getMap(), 'idle', function () {
530
469
  _this.redraw();
531
470
  }),
532
471
  ];
533
472
  };
534
- // eslint-disable-next-line @getify/proper-arrows/this
535
473
  Clusterer.prototype.onRemove = function () {
536
474
  // Put all the managed markers back on the map:
537
475
  for (var i = 0; i < this.markers.length; i++) {
@@ -575,7 +513,7 @@
575
513
  bounds.extend(position);
576
514
  }
577
515
  }
578
- // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
516
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
579
517
  // @ts-ignore
580
518
  this.getMap().fitBounds(bounds);
581
519
  };
@@ -689,7 +627,7 @@
689
627
  };
690
628
  Clusterer.prototype.addMarkers = function (markers, optNoDraw) {
691
629
  for (var key in markers) {
692
- if (markers.hasOwnProperty(key)) {
630
+ if (Object.prototype.hasOwnProperty.call(markers, key)) {
693
631
  this.pushMarkerTo(markers[key]);
694
632
  }
695
633
  }
@@ -701,7 +639,6 @@
701
639
  var _this = this;
702
640
  // If the marker is draggable add a listener so we can update the clusters on the dragend:
703
641
  if (marker.getDraggable()) {
704
- // eslint-disable-next-line @getify/proper-arrows/name, @getify/proper-arrows/this
705
642
  google.maps.event.addListener(marker, 'dragend', function () {
706
643
  if (_this.ready) {
707
644
  marker.isAdded = false;
@@ -768,7 +705,7 @@
768
705
  }, 0);
769
706
  };
770
707
  Clusterer.prototype.getExtendedBounds = function (bounds) {
771
- // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
708
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
772
709
  // @ts-ignore
773
710
  var projection = this.getProjection();
774
711
  // Convert the points to pixels and the extend out by the grid size.
@@ -870,6 +807,7 @@
870
807
  google.maps.event.trigger(this, 'clusteringbegin', this);
871
808
  if (this.timerRefStatic !== null) {
872
809
  window.clearTimeout(this.timerRefStatic);
810
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
873
811
  // @ts-ignore
874
812
  delete this.timerRefStatic;
875
813
  }
@@ -879,16 +817,16 @@
879
817
  //
880
818
  // See Comments 9 & 11 on Issue 3651 relating to this workaround for a Google Maps bug:
881
819
  var mapBounds =
882
- // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
820
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
883
821
  // @ts-ignore
884
822
  this.getMap().getZoom() > 3
885
823
  ? new google.maps.LatLngBounds(
886
- // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
824
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
887
825
  // @ts-ignore
888
826
  this.getMap()
889
827
  .getBounds()
890
828
  .getSouthWest(),
891
- // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
829
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
892
830
  // @ts-ignore
893
831
  this.getMap()
894
832
  .getBounds()
@@ -898,16 +836,12 @@
898
836
  var iLast = Math.min(iFirst + this.batchSize, this.markers.length);
899
837
  for (var i = iFirst; i < iLast; i++) {
900
838
  var marker = this.markers[i];
901
- if (!marker.isAdded && this.isMarkerInBounds(marker, bounds)) {
902
- if (!this.ignoreHidden || (this.ignoreHidden && marker.getVisible())) {
903
- this.addToClosestCluster(marker);
904
- }
839
+ if (!marker.isAdded && this.isMarkerInBounds(marker, bounds) && (!this.ignoreHidden || (this.ignoreHidden && marker.getVisible()))) {
840
+ this.addToClosestCluster(marker);
905
841
  }
906
842
  }
907
843
  if (iLast < this.markers.length) {
908
- this.timerRefStatic = window.setTimeout(
909
- // eslint-disable-next-line @getify/proper-arrows/this, @getify/proper-arrows/name
910
- function () {
844
+ this.timerRefStatic = window.setTimeout(function () {
911
845
  _this.createClusters(iLast);
912
846
  }, 0);
913
847
  }
@@ -930,11 +864,11 @@
930
864
  return function applyExtend(object) {
931
865
  // eslint-disable-next-line guard-for-in
932
866
  for (var property in object.prototype) {
933
- // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
867
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
934
868
  // @ts-ignore
935
869
  this.prototype[property] = object.prototype[property];
936
870
  }
937
- // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
871
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
938
872
  // @ts-ignore
939
873
  return this;
940
874
  }.apply(obj1, [obj2]);