@syncfusion/ej2-maps
Version:
The Maps component is used to visualize the geographical data and represent the statistical data of a particular geographical area on earth with user interactivity, and provides various customizing options
774 lines (773 loc) • 152 kB
JavaScript
import { Point, getElementByID, PathOption, Rect, convertGeoToPoint, CircleOption, convertTileLatLongToPoint, measureTextElement } from '../utils/helper';
import { RectOption, createTooltip, calculateScale, getTouchCenter, getTouches, targetTouches } from '../utils/helper';
import { MapLocation, zoomAnimate, smoothTranslate, measureText, textTrim, clusterTemplate, marker, getProcessedMarginValue } from '../utils/helper';
import { markerTemplate, removeElement, getElement, clusterSeparate, markerColorChoose, calculatePolygonPath } from '../utils/helper';
import { markerShapeChoose } from '../utils/helper';
import { isNullOrUndefined, EventHandler, Browser, remove, createElement, animationMode } from '@syncfusion/ej2-base';
import { changeBorderWidth, markerRendering } from '../index';
import { pan } from '../model/constants';
import { getValueFromObject } from '../utils/helper';
/**
* Zoom module used to process the zoom for maps
*/
var Zoom = /** @class */ (function () {
function Zoom(maps) {
/** @private */
this.isPanModeEnabled = false;
/** @private */
this.mouseEnter = false;
/** @private */
this.isTouch = false;
/** @private */
this.rectZoomingStart = false;
/** @private */
this.browserName = Browser.info.name;
/** @private */
this.isPointer = Browser.isPointer;
this.handled = false;
/** @private */
this.isPanningInProgress = false;
this.isPan = false;
this.isZoomFinal = false;
this.isZoomSelection = false;
this.pinchFactor = 1;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
this.startTouches = [];
/** @private */
this.isCancellation = false;
this.pinchTileZoomScale = 1;
this.tileZoomLevel = 1;
this.pinchZoomScale = 1;
this.isPinchZooming = false;
/** @private */
this.mouseDownLatLong = { x: 0, y: 0 };
/** @private */
this.mouseMoveLatLong = { x: 0, y: 0 };
/** @private */
this.isSingleClick = false;
this.maps = maps;
this.wheelEvent = this.browserName === 'mozilla' ? (this.isPointer ? 'mousewheel' : 'DOMMouseScroll') : 'mousewheel';
this.cancelEvent = this.isPointer ? 'pointerleave' : 'mouseleave';
this.selectionColor = this.maps.zoomSettings.toolbarSettings.buttonSettings.selectionColor;
this.fillColor = this.maps.zoomSettings.toolbarSettings.buttonSettings.color;
this.addEventListener();
}
/**
* To perform zooming for maps.
*
* @param {Point} position - Specifies the position.
* @param {number} newZoomFactor - Specifies the zoom factor.
* @param {string} type - Specifies the type.
* @param {boolean} isMouseWheel - Indicates whether the zoom operation was triggered by the mouse wheel.
* @returns {void}
* @private
*/
Zoom.prototype.performZooming = function (position, newZoomFactor, type, isMouseWheel) {
var _this = this;
if (isMouseWheel === void 0) { isMouseWheel = false; }
var map = this.maps;
map.previousProjection = newZoomFactor <= 1.5 ? undefined : map.projectionType;
map.defaultState = false;
map.initialCheck = false;
map.markerZoomedState = map.isMarkerZoomCompleted = false;
map.zoomPersistence = map.enablePersistence;
var prevLevel = map.tileZoomLevel;
var maxZoom = map.zoomSettings.maxZoom;
var minZoom = map.zoomSettings.minZoom;
newZoomFactor = maxZoom >= newZoomFactor ? newZoomFactor : maxZoom;
var isToolbarPerform = true;
switch (type.toLowerCase()) {
case 'zoomin':
isToolbarPerform = newZoomFactor <= this.maps.zoomSettings.maxZoom;
break;
case 'zoomout':
isToolbarPerform = newZoomFactor >= this.maps.zoomSettings.minZoom;
break;
}
if (isToolbarPerform) {
var scale = map.previousScale = map.scale;
var prevTilePoint = map.tileTranslatePoint;
if ((!map.isTileMap) && ((type === 'ZoomIn' ? newZoomFactor >= minZoom && newZoomFactor <= maxZoom : newZoomFactor >= minZoom)
|| map.isReset)) {
var availSize = map.mapAreaRect;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
var minBounds = map.baseMapRectBounds['min'];
// eslint-disable-next-line @typescript-eslint/no-explicit-any
var maxBounds = map.baseMapRectBounds['max'];
var mapTotalWidth = Math.abs(minBounds['x'] - maxBounds['x']);
var mapTotalHeight = Math.abs(minBounds['y'] - maxBounds['y']);
var translatePointX = void 0;
var translatePointY = void 0;
if (newZoomFactor < 1.2 && map.projectionType !== 'Eckert5') {
if (mapTotalWidth === 0 || mapTotalHeight === 0 || mapTotalWidth === mapTotalHeight) {
mapTotalWidth = availSize.width / 2;
mapTotalHeight = availSize.height;
}
newZoomFactor = parseFloat(Math.min(availSize.width / mapTotalWidth, availSize.height / mapTotalHeight).toFixed(2));
newZoomFactor = newZoomFactor > 1.05 ? 1 : newZoomFactor;
map.translatePoint = this.calculateInitalZoomTranslatePoint(newZoomFactor, mapTotalWidth, mapTotalHeight, availSize, minBounds, map);
}
else {
var point = map.translatePoint;
translatePointX = point.x - (((availSize.width / scale) - (availSize.width / newZoomFactor)) / (availSize.width / position.x));
translatePointY = point.y - (((availSize.height / scale) - (availSize.height / newZoomFactor)) / (availSize.height / position.y));
var currentHeight = Math.abs(map.baseMapRectBounds['max']['y'] - map.baseMapRectBounds['min']['y']) * newZoomFactor;
translatePointX = (currentHeight < map.mapAreaRect.height) ? (availSize.x + ((-(minBounds['x'])) + ((availSize.width / 2) - (mapTotalWidth / 2)))) : translatePointX;
translatePointY = (currentHeight < map.mapAreaRect.height) ? (availSize.y + ((-(minBounds['y'])) + ((availSize.height / 2) - (mapTotalHeight / 2)))) : translatePointY;
map.translatePoint = new Point(translatePointX, translatePointY);
}
map.scale = newZoomFactor;
map.zoomTranslatePoint = map.translatePoint;
if (this.triggerZoomEvent(prevTilePoint, prevLevel, type)) {
map.translatePoint = map.previousPoint;
map.scale = map.mapScaleValue = map.previousScale;
}
else {
this.applyTransform(map, isMouseWheel);
}
}
else if ((map.isTileMap) && (newZoomFactor >= minZoom && newZoomFactor <= maxZoom)) {
this.getTileTranslatePosition(prevLevel, newZoomFactor, position, type);
map.tileZoomLevel = newZoomFactor;
map.zoomSettings.zoomFactor = newZoomFactor;
map.scale = Math.pow(2, newZoomFactor - 1);
if (type === 'ZoomOut' && map.zoomSettings.resetToInitial && map.applyZoomReset && newZoomFactor <= map.initialZoomLevel) {
map.initialCheck = true;
map.zoomPersistence = false;
map.tileTranslatePoint.x = map.initialTileTranslate.x;
map.tileTranslatePoint.y = map.initialTileTranslate.y;
newZoomFactor = map.tileZoomLevel = map.mapScaleValue = map.initialZoomLevel;
map.scale = Math.pow(2, newZoomFactor - 1);
}
map.mapScaleValue = isNaN(map.mapScaleValue) ? 1 : map.mapScaleValue;
map.translatePoint.y = (map.tileTranslatePoint.y - (0.01 * map.mapScaleValue)) / map.scale;
map.translatePoint.x = (map.tileTranslatePoint.x - (0.01 * map.mapScaleValue)) / map.scale;
if (this.triggerZoomEvent(prevTilePoint, prevLevel, type)) {
map.translatePoint = map.tileTranslatePoint = new Point(0, 0);
map.scale = map.previousScale;
map.tileZoomLevel = prevLevel;
map.zoomSettings.zoomFactor = map.previousScale;
}
else {
if (document.querySelector('.GroupElement')) {
document.querySelector('.GroupElement').style.display = 'none';
}
if (document.getElementById(this.maps.element.id + '_LayerIndex_1')) {
document.getElementById(this.maps.element.id + '_LayerIndex_1').style.display = 'none';
}
this.markerLineAnimation(map);
map.mapLayerPanel.generateTiles(newZoomFactor, map.tileTranslatePoint, type + 'wheel', null, position);
var animationDuration = this.maps.layersCollection[0].animationDuration === 0 && animationMode === 'Enable' ? 1000 : this.maps.layersCollection[0].animationDuration;
setTimeout(function () {
// if (type === 'ZoomOut') {
// element1.removeChild(element1.children[element1.childElementCount - 1]);
// if (element1.childElementCount) {
// element1.removeChild(element1.children[element1.childElementCount - 1]);
// } else {
// element1 = element1;
// }
// }
_this.applyTransform(_this.maps, isMouseWheel);
if (document.getElementById(_this.maps.element.id + '_LayerIndex_1')) {
document.getElementById(_this.maps.element.id + '_LayerIndex_1').style.display = 'block';
}
}, animationDuration);
}
}
this.triggerZoomComplete(map, prevLevel, type);
}
this.maps.zoomNotApplied = false;
if (this.maps.isDevice) {
this.removeToolbarOpacity(map.isTileMap ? Math.round(map.tileZoomLevel) : map.scale, map.element.id + '_Zooming_');
}
};
// eslint-disable-next-line @typescript-eslint/no-explicit-any
Zoom.prototype.calculateInitalZoomTranslatePoint = function (newZoomFactor, mapTotalWidth, mapTotalHeight, availSize, minBounds, map) {
mapTotalWidth *= newZoomFactor;
mapTotalHeight *= newZoomFactor;
var widthDiff = minBounds['x'] !== 0 && map.translateType === 'layers' ? map.availableSize.width - availSize.width : 0;
var translatePointX = availSize.x + ((-(minBounds['x'])) + ((availSize.width / 2) - (mapTotalWidth / 2))) - widthDiff;
var translatePointY = availSize.y + ((-(minBounds['y'])) + ((availSize.height / 2) - (mapTotalHeight / 2)));
return new Point(translatePointX, translatePointY);
};
Zoom.prototype.triggerZoomEvent = function (prevTilePoint, prevLevel, type) {
var map = this.maps;
var zoomArgs;
if (map.isTileMap) {
map.mapScaleValue = isNullOrUndefined(map.mapScaleValue) ? 1 : map.mapScaleValue;
map.translatePoint.y = (map.tileTranslatePoint.y - (0.01 * map.mapScaleValue)) / map.scale;
map.translatePoint.x = (map.tileTranslatePoint.x - (0.01 * map.mapScaleValue)) / map.scale;
}
var minMaxLatitudeLongitude = this.maps.getMinMaxLatitudeLongitude();
if (!map.isTileMap) {
zoomArgs = {
cancel: false, name: 'zoom', type: type, maps: map,
tileTranslatePoint: {}, translatePoint: { previous: map.previousPoint, current: map.translatePoint },
tileZoomLevel: {}, scale: { previous: map.previousScale, current: map.scale },
minLatitude: minMaxLatitudeLongitude.minLatitude, maxLatitude: minMaxLatitudeLongitude.maxLatitude,
minLongitude: minMaxLatitudeLongitude.minLongitude, maxLongitude: minMaxLatitudeLongitude.maxLongitude
};
}
else {
zoomArgs = {
cancel: false, name: 'zoom', type: type, maps: map,
tileTranslatePoint: { previous: prevTilePoint, current: map.tileTranslatePoint }, translatePoint: { previous: map.previousPoint, current: map.translatePoint },
tileZoomLevel: { previous: prevLevel, current: map.tileZoomLevel }, scale: { previous: map.previousScale, current: map.scale },
minLatitude: minMaxLatitudeLongitude.minLatitude, maxLatitude: minMaxLatitudeLongitude.maxLatitude,
minLongitude: minMaxLatitudeLongitude.minLongitude, maxLongitude: minMaxLatitudeLongitude.maxLongitude
};
}
map.trigger('zoom', zoomArgs);
return zoomArgs.cancel;
};
Zoom.prototype.getTileTranslatePosition = function (prevLevel, currentLevel, position, type) {
var map = this.maps;
var tileDefaultSize = 256;
var padding = type === 'ZoomOut' ? 10 : (type === 'Reset' && currentLevel > 1) ? 0 : 10;
var bounds = map.availableSize;
var prevSize = Math.pow(2, prevLevel) * 256;
var totalSize = Math.pow(2, currentLevel) * 256;
var x = ((position.x - map.tileTranslatePoint.x) / prevSize) * 100;
var y = ((position.y - map.tileTranslatePoint.y) / prevSize) * 100;
map.tileTranslatePoint.x = (currentLevel === 1) ? (bounds.width / 2) - ((tileDefaultSize * 2) / 2) :
position.x - ((x * totalSize) / 100);
map.tileTranslatePoint.y = (currentLevel === 1) ? ((bounds.height / 2) - ((tileDefaultSize * 2) / 2) + (padding * 2)) :
position.y - ((y * totalSize) / 100);
};
Zoom.prototype.getTileTranslate = function (currentLevel, type) {
var map = this.maps;
var padding = type === 'ZoomOut' ? 10 : (type === 'Reset' && currentLevel > 1) ? 0 : 10;
var bounds = map.availableSize;
var totalSize = Math.pow(2, currentLevel) * 256;
var x = (bounds.width / 2) - (totalSize / 2);
var y = (bounds.height / 2) - (totalSize / 2);
var position = convertTileLatLongToPoint(new MapLocation(this.pinchStartLatLong['longitude'], this.pinchStartLatLong['latitude']), currentLevel, { x: x, y: y }, true);
x -= position.x - (bounds.width / 2);
y = y - (position.y - (bounds.height / 2)) + padding;
var scale = Math.pow(2, currentLevel - 1);
map.tileTranslatePoint.x = x;
map.tileTranslatePoint.y = y;
map.translatePoint.x = (x - (0.01 * this.tileZoomLevel)) / scale;
map.translatePoint.y = (y - (0.01 * this.tileZoomLevel)) / scale;
};
/**
* @returns {void}
* @private
*/
Zoom.prototype.performRectZooming = function () {
this.isDragZoom = true;
var map = this.maps;
var size = map.availableSize;
map.previousProjection = map.projectionType;
var prevLevel = map.tileZoomLevel;
var prevTilePoint = map.tileTranslatePoint;
var zoomRect = this.zoomingRect;
var maxZoom = map.zoomSettings.maxZoom;
var minZoom = map.zoomSettings.minZoom;
var isZoomCancelled;
if (zoomRect.height > 0 && zoomRect.width > 0) {
var x = this.zoomingRect.x + (this.zoomingRect.width / 2);
var y = this.zoomingRect.y + (this.zoomingRect.height / 2);
var zoomCalculationFactor = void 0;
if (!map.isTileMap) {
var scale = map.previousScale = map.scale;
zoomCalculationFactor = scale + Math.round((((size.width / zoomRect.width) + (size.height / zoomRect.height)) / 2));
zoomCalculationFactor = zoomCalculationFactor < this.maps.zoomSettings.maxZoom ? zoomCalculationFactor : this.maps.zoomSettings.maxZoom;
var translatePoint = map.previousPoint = map.translatePoint;
if (zoomCalculationFactor <= maxZoom) {
var translatePointX = translatePoint.x - (((size.width / scale) - (size.width / zoomCalculationFactor)) / (size.width / x));
var translatePointY = translatePoint.y - (((size.height / scale) - (size.height / zoomCalculationFactor)) / (size.height / y));
map.translatePoint = new Point(translatePointX, translatePointY);
}
map.scale = zoomCalculationFactor < this.maps.zoomSettings.maxZoom ? zoomCalculationFactor : this.maps.zoomSettings.maxZoom;
isZoomCancelled = this.triggerZoomEvent(prevTilePoint, prevLevel, '');
if (isZoomCancelled) {
map.translatePoint = map.previousPoint;
map.scale = map.previousScale;
}
map.zoomTranslatePoint = map.translatePoint;
}
else {
zoomCalculationFactor = prevLevel + (Math.round(prevLevel + (((size.width / zoomRect.width) + (size.height / zoomRect.height)) / 2)));
zoomCalculationFactor = (zoomCalculationFactor >= minZoom && zoomCalculationFactor <= maxZoom) ? zoomCalculationFactor : maxZoom;
map.zoomSettings.zoomFactor = zoomCalculationFactor;
this.getTileTranslatePosition(prevLevel, zoomCalculationFactor, { x: x, y: y });
map.tileZoomLevel = zoomCalculationFactor;
map.translatePoint.x = (map.tileTranslatePoint.x - (0.5 * Math.pow(2, zoomCalculationFactor))) /
(Math.pow(2, zoomCalculationFactor));
map.translatePoint.y = (map.tileTranslatePoint.y - (0.5 * Math.pow(2, zoomCalculationFactor))) /
(Math.pow(2, zoomCalculationFactor));
map.scale = (Math.pow(2, zoomCalculationFactor));
isZoomCancelled = this.triggerZoomEvent(prevTilePoint, prevLevel, '');
if (isZoomCancelled) {
map.translatePoint = map.tileTranslatePoint = new Point(0, 0);
map.scale = map.tileZoomLevel = map.zoomSettings.zoomFactor = prevLevel;
}
else {
map.mapLayerPanel.generateTiles(zoomCalculationFactor, map.tileTranslatePoint);
}
}
if (!isZoomCancelled) {
map.mapScaleValue = zoomCalculationFactor;
this.applyTransform(map, false, true);
this.maps.zoomNotApplied = false;
this.zoomingRect = null;
}
}
this.isZoomFinal = this.isZoomSelection && Math.round(map.scale) === this.maps.zoomSettings.maxZoom;
this.triggerZoomComplete(map, prevLevel, '');
this.removeToolbarOpacity(map.scale, this.maps.element.id + '_Zooming_');
};
Zoom.prototype.setInteraction = function (newInteraction) {
this.lastScale = 1;
this.interaction = newInteraction;
};
Zoom.prototype.updateInteraction = function () {
if (this.fingers === 2) {
this.setInteraction('zoom');
}
else {
this.setInteraction(null);
}
};
Zoom.prototype.tilePinchingProcess = function (scale) {
this.tileZoomLevel = Math.round(scale);
this.getTileTranslate(this.tileZoomLevel);
this.maps.mapLayerPanel.generateTiles(this.tileZoomLevel, this.maps.tileTranslatePoint, null, null, null, true);
};
/**
* @param {PointerEvent} e - Specifies the vent in the map
* @returns {void}
* @private
*/
// eslint-disable-next-line @typescript-eslint/no-unused-vars
Zoom.prototype.performPinchZooming = function (e) {
var map = this.maps;
var prevLevel = map.tileZoomLevel;
var zoomCalculationFactor = this.pinchFactor;
var isZoomCancelled;
var prevTilePoint = map.tileTranslatePoint;
this.maps.mergeCluster();
if (!map.isTileMap) {
var availSize = map.mapAreaRect;
map.isMarkerZoomCompleted = false;
map.previousScale = map.scale;
map.previousPoint = map.translatePoint;
map.previousProjection = map.projectionType;
var scale = calculateScale(this.touchStartList, this.touchMoveList);
var touchCenter = getTouchCenter(getTouches(this.touchMoveList, this.maps));
var newScale = scale / this.lastScale;
this.lastScale = scale;
this.pinchFactor *= newScale;
this.pinchFactor = Math.min(this.maps.zoomSettings.maxZoom, Math.max(this.pinchFactor, this.maps.zoomSettings.minZoom));
// eslint-disable-next-line @typescript-eslint/no-explicit-any
var minBounds = map.baseMapRectBounds['min'];
// eslint-disable-next-line @typescript-eslint/no-explicit-any
var maxBounds = map.baseMapRectBounds['max'];
var mapTotalHeight = Math.abs(minBounds['y'] - maxBounds['y']);
var mapTotalWidth = Math.abs(minBounds['x'] - maxBounds['x']);
var translatePoint = map.translatePoint;
var translatePointX = void 0;
var translatePointY = void 0;
if (zoomCalculationFactor < 1.2 && map.projectionType !== 'Eckert5') {
if (mapTotalWidth === 0 || mapTotalHeight === 0 || mapTotalWidth === mapTotalHeight) {
mapTotalWidth = availSize.width / 2;
mapTotalHeight = availSize.height;
}
zoomCalculationFactor = parseFloat(Math.min(availSize.width / mapTotalWidth, availSize.height / mapTotalHeight).toFixed(2));
zoomCalculationFactor = zoomCalculationFactor > 1.05 ? 1 : zoomCalculationFactor;
map.translatePoint = this.calculateInitalZoomTranslatePoint(zoomCalculationFactor, mapTotalWidth, mapTotalHeight, availSize, minBounds, map);
}
else {
var currentHeight = Math.abs(map.baseMapRectBounds['max']['y'] - map.baseMapRectBounds['min']['y']) * zoomCalculationFactor;
translatePointX = translatePoint.x - (((availSize.width / map.scale) - (availSize.width / zoomCalculationFactor)) / (availSize.width / touchCenter.x));
translatePointY = translatePoint.y - (((availSize.height / map.scale) - (availSize.height / zoomCalculationFactor)) / (availSize.height / touchCenter.y));
translatePointX = (currentHeight < map.mapAreaRect.height) ? (availSize.x + ((-(minBounds['x'])) + ((availSize.width / 2) - (mapTotalWidth / 2)))) : translatePointX;
translatePointY = (currentHeight < map.mapAreaRect.height) ? (availSize.y + ((-(minBounds['y'])) + ((availSize.height / 2) - (mapTotalHeight / 2)))) : translatePointY;
map.translatePoint = new Point(translatePointX, translatePointY);
}
map.scale = zoomCalculationFactor;
isZoomCancelled = this.triggerZoomEvent(prevTilePoint, prevLevel, '');
if (isZoomCancelled) {
map.translatePoint = map.previousPoint;
map.scale = map.previousScale;
}
}
else {
this.isPinchZooming = true;
var touchCenter = this.touchCenter;
var touchOnePoint = this.getMousePosition(this.touchMoveList[0].pageX, this.touchMoveList[0].pageY);
var touchTwoPoint = this.getMousePosition(this.touchMoveList[1].pageX, this.touchMoveList[1].pageY);
var distance = Math.sqrt(Math.pow((touchOnePoint.x - touchTwoPoint.x), 2) + Math.pow((touchOnePoint.y - touchTwoPoint.y), 2));
var pinchScale = distance / this.startDistance;
if (!isNullOrUndefined(this.pinchDistance)) {
var pinchZoomFactor = Math.log2(pinchScale * (256 * Math.pow(2, prevLevel)) / 256);
pinchZoomFactor = Math.min(map.zoomSettings.maxZoom, Math.max(map.zoomSettings.minZoom, pinchZoomFactor));
var scaleFactor = this.pinchDistance > distance ? (prevLevel * pinchScale) : pinchZoomFactor;
var factor = pinchZoomFactor;
var isZoomOut = false;
if (this.pinchDistance > distance) {
factor = (scaleFactor % 1);
isZoomOut = true;
}
else if (this.pinchDistance < distance) {
factor = (scaleFactor % 1) + 1;
}
var zoomFactor = Math.ceil(scaleFactor);
if (zoomFactor > map.zoomSettings.minZoom && zoomFactor <= map.zoomSettings.maxZoom) {
var element = document.getElementById(map.element.id);
if (element) {
element.style.overflow = 'hidden';
}
this.tileZoomLevel = zoomFactor;
var transformOriginX = (touchCenter.x / (map.mapAreaRect.width - map.mapAreaRect.x)) * 100;
var transformOriginY = (touchCenter.y / (map.mapAreaRect.height - map.mapAreaRect.y)) * 100;
var tilesParent = document.getElementById(map.element.id + '_tile_parent');
var copyTilesParent = document.getElementById(map.element.id + '_tiles');
if (!copyTilesParent) {
copyTilesParent = document.createElement('div');
copyTilesParent.id = map.element.id + '_tiles';
map.element.appendChild(copyTilesParent);
this.copyStyles(tilesParent, copyTilesParent);
copyTilesParent.style.zIndex = '0';
}
copyTilesParent.style.visibility = 'hidden';
tilesParent.style.transformOrigin = transformOriginX + "% " + transformOriginY + "%";
tilesParent.style.transform = "scale(" + factor + ")";
var svgElement = document.getElementById(map.element.id + '_Tile_SVG_Parent');
svgElement.style.transformOrigin = transformOriginX + "% " + transformOriginY + "%";
svgElement.style.transform = "scale(" + factor + ")";
if (!this.isCancellation && (0.2 >= scaleFactor % 1 && scaleFactor % 1 >= 0.1 && !isZoomOut) || (scaleFactor % 1 <= 0.9 && isZoomOut)) {
var animateTile = document.getElementById(map.element.id + '_animates_tiles');
if (!animateTile) {
animateTile = document.createElement('div');
animateTile.id = map.element.id + '_animates_tiles';
animateTile.classList.add(this.tileZoomLevel.toString());
copyTilesParent.appendChild(animateTile);
}
if (animateTile.childElementCount === 0) {
this.pinchZoomScale = isZoomOut ? Math.floor(scaleFactor) : Math.ceil(scaleFactor);
this.tilePinchingProcess(this.pinchZoomScale);
this.isCancellation = true;
}
}
if (this.isCancellation && (scaleFactor % 1 >= 0.99 && !isZoomOut) || (scaleFactor % 1 <= 0.1 && isZoomOut)) {
if (tilesParent.style.transformOrigin !== '' && this.isCancellation) {
tilesParent.style.transformOrigin = '';
tilesParent.style.transform = '';
svgElement.style.transformOrigin = '';
svgElement.style.transform = '';
this.pinchTileZoomScale = isZoomOut ? Math.floor(scaleFactor) : Math.ceil(scaleFactor);
this.getTileTranslate(this.pinchTileZoomScale);
var targetElement_1 = document.getElementById(map.element.id + '_animated_tiles');
var sourceElement = document.getElementById(map.element.id + '_animates_tiles');
while (targetElement_1.firstChild) {
targetElement_1.removeChild(targetElement_1.firstChild);
}
Array.from(sourceElement.children).forEach(function (child) {
targetElement_1.appendChild(child.cloneNode(true));
});
document.getElementById(map.element.id + '_animated_tiles')['className'] = this.pinchTileZoomScale.toFixed(0);
if (sourceElement) {
while (sourceElement.firstChild) {
sourceElement.removeChild(sourceElement.firstChild);
}
}
this.isCancellation = false;
map.mapScaleValue = this.pinchTileZoomScale;
map.scale = Math.pow(2, this.pinchTileZoomScale - 1);
this.applyTransform(map);
}
}
}
}
this.pinchDistance = distance;
}
if (!map.isTileMap) {
map.mapScaleValue = zoomCalculationFactor;
if (!isZoomCancelled) {
this.applyTransform(map);
}
this.triggerZoomComplete(map, prevLevel, '');
}
if (Browser.isDevice) {
this.removeToolbarOpacity(map.isTileMap ? Math.round(map.tileZoomLevel) : map.scale, map.element.id + '_Zooming_');
}
};
Zoom.prototype.copyStyles = function (sourceElement, targetElement) {
var sourceStyles = window.getComputedStyle(sourceElement);
Array.from(sourceStyles).forEach(function (style) {
targetElement.style[style] = sourceStyles.getPropertyValue(style);
});
};
Zoom.prototype.getTouchCenterPoint = function () {
var touchList = [];
for (var i = 0; i < this.touchMoveList.length; i++) {
touchList.push(this.getMousePosition(this.touchMoveList[i].pageX, this.touchMoveList[i].pageY));
}
return {
x: (touchList[0].x + touchList[1].x) / 2,
y: (touchList[0].y + touchList[1].y) / 2
};
};
Zoom.prototype.triggerZoomComplete = function (map, prevLevel, type) {
if (map.zoomSettings.enable) {
var zoomArgs = void 0;
if (map.isTileMap) {
map.mapScaleValue = isNullOrUndefined(map.mapScaleValue) ? 1 : map.mapScaleValue;
map.translatePoint.y = (map.tileTranslatePoint.y - (0.01 * map.mapScaleValue)) / map.scale;
map.translatePoint.x = (map.tileTranslatePoint.x - (0.01 * map.mapScaleValue)) / map.scale;
}
var minMaxLatitudeLongitude = this.maps.getMinMaxLatitudeLongitude();
if (!map.isTileMap) {
zoomArgs = {
cancel: false, name: 'zoomComplete', type: type, maps: map,
tileTranslatePoint: {}, translatePoint: { previous: map.previousPoint, current: map.translatePoint },
tileZoomLevel: {}, scale: { previous: map.previousScale, current: map.scale },
minLatitude: minMaxLatitudeLongitude.minLatitude, maxLatitude: minMaxLatitudeLongitude.maxLatitude,
minLongitude: minMaxLatitudeLongitude.minLongitude, maxLongitude: minMaxLatitudeLongitude.maxLongitude
};
}
else {
zoomArgs = {
cancel: false, name: 'zoomComplete', type: type, maps: map,
tileTranslatePoint: { previous: map.tileTranslatePoint, current: map.tileTranslatePoint }, translatePoint: { previous: map.previousPoint, current: map.translatePoint },
tileZoomLevel: { previous: prevLevel, current: map.tileZoomLevel }, scale: { previous: map.previousScale, current: map.scale },
minLatitude: minMaxLatitudeLongitude.minLatitude, maxLatitude: minMaxLatitudeLongitude.maxLatitude,
minLongitude: minMaxLatitudeLongitude.minLongitude, maxLongitude: minMaxLatitudeLongitude.maxLongitude
};
}
this.maps.trigger('zoomComplete', zoomArgs);
}
};
/**
* @returns {void}
* @private
*/
Zoom.prototype.drawZoomRectangle = function () {
var map = this.maps;
var down = this.mouseDownPoints;
var move = this.mouseMovePoints;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
var border = { width: 1, color: this.maps.themeStyle.rectangleZoomBorderColor };
var width = Math.abs(move.x - down.x);
var height = Math.abs(move.y - down.y);
var x = ((move.x > down.x) ? down.x : down.x - width);
var y = ((move.y > down.y) ? down.y : down.y - height);
if ((x > map.mapAreaRect.x && x < (map.mapAreaRect.x + map.mapAreaRect.width)) &&
(y > map.mapAreaRect.y) && (y < map.mapAreaRect.y + map.mapAreaRect.height)) {
this.zoomingRect = new Rect(x, y, width, height);
var rectSVGObject = map.renderer.createSvg({
id: map.element.id + '_Selection_Rect_Zooming',
width: map.availableSize.width,
height: map.availableSize.height,
style: 'position: absolute;'
});
rectSVGObject.style.position = 'absolute';
var rectOption = new RectOption(map.element.id + '_ZoomRect', this.maps.themeStyle.rectangleZoomFillColor, border, this.maps.themeStyle.rectangleZoomFillOpacity, this.zoomingRect, 0, 0, '', '3');
rectSVGObject.appendChild(map.renderer.drawRectangle(rectOption));
getElementByID(map.element.id + '_Secondary_Element').appendChild(rectSVGObject);
}
};
/**
* To animate the zooming process.
*
* @param {Element} element - Specifies the element
* @param {boolean} animate - Specifies the boolean value
* @param {number} x - Specifies the x value
* @param {number} y - Specifies the y value
* @param {number} scale - Specifies the scale value
* @returns {void}
*/
Zoom.prototype.animateTransform = function (element, animate, x, y, scale) {
var duration = this.currentLayer.animationDuration === 0 && animationMode === 'Enable' ? 1000 : this.currentLayer.animationDuration;
if (!animate || duration === 0 || this.maps.isTileMap) {
if (!(this.maps.isTileMap && element.id.indexOf('_Polygons_Group') > -1)) {
element.setAttribute('transform', 'scale(' + (scale) + ') translate( ' + x + ' ' + y + ' )');
}
return;
}
if (!this.maps.isTileMap) {
zoomAnimate(element, 0, duration, new MapLocation(x, y), scale, this.maps.mapAreaRect, this.maps);
}
};
/**
* @param {Maps} maps - Specifies the Map control
* @param {boolean} isMouseWheel - Indicates whether the zoom operation was triggered by the mouse wheel.
* @param {boolean} animate - Specifies the animation is available or not
* @param {boolean} isPanning - Specifies that it is panning or not
* @returns {void}
* @private
*/
Zoom.prototype.applyTransform = function (maps, isMouseWheel, animate, isPanning) {
var _this = this;
var layerIndex;
this.templateCount = 0;
var markerStyle;
var scale = maps.scale;
var x = maps.translatePoint.x;
var y = maps.translatePoint.y;
var currentLabelIndex = 0;
maps.zoomShapeCollection = [];
this.isPanningInProgress = isPanning || false;
if (document.getElementById(maps.element.id + '_mapsTooltip')) {
removeElement(maps.element.id + '_mapsTooltip');
}
if (maps.isTileMap) {
var element = document.getElementById(maps.element.id + '_svg');
if (element) {
for (var k = 0; k < maps.layers.length; k++) {
var layerElement = element.querySelector('#' + maps.element.id + '_LayerIndex_' + k);
if (layerElement) {
element.removeChild(layerElement);
}
}
}
}
if (this.layerCollectionEle) {
var _loop_1 = function (i) {
var layerElement = this_1.layerCollectionEle.childNodes[i];
if (layerElement.tagName === 'g') {
this_1.templateCount++;
this_1.index = layerElement.id.indexOf('_LayerIndex_') > -1 && parseFloat(layerElement.id.split('_LayerIndex_')[1].split('_')[0]);
this_1.currentLayer = maps.layersCollection[this_1.index];
var factor_1 = maps.mapLayerPanel.calculateFactor(this_1.currentLayer);
var elementCount = layerElement.childElementCount;
var templateElement = document.getElementById(maps.element.id + '_LayerIndex_' + this_1.index + '_Markers_Template_Group');
var _loop_2 = function (j) {
var currentEle = layerElement.childNodes[j];
if (!(currentEle.id.indexOf('_Markers_Group') > -1) && (!(currentEle.id.indexOf('_bubble_Group') > -1))
&& (!(currentEle.id.indexOf('_dataLableIndex_Group') > -1))) {
if (maps.isTileMap && (currentEle.id.indexOf('_line_Group') > -1)) {
currentEle.remove();
if (layerElement.children.length > 0 && layerElement.children[0]) {
layerElement.insertBefore(maps.navigationLineModule.renderNavigation(this_1.currentLayer, this_1.isPinchZooming ? this_1.pinchZoomScale : maps.tileZoomLevel, this_1.index), layerElement.children[1]);
}
else {
layerElement.appendChild(maps.navigationLineModule.renderNavigation(this_1.currentLayer, this_1.isPinchZooming ? this_1.pinchZoomScale : maps.tileZoomLevel, this_1.index));
}
}
else if (maps.isTileMap && (currentEle.id.indexOf('_Polygons_Group') > -1)) {
if (this_1.currentLayer.polygonSettings.polygons.length > 0) {
this_1.currentLayer.polygonSettings.polygons.map(function (polygonSettings, polygonIndex) {
var markerData = polygonSettings.points;
var path = calculatePolygonPath(maps, _this.isPinchZooming ? _this.pinchZoomScale : maps.tileZoomLevel, _this.currentLayer, markerData);
var element = document.getElementById(maps.element.id + '_LayerIndex_' + _this.index + '_PolygonIndex_' + polygonIndex);
if (!isNullOrUndefined(element)) {
element.setAttribute('d', path);
}
});
document.getElementById(maps.element.id + '_LayerIndex_' + this_1.index + '_Polygons_Group').style.visibility = '';
}
}
else if (currentEle.id.indexOf('Legend') === -1) {
changeBorderWidth(currentEle, this_1.index, scale, maps);
maps.zoomTranslatePoint = maps.translatePoint;
this_1.animateTransform(currentEle, animate, x, y, scale);
}
}
else if (currentEle.id.indexOf('_Markers_Group') > -1) {
if ((!this_1.isPanModeEnabled || !isPanning) && (!isNullOrUndefined(currentEle.childNodes[0]) || !isNullOrUndefined(templateElement.childNodes[0]))) {
var processElement = (!isNullOrUndefined(currentEle.childNodes[0]) ? currentEle.childNodes[0] : templateElement.childNodes[0]);
this_1.markerTranslates(processElement, factor_1, x, y, scale, 'Marker', layerElement);
}
currentEle = layerElement.childNodes[j];
if (!isNullOrUndefined(currentEle) && currentEle.id.indexOf('Markers') !== -1) {
Array.prototype.forEach.call(currentEle.childNodes, function (childNode, k) {
_this.markerTranslate(childNode, factor_1, x, y, scale, 'Marker', animate);
var dataIndex = parseInt(childNode['id'].split('_dataIndex_')[1].split('_')[0], 10);
var markerIndex = parseInt(childNode['id'].split('_MarkerIndex_')[1].split('_')[0], 10);
if (_this.currentLayer.markerSettings[markerIndex].initialMarkerSelection.length > 0) {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
var markerSelectionValues = _this.currentLayer.markerSettings[markerIndex].dataSource[dataIndex];
for (var x_1 = 0; x_1 < _this.currentLayer.markerSettings[markerIndex].initialMarkerSelection.length; x_1++) {
if (_this.currentLayer.markerSettings[markerIndex].initialMarkerSelection[x_1]['latitude'] ===
markerSelectionValues['latitude'] ||
_this.currentLayer.markerSettings[markerIndex].initialMarkerSelection[x_1]['longitude'] ===
markerSelectionValues['longitude']) {
maps.markerSelection(_this.currentLayer.markerSettings[markerIndex].selectionSettings, maps, currentEle.children[k], _this.currentLayer.markerSettings[markerIndex].dataSource[dataIndex]);
}
}
}
if (((_this.currentLayer.animationDuration > 0 || animationMode === 'Enable') || ((maps.layersCollection[0].animationDuration > 0 || animationMode === 'Enable') && _this.currentLayer.type === 'SubLayer')) && !_this.isPanModeEnabled) {
if (!maps.isTileMap) {
markerStyle = isMouseWheel ? markerStyle : 'visibility:hidden';
if (!isNullOrUndefined(markerStyle)) {
currentEle.style.cssText = markerStyle;
}
}
}
});
if (this_1.isPanModeEnabled && maps.markerModule.sameMarkerData.length > 0) {
clusterSeparate(maps.markerModule.sameMarkerData, maps, currentEle, true);
}
else if (maps.markerModule.sameMarkerData.length > 0) {
maps.markerModule.sameMarkerData = [];
if (document.getElementById(maps.element.id + '_mapsTooltip')) {
removeElement(maps.element.id + '_mapsTooltip');
}
}
if (document.getElementById(maps.element.id + '_mapsTooltip') && maps.mapsTooltipModule.tooltipTargetID.indexOf('_MarkerIndex_')
&& !this_1.isPanModeEnabled) {
var mapsTooltip = maps.mapsTooltipModule;
var tooltipElement = currentEle.querySelector('#' + mapsTooltip.tooltipTargetID);
if (!isNullOrUndefined(tooltipElement)) {
if (tooltipElement['style']['visibility'] === 'hidden') {
removeElement(maps.element.id + '_mapsTooltip');
}
else {
var x_2 = parseFloat(tooltipElement.getAttribute('transform').split('(')[1].split(')')[0].split(' ')[1]);
var y_1 = parseFloat(tooltipElement.getAttribute('transform').split('(')[1].split(')')[0].split(' ')[2]);
if (maps.isTileMap) {
x_2 += +getElement(maps.element.id + '_tile_parent')['style']['left'].split('px')[0];
y_1 += +getElement(maps.element.id + '_tile_parent')['style']['top'].split('px')[0];
}
mapsTooltip.svgTooltip.location.x = x_2;
mapsTooltip.svgTooltip.location.y = y_1;
mapsTooltip.svgTooltip.enableAnimation = false;
}
}
}
}
}
else if (currentEle.id.indexOf('_bubble_Group') > -1) {
var childElement = void 0;
for (var k = 0; k < currentEle.childElementCount; k++) {
childElement = currentEle.childNodes[k];
layerIndex = parseFloat(childElement.id.split('_LayerIndex_')[1].split('_')[0]);
var bubleIndex = parseFloat(childElement.id.split('_BubbleIndex_')[1].split('_')[0]);
var dataIndex = parseFloat(childElement.id.split('_BubbleIndex_')[1].split('_')[2]);
for (var l = 0; l < maps.bubbleModule.bubbleCollection.length; l++) {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
var bubbleCollection = maps.bubbleModule.bubbleCollection[l];
if (bubbleCollection['LayerIndex'] === layerIndex && bubbleCollection['BubbleIndex'] === bubleIndex &&
bubbleCollection['DataIndex'] === dataIndex) {
var centerX = bubbleCollection['center']['x'];
var centerY = bubbleCollection['center']['y'];
var currentX = ((centerX + x) * scale);
var currentY = ((centerY + y) * scale);
var duration = this_1.currentLayer.animationDuration === 0 && animationMode === 'Enable' ? 1000 : this_1.currentLayer.animationDuration;
if (!animate || duration === 0) {
childElement.setAttribute('transform', 'translate( ' + currentX + ' ' + currentY + ' )');
}
else {
smoothTranslate(childElement, 0, duration, new MapLocation(currentX, currentY));
}
break;
}
}
}
}
else if (currentEle.id.indexOf('_dataLableIndex_Group') > -1 && !isNullOrUndefined(maps.layers[this_1.index])) {
maps.zoomLabelPositions = [];
maps.zoomLabelPositions = maps.dataLabelModule.dataLabelCollections;
var labelAnimate_1 = !maps.isTileMap && animate;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
var intersect_1 = [];
// eslint-disable-next-line @typescript-eslint/no-explicit-any
Array.prototype.forEach.call(currentEle.childNodes, function (childNode, k) {
if (currentEle.childNodes[k]['id'].indexOf('_LabelIndex_') > -1) {
var labelIndex = parseFloat(currentEle.childNodes[k]['id'].split('_LabelIndex_')[1].split('_')[0]);
var zoomShapeWidth = currentEle.childNodes[k].id;
maps.zoomShapeCollection.push(zoomShapeWidth);
_this.dataLabelTranslate(currentEle.childNodes[k], factor_1, x, y, scale, 'DataLabel', labelAnimate_1, currentLabelIndex, isPanning, intersect_1);