@syncfusion/ej2-maps 21.2.5 → 21.2.10
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 +9 -0
- 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 +107 -83
- package/dist/es6/ej2-maps.es2015.js.map +1 -1
- package/dist/es6/ej2-maps.es5.js +108 -84
- 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 +9 -9
- package/src/maps/layers/layer-panel.js +2 -0
- package/src/maps/user-interaction/zoom.js +104 -82
|
@@ -7094,6 +7094,7 @@ class LayerPanel {
|
|
|
7094
7094
|
imgElement.setAttribute('width', '256px');
|
|
7095
7095
|
imgElement.setAttribute('src', tile.src);
|
|
7096
7096
|
imgElement.setAttribute('alt', this.mapObject.getLocalizedLabel('ImageNotFound'));
|
|
7097
|
+
imgElement.style.setProperty('user-select', 'none');
|
|
7097
7098
|
child.appendChild(imgElement);
|
|
7098
7099
|
animateElement.appendChild(child);
|
|
7099
7100
|
}
|
|
@@ -7104,6 +7105,7 @@ class LayerPanel {
|
|
|
7104
7105
|
imgElement.setAttribute('width', '256px');
|
|
7105
7106
|
imgElement.setAttribute('src', tile.src);
|
|
7106
7107
|
imgElement.setAttribute('alt', this.mapObject.getLocalizedLabel('ImageNotFound'));
|
|
7108
|
+
imgElement.style.setProperty('user-select', 'none');
|
|
7107
7109
|
const child = createElement('div', { id: mapId + '_tile_' + id });
|
|
7108
7110
|
child.style.position = 'absolute';
|
|
7109
7111
|
child.style.left = tile.left + 'px';
|
|
@@ -14038,93 +14040,103 @@ class Zoom {
|
|
|
14038
14040
|
const scale = map.previousScale = map.scale;
|
|
14039
14041
|
const maxZoom = map.zoomSettings.maxZoom;
|
|
14040
14042
|
const minZoom = map.zoomSettings.minZoom;
|
|
14041
|
-
newZoomFactor = (minZoom > newZoomFactor && type === 'ZoomIn') ? minZoom + 1 : newZoomFactor;
|
|
14042
14043
|
newZoomFactor = maxZoom >= newZoomFactor ? newZoomFactor : maxZoom;
|
|
14043
|
-
|
|
14044
|
-
|
|
14045
|
-
|
|
14046
|
-
|
|
14047
|
-
|
|
14048
|
-
|
|
14049
|
-
|
|
14050
|
-
|
|
14051
|
-
|
|
14052
|
-
|
|
14053
|
-
|
|
14054
|
-
|
|
14055
|
-
|
|
14056
|
-
|
|
14057
|
-
|
|
14058
|
-
|
|
14044
|
+
let isToolbarPerform = true;
|
|
14045
|
+
switch (type.toLowerCase()) {
|
|
14046
|
+
case 'zoomin':
|
|
14047
|
+
isToolbarPerform = newZoomFactor <= this.maps.zoomSettings.maxZoom;
|
|
14048
|
+
break;
|
|
14049
|
+
case 'zoomout':
|
|
14050
|
+
isToolbarPerform = newZoomFactor >= this.maps.zoomSettings.minZoom;
|
|
14051
|
+
break;
|
|
14052
|
+
}
|
|
14053
|
+
if (isToolbarPerform) {
|
|
14054
|
+
const prevTilePoint = map.tileTranslatePoint;
|
|
14055
|
+
if ((!map.isTileMap) && ((type === 'ZoomIn' ? newZoomFactor >= minZoom && newZoomFactor <= maxZoom : newZoomFactor >= minZoom)
|
|
14056
|
+
|| map.isReset)) {
|
|
14057
|
+
const availSize = map.mapAreaRect;
|
|
14058
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
14059
|
+
const minBounds = map.baseMapRectBounds['min'];
|
|
14060
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
14061
|
+
const maxBounds = map.baseMapRectBounds['max'];
|
|
14062
|
+
let mapTotalWidth = Math.abs(minBounds['x'] - maxBounds['x']);
|
|
14063
|
+
let mapTotalHeight = Math.abs(minBounds['y'] - maxBounds['y']);
|
|
14064
|
+
let translatePointX;
|
|
14065
|
+
let translatePointY;
|
|
14066
|
+
if (newZoomFactor < 1.2 && map.projectionType !== 'Eckert5') {
|
|
14067
|
+
if (mapTotalWidth === 0 || mapTotalHeight === 0 || mapTotalWidth === mapTotalHeight) {
|
|
14068
|
+
mapTotalWidth = availSize.width / 2;
|
|
14069
|
+
mapTotalHeight = availSize.height;
|
|
14070
|
+
}
|
|
14071
|
+
newZoomFactor = parseFloat(Math.min(availSize.width / mapTotalWidth, availSize.height / mapTotalHeight).toFixed(2));
|
|
14072
|
+
newZoomFactor = newZoomFactor > 1.05 ? 1 : newZoomFactor;
|
|
14073
|
+
map.translatePoint = this.calculateInitalZoomTranslatePoint(newZoomFactor, mapTotalWidth, mapTotalHeight, availSize, minBounds, map);
|
|
14074
|
+
}
|
|
14075
|
+
else {
|
|
14076
|
+
const point = map.translatePoint;
|
|
14077
|
+
translatePointX = point.x - (((availSize.width / scale) - (availSize.width / newZoomFactor)) / (availSize.width / position.x));
|
|
14078
|
+
translatePointY = point.y - (((availSize.height / scale) - (availSize.height / newZoomFactor)) / (availSize.height / position.y));
|
|
14079
|
+
const currentHeight = Math.abs(map.baseMapRectBounds['max']['y'] - map.baseMapRectBounds['min']['y']) * newZoomFactor;
|
|
14080
|
+
translatePointX = (currentHeight < map.mapAreaRect.height) ? (availSize.x + ((-(minBounds['x'])) + ((availSize.width / 2) - (mapTotalWidth / 2)))) : translatePointX;
|
|
14081
|
+
translatePointY = (currentHeight < map.mapAreaRect.height) ? (availSize.y + ((-(minBounds['y'])) + ((availSize.height / 2) - (mapTotalHeight / 2)))) : translatePointY;
|
|
14082
|
+
map.translatePoint = new Point(translatePointX, translatePointY);
|
|
14083
|
+
}
|
|
14084
|
+
map.scale = newZoomFactor;
|
|
14085
|
+
if (this.triggerZoomEvent(prevTilePoint, prevLevel, type)) {
|
|
14086
|
+
map.translatePoint = map.previousPoint;
|
|
14087
|
+
map.scale = map.mapScaleValue = map.previousScale;
|
|
14088
|
+
}
|
|
14089
|
+
else {
|
|
14090
|
+
this.applyTransform(map);
|
|
14059
14091
|
}
|
|
14060
|
-
newZoomFactor = parseFloat(Math.min(availSize.width / mapTotalWidth, availSize.height / mapTotalHeight).toFixed(2));
|
|
14061
|
-
newZoomFactor = newZoomFactor > 1.05 ? 1 : newZoomFactor;
|
|
14062
|
-
map.translatePoint = this.calculateInitalZoomTranslatePoint(newZoomFactor, mapTotalWidth, mapTotalHeight, availSize, minBounds, map);
|
|
14063
|
-
}
|
|
14064
|
-
else {
|
|
14065
|
-
const point = map.translatePoint;
|
|
14066
|
-
translatePointX = point.x - (((availSize.width / scale) - (availSize.width / newZoomFactor)) / (availSize.width / position.x));
|
|
14067
|
-
translatePointY = point.y - (((availSize.height / scale) - (availSize.height / newZoomFactor)) / (availSize.height / position.y));
|
|
14068
|
-
const currentHeight = Math.abs(map.baseMapRectBounds['max']['y'] - map.baseMapRectBounds['min']['y']) * newZoomFactor;
|
|
14069
|
-
translatePointX = (currentHeight < map.mapAreaRect.height) ? (availSize.x + ((-(minBounds['x'])) + ((availSize.width / 2) - (mapTotalWidth / 2)))) : translatePointX;
|
|
14070
|
-
translatePointY = (currentHeight < map.mapAreaRect.height) ? (availSize.y + ((-(minBounds['y'])) + ((availSize.height / 2) - (mapTotalHeight / 2)))) : translatePointY;
|
|
14071
|
-
map.translatePoint = new Point(translatePointX, translatePointY);
|
|
14072
|
-
}
|
|
14073
|
-
map.scale = newZoomFactor;
|
|
14074
|
-
if (this.triggerZoomEvent(prevTilePoint, prevLevel, type)) {
|
|
14075
|
-
map.translatePoint = map.previousPoint;
|
|
14076
|
-
map.scale = map.mapScaleValue = map.previousScale;
|
|
14077
14092
|
}
|
|
14078
|
-
else {
|
|
14079
|
-
this.
|
|
14080
|
-
|
|
14081
|
-
|
|
14082
|
-
else if ((map.isTileMap) && (newZoomFactor >= minZoom && newZoomFactor <= maxZoom)) {
|
|
14083
|
-
this.getTileTranslatePosition(prevLevel, newZoomFactor, position, type);
|
|
14084
|
-
map.tileZoomLevel = newZoomFactor;
|
|
14085
|
-
map.zoomSettings.zoomFactor = newZoomFactor;
|
|
14086
|
-
map.scale = Math.pow(2, newZoomFactor - 1);
|
|
14087
|
-
if (type === 'ZoomOut' && map.zoomSettings.resetToInitial && map.applyZoomReset && newZoomFactor <= map.initialZoomLevel) {
|
|
14088
|
-
map.initialCheck = true;
|
|
14089
|
-
map.zoomPersistence = false;
|
|
14090
|
-
map.tileTranslatePoint.x = map.initialTileTranslate.x;
|
|
14091
|
-
map.tileTranslatePoint.y = map.initialTileTranslate.y;
|
|
14092
|
-
newZoomFactor = map.tileZoomLevel = map.mapScaleValue = map.initialZoomLevel;
|
|
14093
|
+
else if ((map.isTileMap) && (newZoomFactor >= minZoom && newZoomFactor <= maxZoom)) {
|
|
14094
|
+
this.getTileTranslatePosition(prevLevel, newZoomFactor, position, type);
|
|
14095
|
+
map.tileZoomLevel = newZoomFactor;
|
|
14096
|
+
map.zoomSettings.zoomFactor = newZoomFactor;
|
|
14093
14097
|
map.scale = Math.pow(2, newZoomFactor - 1);
|
|
14094
|
-
|
|
14095
|
-
|
|
14096
|
-
|
|
14097
|
-
|
|
14098
|
-
|
|
14099
|
-
|
|
14100
|
-
|
|
14101
|
-
|
|
14102
|
-
|
|
14103
|
-
|
|
14104
|
-
if (
|
|
14105
|
-
|
|
14106
|
-
|
|
14107
|
-
|
|
14108
|
-
|
|
14109
|
-
}
|
|
14110
|
-
|
|
14111
|
-
|
|
14112
|
-
|
|
14113
|
-
|
|
14114
|
-
setTimeout(() => {
|
|
14115
|
-
// if (type === 'ZoomOut') {
|
|
14116
|
-
// element1.removeChild(element1.children[element1.childElementCount - 1]);
|
|
14117
|
-
// if (element1.childElementCount) {
|
|
14118
|
-
// element1.removeChild(element1.children[element1.childElementCount - 1]);
|
|
14119
|
-
// } else {
|
|
14120
|
-
// element1 = element1;
|
|
14121
|
-
// }
|
|
14122
|
-
// }
|
|
14123
|
-
this.applyTransform(this.maps);
|
|
14098
|
+
if (type === 'ZoomOut' && map.zoomSettings.resetToInitial && map.applyZoomReset && newZoomFactor <= map.initialZoomLevel) {
|
|
14099
|
+
map.initialCheck = true;
|
|
14100
|
+
map.zoomPersistence = false;
|
|
14101
|
+
map.tileTranslatePoint.x = map.initialTileTranslate.x;
|
|
14102
|
+
map.tileTranslatePoint.y = map.initialTileTranslate.y;
|
|
14103
|
+
newZoomFactor = map.tileZoomLevel = map.mapScaleValue = map.initialZoomLevel;
|
|
14104
|
+
map.scale = Math.pow(2, newZoomFactor - 1);
|
|
14105
|
+
}
|
|
14106
|
+
map.translatePoint.y = (map.tileTranslatePoint.y - (0.01 * map.mapScaleValue)) / map.scale;
|
|
14107
|
+
map.translatePoint.x = (map.tileTranslatePoint.x - (0.01 * map.mapScaleValue)) / map.scale;
|
|
14108
|
+
if (this.triggerZoomEvent(prevTilePoint, prevLevel, type)) {
|
|
14109
|
+
map.translatePoint = map.tileTranslatePoint = new Point(0, 0);
|
|
14110
|
+
map.scale = map.previousScale;
|
|
14111
|
+
map.tileZoomLevel = prevLevel;
|
|
14112
|
+
map.zoomSettings.zoomFactor = map.previousScale;
|
|
14113
|
+
}
|
|
14114
|
+
else {
|
|
14115
|
+
if (document.querySelector('.GroupElement')) {
|
|
14116
|
+
document.querySelector('.GroupElement').style.display = 'none';
|
|
14117
|
+
}
|
|
14124
14118
|
if (document.getElementById(this.maps.element.id + '_LayerIndex_1')) {
|
|
14125
|
-
document.getElementById(this.maps.element.id + '_LayerIndex_1').style.display = '
|
|
14119
|
+
document.getElementById(this.maps.element.id + '_LayerIndex_1').style.display = 'none';
|
|
14126
14120
|
}
|
|
14127
|
-
|
|
14121
|
+
this.markerLineAnimation(map);
|
|
14122
|
+
map.mapLayerPanel.generateTiles(newZoomFactor, map.tileTranslatePoint, type + 'wheel', null, position);
|
|
14123
|
+
const element1 = document.getElementById(this.maps.element.id + '_tiles');
|
|
14124
|
+
const animationDuration = this.maps.layersCollection[0].animationDuration;
|
|
14125
|
+
setTimeout(() => {
|
|
14126
|
+
// if (type === 'ZoomOut') {
|
|
14127
|
+
// element1.removeChild(element1.children[element1.childElementCount - 1]);
|
|
14128
|
+
// if (element1.childElementCount) {
|
|
14129
|
+
// element1.removeChild(element1.children[element1.childElementCount - 1]);
|
|
14130
|
+
// } else {
|
|
14131
|
+
// element1 = element1;
|
|
14132
|
+
// }
|
|
14133
|
+
// }
|
|
14134
|
+
this.applyTransform(this.maps);
|
|
14135
|
+
if (document.getElementById(this.maps.element.id + '_LayerIndex_1')) {
|
|
14136
|
+
document.getElementById(this.maps.element.id + '_LayerIndex_1').style.display = 'block';
|
|
14137
|
+
}
|
|
14138
|
+
}, animationDuration);
|
|
14139
|
+
}
|
|
14128
14140
|
}
|
|
14129
14141
|
}
|
|
14130
14142
|
this.maps.zoomNotApplied = false;
|
|
@@ -15285,11 +15297,23 @@ class Zoom {
|
|
|
15285
15297
|
e.stopImmediatePropagation();
|
|
15286
15298
|
const isTouch = e.pointerType === 'touch' || e.pointerType === '2' || (e.type.indexOf('touch') > -1);
|
|
15287
15299
|
const toolbar = target.id.split('_Zooming_ToolBar_')[1].split('_')[0];
|
|
15288
|
-
|
|
15300
|
+
let isToolbarPerform = true;
|
|
15301
|
+
switch (toolbar.toLowerCase()) {
|
|
15302
|
+
case 'zoomin':
|
|
15303
|
+
isToolbarPerform = (this.maps.isTileMap ? this.maps.tileZoomLevel : this.maps.scale) + 1 <= this.maps.zoomSettings.maxZoom;
|
|
15304
|
+
break;
|
|
15305
|
+
case 'zoomout':
|
|
15306
|
+
isToolbarPerform = (this.maps.isTileMap ? this.maps.tileZoomLevel : this.maps.scale) - 1 >= this.maps.zoomSettings.minZoom;
|
|
15307
|
+
break;
|
|
15308
|
+
case 'reset':
|
|
15309
|
+
isToolbarPerform = Math.round(this.maps.isTileMap ? this.maps.tileZoomLevel : this.maps.scale) != this.maps.zoomSettings.minZoom;
|
|
15310
|
+
break;
|
|
15311
|
+
}
|
|
15312
|
+
if (isTouch && isToolbarPerform) {
|
|
15289
15313
|
this.handled = true;
|
|
15290
15314
|
this.performZoomingByToolBar(toolbar);
|
|
15291
15315
|
}
|
|
15292
|
-
else if ((e.type === 'mousedown' || e.type === 'pointerdown') && !this.handled) {
|
|
15316
|
+
else if ((e.type === 'mousedown' || e.type === 'pointerdown') && !this.handled && isToolbarPerform) {
|
|
15293
15317
|
this.handled = false;
|
|
15294
15318
|
this.performZoomingByToolBar(toolbar);
|
|
15295
15319
|
}
|