@react-google-maps/marker-clusterer 2.4.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 +44 -121
  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 +44 -121
  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 +16 -16
  10. package/dist/umd.js +46 -123
  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 +34 -27
  15. package/src/Cluster.tsx +0 -2
  16. package/src/ClusterIcon.tsx +40 -102
  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
@@ -2,13 +2,14 @@
2
2
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
3
3
  typeof define === 'function' && define.amd ? define(['exports'], factory) :
4
4
  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.markerClusterer = {}));
5
- }(this, (function (exports) { 'use strict';
5
+ })(this, (function (exports) { 'use strict';
6
6
 
7
7
  var ClusterIcon = /** @class */ (function () {
8
8
  function ClusterIcon(cluster, styles) {
9
9
  cluster.getClusterer().extend(ClusterIcon, google.maps.OverlayView);
10
10
  this.cluster = cluster;
11
- this.className = this.cluster.getClusterer().getClusterClass();
11
+ this.clusterClassName = this.cluster.getClusterer().getClusterClass();
12
+ this.className = this.clusterClassName;
12
13
  this.styles = styles;
13
14
  this.center = undefined;
14
15
  this.div = null;
@@ -27,7 +28,6 @@
27
28
  this.fontStyle = 'normal';
28
29
  this.fontFamily = 'Arial,sans-serif';
29
30
  this.backgroundPosition = '0 0';
30
- // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
31
31
  // @ts-ignore
32
32
  this.setMap(cluster.getMap()); // Note: this causes onAdd to be called
33
33
  }
@@ -40,12 +40,10 @@
40
40
  if (this.visible) {
41
41
  this.show();
42
42
  }
43
- // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
44
43
  // @ts-ignore
45
44
  this.getPanes().overlayMouseTarget.appendChild(this.div);
46
45
  // Fix for Issue 157
47
46
  this.boundsChangedListener = google.maps.event.addListener(
48
- // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
49
47
  // @ts-ignore
50
48
  this.getMap(), 'boundschanged', function boundsChanged() {
51
49
  cDraggingMapByCluster = cMouseDownInCluster;
@@ -54,10 +52,7 @@
54
52
  cMouseDownInCluster = true;
55
53
  cDraggingMapByCluster = false;
56
54
  });
57
- // eslint-disable-next-line @getify/proper-arrows/this, @getify/proper-arrows/name
58
- google.maps.event.addDomListener(this.div, 'click',
59
- // eslint-disable-next-line @getify/proper-arrows/this, @getify/proper-arrows/name
60
- function (event) {
55
+ google.maps.event.addDomListener(this.div, 'click', function (event) {
61
56
  cMouseDownInCluster = false;
62
57
  if (!cDraggingMapByCluster) {
63
58
  var markerClusterer_1 = _this.cluster.getClusterer();
@@ -75,19 +70,15 @@
75
70
  // Zoom into the cluster.
76
71
  var maxZoom_1 = markerClusterer_1.getMaxZoom();
77
72
  var bounds_1 = _this.cluster.getBounds();
78
- // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
79
73
  // @ts-ignore
80
74
  markerClusterer_1.getMap().fitBounds(bounds_1);
81
75
  // There is a fix for Issue 170 here:
82
76
  setTimeout(function timeout() {
83
- // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
84
77
  // @ts-ignore
85
78
  markerClusterer_1.getMap().fitBounds(bounds_1);
86
79
  // Don't zoom beyond the max zoom level
87
- // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
88
80
  // @ts-ignore
89
81
  if (maxZoom_1 !== null && markerClusterer_1.getMap().getZoom() > maxZoom_1) {
90
- // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
91
82
  // @ts-ignore
92
83
  markerClusterer_1.getMap().setZoom(maxZoom_1 + 1);
93
84
  }
@@ -100,9 +91,7 @@
100
91
  }
101
92
  }
102
93
  });
103
- google.maps.event.addDomListener(this.div, 'mouseover',
104
- // eslint-disable-next-line @getify/proper-arrows/this, @getify/proper-arrows/name
105
- function () {
94
+ google.maps.event.addDomListener(this.div, 'mouseover', function () {
106
95
  /**
107
96
  * This event is fired when the mouse moves over a cluster marker.
108
97
  * @name MarkerClusterer#mouseover
@@ -111,10 +100,7 @@
111
100
  */
112
101
  google.maps.event.trigger(_this.cluster.getClusterer(), 'mouseover', _this.cluster);
113
102
  });
114
- // eslint-disable-next-line @getify/proper-arrows/this, @getify/proper-arrows/name
115
- google.maps.event.addDomListener(this.div, 'mouseout',
116
- // eslint-disable-next-line @getify/proper-arrows/this, @getify/proper-arrows/name
117
- function () {
103
+ google.maps.event.addDomListener(this.div, 'mouseout', function () {
118
104
  /**
119
105
  * This event is fired when the mouse moves out of a cluster marker.
120
106
  * @name MarkerClusterer#mouseout
@@ -149,8 +135,9 @@
149
135
  this.visible = false;
150
136
  };
151
137
  ClusterIcon.prototype.show = function () {
138
+ var _a;
152
139
  if (this.div && this.center) {
153
- var img = '', divTitle = '';
140
+ var divTitle = '';
154
141
  // NOTE: values must be specified in px units
155
142
  var bp = this.backgroundPosition.split(' ');
156
143
  var spriteH = parseInt(bp[0].replace(/^\s+|\s+$/g, ''), 10);
@@ -162,72 +149,38 @@
162
149
  else {
163
150
  divTitle = this.sums.title;
164
151
  }
165
- this.div.style.cssText = this.createCss(pos);
166
- img =
167
- "<img alt='" +
168
- divTitle +
169
- "' src='" +
170
- this.url +
171
- "' style='position: absolute; top: " +
172
- spriteV +
173
- 'px; left: ' +
174
- spriteH +
175
- 'px; ';
176
- // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
177
- //@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");
178
164
  if (!this.cluster.getClusterer().enableRetinaIcons) {
179
- img +=
180
- 'clip: rect(' +
181
- -1 * spriteV +
182
- 'px, ' +
183
- (-1 * spriteH + this.width) +
184
- 'px, ' +
185
- (-1 * spriteV + this.height) +
186
- 'px, ' +
187
- -1 * spriteH +
188
- 'px);';
165
+ img.style.clip = "rect(-".concat(spriteV, "px, -").concat(spriteH + this.width, "px, -").concat(spriteV + this.height, ", -").concat(spriteH, ")");
189
166
  }
190
- img += "'>";
191
- this.div.innerHTML =
192
- img +
193
- "<div style='" +
194
- 'position: absolute;' +
195
- 'top: ' +
196
- this.anchorText[0] +
197
- 'px;' +
198
- 'left: ' +
199
- this.anchorText[1] +
200
- 'px;' +
201
- 'color: ' +
202
- this.textColor +
203
- ';' +
204
- 'font-size: ' +
205
- this.textSize +
206
- 'px;' +
207
- 'font-family: ' +
208
- this.fontFamily +
209
- ';' +
210
- 'font-weight: ' +
211
- this.fontWeight +
212
- ';' +
213
- 'font-style: ' +
214
- this.fontStyle +
215
- ';' +
216
- 'text-decoration: ' +
217
- this.textDecoration +
218
- ';' +
219
- 'text-align: center;' +
220
- 'width: ' +
221
- this.width +
222
- 'px;' +
223
- 'line-height:' +
224
- this.height +
225
- 'px;' +
226
- "'>" +
227
- // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
228
- // @ts-ignore
229
- this.sums.text +
230
- '</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);
231
184
  this.div.title = divTitle;
232
185
  this.div.style.display = '';
233
186
  }
@@ -235,12 +188,13 @@
235
188
  };
236
189
  ClusterIcon.prototype.useStyle = function (sums) {
237
190
  this.sums = sums;
238
- var style = this.styles[Math.min(this.styles.length - 1, Math.max(0, sums.index - 1))];
191
+ var styles = this.cluster.getClusterer().getStyles();
192
+ var style = styles[Math.min(styles.length - 1, Math.max(0, sums.index - 1))];
239
193
  this.url = style.url;
240
194
  this.height = style.height;
241
195
  this.width = style.width;
242
196
  if (style.className)
243
- this.className = this.className + " " + style.className;
197
+ this.className = "".concat(this.clusterClassName, " ").concat(style.className);
244
198
  this.anchorText = style.anchorText || [0, 0];
245
199
  this.anchorIcon = style.anchorIcon || [this.height / 2, this.width / 2];
246
200
  this.textColor = style.textColor || 'black';
@@ -254,15 +208,7 @@
254
208
  ClusterIcon.prototype.setCenter = function (center) {
255
209
  this.center = center;
256
210
  };
257
- ClusterIcon.prototype.createCss = function (pos) {
258
- var style = [];
259
- style.push('cursor: pointer;');
260
- style.push('position: absolute; top: ' + pos.y + 'px; left: ' + pos.x + 'px;');
261
- style.push('width: ' + this.width + 'px; height: ' + this.height + 'px;');
262
- return style.join('');
263
- };
264
211
  ClusterIcon.prototype.getPosFromLatLng = function (latlng) {
265
- // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
266
212
  // @ts-ignore
267
213
  var pos = this.getProjection().fromLatLngToDivPixel(latlng);
268
214
  pos.x -= this.anchorIcon[1];
@@ -277,7 +223,6 @@
277
223
  var Cluster = /** @class */ (function () {
278
224
  function Cluster(markerClusterer) {
279
225
  this.markerClusterer = markerClusterer;
280
- // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
281
226
  // @ts-ignore
282
227
  this.map = this.markerClusterer.getMap();
283
228
  this.gridSize = this.markerClusterer.getGridSize();
@@ -315,7 +260,6 @@
315
260
  return bounds;
316
261
  };
317
262
  Cluster.prototype.remove = function () {
318
- // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
319
263
  // @ts-ignore
320
264
  this.clusterIcon.setMap(null);
321
265
  this.markers = [];
@@ -484,13 +428,11 @@
484
428
  this.timerRefStatic = null;
485
429
  this.setupStyles();
486
430
  this.addMarkers(optMarkers, true);
487
- // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
488
431
  // @ts-ignore
489
432
  this.setMap(map); // Note: this causes onAdd to be called
490
433
  }
491
434
  Clusterer.prototype.onAdd = function () {
492
435
  var _this = this;
493
- // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
494
436
  // @ts-ignore
495
437
  this.activeMap = this.getMap();
496
438
  this.ready = true;
@@ -498,11 +440,8 @@
498
440
  // Add the map event listeners
499
441
  this.listeners = [
500
442
  google.maps.event.addListener(
501
- // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
502
443
  // @ts-ignore
503
- this.getMap(), 'zoom_changed',
504
- // eslint-disable-next-line @getify/proper-arrows/this, @getify/proper-arrows/name
505
- function () {
444
+ this.getMap(), 'zoom_changed', function () {
506
445
  _this.resetViewport(false);
507
446
  // Workaround for this Google bug: when map is at level 0 and "-" of
508
447
  // zoom slider is clicked, a "zoom_changed" event is fired even though
@@ -510,26 +449,20 @@
510
449
  // event is triggered so the cluster markers that have been removed
511
450
  // do not get redrawn. Same goes for a zoom in at maxZoom.
512
451
  if (
513
- // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
514
452
  // @ts-ignore
515
453
  _this.getMap().getZoom() === (_this.get('minZoom') || 0) ||
516
- // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
517
454
  // @ts-ignore
518
455
  _this.getMap().getZoom() === _this.get('maxZoom')) {
519
456
  google.maps.event.trigger(_this, 'idle');
520
457
  }
521
458
  }),
522
459
  google.maps.event.addListener(
523
- // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
524
460
  // @ts-ignore
525
- this.getMap(), 'idle',
526
- // eslint-disable-next-line @getify/proper-arrows/this, @getify/proper-arrows/name
527
- function () {
461
+ this.getMap(), 'idle', function () {
528
462
  _this.redraw();
529
463
  }),
530
464
  ];
531
465
  };
532
- // eslint-disable-next-line @getify/proper-arrows/this
533
466
  Clusterer.prototype.onRemove = function () {
534
467
  // Put all the managed markers back on the map:
535
468
  for (var i = 0; i < this.markers.length; i++) {
@@ -573,7 +506,6 @@
573
506
  bounds.extend(position);
574
507
  }
575
508
  }
576
- // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
577
509
  // @ts-ignore
578
510
  this.getMap().fitBounds(bounds);
579
511
  };
@@ -687,7 +619,7 @@
687
619
  };
688
620
  Clusterer.prototype.addMarkers = function (markers, optNoDraw) {
689
621
  for (var key in markers) {
690
- if (markers.hasOwnProperty(key)) {
622
+ if (Object.prototype.hasOwnProperty.call(markers, key)) {
691
623
  this.pushMarkerTo(markers[key]);
692
624
  }
693
625
  }
@@ -699,7 +631,6 @@
699
631
  var _this = this;
700
632
  // If the marker is draggable add a listener so we can update the clusters on the dragend:
701
633
  if (marker.getDraggable()) {
702
- // eslint-disable-next-line @getify/proper-arrows/name, @getify/proper-arrows/this
703
634
  google.maps.event.addListener(marker, 'dragend', function () {
704
635
  if (_this.ready) {
705
636
  marker.isAdded = false;
@@ -766,7 +697,6 @@
766
697
  }, 0);
767
698
  };
768
699
  Clusterer.prototype.getExtendedBounds = function (bounds) {
769
- // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
770
700
  // @ts-ignore
771
701
  var projection = this.getProjection();
772
702
  // Convert the points to pixels and the extend out by the grid size.
@@ -877,16 +807,13 @@
877
807
  //
878
808
  // See Comments 9 & 11 on Issue 3651 relating to this workaround for a Google Maps bug:
879
809
  var mapBounds =
880
- // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
881
810
  // @ts-ignore
882
811
  this.getMap().getZoom() > 3
883
812
  ? new google.maps.LatLngBounds(
884
- // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
885
813
  // @ts-ignore
886
814
  this.getMap()
887
815
  .getBounds()
888
816
  .getSouthWest(),
889
- // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
890
817
  // @ts-ignore
891
818
  this.getMap()
892
819
  .getBounds()
@@ -903,9 +830,7 @@
903
830
  }
904
831
  }
905
832
  if (iLast < this.markers.length) {
906
- this.timerRefStatic = window.setTimeout(
907
- // eslint-disable-next-line @getify/proper-arrows/this, @getify/proper-arrows/name
908
- function () {
833
+ this.timerRefStatic = window.setTimeout(function () {
909
834
  _this.createClusters(iLast);
910
835
  }, 0);
911
836
  }
@@ -928,11 +853,9 @@
928
853
  return function applyExtend(object) {
929
854
  // eslint-disable-next-line guard-for-in
930
855
  for (var property in object.prototype) {
931
- // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
932
856
  // @ts-ignore
933
857
  this.prototype[property] = object.prototype[property];
934
858
  }
935
- // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
936
859
  // @ts-ignore
937
860
  return this;
938
861
  }.apply(obj1, [obj2]);
@@ -946,5 +869,5 @@
946
869
 
947
870
  Object.defineProperty(exports, '__esModule', { value: true });
948
871
 
949
- })));
872
+ }));
950
873
  //# sourceMappingURL=umd.js.map