@react-google-maps/marker-clusterer 2.11.0 → 2.11.3
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/cjs.js +98 -141
- 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 -141
- 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 +5 -5
- package/dist/umd.js +98 -141
- 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 +2 -2
- package/src/Cluster.tsx +6 -10
- package/src/ClusterIcon.tsx +44 -37
- package/src/Clusterer.tsx +22 -25
package/dist/umd.js
CHANGED
|
@@ -4,68 +4,34 @@
|
|
|
4
4
|
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.markerClusterer = {}));
|
|
5
5
|
})(this, (function (exports) { 'use strict';
|
|
6
6
|
|
|
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);
|
|
7
|
+
var ClusterIcon = /** @class */ (function () {
|
|
40
8
|
function ClusterIcon(cluster, styles) {
|
|
41
|
-
var _this = _super.call(this) || this;
|
|
42
9
|
cluster.getClusterer().extend(ClusterIcon, google.maps.OverlayView);
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
return _this;
|
|
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
|
+
this.cMouseDownInCluster = null;
|
|
32
|
+
this.cDraggingMapByCluster = null;
|
|
33
|
+
this.timeOut = null;
|
|
34
|
+
this.setMap(cluster.getMap()); // Note: this causes onAdd to be called
|
|
69
35
|
}
|
|
70
36
|
ClusterIcon.prototype.onBoundsChanged = function () {
|
|
71
37
|
this.cDraggingMapByCluster = this.cMouseDownInCluster;
|
|
@@ -92,22 +58,23 @@
|
|
|
92
58
|
// Zoom into the cluster.
|
|
93
59
|
var maxZoom_1 = markerClusterer_1.getMaxZoom();
|
|
94
60
|
var bounds_1 = this.cluster.getBounds();
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
61
|
+
var map = markerClusterer_1.getMap();
|
|
62
|
+
if (map !== null && 'fitBounds' in map) {
|
|
63
|
+
map.fitBounds(bounds_1);
|
|
64
|
+
}
|
|
98
65
|
// There is a fix for Issue 170 here:
|
|
99
66
|
this.timeOut = window.setTimeout(function () {
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
//
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
67
|
+
var map = markerClusterer_1.getMap();
|
|
68
|
+
if (map !== null) {
|
|
69
|
+
if ('fitBounds' in map) {
|
|
70
|
+
map.fitBounds(bounds_1);
|
|
71
|
+
}
|
|
72
|
+
var zoom = map.getZoom() || 0;
|
|
73
|
+
// Don't zoom beyond the max zoom level
|
|
74
|
+
if (maxZoom_1 !== null &&
|
|
75
|
+
zoom > maxZoom_1) {
|
|
76
|
+
map.setZoom(maxZoom_1 + 1);
|
|
77
|
+
}
|
|
111
78
|
}
|
|
112
79
|
}, 100);
|
|
113
80
|
}
|
|
@@ -137,23 +104,22 @@
|
|
|
137
104
|
google.maps.event.trigger(this.cluster.getClusterer(), 'mouseout', this.cluster);
|
|
138
105
|
};
|
|
139
106
|
ClusterIcon.prototype.onAdd = function () {
|
|
107
|
+
var _a;
|
|
140
108
|
this.div = document.createElement('div');
|
|
141
109
|
this.div.className = this.className;
|
|
142
110
|
if (this.visible) {
|
|
143
111
|
this.show();
|
|
144
112
|
}
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
this.div.addEventListener('mouseover', this.onMouseOver);
|
|
156
|
-
this.div.addEventListener('mouseout', this.onMouseOut);
|
|
113
|
+
(_a = this.getPanes()) === null || _a === void 0 ? void 0 : _a.overlayMouseTarget.appendChild(this.div);
|
|
114
|
+
var map = this.getMap();
|
|
115
|
+
if (map !== null) {
|
|
116
|
+
// Fix for Issue 157
|
|
117
|
+
this.boundsChangedListener = google.maps.event.addListener(map, 'bounds_changed', this.onBoundsChanged);
|
|
118
|
+
this.div.addEventListener('mousedown', this.onMouseDown);
|
|
119
|
+
this.div.addEventListener('click', this.onClick);
|
|
120
|
+
this.div.addEventListener('mouseover', this.onMouseOver);
|
|
121
|
+
this.div.addEventListener('mouseout', this.onMouseOut);
|
|
122
|
+
}
|
|
157
123
|
};
|
|
158
124
|
ClusterIcon.prototype.onRemove = function () {
|
|
159
125
|
if (this.div && this.div.parentNode) {
|
|
@@ -271,13 +237,11 @@
|
|
|
271
237
|
return pos;
|
|
272
238
|
};
|
|
273
239
|
return ClusterIcon;
|
|
274
|
-
}(
|
|
240
|
+
}());
|
|
275
241
|
|
|
276
242
|
var Cluster = /** @class */ (function () {
|
|
277
243
|
function Cluster(markerClusterer) {
|
|
278
244
|
this.markerClusterer = markerClusterer;
|
|
279
|
-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
280
|
-
// @ts-ignore
|
|
281
245
|
this.map = this.markerClusterer.getMap();
|
|
282
246
|
this.gridSize = this.markerClusterer.getGridSize();
|
|
283
247
|
this.minClusterSize = this.markerClusterer.getMinimumClusterSize();
|
|
@@ -314,8 +278,6 @@
|
|
|
314
278
|
return bounds;
|
|
315
279
|
};
|
|
316
280
|
Cluster.prototype.remove = function () {
|
|
317
|
-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
318
|
-
// @ts-ignore
|
|
319
281
|
this.clusterIcon.setMap(null);
|
|
320
282
|
this.markers = [];
|
|
321
283
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
@@ -323,6 +285,7 @@
|
|
|
323
285
|
delete this.markers;
|
|
324
286
|
};
|
|
325
287
|
Cluster.prototype.addMarker = function (marker) {
|
|
288
|
+
var _a;
|
|
326
289
|
if (this.isMarkerAlreadyAdded(marker)) {
|
|
327
290
|
return false;
|
|
328
291
|
}
|
|
@@ -347,7 +310,7 @@
|
|
|
347
310
|
this.markers.push(marker);
|
|
348
311
|
var mCount = this.markers.length;
|
|
349
312
|
var maxZoom = this.markerClusterer.getMaxZoom();
|
|
350
|
-
var zoom = this.map.getZoom();
|
|
313
|
+
var zoom = (_a = this.map) === null || _a === void 0 ? void 0 : _a.getZoom();
|
|
351
314
|
if (maxZoom !== null && typeof zoom !== 'undefined' && zoom > maxZoom) {
|
|
352
315
|
// Zoomed in past max zoom, so show the marker.
|
|
353
316
|
if (marker.getMap() !== this.map) {
|
|
@@ -384,9 +347,10 @@
|
|
|
384
347
|
this.bounds = this.markerClusterer.getExtendedBounds(new google.maps.LatLngBounds(this.center, this.center));
|
|
385
348
|
};
|
|
386
349
|
Cluster.prototype.updateIcon = function () {
|
|
350
|
+
var _a;
|
|
387
351
|
var mCount = this.markers.length;
|
|
388
352
|
var maxZoom = this.markerClusterer.getMaxZoom();
|
|
389
|
-
var zoom = this.map.getZoom();
|
|
353
|
+
var zoom = (_a = this.map) === null || _a === void 0 ? void 0 : _a.getZoom();
|
|
390
354
|
if (maxZoom !== null && typeof zoom !== 'undefined' && zoom > maxZoom) {
|
|
391
355
|
this.clusterIcon.hide();
|
|
392
356
|
return;
|
|
@@ -416,6 +380,7 @@
|
|
|
416
380
|
return Cluster;
|
|
417
381
|
}());
|
|
418
382
|
|
|
383
|
+
/* global google */
|
|
419
384
|
/**
|
|
420
385
|
* Supports up to 9007199254740991 (Number.MAX_SAFE_INTEGER) markers
|
|
421
386
|
* which is not a problem as max array length is 4294967296 (2**32)
|
|
@@ -436,57 +401,52 @@
|
|
|
436
401
|
var IMAGE_EXTENSION = 'png';
|
|
437
402
|
var IMAGE_SIZES = [53, 56, 66, 78, 90];
|
|
438
403
|
var CLUSTERER_CLASS = 'cluster';
|
|
439
|
-
var Clusterer = /** @class */ (function (
|
|
440
|
-
__extends(Clusterer, _super);
|
|
404
|
+
var Clusterer = /** @class */ (function () {
|
|
441
405
|
function Clusterer(map, optMarkers, optOptions) {
|
|
442
406
|
if (optMarkers === void 0) { optMarkers = []; }
|
|
443
407
|
if (optOptions === void 0) { optOptions = {}; }
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
_this.zoomOnClick = true;
|
|
408
|
+
this.extend(Clusterer, google.maps.OverlayView);
|
|
409
|
+
this.markers = [];
|
|
410
|
+
this.clusters = [];
|
|
411
|
+
this.listeners = [];
|
|
412
|
+
this.activeMap = null;
|
|
413
|
+
this.ready = false;
|
|
414
|
+
this.gridSize = optOptions.gridSize || 60;
|
|
415
|
+
this.minClusterSize = optOptions.minimumClusterSize || 2;
|
|
416
|
+
this.maxZoom = optOptions.maxZoom || null;
|
|
417
|
+
this.styles = optOptions.styles || [];
|
|
418
|
+
this.title = optOptions.title || '';
|
|
419
|
+
this.zoomOnClick = true;
|
|
457
420
|
if (optOptions.zoomOnClick !== undefined) {
|
|
458
|
-
|
|
421
|
+
this.zoomOnClick = optOptions.zoomOnClick;
|
|
459
422
|
}
|
|
460
|
-
|
|
423
|
+
this.averageCenter = false;
|
|
461
424
|
if (optOptions.averageCenter !== undefined) {
|
|
462
|
-
|
|
425
|
+
this.averageCenter = optOptions.averageCenter;
|
|
463
426
|
}
|
|
464
|
-
|
|
427
|
+
this.ignoreHidden = false;
|
|
465
428
|
if (optOptions.ignoreHidden !== undefined) {
|
|
466
|
-
|
|
429
|
+
this.ignoreHidden = optOptions.ignoreHidden;
|
|
467
430
|
}
|
|
468
|
-
|
|
431
|
+
this.enableRetinaIcons = false;
|
|
469
432
|
if (optOptions.enableRetinaIcons !== undefined) {
|
|
470
|
-
|
|
471
|
-
}
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
433
|
+
this.enableRetinaIcons = optOptions.enableRetinaIcons;
|
|
434
|
+
}
|
|
435
|
+
this.imagePath = optOptions.imagePath || IMAGE_PATH;
|
|
436
|
+
this.imageExtension = optOptions.imageExtension || IMAGE_EXTENSION;
|
|
437
|
+
this.imageSizes = optOptions.imageSizes || IMAGE_SIZES;
|
|
438
|
+
this.calculator = optOptions.calculator || CALCULATOR;
|
|
439
|
+
this.batchSize = optOptions.batchSize || BATCH_SIZE;
|
|
440
|
+
this.batchSizeIE = optOptions.batchSizeIE || BATCH_SIZE_IE;
|
|
441
|
+
this.clusterClass = optOptions.clusterClass || CLUSTERER_CLASS;
|
|
479
442
|
if (navigator.userAgent.toLowerCase().indexOf('msie') !== -1) {
|
|
480
443
|
// Try to avoid IE timeout when processing a huge number of markers:
|
|
481
|
-
|
|
444
|
+
this.batchSize = this.batchSizeIE;
|
|
482
445
|
}
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
//
|
|
487
|
-
// @ts-ignore
|
|
488
|
-
_this.setMap(map); // Note: this causes onAdd to be called
|
|
489
|
-
return _this;
|
|
446
|
+
this.timerRefStatic = null;
|
|
447
|
+
this.setupStyles();
|
|
448
|
+
this.addMarkers(optMarkers, true);
|
|
449
|
+
this.setMap(map); // Note: this causes onAdd to be called
|
|
490
450
|
}
|
|
491
451
|
Clusterer.prototype.onZoomChanged = function () {
|
|
492
452
|
var _a, _b;
|
|
@@ -560,9 +520,10 @@
|
|
|
560
520
|
bounds.extend(position);
|
|
561
521
|
}
|
|
562
522
|
}
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
523
|
+
var map = this.getMap();
|
|
524
|
+
if (map !== null && 'fitBounds' in map) {
|
|
525
|
+
map.fitBounds(bounds);
|
|
526
|
+
}
|
|
566
527
|
};
|
|
567
528
|
Clusterer.prototype.getGridSize = function () {
|
|
568
529
|
return this.gridSize;
|
|
@@ -752,8 +713,6 @@
|
|
|
752
713
|
}, 0);
|
|
753
714
|
};
|
|
754
715
|
Clusterer.prototype.getExtendedBounds = function (bounds) {
|
|
755
|
-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
756
|
-
// @ts-ignore
|
|
757
716
|
var projection = this.getProjection();
|
|
758
717
|
// Convert the points to pixels and the extend out by the grid size.
|
|
759
718
|
var trPix = projection.fromLatLngToDivPixel(
|
|
@@ -873,14 +832,12 @@
|
|
|
873
832
|
}
|
|
874
833
|
var map = this.getMap();
|
|
875
834
|
var bounds = map !== null && 'getBounds' in map ? map.getBounds() : null;
|
|
835
|
+
var zoom = (map === null || map === void 0 ? void 0 : map.getZoom()) || 0;
|
|
876
836
|
// Get our current map view bounds.
|
|
877
837
|
// Create a new bounds object so we don't affect the map.
|
|
878
838
|
//
|
|
879
839
|
// See Comments 9 & 11 on Issue 3651 relating to this workaround for a Google Maps bug:
|
|
880
|
-
var mapBounds =
|
|
881
|
-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
882
|
-
// @ts-ignore
|
|
883
|
-
map.getZoom() > 3
|
|
840
|
+
var mapBounds = zoom > 3
|
|
884
841
|
? new google.maps.LatLngBounds(bounds === null || bounds === void 0 ? void 0 : bounds.getSouthWest(), bounds === null || bounds === void 0 ? void 0 : bounds.getNorthEast())
|
|
885
842
|
: new google.maps.LatLngBounds(new google.maps.LatLng(85.02070771743472, -178.48388434375), new google.maps.LatLng(-85.08136444384544, 178.00048865625));
|
|
886
843
|
var extendedMapBounds = this.getExtendedBounds(mapBounds);
|
|
@@ -920,7 +877,7 @@
|
|
|
920
877
|
}.apply(obj1, [obj2]);
|
|
921
878
|
};
|
|
922
879
|
return Clusterer;
|
|
923
|
-
}(
|
|
880
|
+
}());
|
|
924
881
|
|
|
925
882
|
exports.Cluster = Cluster;
|
|
926
883
|
exports.ClusterIcon = ClusterIcon;
|