@react-google-maps/marker-clusterer 2.9.0 → 2.11.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.
- package/dist/cjs.js +260 -201
- 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 +260 -201
- 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 +14 -4
- package/dist/umd.js +260 -201
- 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 +10 -47
- package/src/Cluster.tsx +9 -5
- package/src/ClusterIcon.tsx +171 -110
- package/src/Clusterer.tsx +88 -66
- package/src/index.ts +5 -5
- package/src/setup-tests.js +0 -356
package/dist/cjs.js
CHANGED
|
@@ -2,111 +2,156 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
|
|
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);
|
|
6
38
|
function ClusterIcon(cluster, styles) {
|
|
39
|
+
var _this = _super.call(this) || this;
|
|
7
40
|
cluster.getClusterer().extend(ClusterIcon, google.maps.OverlayView);
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
41
|
+
_this.cluster = cluster;
|
|
42
|
+
_this.clusterClassName = _this.cluster.getClusterer().getClusterClass();
|
|
43
|
+
_this.className = _this.clusterClassName;
|
|
44
|
+
_this.styles = styles;
|
|
45
|
+
_this.center = undefined;
|
|
46
|
+
_this.div = null;
|
|
47
|
+
_this.sums = null;
|
|
48
|
+
_this.visible = false;
|
|
49
|
+
_this.boundsChangedListener = null;
|
|
50
|
+
_this.url = '';
|
|
51
|
+
_this.height = 0;
|
|
52
|
+
_this.width = 0;
|
|
53
|
+
_this.anchorText = [0, 0];
|
|
54
|
+
_this.anchorIcon = [0, 0];
|
|
55
|
+
_this.textColor = 'black';
|
|
56
|
+
_this.textSize = 11;
|
|
57
|
+
_this.textDecoration = 'none';
|
|
58
|
+
_this.fontWeight = 'bold';
|
|
59
|
+
_this.fontStyle = 'normal';
|
|
60
|
+
_this.fontFamily = 'Arial,sans-serif';
|
|
61
|
+
_this.backgroundPosition = '0 0';
|
|
62
|
+
_this.cMouseDownInCluster = null;
|
|
63
|
+
_this.cDraggingMapByCluster = null;
|
|
64
|
+
_this.timeOut = null;
|
|
65
|
+
_this.setMap(cluster.getMap()); // Note: this causes onAdd to be called
|
|
66
|
+
return _this;
|
|
31
67
|
}
|
|
68
|
+
ClusterIcon.prototype.onBoundsChanged = function () {
|
|
69
|
+
this.cDraggingMapByCluster = this.cMouseDownInCluster;
|
|
70
|
+
};
|
|
71
|
+
ClusterIcon.prototype.onMouseDown = function () {
|
|
72
|
+
this.cMouseDownInCluster = true;
|
|
73
|
+
this.cDraggingMapByCluster = false;
|
|
74
|
+
};
|
|
75
|
+
ClusterIcon.prototype.onClick = function (event) {
|
|
76
|
+
this.cMouseDownInCluster = false;
|
|
77
|
+
if (!this.cDraggingMapByCluster) {
|
|
78
|
+
var markerClusterer_1 = this.cluster.getClusterer();
|
|
79
|
+
/**
|
|
80
|
+
* This event is fired when a cluster marker is clicked.
|
|
81
|
+
* @name MarkerClusterer#click
|
|
82
|
+
* @param {Cluster} c The cluster that was clicked.
|
|
83
|
+
* @event
|
|
84
|
+
*/
|
|
85
|
+
google.maps.event.trigger(markerClusterer_1, 'click', this.cluster);
|
|
86
|
+
google.maps.event.trigger(markerClusterer_1, 'clusterclick', this.cluster); // deprecated name
|
|
87
|
+
// The default click handler follows. Disable it by setting
|
|
88
|
+
// the zoomOnClick property to false.
|
|
89
|
+
if (markerClusterer_1.getZoomOnClick()) {
|
|
90
|
+
// Zoom into the cluster.
|
|
91
|
+
var maxZoom_1 = markerClusterer_1.getMaxZoom();
|
|
92
|
+
var bounds_1 = this.cluster.getBounds();
|
|
93
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
94
|
+
// @ts-ignore
|
|
95
|
+
markerClusterer_1.getMap().fitBounds(bounds_1);
|
|
96
|
+
// There is a fix for Issue 170 here:
|
|
97
|
+
this.timeOut = window.setTimeout(function () {
|
|
98
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
99
|
+
// @ts-ignore
|
|
100
|
+
markerClusterer_1.getMap().fitBounds(bounds_1);
|
|
101
|
+
// Don't zoom beyond the max zoom level
|
|
102
|
+
if (maxZoom_1 !== null &&
|
|
103
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
104
|
+
// @ts-ignore
|
|
105
|
+
markerClusterer_1.getMap().getZoom() > maxZoom_1) {
|
|
106
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
107
|
+
// @ts-ignore
|
|
108
|
+
markerClusterer_1.getMap().setZoom(maxZoom_1 + 1);
|
|
109
|
+
}
|
|
110
|
+
}, 100);
|
|
111
|
+
}
|
|
112
|
+
// Prevent event propagation to the map:
|
|
113
|
+
event.cancelBubble = true;
|
|
114
|
+
if (event.stopPropagation) {
|
|
115
|
+
event.stopPropagation();
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
};
|
|
119
|
+
ClusterIcon.prototype.onMouseOver = function () {
|
|
120
|
+
/**
|
|
121
|
+
* This event is fired when the mouse moves over a cluster marker.
|
|
122
|
+
* @name MarkerClusterer#mouseover
|
|
123
|
+
* @param {Cluster} c The cluster that the mouse moved over.
|
|
124
|
+
* @event
|
|
125
|
+
*/
|
|
126
|
+
google.maps.event.trigger(this.cluster.getClusterer(), 'mouseover', this.cluster);
|
|
127
|
+
};
|
|
128
|
+
ClusterIcon.prototype.onMouseOut = function () {
|
|
129
|
+
/**
|
|
130
|
+
* This event is fired when the mouse moves out of a cluster marker.
|
|
131
|
+
* @name MarkerClusterer#mouseout
|
|
132
|
+
* @param {Cluster} c The cluster that the mouse moved out of.
|
|
133
|
+
* @event
|
|
134
|
+
*/
|
|
135
|
+
google.maps.event.trigger(this.cluster.getClusterer(), 'mouseout', this.cluster);
|
|
136
|
+
};
|
|
32
137
|
ClusterIcon.prototype.onAdd = function () {
|
|
33
|
-
var _this = this;
|
|
34
|
-
var cMouseDownInCluster;
|
|
35
|
-
var cDraggingMapByCluster;
|
|
36
138
|
this.div = document.createElement('div');
|
|
37
139
|
this.div.className = this.className;
|
|
38
140
|
if (this.visible) {
|
|
39
141
|
this.show();
|
|
40
142
|
}
|
|
143
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
41
144
|
// @ts-ignore
|
|
42
145
|
this.getPanes().overlayMouseTarget.appendChild(this.div);
|
|
43
146
|
// Fix for Issue 157
|
|
44
147
|
this.boundsChangedListener = google.maps.event.addListener(
|
|
148
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
45
149
|
// @ts-ignore
|
|
46
|
-
this.getMap(), '
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
cDraggingMapByCluster = false;
|
|
52
|
-
});
|
|
53
|
-
google.maps.event.addDomListener(this.div, 'click', function (event) {
|
|
54
|
-
cMouseDownInCluster = false;
|
|
55
|
-
if (!cDraggingMapByCluster) {
|
|
56
|
-
var markerClusterer_1 = _this.cluster.getClusterer();
|
|
57
|
-
/**
|
|
58
|
-
* This event is fired when a cluster marker is clicked.
|
|
59
|
-
* @name MarkerClusterer#click
|
|
60
|
-
* @param {Cluster} c The cluster that was clicked.
|
|
61
|
-
* @event
|
|
62
|
-
*/
|
|
63
|
-
google.maps.event.trigger(markerClusterer_1, 'click', _this.cluster);
|
|
64
|
-
google.maps.event.trigger(markerClusterer_1, 'clusterclick', _this.cluster); // deprecated name
|
|
65
|
-
// The default click handler follows. Disable it by setting
|
|
66
|
-
// the zoomOnClick property to false.
|
|
67
|
-
if (markerClusterer_1.getZoomOnClick()) {
|
|
68
|
-
// Zoom into the cluster.
|
|
69
|
-
var maxZoom_1 = markerClusterer_1.getMaxZoom();
|
|
70
|
-
var bounds_1 = _this.cluster.getBounds();
|
|
71
|
-
// @ts-ignore
|
|
72
|
-
markerClusterer_1.getMap().fitBounds(bounds_1);
|
|
73
|
-
// There is a fix for Issue 170 here:
|
|
74
|
-
setTimeout(function timeout() {
|
|
75
|
-
// @ts-ignore
|
|
76
|
-
markerClusterer_1.getMap().fitBounds(bounds_1);
|
|
77
|
-
// Don't zoom beyond the max zoom level
|
|
78
|
-
// @ts-ignore
|
|
79
|
-
if (maxZoom_1 !== null && markerClusterer_1.getMap().getZoom() > maxZoom_1) {
|
|
80
|
-
// @ts-ignore
|
|
81
|
-
markerClusterer_1.getMap().setZoom(maxZoom_1 + 1);
|
|
82
|
-
}
|
|
83
|
-
}, 100);
|
|
84
|
-
}
|
|
85
|
-
// Prevent event propagation to the map:
|
|
86
|
-
event.cancelBubble = true;
|
|
87
|
-
if (event.stopPropagation) {
|
|
88
|
-
event.stopPropagation();
|
|
89
|
-
}
|
|
90
|
-
}
|
|
91
|
-
});
|
|
92
|
-
google.maps.event.addDomListener(this.div, 'mouseover', function () {
|
|
93
|
-
/**
|
|
94
|
-
* This event is fired when the mouse moves over a cluster marker.
|
|
95
|
-
* @name MarkerClusterer#mouseover
|
|
96
|
-
* @param {Cluster} c The cluster that the mouse moved over.
|
|
97
|
-
* @event
|
|
98
|
-
*/
|
|
99
|
-
google.maps.event.trigger(_this.cluster.getClusterer(), 'mouseover', _this.cluster);
|
|
100
|
-
});
|
|
101
|
-
google.maps.event.addDomListener(this.div, 'mouseout', function () {
|
|
102
|
-
/**
|
|
103
|
-
* This event is fired when the mouse moves out of a cluster marker.
|
|
104
|
-
* @name MarkerClusterer#mouseout
|
|
105
|
-
* @param {Cluster} c The cluster that the mouse moved out of.
|
|
106
|
-
* @event
|
|
107
|
-
*/
|
|
108
|
-
google.maps.event.trigger(_this.cluster.getClusterer(), 'mouseout', _this.cluster);
|
|
109
|
-
});
|
|
150
|
+
this.getMap(), 'bounds_changed', this.onBoundsChanged);
|
|
151
|
+
this.div.addEventListener('mousedown', this.onMouseDown);
|
|
152
|
+
this.div.addEventListener('click', this.onClick);
|
|
153
|
+
this.div.addEventListener('mouseover', this.onMouseOver);
|
|
154
|
+
this.div.addEventListener('mouseout', this.onMouseOut);
|
|
110
155
|
};
|
|
111
156
|
ClusterIcon.prototype.onRemove = function () {
|
|
112
157
|
if (this.div && this.div.parentNode) {
|
|
@@ -114,16 +159,23 @@ var ClusterIcon = /** @class */ (function () {
|
|
|
114
159
|
if (this.boundsChangedListener !== null) {
|
|
115
160
|
google.maps.event.removeListener(this.boundsChangedListener);
|
|
116
161
|
}
|
|
117
|
-
|
|
162
|
+
this.div.removeEventListener('mousedown', this.onMouseDown);
|
|
163
|
+
this.div.removeEventListener('click', this.onClick);
|
|
164
|
+
this.div.removeEventListener('mouseover', this.onMouseOver);
|
|
165
|
+
this.div.removeEventListener('mouseout', this.onMouseOut);
|
|
118
166
|
this.div.parentNode.removeChild(this.div);
|
|
167
|
+
if (this.timeOut !== null) {
|
|
168
|
+
window.clearTimeout(this.timeOut);
|
|
169
|
+
this.timeOut = null;
|
|
170
|
+
}
|
|
119
171
|
this.div = null;
|
|
120
172
|
}
|
|
121
173
|
};
|
|
122
174
|
ClusterIcon.prototype.draw = function () {
|
|
123
175
|
if (this.visible && this.div !== null && this.center) {
|
|
124
|
-
var
|
|
125
|
-
this.div.style.top = y
|
|
126
|
-
this.div.style.left = x
|
|
176
|
+
var pos = this.getPosFromLatLng(this.center);
|
|
177
|
+
this.div.style.top = pos !== null ? "".concat(pos.y, "px") : '0';
|
|
178
|
+
this.div.style.left = pos !== null ? "".concat(pos.x, "px") : '0';
|
|
127
179
|
}
|
|
128
180
|
};
|
|
129
181
|
ClusterIcon.prototype.hide = function () {
|
|
@@ -141,7 +193,9 @@ var ClusterIcon = /** @class */ (function () {
|
|
|
141
193
|
var spriteH = parseInt(bp[0].replace(/^\s+|\s+$/g, ''), 10);
|
|
142
194
|
var spriteV = parseInt(bp[1].replace(/^\s+|\s+$/g, ''), 10);
|
|
143
195
|
var pos = this.getPosFromLatLng(this.center);
|
|
144
|
-
if (this.sums === null ||
|
|
196
|
+
if (this.sums === null ||
|
|
197
|
+
typeof this.sums.title === 'undefined' ||
|
|
198
|
+
this.sums.title === '') {
|
|
145
199
|
divTitle = this.cluster.getClusterer().getTitle();
|
|
146
200
|
}
|
|
147
201
|
else {
|
|
@@ -149,8 +203,8 @@ var ClusterIcon = /** @class */ (function () {
|
|
|
149
203
|
}
|
|
150
204
|
this.div.style.cursor = 'pointer';
|
|
151
205
|
this.div.style.position = 'absolute';
|
|
152
|
-
this.div.style.top = "".concat(pos.y, "px");
|
|
153
|
-
this.div.style.left = "".concat(pos.x, "px");
|
|
206
|
+
this.div.style.top = pos !== null ? "".concat(pos.y, "px") : '0';
|
|
207
|
+
this.div.style.left = pos !== null ? "".concat(pos.x, "px") : '0';
|
|
154
208
|
this.div.style.width = "".concat(this.width, "px");
|
|
155
209
|
this.div.style.height = "".concat(this.height, "px");
|
|
156
210
|
var img = document.createElement('img');
|
|
@@ -207,20 +261,20 @@ var ClusterIcon = /** @class */ (function () {
|
|
|
207
261
|
this.center = center;
|
|
208
262
|
};
|
|
209
263
|
ClusterIcon.prototype.getPosFromLatLng = function (latlng) {
|
|
210
|
-
// @ts-ignore
|
|
211
264
|
var pos = this.getProjection().fromLatLngToDivPixel(latlng);
|
|
212
|
-
pos
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
265
|
+
if (pos !== null) {
|
|
266
|
+
pos.x -= this.anchorIcon[1];
|
|
267
|
+
pos.y -= this.anchorIcon[0];
|
|
268
|
+
}
|
|
216
269
|
return pos;
|
|
217
270
|
};
|
|
218
271
|
return ClusterIcon;
|
|
219
|
-
}());
|
|
272
|
+
}(google.maps.OverlayView));
|
|
220
273
|
|
|
221
274
|
var Cluster = /** @class */ (function () {
|
|
222
275
|
function Cluster(markerClusterer) {
|
|
223
276
|
this.markerClusterer = markerClusterer;
|
|
277
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
224
278
|
// @ts-ignore
|
|
225
279
|
this.map = this.markerClusterer.getMap();
|
|
226
280
|
this.gridSize = this.markerClusterer.getGridSize();
|
|
@@ -258,9 +312,11 @@ var Cluster = /** @class */ (function () {
|
|
|
258
312
|
return bounds;
|
|
259
313
|
};
|
|
260
314
|
Cluster.prototype.remove = function () {
|
|
315
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
261
316
|
// @ts-ignore
|
|
262
317
|
this.clusterIcon.setMap(null);
|
|
263
318
|
this.markers = [];
|
|
319
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
264
320
|
// @ts-ignore
|
|
265
321
|
delete this.markers;
|
|
266
322
|
};
|
|
@@ -348,11 +404,9 @@ var Cluster = /** @class */ (function () {
|
|
|
348
404
|
if (this.markers.includes) {
|
|
349
405
|
return this.markers.includes(marker);
|
|
350
406
|
}
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
return true;
|
|
355
|
-
}
|
|
407
|
+
for (var i = 0; i < this.markers.length; i++) {
|
|
408
|
+
if (marker === this.markers[i]) {
|
|
409
|
+
return true;
|
|
356
410
|
}
|
|
357
411
|
}
|
|
358
412
|
return false;
|
|
@@ -360,7 +414,6 @@ var Cluster = /** @class */ (function () {
|
|
|
360
414
|
return Cluster;
|
|
361
415
|
}());
|
|
362
416
|
|
|
363
|
-
/* global google */
|
|
364
417
|
/**
|
|
365
418
|
* Supports up to 9007199254740991 (Number.MAX_SAFE_INTEGER) markers
|
|
366
419
|
* which is not a problem as max array length is 4294967296 (2**32)
|
|
@@ -381,85 +434,86 @@ var IMAGE_PATH = 'https://developers.google.com/maps/documentation/javascript/ex
|
|
|
381
434
|
var IMAGE_EXTENSION = 'png';
|
|
382
435
|
var IMAGE_SIZES = [53, 56, 66, 78, 90];
|
|
383
436
|
var CLUSTERER_CLASS = 'cluster';
|
|
384
|
-
var Clusterer = /** @class */ (function () {
|
|
437
|
+
var Clusterer = /** @class */ (function (_super) {
|
|
438
|
+
__extends(Clusterer, _super);
|
|
385
439
|
function Clusterer(map, optMarkers, optOptions) {
|
|
386
440
|
if (optMarkers === void 0) { optMarkers = []; }
|
|
387
441
|
if (optOptions === void 0) { optOptions = {}; }
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
442
|
+
var _this = _super.call(this) || this;
|
|
443
|
+
_this.extend(Clusterer, google.maps.OverlayView);
|
|
444
|
+
_this.markers = [];
|
|
445
|
+
_this.clusters = [];
|
|
446
|
+
_this.listeners = [];
|
|
447
|
+
_this.activeMap = null;
|
|
448
|
+
_this.ready = false;
|
|
449
|
+
_this.gridSize = optOptions.gridSize || 60;
|
|
450
|
+
_this.minClusterSize = optOptions.minimumClusterSize || 2;
|
|
451
|
+
_this.maxZoom = optOptions.maxZoom || null;
|
|
452
|
+
_this.styles = optOptions.styles || [];
|
|
453
|
+
_this.title = optOptions.title || '';
|
|
454
|
+
_this.zoomOnClick = true;
|
|
400
455
|
if (optOptions.zoomOnClick !== undefined) {
|
|
401
|
-
|
|
456
|
+
_this.zoomOnClick = optOptions.zoomOnClick;
|
|
402
457
|
}
|
|
403
|
-
|
|
458
|
+
_this.averageCenter = false;
|
|
404
459
|
if (optOptions.averageCenter !== undefined) {
|
|
405
|
-
|
|
460
|
+
_this.averageCenter = optOptions.averageCenter;
|
|
406
461
|
}
|
|
407
|
-
|
|
462
|
+
_this.ignoreHidden = false;
|
|
408
463
|
if (optOptions.ignoreHidden !== undefined) {
|
|
409
|
-
|
|
464
|
+
_this.ignoreHidden = optOptions.ignoreHidden;
|
|
410
465
|
}
|
|
411
|
-
|
|
466
|
+
_this.enableRetinaIcons = false;
|
|
412
467
|
if (optOptions.enableRetinaIcons !== undefined) {
|
|
413
|
-
|
|
414
|
-
}
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
468
|
+
_this.enableRetinaIcons = optOptions.enableRetinaIcons;
|
|
469
|
+
}
|
|
470
|
+
_this.imagePath = optOptions.imagePath || IMAGE_PATH;
|
|
471
|
+
_this.imageExtension = optOptions.imageExtension || IMAGE_EXTENSION;
|
|
472
|
+
_this.imageSizes = optOptions.imageSizes || IMAGE_SIZES;
|
|
473
|
+
_this.calculator = optOptions.calculator || CALCULATOR;
|
|
474
|
+
_this.batchSize = optOptions.batchSize || BATCH_SIZE;
|
|
475
|
+
_this.batchSizeIE = optOptions.batchSizeIE || BATCH_SIZE_IE;
|
|
476
|
+
_this.clusterClass = optOptions.clusterClass || CLUSTERER_CLASS;
|
|
422
477
|
if (navigator.userAgent.toLowerCase().indexOf('msie') !== -1) {
|
|
423
478
|
// Try to avoid IE timeout when processing a huge number of markers:
|
|
424
|
-
|
|
479
|
+
_this.batchSize = _this.batchSizeIE;
|
|
425
480
|
}
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
481
|
+
_this.timerRefStatic = null;
|
|
482
|
+
_this.setupStyles();
|
|
483
|
+
_this.addMarkers(optMarkers, true);
|
|
484
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
429
485
|
// @ts-ignore
|
|
430
|
-
|
|
486
|
+
_this.setMap(map); // Note: this causes onAdd to be called
|
|
487
|
+
return _this;
|
|
431
488
|
}
|
|
489
|
+
Clusterer.prototype.onZoomChanged = function () {
|
|
490
|
+
var _a, _b;
|
|
491
|
+
this.resetViewport(false);
|
|
492
|
+
// Workaround for this Google bug: when map is at level 0 and "-" of
|
|
493
|
+
// zoom slider is clicked, a "zoom_changed" event is fired even though
|
|
494
|
+
// the map doesn't zoom out any further. In this situation, no "idle"
|
|
495
|
+
// event is triggered so the cluster markers that have been removed
|
|
496
|
+
// do not get redrawn. Same goes for a zoom in at maxZoom.
|
|
497
|
+
if (((_a = this.getMap()) === null || _a === void 0 ? void 0 : _a.getZoom()) === (this.get('minZoom') || 0) ||
|
|
498
|
+
((_b = this.getMap()) === null || _b === void 0 ? void 0 : _b.getZoom()) === this.get('maxZoom')) {
|
|
499
|
+
google.maps.event.trigger(this, 'idle');
|
|
500
|
+
}
|
|
501
|
+
};
|
|
502
|
+
Clusterer.prototype.onIdle = function () {
|
|
503
|
+
this.redraw();
|
|
504
|
+
};
|
|
432
505
|
Clusterer.prototype.onAdd = function () {
|
|
433
|
-
var
|
|
434
|
-
|
|
435
|
-
this.activeMap = this.getMap();
|
|
506
|
+
var map = this.getMap();
|
|
507
|
+
this.activeMap = map;
|
|
436
508
|
this.ready = true;
|
|
437
509
|
this.repaint();
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
// zoom slider is clicked, a "zoom_changed" event is fired even though
|
|
446
|
-
// the map doesn't zoom out any further. In this situation, no "idle"
|
|
447
|
-
// event is triggered so the cluster markers that have been removed
|
|
448
|
-
// do not get redrawn. Same goes for a zoom in at maxZoom.
|
|
449
|
-
if (
|
|
450
|
-
// @ts-ignore
|
|
451
|
-
_this.getMap().getZoom() === (_this.get('minZoom') || 0) ||
|
|
452
|
-
// @ts-ignore
|
|
453
|
-
_this.getMap().getZoom() === _this.get('maxZoom')) {
|
|
454
|
-
google.maps.event.trigger(_this, 'idle');
|
|
455
|
-
}
|
|
456
|
-
}),
|
|
457
|
-
google.maps.event.addListener(
|
|
458
|
-
// @ts-ignore
|
|
459
|
-
this.getMap(), 'idle', function () {
|
|
460
|
-
_this.redraw();
|
|
461
|
-
}),
|
|
462
|
-
];
|
|
510
|
+
if (map !== null) {
|
|
511
|
+
// Add the map event listeners
|
|
512
|
+
this.listeners = [
|
|
513
|
+
google.maps.event.addListener(map, 'zoom_changed', this.onZoomChanged),
|
|
514
|
+
google.maps.event.addListener(map, 'idle', this.onIdle),
|
|
515
|
+
];
|
|
516
|
+
}
|
|
463
517
|
};
|
|
464
518
|
Clusterer.prototype.onRemove = function () {
|
|
465
519
|
// Put all the managed markers back on the map:
|
|
@@ -504,6 +558,7 @@ var Clusterer = /** @class */ (function () {
|
|
|
504
558
|
bounds.extend(position);
|
|
505
559
|
}
|
|
506
560
|
}
|
|
561
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
507
562
|
// @ts-ignore
|
|
508
563
|
this.getMap().fitBounds(bounds);
|
|
509
564
|
};
|
|
@@ -695,26 +750,39 @@ var Clusterer = /** @class */ (function () {
|
|
|
695
750
|
}, 0);
|
|
696
751
|
};
|
|
697
752
|
Clusterer.prototype.getExtendedBounds = function (bounds) {
|
|
753
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
698
754
|
// @ts-ignore
|
|
699
755
|
var projection = this.getProjection();
|
|
700
756
|
// Convert the points to pixels and the extend out by the grid size.
|
|
701
757
|
var trPix = projection.fromLatLngToDivPixel(
|
|
702
758
|
// Turn the bounds into latlng.
|
|
703
759
|
new google.maps.LatLng(bounds.getNorthEast().lat(), bounds.getNorthEast().lng()));
|
|
704
|
-
trPix
|
|
705
|
-
|
|
760
|
+
if (trPix !== null) {
|
|
761
|
+
trPix.x += this.gridSize;
|
|
762
|
+
trPix.y -= this.gridSize;
|
|
763
|
+
}
|
|
706
764
|
var blPix = projection.fromLatLngToDivPixel(
|
|
707
765
|
// Turn the bounds into latlng.
|
|
708
766
|
new google.maps.LatLng(bounds.getSouthWest().lat(), bounds.getSouthWest().lng()));
|
|
709
|
-
blPix
|
|
710
|
-
|
|
767
|
+
if (blPix !== null) {
|
|
768
|
+
blPix.x -= this.gridSize;
|
|
769
|
+
blPix.y += this.gridSize;
|
|
770
|
+
}
|
|
711
771
|
// Extend the bounds to contain the new bounds.
|
|
712
|
-
|
|
713
|
-
|
|
714
|
-
|
|
715
|
-
|
|
716
|
-
|
|
717
|
-
|
|
772
|
+
if (trPix !== null) {
|
|
773
|
+
// Convert the pixel points back to LatLng nw
|
|
774
|
+
var point1 = projection.fromDivPixelToLatLng(trPix);
|
|
775
|
+
if (point1 !== null) {
|
|
776
|
+
bounds.extend(point1);
|
|
777
|
+
}
|
|
778
|
+
}
|
|
779
|
+
if (blPix !== null) {
|
|
780
|
+
// Convert the pixel points back to LatLng sw
|
|
781
|
+
var point2 = projection.fromDivPixelToLatLng(blPix);
|
|
782
|
+
if (point2 !== null) {
|
|
783
|
+
bounds.extend(point2);
|
|
784
|
+
}
|
|
785
|
+
}
|
|
718
786
|
return bounds;
|
|
719
787
|
};
|
|
720
788
|
Clusterer.prototype.redraw = function () {
|
|
@@ -796,35 +864,29 @@ var Clusterer = /** @class */ (function () {
|
|
|
796
864
|
google.maps.event.trigger(this, 'clusteringbegin', this);
|
|
797
865
|
if (this.timerRefStatic !== null) {
|
|
798
866
|
window.clearTimeout(this.timerRefStatic);
|
|
867
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
799
868
|
// @ts-ignore
|
|
800
869
|
delete this.timerRefStatic;
|
|
801
870
|
}
|
|
802
871
|
}
|
|
872
|
+
var map = this.getMap();
|
|
873
|
+
var bounds = map !== null && 'getBounds' in map ? map.getBounds() : null;
|
|
803
874
|
// Get our current map view bounds.
|
|
804
875
|
// Create a new bounds object so we don't affect the map.
|
|
805
876
|
//
|
|
806
877
|
// See Comments 9 & 11 on Issue 3651 relating to this workaround for a Google Maps bug:
|
|
807
878
|
var mapBounds =
|
|
879
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
808
880
|
// @ts-ignore
|
|
809
|
-
|
|
810
|
-
? new google.maps.LatLngBounds(
|
|
811
|
-
// @ts-ignore
|
|
812
|
-
this.getMap()
|
|
813
|
-
.getBounds()
|
|
814
|
-
.getSouthWest(),
|
|
815
|
-
// @ts-ignore
|
|
816
|
-
this.getMap()
|
|
817
|
-
.getBounds()
|
|
818
|
-
.getNorthEast())
|
|
881
|
+
map.getZoom() > 3
|
|
882
|
+
? new google.maps.LatLngBounds(bounds === null || bounds === void 0 ? void 0 : bounds.getSouthWest(), bounds === null || bounds === void 0 ? void 0 : bounds.getNorthEast())
|
|
819
883
|
: new google.maps.LatLngBounds(new google.maps.LatLng(85.02070771743472, -178.48388434375), new google.maps.LatLng(-85.08136444384544, 178.00048865625));
|
|
820
|
-
var
|
|
884
|
+
var extendedMapBounds = this.getExtendedBounds(mapBounds);
|
|
821
885
|
var iLast = Math.min(iFirst + this.batchSize, this.markers.length);
|
|
822
886
|
for (var i = iFirst; i < iLast; i++) {
|
|
823
887
|
var marker = this.markers[i];
|
|
824
|
-
if (!marker.isAdded && this.isMarkerInBounds(marker,
|
|
825
|
-
|
|
826
|
-
this.addToClosestCluster(marker);
|
|
827
|
-
}
|
|
888
|
+
if (!marker.isAdded && this.isMarkerInBounds(marker, extendedMapBounds) && (!this.ignoreHidden || (this.ignoreHidden && marker.getVisible()))) {
|
|
889
|
+
this.addToClosestCluster(marker);
|
|
828
890
|
}
|
|
829
891
|
}
|
|
830
892
|
if (iLast < this.markers.length) {
|
|
@@ -849,17 +911,14 @@ var Clusterer = /** @class */ (function () {
|
|
|
849
911
|
};
|
|
850
912
|
Clusterer.prototype.extend = function (obj1, obj2) {
|
|
851
913
|
return function applyExtend(object) {
|
|
852
|
-
// eslint-disable-next-line guard-for-in
|
|
853
914
|
for (var property in object.prototype) {
|
|
854
|
-
|
|
855
|
-
this.prototype[property] = object.prototype[property];
|
|
915
|
+
this.prototype.set(property, object.prototype.get(property));
|
|
856
916
|
}
|
|
857
|
-
// @ts-ignore
|
|
858
917
|
return this;
|
|
859
918
|
}.apply(obj1, [obj2]);
|
|
860
919
|
};
|
|
861
920
|
return Clusterer;
|
|
862
|
-
}());
|
|
921
|
+
}(google.maps.OverlayView));
|
|
863
922
|
|
|
864
923
|
exports.Cluster = Cluster;
|
|
865
924
|
exports.ClusterIcon = ClusterIcon;
|