@react-google-maps/marker-clusterer 2.6.0 → 2.8.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 +40 -119
  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 +40 -119
  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 +40 -119
  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 +33 -25
  15. package/src/Cluster.tsx +0 -2
  16. package/src/ClusterIcon.tsx +34 -97
  17. package/src/Clusterer.tsx +2 -20
  18. package/src/__tests__/clusterer.test.ts +4 -0
  19. package/src/types.tsx +16 -16
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,12 +40,10 @@
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;
@@ -55,10 +52,7 @@
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.addDomListener(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.addDomListener(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.addDomListener(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,6 @@
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
283
226
  // @ts-ignore
284
227
  this.map = this.markerClusterer.getMap();
285
228
  this.gridSize = this.markerClusterer.getGridSize();
@@ -317,7 +260,6 @@
317
260
  return bounds;
318
261
  };
319
262
  Cluster.prototype.remove = function () {
320
- // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
321
263
  // @ts-ignore
322
264
  this.clusterIcon.setMap(null);
323
265
  this.markers = [];
@@ -486,13 +428,11 @@
486
428
  this.timerRefStatic = null;
487
429
  this.setupStyles();
488
430
  this.addMarkers(optMarkers, true);
489
- // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
490
431
  // @ts-ignore
491
432
  this.setMap(map); // Note: this causes onAdd to be called
492
433
  }
493
434
  Clusterer.prototype.onAdd = function () {
494
435
  var _this = this;
495
- // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
496
436
  // @ts-ignore
497
437
  this.activeMap = this.getMap();
498
438
  this.ready = true;
@@ -500,11 +440,8 @@
500
440
  // Add the map event listeners
501
441
  this.listeners = [
502
442
  google.maps.event.addListener(
503
- // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
504
443
  // @ts-ignore
505
- this.getMap(), 'zoom_changed',
506
- // eslint-disable-next-line @getify/proper-arrows/this, @getify/proper-arrows/name
507
- function () {
444
+ this.getMap(), 'zoom_changed', function () {
508
445
  _this.resetViewport(false);
509
446
  // Workaround for this Google bug: when map is at level 0 and "-" of
510
447
  // zoom slider is clicked, a "zoom_changed" event is fired even though
@@ -512,26 +449,20 @@
512
449
  // event is triggered so the cluster markers that have been removed
513
450
  // do not get redrawn. Same goes for a zoom in at maxZoom.
514
451
  if (
515
- // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
516
452
  // @ts-ignore
517
453
  _this.getMap().getZoom() === (_this.get('minZoom') || 0) ||
518
- // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
519
454
  // @ts-ignore
520
455
  _this.getMap().getZoom() === _this.get('maxZoom')) {
521
456
  google.maps.event.trigger(_this, 'idle');
522
457
  }
523
458
  }),
524
459
  google.maps.event.addListener(
525
- // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
526
460
  // @ts-ignore
527
- this.getMap(), 'idle',
528
- // eslint-disable-next-line @getify/proper-arrows/this, @getify/proper-arrows/name
529
- function () {
461
+ this.getMap(), 'idle', function () {
530
462
  _this.redraw();
531
463
  }),
532
464
  ];
533
465
  };
534
- // eslint-disable-next-line @getify/proper-arrows/this
535
466
  Clusterer.prototype.onRemove = function () {
536
467
  // Put all the managed markers back on the map:
537
468
  for (var i = 0; i < this.markers.length; i++) {
@@ -575,7 +506,6 @@
575
506
  bounds.extend(position);
576
507
  }
577
508
  }
578
- // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
579
509
  // @ts-ignore
580
510
  this.getMap().fitBounds(bounds);
581
511
  };
@@ -689,7 +619,7 @@
689
619
  };
690
620
  Clusterer.prototype.addMarkers = function (markers, optNoDraw) {
691
621
  for (var key in markers) {
692
- if (markers.hasOwnProperty(key)) {
622
+ if (Object.prototype.hasOwnProperty.call(markers, key)) {
693
623
  this.pushMarkerTo(markers[key]);
694
624
  }
695
625
  }
@@ -701,7 +631,6 @@
701
631
  var _this = this;
702
632
  // If the marker is draggable add a listener so we can update the clusters on the dragend:
703
633
  if (marker.getDraggable()) {
704
- // eslint-disable-next-line @getify/proper-arrows/name, @getify/proper-arrows/this
705
634
  google.maps.event.addListener(marker, 'dragend', function () {
706
635
  if (_this.ready) {
707
636
  marker.isAdded = false;
@@ -768,7 +697,6 @@
768
697
  }, 0);
769
698
  };
770
699
  Clusterer.prototype.getExtendedBounds = function (bounds) {
771
- // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
772
700
  // @ts-ignore
773
701
  var projection = this.getProjection();
774
702
  // Convert the points to pixels and the extend out by the grid size.
@@ -879,16 +807,13 @@
879
807
  //
880
808
  // See Comments 9 & 11 on Issue 3651 relating to this workaround for a Google Maps bug:
881
809
  var mapBounds =
882
- // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
883
810
  // @ts-ignore
884
811
  this.getMap().getZoom() > 3
885
812
  ? new google.maps.LatLngBounds(
886
- // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
887
813
  // @ts-ignore
888
814
  this.getMap()
889
815
  .getBounds()
890
816
  .getSouthWest(),
891
- // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
892
817
  // @ts-ignore
893
818
  this.getMap()
894
819
  .getBounds()
@@ -905,9 +830,7 @@
905
830
  }
906
831
  }
907
832
  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 () {
833
+ this.timerRefStatic = window.setTimeout(function () {
911
834
  _this.createClusters(iLast);
912
835
  }, 0);
913
836
  }
@@ -930,11 +853,9 @@
930
853
  return function applyExtend(object) {
931
854
  // eslint-disable-next-line guard-for-in
932
855
  for (var property in object.prototype) {
933
- // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
934
856
  // @ts-ignore
935
857
  this.prototype[property] = object.prototype[property];
936
858
  }
937
- // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
938
859
  // @ts-ignore
939
860
  return this;
940
861
  }.apply(obj1, [obj2]);