@syncfusion/ej2-maps 24.1.41 → 24.2.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/CHANGELOG.md +10 -0
- package/README.md +1 -1
- package/dist/ej2-maps.min.js +2 -2
- package/dist/ej2-maps.umd.min.js +2 -2
- package/dist/ej2-maps.umd.min.js.map +1 -1
- package/dist/es6/ej2-maps.es2015.js +110 -103
- package/dist/es6/ej2-maps.es2015.js.map +1 -1
- package/dist/es6/ej2-maps.es5.js +160 -140
- package/dist/es6/ej2-maps.es5.js.map +1 -1
- package/dist/global/ej2-maps.min.js +2 -2
- package/dist/global/ej2-maps.min.js.map +1 -1
- package/dist/global/index.d.ts +1 -1
- package/package.json +12 -12
- package/src/maps/layers/marker.js +30 -16
- package/src/maps/model/base-model.d.ts +9 -0
- package/src/maps/model/base.d.ts +8 -0
- package/src/maps/model/base.js +3 -0
- package/src/maps/user-interaction/zoom.js +57 -47
- package/src/maps/utils/helper.d.ts +1 -1
- package/src/maps/utils/helper.js +70 -77
package/src/maps/utils/helper.js
CHANGED
|
@@ -995,46 +995,50 @@ export function clusterTemplate(currentLayer, markerTemplate, maps, layerIndex,
|
|
|
995
995
|
width: clusters.width, imageUrl: clusters.imageUrl, shape: clusters.shape,
|
|
996
996
|
data: data, maps: maps, cluster: clusters, border: clusters.border
|
|
997
997
|
};
|
|
998
|
+
var containerRect = maps.element.getBoundingClientRect();
|
|
999
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
1000
|
+
var translatePoint = (maps.isTileMap) ? new Object() : getTranslate(maps, currentLayer, false);
|
|
1001
|
+
var factor;
|
|
1002
|
+
if (!maps.isTileMap) {
|
|
1003
|
+
factor = maps.mapLayerPanel.calculateFactor(currentLayer);
|
|
1004
|
+
}
|
|
1005
|
+
var isClusteringCompleted = false;
|
|
998
1006
|
maps.trigger('markerClusterRendering', eventArg, function (clusterargs) {
|
|
999
|
-
|
|
1007
|
+
Array.prototype.forEach.call(markerTemplate.childNodes, function (markerElement, o) {
|
|
1000
1008
|
indexCollection = [];
|
|
1001
|
-
if (
|
|
1002
|
-
tempElement =
|
|
1009
|
+
if (markerElement['style']['visibility'] !== 'hidden') {
|
|
1010
|
+
tempElement = markerElement;
|
|
1003
1011
|
bounds1 = tempElement.getBoundingClientRect();
|
|
1004
1012
|
indexCollection.push(o);
|
|
1005
1013
|
if (!isNullOrUndefined(bounds1)) {
|
|
1006
|
-
|
|
1007
|
-
if (
|
|
1008
|
-
tempElement =
|
|
1014
|
+
Array.prototype.forEach.call(markerTemplate.childNodes, function (otherMarkerElement, p) {
|
|
1015
|
+
if (p >= o + 1 && otherMarkerElement['style']['visibility'] !== 'hidden') {
|
|
1016
|
+
tempElement = otherMarkerElement;
|
|
1009
1017
|
bounds2 = tempElement.getBoundingClientRect();
|
|
1010
1018
|
if (!isNullOrUndefined(bounds2)) {
|
|
1011
1019
|
if (!(bounds1.left > bounds2.right || bounds1.right < bounds2.left
|
|
1012
1020
|
|| bounds1.top > bounds2.bottom || bounds1.bottom < bounds2.top)) {
|
|
1013
1021
|
colloideBounds.push(bounds2);
|
|
1014
|
-
|
|
1022
|
+
otherMarkerElement['style']['visibility'] = 'hidden';
|
|
1015
1023
|
indexCollection.push(p);
|
|
1016
1024
|
}
|
|
1017
1025
|
}
|
|
1018
1026
|
}
|
|
1019
|
-
}
|
|
1027
|
+
});
|
|
1020
1028
|
tempX = bounds1.left + bounds1.width / 2;
|
|
1021
1029
|
tempY = bounds1.top + bounds1.height;
|
|
1022
1030
|
if (colloideBounds.length > 0) {
|
|
1023
1031
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
1024
1032
|
indexCollection = indexCollection.filter(function (item, index, value) { return value.indexOf(item) === index; });
|
|
1025
|
-
|
|
1026
|
-
|
|
1027
|
-
|
|
1028
|
-
|
|
1029
|
-
|
|
1030
|
-
var translate = (maps.isTileMap) ? new Object() : getTranslate(maps, currentLayer, false);
|
|
1031
|
-
var dataIndex = parseInt(markerTemplate.childNodes[o]['id'].split('_dataIndex_')[1].split('_')[0], 10);
|
|
1032
|
-
var markerIndex = parseInt(markerTemplate.childNodes[o]['id'].split('_MarkerIndex_')[1].split('_')[0], 10);
|
|
1033
|
+
tempX = tempX - containerRect['left'];
|
|
1034
|
+
tempY = (tempY - ((maps.availableSize.height <= containerRect['height']) ?
|
|
1035
|
+
containerRect['top'] : (containerRect['bottom'] - containerRect['top'])));
|
|
1036
|
+
var dataIndex = parseInt(markerElement['id'].split('_dataIndex_')[1].split('_')[0], 10);
|
|
1037
|
+
var markerIndex = parseInt(markerElement['id'].split('_MarkerIndex_')[1].split('_')[0], 10);
|
|
1033
1038
|
var markerSetting = currentLayer.markerSettings[markerIndex];
|
|
1034
1039
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
1035
1040
|
var markerData = markerSetting.dataSource[dataIndex];
|
|
1036
|
-
var
|
|
1037
|
-
var location_1 = void 0;
|
|
1041
|
+
var location_1;
|
|
1038
1042
|
var longitude = (!isNullOrUndefined(markerSetting.longitudeValuePath)) ?
|
|
1039
1043
|
Number(getValueFromObject(markerData, markerSetting.longitudeValuePath)) :
|
|
1040
1044
|
!isNullOrUndefined(markerData['longitude']) ? parseFloat(markerData['longitude']) :
|
|
@@ -1044,45 +1048,30 @@ export function clusterTemplate(currentLayer, markerTemplate, maps, layerIndex,
|
|
|
1044
1048
|
!isNullOrUndefined(markerData['latitude']) ? parseFloat(markerData['latitude']) :
|
|
1045
1049
|
!isNullOrUndefined(markerData['Latitude']) ? parseFloat(markerData['Latitude']) : 0;
|
|
1046
1050
|
if (!maps.isTileMap) {
|
|
1047
|
-
factor = maps.mapLayerPanel.calculateFactor(currentLayer);
|
|
1048
1051
|
location_1 = convertGeoToPoint(latitude, longitude, factor, currentLayer, maps);
|
|
1049
1052
|
}
|
|
1050
1053
|
else if (maps.isTileMap && !maps.zoomSettings.enable) {
|
|
1051
1054
|
location_1 = convertTileLatLongToPoint(new Point(longitude, latitude), maps.tileZoomLevel, maps.tileTranslatePoint, true);
|
|
1052
1055
|
}
|
|
1053
|
-
|
|
1054
|
-
var clusters_1 = currentLayer.markerClusterSettings;
|
|
1056
|
+
markerElement['style']['visibility'] = 'hidden';
|
|
1055
1057
|
if (eventArg.cancel) {
|
|
1056
1058
|
shapeCustom = {
|
|
1057
|
-
size: new Size(
|
|
1058
|
-
fill:
|
|
1059
|
-
borderWidth:
|
|
1060
|
-
dashArray:
|
|
1059
|
+
size: new Size(clusters.width, clusters.height),
|
|
1060
|
+
fill: clusters.fill, borderColor: clusters.border.color,
|
|
1061
|
+
borderWidth: clusters.border.width, opacity: clusters.opacity,
|
|
1062
|
+
dashArray: clusters.dashArray, imageUrl: clusters.imageUrl, shape: clusters.shape
|
|
1061
1063
|
};
|
|
1062
|
-
shapeCustom['
|
|
1063
|
-
shapeCustom['size']['width'] = clusters_1.width;
|
|
1064
|
-
shapeCustom['size']['height'] = clusters_1.height;
|
|
1065
|
-
shapeCustom['imageUrl'] = clusters_1.imageUrl;
|
|
1066
|
-
shapeCustom['shape'] = clusters_1.shape;
|
|
1067
|
-
shapeCustom['borderColor'] = clusters_1.border.color;
|
|
1068
|
-
shapeCustom['borderWidth'] = clusters_1.border.width;
|
|
1069
|
-
shapeCustom['borderOpacity'] = isNullOrUndefined(clusters_1.border.opacity) ? clusters_1.opacity : clusters_1.border.opacity;
|
|
1064
|
+
shapeCustom['borderOpacity'] = isNullOrUndefined(clusters.border.opacity) ? clusters.opacity : clusters.border.opacity;
|
|
1070
1065
|
}
|
|
1071
1066
|
else {
|
|
1072
1067
|
shapeCustom = {
|
|
1073
|
-
size: new Size(
|
|
1074
|
-
fill:
|
|
1075
|
-
borderWidth:
|
|
1076
|
-
dashArray:
|
|
1068
|
+
size: new Size(eventArg.width, eventArg.height),
|
|
1069
|
+
fill: eventArg.fill, borderColor: eventArg.border.color,
|
|
1070
|
+
borderWidth: eventArg.border.width, opacity: clusters.opacity,
|
|
1071
|
+
dashArray: clusters.dashArray, imageUrl: eventArg.imageUrl,
|
|
1072
|
+
shape: eventArg.shape
|
|
1077
1073
|
};
|
|
1078
|
-
shapeCustom['
|
|
1079
|
-
shapeCustom['size']['width'] = eventArg.width;
|
|
1080
|
-
shapeCustom['size']['height'] = eventArg.height;
|
|
1081
|
-
shapeCustom['imageUrl'] = eventArg.imageUrl;
|
|
1082
|
-
shapeCustom['shape'] = eventArg.shape;
|
|
1083
|
-
shapeCustom['borderColor'] = eventArg.border.color;
|
|
1084
|
-
shapeCustom['borderWidth'] = eventArg.border.width;
|
|
1085
|
-
shapeCustom['borderOpacity'] = isNullOrUndefined(eventArg.border.opacity) ? clusters_1.opacity : eventArg.border.opacity;
|
|
1074
|
+
shapeCustom['borderOpacity'] = isNullOrUndefined(eventArg.border.opacity) ? clusters.opacity : eventArg.border.opacity;
|
|
1086
1075
|
}
|
|
1087
1076
|
tempX = (maps.isTileMap) ? tempX : (markerTemplate.id.indexOf('_Markers_Group') > -1) ? tempX : tempX + postionY - (eventArg.width / 2);
|
|
1088
1077
|
tempY = (maps.isTileMap) ? tempY : (markerTemplate.id.indexOf('_Markers_Group') > -1) ? tempY : tempY - (eventArg.height / 2);
|
|
@@ -1110,48 +1099,51 @@ export function clusterTemplate(currentLayer, markerTemplate, maps, layerIndex,
|
|
|
1110
1099
|
}
|
|
1111
1100
|
colloideBounds = [];
|
|
1112
1101
|
}
|
|
1113
|
-
|
|
1102
|
+
isClusteringCompleted = true;
|
|
1103
|
+
});
|
|
1114
1104
|
layerElement.appendChild(clusterGroup);
|
|
1115
1105
|
maps.svgObject.appendChild(layerElement);
|
|
1116
1106
|
maps.element.appendChild(maps.svgObject);
|
|
1117
|
-
|
|
1118
|
-
|
|
1119
|
-
|
|
1120
|
-
|
|
1121
|
-
|
|
1122
|
-
|
|
1123
|
-
|
|
1124
|
-
|
|
1125
|
-
|
|
1126
|
-
|
|
1127
|
-
if (!(
|
|
1128
|
-
|
|
1129
|
-
|
|
1130
|
-
|
|
1131
|
-
|
|
1132
|
-
|
|
1133
|
-
|
|
1107
|
+
if (clusters.allowDeepClustering) {
|
|
1108
|
+
Array.prototype.forEach.call(clusterGroup.childNodes, function (clusterElement, o) {
|
|
1109
|
+
if (clusterElement['style']['visibility'] !== 'hidden') {
|
|
1110
|
+
tempElement = clusterElement;
|
|
1111
|
+
bounds1 = tempElement.getBoundingClientRect();
|
|
1112
|
+
if (!isNullOrUndefined(bounds1) && !(tempElement.id.indexOf('_datalabel_') > -1)) {
|
|
1113
|
+
for (var p = o + 1; p < clusterGroup.childElementCount; p++) {
|
|
1114
|
+
if (clusterGroup.childNodes[p]['style']['visibility'] !== 'hidden') {
|
|
1115
|
+
tempElement1 = clusterGroup.childNodes[p];
|
|
1116
|
+
bounds2 = tempElement1.getBoundingClientRect();
|
|
1117
|
+
if (!isNullOrUndefined(bounds2) && !(tempElement1.id.indexOf('_datalabel_') > -1)) {
|
|
1118
|
+
if (!(bounds1.left > bounds2.right || bounds1.right < bounds2.left
|
|
1119
|
+
|| bounds1.top > bounds2.bottom || bounds1.bottom < bounds2.top)) {
|
|
1120
|
+
clusterColloideBounds.push(tempElement1);
|
|
1121
|
+
clusterColloideBounds.push(clusterGroup.childNodes[p - 1]);
|
|
1122
|
+
clusterGroup.childNodes[p]['style']['visibility'] = 'hidden';
|
|
1123
|
+
clusterGroup.childNodes[p - 1]['style']['visibility'] = 'hidden';
|
|
1124
|
+
indexCollection.push(p);
|
|
1125
|
+
}
|
|
1134
1126
|
}
|
|
1135
1127
|
}
|
|
1136
1128
|
}
|
|
1137
|
-
|
|
1138
|
-
|
|
1139
|
-
|
|
1140
|
-
|
|
1141
|
-
|
|
1142
|
-
|
|
1143
|
-
|
|
1144
|
-
|
|
1145
|
-
|
|
1146
|
-
|
|
1129
|
+
if (clusterColloideBounds.length > 0) {
|
|
1130
|
+
tempElement = clusterElement;
|
|
1131
|
+
for (var i = 0; i < clusterColloideBounds.length; i++) {
|
|
1132
|
+
if (tempElement.tagName === 'g') {
|
|
1133
|
+
tempElement.childNodes[0].textContent = tempElement.childNodes[0].textContent + ',' +
|
|
1134
|
+
clusterColloideBounds[i].textContent;
|
|
1135
|
+
}
|
|
1136
|
+
else {
|
|
1137
|
+
tempElement.textContent = tempElement.textContent + ',' + clusterColloideBounds[i].textContent;
|
|
1138
|
+
}
|
|
1139
|
+
clusterGroup.childNodes[o - 1].textContent = ((+(clusterGroup.childNodes[o - 1].textContent)) + (+(clusterColloideBounds[i + 1].textContent))).toString();
|
|
1140
|
+
i++;
|
|
1147
1141
|
}
|
|
1148
|
-
clusterGroup.childNodes[o - 1].textContent = ((+(clusterGroup.childNodes[o - 1].textContent)) + (+(clusterColloideBounds[i + 1].textContent))).toString();
|
|
1149
|
-
i++;
|
|
1150
1142
|
}
|
|
1143
|
+
clusterColloideBounds = [];
|
|
1151
1144
|
}
|
|
1152
|
-
clusterColloideBounds = [];
|
|
1153
1145
|
}
|
|
1154
|
-
}
|
|
1146
|
+
});
|
|
1155
1147
|
}
|
|
1156
1148
|
while (0 < clusterGroup.childNodes.length) {
|
|
1157
1149
|
markerCollection.insertBefore(clusterGroup.childNodes[0], markerCollection.firstChild);
|
|
@@ -1193,6 +1185,7 @@ export function clusterTemplate(currentLayer, markerTemplate, maps, layerIndex,
|
|
|
1193
1185
|
}
|
|
1194
1186
|
}
|
|
1195
1187
|
});
|
|
1188
|
+
return isClusteringCompleted;
|
|
1196
1189
|
}
|
|
1197
1190
|
/**
|
|
1198
1191
|
*
|