@react-google-maps/marker-clusterer 2.11.2 → 2.11.5
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 +121 -73
- 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 +121 -73
- 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 +1 -1
- package/dist/umd.js +121 -73
- 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 +14 -1
- package/src/ClusterIcon.tsx +19 -3
- package/src/Clusterer.tsx +66 -15
package/dist/cjs.js
CHANGED
|
@@ -2,37 +2,6 @@
|
|
|
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
5
|
var ClusterIcon = /** @class */ (function () {
|
|
37
6
|
function ClusterIcon(cluster, styles) {
|
|
38
7
|
cluster.getClusterer().extend(ClusterIcon, google.maps.OverlayView);
|
|
@@ -61,6 +30,19 @@ var ClusterIcon = /** @class */ (function () {
|
|
|
61
30
|
this.cDraggingMapByCluster = null;
|
|
62
31
|
this.timeOut = null;
|
|
63
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);
|
|
64
46
|
}
|
|
65
47
|
ClusterIcon.prototype.onBoundsChanged = function () {
|
|
66
48
|
this.cDraggingMapByCluster = this.cMouseDownInCluster;
|
|
@@ -198,6 +180,7 @@ var ClusterIcon = /** @class */ (function () {
|
|
|
198
180
|
else {
|
|
199
181
|
divTitle = this.sums.title;
|
|
200
182
|
}
|
|
183
|
+
this.div.className = this.className;
|
|
201
184
|
this.div.style.cursor = 'pointer';
|
|
202
185
|
this.div.style.position = 'absolute';
|
|
203
186
|
this.div.style.top = pos !== null ? "".concat(pos.y, "px") : '0';
|
|
@@ -207,6 +190,8 @@ var ClusterIcon = /** @class */ (function () {
|
|
|
207
190
|
var img = document.createElement('img');
|
|
208
191
|
img.alt = divTitle;
|
|
209
192
|
img.src = this.url;
|
|
193
|
+
img.width = this.width;
|
|
194
|
+
img.height = this.height;
|
|
210
195
|
img.style.position = 'absolute';
|
|
211
196
|
img.style.top = "".concat(spriteV, "px");
|
|
212
197
|
img.style.left = "".concat(spriteH, "px");
|
|
@@ -279,6 +264,18 @@ var Cluster = /** @class */ (function () {
|
|
|
279
264
|
this.center = undefined;
|
|
280
265
|
this.bounds = null;
|
|
281
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);
|
|
282
279
|
}
|
|
283
280
|
Cluster.prototype.getSize = function () {
|
|
284
281
|
return this.markers.length;
|
|
@@ -409,11 +406,12 @@ var Cluster = /** @class */ (function () {
|
|
|
409
406
|
return Cluster;
|
|
410
407
|
}());
|
|
411
408
|
|
|
409
|
+
/* global google */
|
|
412
410
|
/**
|
|
413
411
|
* Supports up to 9007199254740991 (Number.MAX_SAFE_INTEGER) markers
|
|
414
412
|
* which is not a problem as max array length is 4294967296 (2**32)
|
|
415
413
|
*/
|
|
416
|
-
|
|
414
|
+
function CALCULATOR(markers, numStyles) {
|
|
417
415
|
var count = markers.length;
|
|
418
416
|
var numberOfDigits = count.toString().length;
|
|
419
417
|
var index = Math.min(numberOfDigits, numStyles);
|
|
@@ -422,62 +420,113 @@ var CALCULATOR = function CALCULATOR(markers, numStyles) {
|
|
|
422
420
|
index: index,
|
|
423
421
|
title: '',
|
|
424
422
|
};
|
|
425
|
-
}
|
|
423
|
+
}
|
|
426
424
|
var BATCH_SIZE = 2000;
|
|
427
425
|
var BATCH_SIZE_IE = 500;
|
|
428
426
|
var IMAGE_PATH = 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m';
|
|
429
427
|
var IMAGE_EXTENSION = 'png';
|
|
430
428
|
var IMAGE_SIZES = [53, 56, 66, 78, 90];
|
|
431
429
|
var CLUSTERER_CLASS = 'cluster';
|
|
432
|
-
var Clusterer = /** @class */ (function (
|
|
433
|
-
__extends(Clusterer, _super);
|
|
430
|
+
var Clusterer = /** @class */ (function () {
|
|
434
431
|
function Clusterer(map, optMarkers, optOptions) {
|
|
435
432
|
if (optMarkers === void 0) { optMarkers = []; }
|
|
436
433
|
if (optOptions === void 0) { optOptions = {}; }
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
434
|
+
this.onZoomChanged = this.onZoomChanged.bind(this);
|
|
435
|
+
this.onIdle = this.onIdle.bind(this);
|
|
436
|
+
this.onAdd = this.onAdd.bind(this);
|
|
437
|
+
this.onRemove = this.onRemove.bind(this);
|
|
438
|
+
this.draw = this.draw.bind(this);
|
|
439
|
+
this.setupStyles = this.setupStyles.bind(this);
|
|
440
|
+
this.fitMapToMarkers = this.fitMapToMarkers.bind(this);
|
|
441
|
+
this.getGridSize = this.getGridSize.bind(this);
|
|
442
|
+
this.setGridSize = this.setGridSize.bind(this);
|
|
443
|
+
this.getMinimumClusterSize = this.getMinimumClusterSize.bind(this);
|
|
444
|
+
this.setMinimumClusterSize = this.setMinimumClusterSize.bind(this);
|
|
445
|
+
this.getMaxZoom = this.getMaxZoom.bind(this);
|
|
446
|
+
this.setMaxZoom = this.setMaxZoom.bind(this);
|
|
447
|
+
this.getStyles = this.getStyles.bind(this);
|
|
448
|
+
this.setStyles = this.setStyles.bind(this);
|
|
449
|
+
this.getTitle = this.getTitle.bind(this);
|
|
450
|
+
this.setTitle = this.setTitle.bind(this);
|
|
451
|
+
this.getZoomOnClick = this.getZoomOnClick.bind(this);
|
|
452
|
+
this.setZoomOnClick = this.setZoomOnClick.bind(this);
|
|
453
|
+
this.getAverageCenter = this.getAverageCenter.bind(this);
|
|
454
|
+
this.setAverageCenter = this.setAverageCenter.bind(this);
|
|
455
|
+
this.getIgnoreHidden = this.getIgnoreHidden.bind(this);
|
|
456
|
+
this.setIgnoreHidden = this.setIgnoreHidden.bind(this);
|
|
457
|
+
this.getEnableRetinaIcons = this.getEnableRetinaIcons.bind(this);
|
|
458
|
+
this.setEnableRetinaIcons = this.setEnableRetinaIcons.bind(this);
|
|
459
|
+
this.getImageExtension = this.getImageExtension.bind(this);
|
|
460
|
+
this.setImageExtension = this.setImageExtension.bind(this);
|
|
461
|
+
this.getImagePath = this.getImagePath.bind(this);
|
|
462
|
+
this.setImagePath = this.setImagePath.bind(this);
|
|
463
|
+
this.getImageSizes = this.getImageSizes.bind(this);
|
|
464
|
+
this.setImageSizes = this.setImageSizes.bind(this);
|
|
465
|
+
this.getCalculator = this.getCalculator.bind(this);
|
|
466
|
+
this.setCalculator = this.setCalculator.bind(this);
|
|
467
|
+
this.getBatchSizeIE = this.getBatchSizeIE.bind(this);
|
|
468
|
+
this.setBatchSizeIE = this.setBatchSizeIE.bind(this);
|
|
469
|
+
this.getClusterClass = this.getClusterClass.bind(this);
|
|
470
|
+
this.setClusterClass = this.setClusterClass.bind(this);
|
|
471
|
+
this.getMarkers = this.getMarkers.bind(this);
|
|
472
|
+
this.getTotalMarkers = this.getTotalMarkers.bind(this);
|
|
473
|
+
this.getClusters = this.getClusters.bind(this);
|
|
474
|
+
this.getTotalClusters = this.getTotalClusters.bind(this);
|
|
475
|
+
this.addMarker = this.addMarker.bind(this);
|
|
476
|
+
this.addMarkers = this.addMarkers.bind(this);
|
|
477
|
+
this.pushMarkerTo = this.pushMarkerTo.bind(this);
|
|
478
|
+
this.removeMarker = this.removeMarker.bind(this);
|
|
479
|
+
this.removeMarkers = this.removeMarkers.bind(this);
|
|
480
|
+
this.clearMarkers = this.clearMarkers.bind(this);
|
|
481
|
+
this.repaint = this.repaint.bind(this);
|
|
482
|
+
this.getExtendedBounds = this.getExtendedBounds.bind(this);
|
|
483
|
+
this.redraw = this.redraw.bind(this);
|
|
484
|
+
this.resetViewport = this.resetViewport.bind(this);
|
|
485
|
+
this.addToClosestCluster = this.addToClosestCluster.bind(this);
|
|
486
|
+
this.createClusters = this.createClusters.bind(this);
|
|
487
|
+
this.extend = this.extend.bind(this);
|
|
488
|
+
this.extend(Clusterer, google.maps.OverlayView);
|
|
489
|
+
this.markers = [];
|
|
490
|
+
this.clusters = [];
|
|
491
|
+
this.listeners = [];
|
|
492
|
+
this.activeMap = null;
|
|
493
|
+
this.ready = false;
|
|
494
|
+
this.gridSize = optOptions.gridSize || 60;
|
|
495
|
+
this.minClusterSize = optOptions.minimumClusterSize || 2;
|
|
496
|
+
this.maxZoom = optOptions.maxZoom || null;
|
|
497
|
+
this.styles = optOptions.styles || [];
|
|
498
|
+
this.title = optOptions.title || '';
|
|
499
|
+
this.zoomOnClick = true;
|
|
450
500
|
if (optOptions.zoomOnClick !== undefined) {
|
|
451
|
-
|
|
501
|
+
this.zoomOnClick = optOptions.zoomOnClick;
|
|
452
502
|
}
|
|
453
|
-
|
|
503
|
+
this.averageCenter = false;
|
|
454
504
|
if (optOptions.averageCenter !== undefined) {
|
|
455
|
-
|
|
505
|
+
this.averageCenter = optOptions.averageCenter;
|
|
456
506
|
}
|
|
457
|
-
|
|
507
|
+
this.ignoreHidden = false;
|
|
458
508
|
if (optOptions.ignoreHidden !== undefined) {
|
|
459
|
-
|
|
509
|
+
this.ignoreHidden = optOptions.ignoreHidden;
|
|
460
510
|
}
|
|
461
|
-
|
|
511
|
+
this.enableRetinaIcons = false;
|
|
462
512
|
if (optOptions.enableRetinaIcons !== undefined) {
|
|
463
|
-
|
|
464
|
-
}
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
513
|
+
this.enableRetinaIcons = optOptions.enableRetinaIcons;
|
|
514
|
+
}
|
|
515
|
+
this.imagePath = optOptions.imagePath || IMAGE_PATH;
|
|
516
|
+
this.imageExtension = optOptions.imageExtension || IMAGE_EXTENSION;
|
|
517
|
+
this.imageSizes = optOptions.imageSizes || IMAGE_SIZES;
|
|
518
|
+
this.calculator = optOptions.calculator || CALCULATOR;
|
|
519
|
+
this.batchSize = optOptions.batchSize || BATCH_SIZE;
|
|
520
|
+
this.batchSizeIE = optOptions.batchSizeIE || BATCH_SIZE_IE;
|
|
521
|
+
this.clusterClass = optOptions.clusterClass || CLUSTERER_CLASS;
|
|
472
522
|
if (navigator.userAgent.toLowerCase().indexOf('msie') !== -1) {
|
|
473
523
|
// Try to avoid IE timeout when processing a huge number of markers:
|
|
474
|
-
|
|
524
|
+
this.batchSize = this.batchSizeIE;
|
|
475
525
|
}
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
return _this;
|
|
526
|
+
this.timerRefStatic = null;
|
|
527
|
+
this.setupStyles();
|
|
528
|
+
this.addMarkers(optMarkers, true);
|
|
529
|
+
this.setMap(map); // Note: this causes onAdd to be called
|
|
481
530
|
}
|
|
482
531
|
Clusterer.prototype.onZoomChanged = function () {
|
|
483
532
|
var _a, _b;
|
|
@@ -528,15 +577,14 @@ var Clusterer = /** @class */ (function (_super) {
|
|
|
528
577
|
this.activeMap = null;
|
|
529
578
|
this.ready = false;
|
|
530
579
|
};
|
|
531
|
-
|
|
532
|
-
Clusterer.prototype.draw = function () { };
|
|
580
|
+
Clusterer.prototype.draw = function () { return; };
|
|
533
581
|
Clusterer.prototype.setupStyles = function () {
|
|
534
582
|
if (this.styles.length > 0) {
|
|
535
583
|
return;
|
|
536
584
|
}
|
|
537
585
|
for (var i = 0; i < this.imageSizes.length; i++) {
|
|
538
586
|
this.styles.push({
|
|
539
|
-
url: this.imagePath + (i + 1)
|
|
587
|
+
url: "".concat(this.imagePath + (i + 1), ".").concat(this.imageExtension),
|
|
540
588
|
height: this.imageSizes[i],
|
|
541
589
|
width: this.imageSizes[i],
|
|
542
590
|
});
|
|
@@ -908,7 +956,7 @@ var Clusterer = /** @class */ (function (_super) {
|
|
|
908
956
|
}.apply(obj1, [obj2]);
|
|
909
957
|
};
|
|
910
958
|
return Clusterer;
|
|
911
|
-
}(
|
|
959
|
+
}());
|
|
912
960
|
|
|
913
961
|
exports.Cluster = Cluster;
|
|
914
962
|
exports.ClusterIcon = ClusterIcon;
|