@react-google-maps/marker-clusterer 2.11.1 → 2.11.4
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 +149 -104
- 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 +149 -104
- 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 +3 -3
- package/dist/umd.js +149 -104
- 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 +15 -2
- package/src/ClusterIcon.tsx +26 -11
- package/src/Clusterer.tsx +71 -20
package/dist/cjs.js
CHANGED
|
@@ -2,68 +2,47 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
Copyright (c) Microsoft Corporation.
|
|
7
|
-
|
|
8
|
-
Permission to use, copy, modify, and/or distribute this software for any
|
|
9
|
-
purpose with or without fee is hereby granted.
|
|
10
|
-
|
|
11
|
-
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
|
12
|
-
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
|
13
|
-
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
|
14
|
-
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
|
15
|
-
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
|
16
|
-
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
|
17
|
-
PERFORMANCE OF THIS SOFTWARE.
|
|
18
|
-
***************************************************************************** */
|
|
19
|
-
/* global Reflect, Promise */
|
|
20
|
-
|
|
21
|
-
var extendStatics = function(d, b) {
|
|
22
|
-
extendStatics = Object.setPrototypeOf ||
|
|
23
|
-
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
|
24
|
-
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
|
|
25
|
-
return extendStatics(d, b);
|
|
26
|
-
};
|
|
27
|
-
|
|
28
|
-
function __extends(d, b) {
|
|
29
|
-
if (typeof b !== "function" && b !== null)
|
|
30
|
-
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
|
|
31
|
-
extendStatics(d, b);
|
|
32
|
-
function __() { this.constructor = d; }
|
|
33
|
-
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
var ClusterIcon = /** @class */ (function (_super) {
|
|
37
|
-
__extends(ClusterIcon, _super);
|
|
5
|
+
var ClusterIcon = /** @class */ (function () {
|
|
38
6
|
function ClusterIcon(cluster, styles) {
|
|
39
|
-
var _this = _super.call(this) || this;
|
|
40
7
|
cluster.getClusterer().extend(ClusterIcon, google.maps.OverlayView);
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
8
|
+
this.cluster = cluster;
|
|
9
|
+
this.clusterClassName = this.cluster.getClusterer().getClusterClass();
|
|
10
|
+
this.className = this.clusterClassName;
|
|
11
|
+
this.styles = styles;
|
|
12
|
+
this.center = undefined;
|
|
13
|
+
this.div = null;
|
|
14
|
+
this.sums = null;
|
|
15
|
+
this.visible = false;
|
|
16
|
+
this.boundsChangedListener = null;
|
|
17
|
+
this.url = '';
|
|
18
|
+
this.height = 0;
|
|
19
|
+
this.width = 0;
|
|
20
|
+
this.anchorText = [0, 0];
|
|
21
|
+
this.anchorIcon = [0, 0];
|
|
22
|
+
this.textColor = 'black';
|
|
23
|
+
this.textSize = 11;
|
|
24
|
+
this.textDecoration = 'none';
|
|
25
|
+
this.fontWeight = 'bold';
|
|
26
|
+
this.fontStyle = 'normal';
|
|
27
|
+
this.fontFamily = 'Arial,sans-serif';
|
|
28
|
+
this.backgroundPosition = '0 0';
|
|
29
|
+
this.cMouseDownInCluster = null;
|
|
30
|
+
this.cDraggingMapByCluster = null;
|
|
31
|
+
this.timeOut = null;
|
|
32
|
+
this.setMap(cluster.getMap()); // Note: this causes onAdd to be called
|
|
33
|
+
this.onBoundsChanged = this.onBoundsChanged.bind(this);
|
|
34
|
+
this.onMouseDown = this.onMouseDown.bind(this);
|
|
35
|
+
this.onClick = this.onClick.bind(this);
|
|
36
|
+
this.onMouseOver = this.onMouseOver.bind(this);
|
|
37
|
+
this.onMouseOut = this.onMouseOut.bind(this);
|
|
38
|
+
this.onAdd = this.onAdd.bind(this);
|
|
39
|
+
this.onRemove = this.onRemove.bind(this);
|
|
40
|
+
this.draw = this.draw.bind(this);
|
|
41
|
+
this.hide = this.hide.bind(this);
|
|
42
|
+
this.show = this.show.bind(this);
|
|
43
|
+
this.useStyle = this.useStyle.bind(this);
|
|
44
|
+
this.setCenter = this.setCenter.bind(this);
|
|
45
|
+
this.getPosFromLatLng = this.getPosFromLatLng.bind(this);
|
|
67
46
|
}
|
|
68
47
|
ClusterIcon.prototype.onBoundsChanged = function () {
|
|
69
48
|
this.cDraggingMapByCluster = this.cMouseDownInCluster;
|
|
@@ -201,6 +180,7 @@ var ClusterIcon = /** @class */ (function (_super) {
|
|
|
201
180
|
else {
|
|
202
181
|
divTitle = this.sums.title;
|
|
203
182
|
}
|
|
183
|
+
this.div.className = this.className;
|
|
204
184
|
this.div.style.cursor = 'pointer';
|
|
205
185
|
this.div.style.position = 'absolute';
|
|
206
186
|
this.div.style.top = pos !== null ? "".concat(pos.y, "px") : '0';
|
|
@@ -210,6 +190,8 @@ var ClusterIcon = /** @class */ (function (_super) {
|
|
|
210
190
|
var img = document.createElement('img');
|
|
211
191
|
img.alt = divTitle;
|
|
212
192
|
img.src = this.url;
|
|
193
|
+
img.width = this.width;
|
|
194
|
+
img.height = this.height;
|
|
213
195
|
img.style.position = 'absolute';
|
|
214
196
|
img.style.top = "".concat(spriteV, "px");
|
|
215
197
|
img.style.left = "".concat(spriteH, "px");
|
|
@@ -269,7 +251,7 @@ var ClusterIcon = /** @class */ (function (_super) {
|
|
|
269
251
|
return pos;
|
|
270
252
|
};
|
|
271
253
|
return ClusterIcon;
|
|
272
|
-
}(
|
|
254
|
+
}());
|
|
273
255
|
|
|
274
256
|
var Cluster = /** @class */ (function () {
|
|
275
257
|
function Cluster(markerClusterer) {
|
|
@@ -282,6 +264,18 @@ var Cluster = /** @class */ (function () {
|
|
|
282
264
|
this.center = undefined;
|
|
283
265
|
this.bounds = null;
|
|
284
266
|
this.clusterIcon = new ClusterIcon(this, this.markerClusterer.getStyles());
|
|
267
|
+
this.getSize = this.getSize.bind(this);
|
|
268
|
+
this.getMarkers = this.getMarkers.bind(this);
|
|
269
|
+
this.getCenter = this.getCenter.bind(this);
|
|
270
|
+
this.getMap = this.getMap.bind(this);
|
|
271
|
+
this.getClusterer = this.getClusterer.bind(this);
|
|
272
|
+
this.getBounds = this.getBounds.bind(this);
|
|
273
|
+
this.remove = this.remove.bind(this);
|
|
274
|
+
this.addMarker = this.addMarker.bind(this);
|
|
275
|
+
this.isMarkerInClusterBounds = this.isMarkerInClusterBounds.bind(this);
|
|
276
|
+
this.calculateBounds = this.calculateBounds.bind(this);
|
|
277
|
+
this.updateIcon = this.updateIcon.bind(this);
|
|
278
|
+
this.isMarkerAlreadyAdded = this.isMarkerAlreadyAdded.bind(this);
|
|
285
279
|
}
|
|
286
280
|
Cluster.prototype.getSize = function () {
|
|
287
281
|
return this.markers.length;
|
|
@@ -412,11 +406,12 @@ var Cluster = /** @class */ (function () {
|
|
|
412
406
|
return Cluster;
|
|
413
407
|
}());
|
|
414
408
|
|
|
409
|
+
/* global google */
|
|
415
410
|
/**
|
|
416
411
|
* Supports up to 9007199254740991 (Number.MAX_SAFE_INTEGER) markers
|
|
417
412
|
* which is not a problem as max array length is 4294967296 (2**32)
|
|
418
413
|
*/
|
|
419
|
-
|
|
414
|
+
function CALCULATOR(markers, numStyles) {
|
|
420
415
|
var count = markers.length;
|
|
421
416
|
var numberOfDigits = count.toString().length;
|
|
422
417
|
var index = Math.min(numberOfDigits, numStyles);
|
|
@@ -425,62 +420,113 @@ var CALCULATOR = function CALCULATOR(markers, numStyles) {
|
|
|
425
420
|
index: index,
|
|
426
421
|
title: '',
|
|
427
422
|
};
|
|
428
|
-
}
|
|
423
|
+
}
|
|
429
424
|
var BATCH_SIZE = 2000;
|
|
430
425
|
var BATCH_SIZE_IE = 500;
|
|
431
426
|
var IMAGE_PATH = 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m';
|
|
432
427
|
var IMAGE_EXTENSION = 'png';
|
|
433
428
|
var IMAGE_SIZES = [53, 56, 66, 78, 90];
|
|
434
429
|
var CLUSTERER_CLASS = 'cluster';
|
|
435
|
-
var Clusterer = /** @class */ (function (
|
|
436
|
-
__extends(Clusterer, _super);
|
|
430
|
+
var Clusterer = /** @class */ (function () {
|
|
437
431
|
function Clusterer(map, optMarkers, optOptions) {
|
|
438
432
|
if (optMarkers === void 0) { optMarkers = []; }
|
|
439
433
|
if (optOptions === void 0) { optOptions = {}; }
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
_this.zoomOnClick = true;
|
|
434
|
+
this.extend(Clusterer, google.maps.OverlayView);
|
|
435
|
+
this.markers = [];
|
|
436
|
+
this.clusters = [];
|
|
437
|
+
this.listeners = [];
|
|
438
|
+
this.activeMap = null;
|
|
439
|
+
this.ready = false;
|
|
440
|
+
this.gridSize = optOptions.gridSize || 60;
|
|
441
|
+
this.minClusterSize = optOptions.minimumClusterSize || 2;
|
|
442
|
+
this.maxZoom = optOptions.maxZoom || null;
|
|
443
|
+
this.styles = optOptions.styles || [];
|
|
444
|
+
this.title = optOptions.title || '';
|
|
445
|
+
this.zoomOnClick = true;
|
|
453
446
|
if (optOptions.zoomOnClick !== undefined) {
|
|
454
|
-
|
|
447
|
+
this.zoomOnClick = optOptions.zoomOnClick;
|
|
455
448
|
}
|
|
456
|
-
|
|
449
|
+
this.averageCenter = false;
|
|
457
450
|
if (optOptions.averageCenter !== undefined) {
|
|
458
|
-
|
|
451
|
+
this.averageCenter = optOptions.averageCenter;
|
|
459
452
|
}
|
|
460
|
-
|
|
453
|
+
this.ignoreHidden = false;
|
|
461
454
|
if (optOptions.ignoreHidden !== undefined) {
|
|
462
|
-
|
|
455
|
+
this.ignoreHidden = optOptions.ignoreHidden;
|
|
463
456
|
}
|
|
464
|
-
|
|
457
|
+
this.enableRetinaIcons = false;
|
|
465
458
|
if (optOptions.enableRetinaIcons !== undefined) {
|
|
466
|
-
|
|
467
|
-
}
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
459
|
+
this.enableRetinaIcons = optOptions.enableRetinaIcons;
|
|
460
|
+
}
|
|
461
|
+
this.imagePath = optOptions.imagePath || IMAGE_PATH;
|
|
462
|
+
this.imageExtension = optOptions.imageExtension || IMAGE_EXTENSION;
|
|
463
|
+
this.imageSizes = optOptions.imageSizes || IMAGE_SIZES;
|
|
464
|
+
this.calculator = optOptions.calculator || CALCULATOR;
|
|
465
|
+
this.batchSize = optOptions.batchSize || BATCH_SIZE;
|
|
466
|
+
this.batchSizeIE = optOptions.batchSizeIE || BATCH_SIZE_IE;
|
|
467
|
+
this.clusterClass = optOptions.clusterClass || CLUSTERER_CLASS;
|
|
475
468
|
if (navigator.userAgent.toLowerCase().indexOf('msie') !== -1) {
|
|
476
469
|
// Try to avoid IE timeout when processing a huge number of markers:
|
|
477
|
-
|
|
478
|
-
}
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
470
|
+
this.batchSize = this.batchSizeIE;
|
|
471
|
+
}
|
|
472
|
+
this.timerRefStatic = null;
|
|
473
|
+
this.setupStyles();
|
|
474
|
+
this.addMarkers(optMarkers, true);
|
|
475
|
+
this.setMap(map); // Note: this causes onAdd to be called
|
|
476
|
+
this.onZoomChanged = this.onZoomChanged.bind(this);
|
|
477
|
+
this.onIdle = this.onIdle.bind(this);
|
|
478
|
+
this.onAdd = this.onAdd.bind(this);
|
|
479
|
+
this.onRemove = this.onRemove.bind(this);
|
|
480
|
+
this.draw = this.draw.bind(this);
|
|
481
|
+
this.setupStyles = this.setupStyles.bind(this);
|
|
482
|
+
this.fitMapToMarkers = this.fitMapToMarkers.bind(this);
|
|
483
|
+
this.getGridSize = this.getGridSize.bind(this);
|
|
484
|
+
this.setGridSize = this.setGridSize.bind(this);
|
|
485
|
+
this.getMinimumClusterSize = this.getMinimumClusterSize.bind(this);
|
|
486
|
+
this.setMinimumClusterSize = this.setMinimumClusterSize.bind(this);
|
|
487
|
+
this.getMaxZoom = this.getMaxZoom.bind(this);
|
|
488
|
+
this.setMaxZoom = this.setMaxZoom.bind(this);
|
|
489
|
+
this.getStyles = this.getStyles.bind(this);
|
|
490
|
+
this.setStyles = this.setStyles.bind(this);
|
|
491
|
+
this.getTitle = this.getTitle.bind(this);
|
|
492
|
+
this.setTitle = this.setTitle.bind(this);
|
|
493
|
+
this.getZoomOnClick = this.getZoomOnClick.bind(this);
|
|
494
|
+
this.setZoomOnClick = this.setZoomOnClick.bind(this);
|
|
495
|
+
this.getAverageCenter = this.getAverageCenter.bind(this);
|
|
496
|
+
this.setAverageCenter = this.setAverageCenter.bind(this);
|
|
497
|
+
this.getIgnoreHidden = this.getIgnoreHidden.bind(this);
|
|
498
|
+
this.setIgnoreHidden = this.setIgnoreHidden.bind(this);
|
|
499
|
+
this.getEnableRetinaIcons = this.getEnableRetinaIcons.bind(this);
|
|
500
|
+
this.setEnableRetinaIcons = this.setEnableRetinaIcons.bind(this);
|
|
501
|
+
this.getImageExtension = this.getImageExtension.bind(this);
|
|
502
|
+
this.setImageExtension = this.setImageExtension.bind(this);
|
|
503
|
+
this.getImagePath = this.getImagePath.bind(this);
|
|
504
|
+
this.setImagePath = this.setImagePath.bind(this);
|
|
505
|
+
this.getImageSizes = this.getImageSizes.bind(this);
|
|
506
|
+
this.setImageSizes = this.setImageSizes.bind(this);
|
|
507
|
+
this.getCalculator = this.getCalculator.bind(this);
|
|
508
|
+
this.setCalculator = this.setCalculator.bind(this);
|
|
509
|
+
this.getBatchSizeIE = this.getBatchSizeIE.bind(this);
|
|
510
|
+
this.setBatchSizeIE = this.setBatchSizeIE.bind(this);
|
|
511
|
+
this.getClusterClass = this.getClusterClass.bind(this);
|
|
512
|
+
this.setClusterClass = this.setClusterClass.bind(this);
|
|
513
|
+
this.getMarkers = this.getMarkers.bind(this);
|
|
514
|
+
this.getTotalMarkers = this.getTotalMarkers.bind(this);
|
|
515
|
+
this.getClusters = this.getClusters.bind(this);
|
|
516
|
+
this.getTotalClusters = this.getTotalClusters.bind(this);
|
|
517
|
+
this.addMarker = this.addMarker.bind(this);
|
|
518
|
+
this.addMarkers = this.addMarkers.bind(this);
|
|
519
|
+
this.pushMarkerTo = this.pushMarkerTo.bind(this);
|
|
520
|
+
this.removeMarker = this.removeMarker.bind(this);
|
|
521
|
+
this.removeMarkers = this.removeMarkers.bind(this);
|
|
522
|
+
this.clearMarkers = this.clearMarkers.bind(this);
|
|
523
|
+
this.repaint = this.repaint.bind(this);
|
|
524
|
+
this.getExtendedBounds = this.getExtendedBounds.bind(this);
|
|
525
|
+
this.redraw = this.redraw.bind(this);
|
|
526
|
+
this.resetViewport = this.resetViewport.bind(this);
|
|
527
|
+
this.addToClosestCluster = this.addToClosestCluster.bind(this);
|
|
528
|
+
this.createClusters = this.createClusters.bind(this);
|
|
529
|
+
this.extend = this.extend.bind(this);
|
|
484
530
|
}
|
|
485
531
|
Clusterer.prototype.onZoomChanged = function () {
|
|
486
532
|
var _a, _b;
|
|
@@ -531,15 +577,14 @@ var Clusterer = /** @class */ (function (_super) {
|
|
|
531
577
|
this.activeMap = null;
|
|
532
578
|
this.ready = false;
|
|
533
579
|
};
|
|
534
|
-
|
|
535
|
-
Clusterer.prototype.draw = function () { };
|
|
580
|
+
Clusterer.prototype.draw = function () { return; };
|
|
536
581
|
Clusterer.prototype.setupStyles = function () {
|
|
537
582
|
if (this.styles.length > 0) {
|
|
538
583
|
return;
|
|
539
584
|
}
|
|
540
585
|
for (var i = 0; i < this.imageSizes.length; i++) {
|
|
541
586
|
this.styles.push({
|
|
542
|
-
url: this.imagePath + (i + 1)
|
|
587
|
+
url: "".concat(this.imagePath + (i + 1), ".").concat(this.imageExtension),
|
|
543
588
|
height: this.imageSizes[i],
|
|
544
589
|
width: this.imageSizes[i],
|
|
545
590
|
});
|
|
@@ -911,7 +956,7 @@ var Clusterer = /** @class */ (function (_super) {
|
|
|
911
956
|
}.apply(obj1, [obj2]);
|
|
912
957
|
};
|
|
913
958
|
return Clusterer;
|
|
914
|
-
}(
|
|
959
|
+
}());
|
|
915
960
|
|
|
916
961
|
exports.Cluster = Cluster;
|
|
917
962
|
exports.ClusterIcon = ClusterIcon;
|