@react-google-maps/marker-clusterer 2.16.1 → 2.19.1
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.
- package/dist/Cluster.d.ts +28 -0
- package/dist/ClusterIcon.d.ts +43 -0
- package/dist/Clusterer.d.ts +107 -0
- package/dist/__tests__/clusterer.test.d.ts +4 -0
- package/dist/cjs.js +98 -52
- package/dist/cjs.js.map +1 -1
- package/dist/cjs.min.js +1 -1
- package/dist/cjs.min.js.map +1 -1
- package/dist/esm.js +98 -52
- package/dist/esm.js.map +1 -1
- package/dist/esm.min.js +1 -1
- package/dist/esm.min.js.map +1 -1
- package/dist/index.d.ts +54 -33
- package/dist/types.d.ts +44 -0
- package/dist/umd.js +98 -52
- package/dist/umd.js.map +1 -1
- package/dist/umd.min.js +1 -1
- package/dist/umd.min.js.map +1 -1
- package/package.json +9 -8
- package/src/Cluster.tsx +7 -7
- package/src/ClusterIcon.tsx +23 -20
- package/src/Clusterer.tsx +81 -40
- package/src/types.tsx +29 -29
package/dist/umd.js
CHANGED
|
@@ -166,15 +166,15 @@
|
|
|
166
166
|
this.visible = false;
|
|
167
167
|
};
|
|
168
168
|
ClusterIcon.prototype.show = function () {
|
|
169
|
-
var _a, _b, _c, _d;
|
|
169
|
+
var _a, _b, _c, _d, _e, _f;
|
|
170
170
|
if (this.div && this.center) {
|
|
171
171
|
var divTitle = this.sums === null ||
|
|
172
172
|
typeof this.sums.title === 'undefined' ||
|
|
173
173
|
this.sums.title === '' ? this.cluster.getClusterer().getTitle() : this.sums.title;
|
|
174
174
|
// NOTE: values must be specified in px units
|
|
175
175
|
var bp = this.backgroundPosition.split(' ');
|
|
176
|
-
var spriteH = parseInt(bp[0].replace(/^\s+|\s+$/g, ''), 10);
|
|
177
|
-
var spriteV = parseInt(bp[1].replace(/^\s+|\s+$/g, ''), 10);
|
|
176
|
+
var spriteH = parseInt(((_a = bp[0]) === null || _a === void 0 ? void 0 : _a.replace(/^\s+|\s+$/g, '')) || '0', 10);
|
|
177
|
+
var spriteV = parseInt(((_b = bp[1]) === null || _b === void 0 ? void 0 : _b.replace(/^\s+|\s+$/g, '')) || '0', 10);
|
|
178
178
|
var pos = this.getPosFromLatLng(this.center);
|
|
179
179
|
this.div.className = this.className;
|
|
180
180
|
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; "));
|
|
@@ -189,10 +189,10 @@
|
|
|
189
189
|
}
|
|
190
190
|
var textElm = document.createElement('div');
|
|
191
191
|
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"));
|
|
192
|
-
if ((
|
|
193
|
-
textElm.innerText = "".concat((
|
|
194
|
-
if ((
|
|
195
|
-
textElm.innerHTML = "".concat((
|
|
192
|
+
if ((_c = this.sums) === null || _c === void 0 ? void 0 : _c.text)
|
|
193
|
+
textElm.innerText = "".concat((_d = this.sums) === null || _d === void 0 ? void 0 : _d.text);
|
|
194
|
+
if ((_e = this.sums) === null || _e === void 0 ? void 0 : _e.html)
|
|
195
|
+
textElm.innerHTML = "".concat((_f = this.sums) === null || _f === void 0 ? void 0 : _f.html);
|
|
196
196
|
this.div.innerHTML = '';
|
|
197
197
|
this.div.appendChild(img);
|
|
198
198
|
this.div.appendChild(textElm);
|
|
@@ -205,20 +205,23 @@
|
|
|
205
205
|
this.sums = sums;
|
|
206
206
|
var styles = this.cluster.getClusterer().getStyles();
|
|
207
207
|
var style = styles[Math.min(styles.length - 1, Math.max(0, sums.index - 1))];
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
208
|
+
if (style) {
|
|
209
|
+
this.url = style.url;
|
|
210
|
+
this.height = style.height;
|
|
211
|
+
this.width = style.width;
|
|
212
|
+
if (style.className) {
|
|
213
|
+
this.className = "".concat(this.clusterClassName, " ").concat(style.className);
|
|
214
|
+
}
|
|
215
|
+
this.anchorText = style.anchorText || [0, 0];
|
|
216
|
+
this.anchorIcon = style.anchorIcon || [this.height / 2, this.width / 2];
|
|
217
|
+
this.textColor = style.textColor || 'black';
|
|
218
|
+
this.textSize = style.textSize || 11;
|
|
219
|
+
this.textDecoration = style.textDecoration || 'none';
|
|
220
|
+
this.fontWeight = style.fontWeight || 'bold';
|
|
221
|
+
this.fontStyle = style.fontStyle || 'normal';
|
|
222
|
+
this.fontFamily = style.fontFamily || 'Arial,sans-serif';
|
|
223
|
+
this.backgroundPosition = style.backgroundPosition || '0 0';
|
|
224
|
+
}
|
|
222
225
|
};
|
|
223
226
|
ClusterIcon.prototype.setCenter = function (center) {
|
|
224
227
|
this.center = center;
|
|
@@ -234,6 +237,7 @@
|
|
|
234
237
|
return ClusterIcon;
|
|
235
238
|
}());
|
|
236
239
|
|
|
240
|
+
/* global google */
|
|
237
241
|
var Cluster = /** @class */ (function () {
|
|
238
242
|
function Cluster(markerClusterer) {
|
|
239
243
|
this.markerClusterer = markerClusterer;
|
|
@@ -276,8 +280,9 @@
|
|
|
276
280
|
Cluster.prototype.getBounds = function () {
|
|
277
281
|
var bounds = new google.maps.LatLngBounds(this.center, this.center);
|
|
278
282
|
var markers = this.getMarkers();
|
|
279
|
-
for (var
|
|
280
|
-
var
|
|
283
|
+
for (var _i = 0, markers_1 = markers; _i < markers_1.length; _i++) {
|
|
284
|
+
var marker = markers_1[_i];
|
|
285
|
+
var position = marker.getPosition();
|
|
281
286
|
if (position) {
|
|
282
287
|
bounds.extend(position);
|
|
283
288
|
}
|
|
@@ -332,8 +337,9 @@
|
|
|
332
337
|
}
|
|
333
338
|
else if (mCount === this.minClusterSize) {
|
|
334
339
|
// Hide the markers that were showing.
|
|
335
|
-
for (var
|
|
336
|
-
|
|
340
|
+
for (var _i = 0, _b = this.markers; _i < _b.length; _i++) {
|
|
341
|
+
var markerElement = _b[_i];
|
|
342
|
+
markerElement.setMap(null);
|
|
337
343
|
}
|
|
338
344
|
}
|
|
339
345
|
else {
|
|
@@ -463,9 +469,9 @@
|
|
|
463
469
|
this.repaint = this.repaint.bind(this);
|
|
464
470
|
this.onIdle = this.onIdle.bind(this);
|
|
465
471
|
this.redraw = this.redraw.bind(this);
|
|
466
|
-
this.extend = this.extend.bind(this);
|
|
467
472
|
this.onAdd = this.onAdd.bind(this);
|
|
468
473
|
this.draw = this.draw.bind(this);
|
|
474
|
+
this.extend = this.extend.bind(this);
|
|
469
475
|
this.extend(Clusterer, google.maps.OverlayView);
|
|
470
476
|
this.markers = [];
|
|
471
477
|
this.clusters = [];
|
|
@@ -540,25 +546,53 @@
|
|
|
540
546
|
};
|
|
541
547
|
Clusterer.prototype.onRemove = function () {
|
|
542
548
|
// Put all the managed markers back on the map:
|
|
543
|
-
for (var
|
|
544
|
-
|
|
545
|
-
|
|
549
|
+
for (var _i = 0, _a = this.markers; _i < _a.length; _i++) {
|
|
550
|
+
var marker = _a[_i];
|
|
551
|
+
if (marker.getMap() !== this.activeMap) {
|
|
552
|
+
marker.setMap(this.activeMap);
|
|
546
553
|
}
|
|
547
554
|
}
|
|
548
555
|
// Remove all clusters:
|
|
549
|
-
for (var
|
|
550
|
-
|
|
556
|
+
for (var _b = 0, _c = this.clusters; _b < _c.length; _b++) {
|
|
557
|
+
var cluster = _c[_b];
|
|
558
|
+
cluster.remove();
|
|
551
559
|
}
|
|
552
560
|
this.clusters = [];
|
|
553
561
|
// Remove map event listeners:
|
|
554
|
-
for (var
|
|
555
|
-
|
|
562
|
+
for (var _d = 0, _e = this.listeners; _d < _e.length; _d++) {
|
|
563
|
+
var listener = _e[_d];
|
|
564
|
+
google.maps.event.removeListener(listener);
|
|
556
565
|
}
|
|
557
566
|
this.listeners = [];
|
|
558
567
|
this.activeMap = null;
|
|
559
568
|
this.ready = false;
|
|
560
569
|
};
|
|
561
570
|
Clusterer.prototype.draw = function () { return; };
|
|
571
|
+
Clusterer.prototype.getMap = function () { return null; };
|
|
572
|
+
Clusterer.prototype.getPanes = function () { return null; };
|
|
573
|
+
Clusterer.prototype.getProjection = function () {
|
|
574
|
+
return {
|
|
575
|
+
fromContainerPixelToLatLng: function () { return null; },
|
|
576
|
+
fromDivPixelToLatLng: function () { return null; },
|
|
577
|
+
fromLatLngToContainerPixel: function () { return null; },
|
|
578
|
+
fromLatLngToDivPixel: function () { return null; },
|
|
579
|
+
getVisibleRegion: function () { return null; },
|
|
580
|
+
getWorldWidth: function () { return 0; }
|
|
581
|
+
};
|
|
582
|
+
};
|
|
583
|
+
Clusterer.prototype.setMap = function () { return; };
|
|
584
|
+
Clusterer.prototype.addListener = function () {
|
|
585
|
+
return {
|
|
586
|
+
remove: function () { return; }
|
|
587
|
+
};
|
|
588
|
+
};
|
|
589
|
+
Clusterer.prototype.bindTo = function () { return; };
|
|
590
|
+
Clusterer.prototype.get = function () { return; };
|
|
591
|
+
Clusterer.prototype.notify = function () { return; };
|
|
592
|
+
Clusterer.prototype.set = function () { return; };
|
|
593
|
+
Clusterer.prototype.setValues = function () { return; };
|
|
594
|
+
Clusterer.prototype.unbind = function () { return; };
|
|
595
|
+
Clusterer.prototype.unbindAll = function () { return; };
|
|
562
596
|
Clusterer.prototype.setupStyles = function () {
|
|
563
597
|
if (this.styles.length > 0) {
|
|
564
598
|
return;
|
|
@@ -566,16 +600,17 @@
|
|
|
566
600
|
for (var i = 0; i < this.imageSizes.length; i++) {
|
|
567
601
|
this.styles.push({
|
|
568
602
|
url: "".concat(this.imagePath + (i + 1), ".").concat(this.imageExtension),
|
|
569
|
-
height: this.imageSizes[i],
|
|
570
|
-
width: this.imageSizes[i],
|
|
603
|
+
height: this.imageSizes[i] || 0,
|
|
604
|
+
width: this.imageSizes[i] || 0,
|
|
571
605
|
});
|
|
572
606
|
}
|
|
573
607
|
};
|
|
574
608
|
Clusterer.prototype.fitMapToMarkers = function () {
|
|
575
609
|
var markers = this.getMarkers();
|
|
576
610
|
var bounds = new google.maps.LatLngBounds();
|
|
577
|
-
for (var
|
|
578
|
-
var
|
|
611
|
+
for (var _i = 0, markers_1 = markers; _i < markers_1.length; _i++) {
|
|
612
|
+
var marker = markers_1[_i];
|
|
613
|
+
var position = marker.getPosition();
|
|
579
614
|
if (position) {
|
|
580
615
|
bounds.extend(position);
|
|
581
616
|
}
|
|
@@ -696,7 +731,10 @@
|
|
|
696
731
|
Clusterer.prototype.addMarkers = function (markers, optNoDraw) {
|
|
697
732
|
for (var key in markers) {
|
|
698
733
|
if (Object.prototype.hasOwnProperty.call(markers, key)) {
|
|
699
|
-
|
|
734
|
+
var marker = markers[key];
|
|
735
|
+
if (marker) {
|
|
736
|
+
this.pushMarkerTo(marker);
|
|
737
|
+
}
|
|
700
738
|
}
|
|
701
739
|
}
|
|
702
740
|
if (!optNoDraw) {
|
|
@@ -747,8 +785,9 @@
|
|
|
747
785
|
};
|
|
748
786
|
Clusterer.prototype.removeMarkers = function (markers, optNoDraw) {
|
|
749
787
|
var removed = false;
|
|
750
|
-
for (var
|
|
751
|
-
|
|
788
|
+
for (var _i = 0, markers_2 = markers; _i < markers_2.length; _i++) {
|
|
789
|
+
var marker = markers_2[_i];
|
|
790
|
+
removed = removed || this.removeMarker_(marker);
|
|
752
791
|
}
|
|
753
792
|
if (!optNoDraw && removed) {
|
|
754
793
|
this.repaint();
|
|
@@ -767,8 +806,9 @@
|
|
|
767
806
|
// Remove the old clusters.
|
|
768
807
|
// Do it in a timeout to prevent blinking effect.
|
|
769
808
|
setTimeout(function timeout() {
|
|
770
|
-
for (var
|
|
771
|
-
|
|
809
|
+
for (var _i = 0, oldClusters_1 = oldClusters; _i < oldClusters_1.length; _i++) {
|
|
810
|
+
var oldCluster = oldClusters_1[_i];
|
|
811
|
+
oldCluster.remove();
|
|
772
812
|
}
|
|
773
813
|
}, 0);
|
|
774
814
|
};
|
|
@@ -812,13 +852,14 @@
|
|
|
812
852
|
};
|
|
813
853
|
Clusterer.prototype.resetViewport = function (optHide) {
|
|
814
854
|
// Remove all the clusters
|
|
815
|
-
for (var
|
|
816
|
-
|
|
855
|
+
for (var _i = 0, _a = this.clusters; _i < _a.length; _i++) {
|
|
856
|
+
var cluster = _a[_i];
|
|
857
|
+
cluster.remove();
|
|
817
858
|
}
|
|
818
859
|
this.clusters = [];
|
|
819
860
|
// Reset the markers to not be added and to be removed from the map.
|
|
820
|
-
for (var
|
|
821
|
-
var marker =
|
|
861
|
+
for (var _b = 0, _c = this.markers; _b < _c.length; _b++) {
|
|
862
|
+
var marker = _c[_b];
|
|
822
863
|
marker.isAdded = false;
|
|
823
864
|
if (optHide) {
|
|
824
865
|
marker.setMap(null);
|
|
@@ -847,8 +888,9 @@
|
|
|
847
888
|
var cluster;
|
|
848
889
|
var distance = 40000; // Some large number
|
|
849
890
|
var clusterToAddTo = null;
|
|
850
|
-
for (var
|
|
851
|
-
|
|
891
|
+
for (var _i = 0, _a = this.clusters; _i < _a.length; _i++) {
|
|
892
|
+
var clusterElement = _a[_i];
|
|
893
|
+
cluster = clusterElement;
|
|
852
894
|
var center = cluster.getCenter();
|
|
853
895
|
var position = marker.getPosition();
|
|
854
896
|
if (center && position) {
|
|
@@ -904,7 +946,7 @@
|
|
|
904
946
|
var iLast = Math.min(iFirst + this.batchSize, this.markers.length);
|
|
905
947
|
for (var i = iFirst; i < iLast; i++) {
|
|
906
948
|
var marker = this.markers[i];
|
|
907
|
-
if (!marker.isAdded && this.isMarkerInBounds(marker, extendedMapBounds) && (!this.ignoreHidden || (this.ignoreHidden && marker.getVisible()))) {
|
|
949
|
+
if (marker && !marker.isAdded && this.isMarkerInBounds(marker, extendedMapBounds) && (!this.ignoreHidden || (this.ignoreHidden && marker.getVisible()))) {
|
|
908
950
|
this.addToClosestCluster(marker);
|
|
909
951
|
}
|
|
910
952
|
}
|
|
@@ -923,16 +965,20 @@
|
|
|
923
965
|
* @event
|
|
924
966
|
*/
|
|
925
967
|
google.maps.event.trigger(this, 'clusteringend', this);
|
|
926
|
-
for (var
|
|
927
|
-
|
|
968
|
+
for (var _i = 0, _a = this.clusters; _i < _a.length; _i++) {
|
|
969
|
+
var cluster = _a[_i];
|
|
970
|
+
cluster.updateIcon();
|
|
928
971
|
}
|
|
929
972
|
}
|
|
930
973
|
};
|
|
931
974
|
Clusterer.prototype.extend = function (obj1, obj2) {
|
|
932
975
|
return function applyExtend(object) {
|
|
933
976
|
for (var property in object.prototype) {
|
|
977
|
+
// eslint-disable-next-line @typescript-eslint/ban-types
|
|
978
|
+
var prop = property;
|
|
979
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
934
980
|
// @ts-ignore
|
|
935
|
-
this.prototype[
|
|
981
|
+
this.prototype[prop] = object.prototype[prop];
|
|
936
982
|
}
|
|
937
983
|
return this;
|
|
938
984
|
}.apply(obj1, [obj2]);
|