@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
1,009 lines • 135 kB
JavaScript
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
/**
* Maps Component file
*/
import { Component, NotifyPropertyChanges, Property, Fetch } from '@syncfusion/ej2-base';
import { EventHandler, Browser, isNullOrUndefined, createElement, setValue, extend } from '@syncfusion/ej2-base';
import { Event, remove, L10n, Collection, Internationalization, Complex } from '@syncfusion/ej2-base';
import { SvgRenderer } from '@syncfusion/ej2-svg-base';
import { Size, createSvg, Point, removeElement, triggerShapeEvent, showTooltip, checkShapeDataFields, MapLocation, getMousePosition, calculateSize } from './utils/helper';
import { getElement, removeClass, getTranslate, triggerItemSelectionEvent, mergeSeparateCluster, customizeStyle, querySelector } from './utils/helper';
import { createStyle, getProcessedMarginValue } from './utils/helper';
import { ZoomSettings, LegendSettings } from './model/base';
import { LayerSettings, TitleSettings, Border, Margin, MapsAreaSettings, Annotation, CenterPosition } from './model/base';
import { load, click, onclick, rightClick, doubleClick, resize, shapeSelected, zoomIn, mouseMove } from './model/constants';
import { getThemeStyle, Theme } from './model/theme';
import { LayerPanel } from './layers/layer-panel';
import { Rect, RectOption, measureText, getElementByID, MapAjax, processResult, getElementsByClassName } from '../maps/utils/helper';
import { findPosition, textTrim, TextOption, renderTextElement, calculateZoomLevel, convertTileLatLongToPoint, convertGeoToPoint } from '../maps/utils/helper';
import { Annotations } from '../maps/user-interaction/annotation';
import { MarkerSettings } from './index';
import { changeBorderWidth } from './index';
import { DataManager, Query } from '@syncfusion/ej2-data';
/**
* Represents the maps control. It is ideal for rendering maps from GeoJSON data or other map providers like OpenStreetMap, Google Maps, Bing Maps, etc that
* has rich feature set that includes markers, labels, bubbles and much more.
* ```html
* <div id="maps"/>
* <script>
* var maps = new Maps();
* maps.appendTo("#maps");
* </script>
* ```
*/
var Maps = /** @class */ (function (_super) {
__extends(Maps, _super);
/**
* Constructor for creating the widget.
*
* @param {MapsModel} options Specifies the options
* @param {string | HTMLElement} element Specifies the element
*/
function Maps(options, element) {
var _this = _super.call(this, options, element) || this;
/**
* Check layer whether is geometry or tile.
*
* @private
*/
_this.isTileMap = false;
/**
* Resize the map
*
* @private
*/
_this.isResize = false;
/**
* @private
*/
_this.isReset = false;
/** @private */
_this.baseSize = new Size(0, 0);
/** @public */
_this.translatePoint = new Point(0, 0);
/** @private */
_this.baseTranslatePoint = new Point(0, 0);
/** @public */
_this.zoomTranslatePoint = new Point(0, 0);
/** @private */
_this.markerZoomedState = true;
/** @private */
_this.zoomPersistence = false;
/** @private */
_this.defaultState = true;
/** @private */
_this.centerPositionChanged = false;
/** @private */
_this.markerNullCount = 0;
/** @private */
_this.tileTranslatePoint = new Point(0, 0);
/** @private */
_this.baseTileTranslatePoint = new Point(0, 0);
/** @private */
// eslint-disable-next-line @typescript-eslint/ban-types
_this.isDevice = false;
/** @private */
_this.staticMapZoom = _this.zoomSettings.enable ? _this.zoomSettings.zoomFactor : 0;
/** @private */
_this.zoomNotApplied = false;
/** @public */
_this.dataLabelShape = [];
_this.zoomShapeCollection = [];
_this.zoomLabelPositions = [];
_this.mouseDownEvent = { x: null, y: null };
_this.mouseClickEvent = { x: null, y: null };
/** @private */
_this.selectedElementId = [];
/** @private */
_this.selectedMarkerElementId = [];
/** @private */
_this.selectedBubbleElementId = [];
/** @private */
_this.selectedNavigationElementId = [];
/** @private */
_this.selectedPolygonElementId = [];
/** @private */
_this.selectedLegendElementId = [];
/** @private */
// eslint-disable-next-line @typescript-eslint/no-explicit-any
_this.legendSelectionCollection = [];
/** @private */
_this.shapeSelections = true;
/** @private */
_this.legendSelection = true;
/** @private */
_this.toggledLegendId = [];
/** @private */
_this.toggledElementId = [];
/** @private */
_this.checkInitialRender = true;
/** @private */
_this.initialTileTranslate = new Point(0, 0);
/** @private */
_this.isMarkerZoomCompleted = false;
/** @private */
_this.markerDragId = '';
/** @private */
_this.initialCheck = true;
/** @private */
_this.applyZoomReset = false;
/** @private */
_this.markerClusterExpandCheck = false;
/** @private */
_this.markerClusterExpand = false;
/** @private */
_this.mouseMoveId = '';
/** @private */
// eslint-disable-next-line @typescript-eslint/no-explicit-any
_this.shapeSelectionItem = [];
/** @private */
// eslint-disable-next-line @typescript-eslint/no-explicit-any
_this.markerDragArgument = null;
setValue('mergePersistData', _this.mergePersistMapsData, _this);
return _this;
}
Object.defineProperty(Maps.prototype, "isShapeSelected", {
/**
*
* Specifies whether the shape is selected in the maps or not.
*
* @returns {boolean} - Returns a boolean value to specify whether the shape is selected in the maps or not.
*/
get: function () {
return this.mapSelect;
},
enumerable: true,
configurable: true
});
/**
* To manage persist maps data.
*
* @returns {void}
*/
Maps.prototype.mergePersistMapsData = function () {
var data;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
var windowData;
try {
windowData = window.localStorage;
}
catch (e) {
windowData = null;
}
if (!isNullOrUndefined(windowData)) {
data = window.localStorage.getItem(this.getModuleName() + this.element.id);
}
if (!(isNullOrUndefined(data) || (data === ''))) {
var dataObj = JSON.parse(data);
var keys = Object.keys(dataObj);
this.isProtectedOnChange = true;
for (var _i = 0, keys_1 = keys; _i < keys_1.length; _i++) {
var key = keys_1[_i];
if ((typeof this[key] === 'object') && !isNullOrUndefined(this[key])) {
extend(this[key], dataObj[key]);
}
else {
this[key] = dataObj[key];
}
}
this.isProtectedOnChange = false;
}
};
/**
* Gets the localized label by locale keyword.
*
* @param {string} key - Specifies the key
* @returns {string} - Returns the string value
* @private
*/
Maps.prototype.getLocalizedLabel = function (key) {
return this.localeObject.getConstant(key);
};
/**
* Initializing pre-required values.
*
* @returns {void}
*/
Maps.prototype.preRender = function () {
this.isDevice = Browser.isDevice;
this.initPrivateVariable();
this.allowServerDataBinding = false;
this.unWireEVents();
this.wireEVents();
this.setCulture();
};
Maps.prototype.renderElements = function () {
if (!this.isDestroyed) {
this.trigger(load, { maps: this });
this.createSVG();
this.findBaseAndSubLayers();
if (!isNullOrUndefined(this.markerModule) && this.markerModule.getMapsInstance()) {
this.markerModule.initializeMarkerClusterList();
}
this.createSecondaryElement();
this.addTabIndex();
this.themeStyle = getThemeStyle(this.theme);
this.renderBorder();
this.renderTitle(this.titleSettings, 'title', null, null);
this.renderArea();
this.processRequestJsonData();
this.renderComplete();
this.isAddLayer = !this.isTileMap ? false : this.isAddLayer;
}
};
/**
* To Initialize the control rendering.
*
* @returns {void}
*/
Maps.prototype.render = function () {
this.renderElements();
};
Maps.prototype.processRequestJsonData = function () {
var _this = this;
var length = this.layersCollection.length - 1;
this.serverProcess = { request: 0, response: 0 };
var queryModule;
var dataModule;
Array.prototype.forEach.call(this.layersCollection, function (layer, layerIndex) {
if (layer.shapeData instanceof DataManager) {
_this.serverProcess['request']++;
dataModule = layer.shapeData;
queryModule = layer.query instanceof Query ? layer.query : new Query();
// eslint-disable-next-line @typescript-eslint/no-explicit-any
var dataManager = dataModule.executeQuery(queryModule);
// eslint-disable-next-line @typescript-eslint/no-explicit-any
dataManager.then(function (e) {
_this.processResponseJsonData('DataManager', e, layer, 'ShapeData');
});
}
else if (layer.shapeData instanceof MapAjax || layer.shapeData) {
if (!isNullOrUndefined(layer.shapeData['dataOptions'])) {
_this.processAjaxRequest(layer, layer.shapeData, 'ShapeData');
}
}
if (layer.dataSource instanceof DataManager) {
_this.serverProcess['request']++;
dataModule = layer.dataSource;
queryModule = layer.query instanceof Query ? layer.query : new Query();
// eslint-disable-next-line @typescript-eslint/no-explicit-any
var dataManager = dataModule.executeQuery(queryModule);
// eslint-disable-next-line @typescript-eslint/no-explicit-any
dataManager.then(function (e) {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
layer.dataSource = processResult(e);
});
}
if (layer.markerSettings.length > 0) {
var _loop_1 = function (i) {
if (layer.markerSettings[i].dataSource instanceof DataManager) {
_this.serverProcess['request']++;
dataModule = layer.markerSettings[i].dataSource;
queryModule = layer.markerSettings[i].query instanceof Query ?
layer.markerSettings[i].query : new Query();
// eslint-disable-next-line @typescript-eslint/no-explicit-any
var dataManager = dataModule.executeQuery(queryModule);
// eslint-disable-next-line @typescript-eslint/no-explicit-any
dataManager.then(function (e) {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
layer.markerSettings[i].dataSource = processResult(e);
});
}
};
for (var i = 0; i < layer.markerSettings.length; i++) {
_loop_1(i);
}
}
if (layer.bubbleSettings.length > 0) {
var _loop_2 = function (i) {
if (layer.bubbleSettings[i].dataSource instanceof DataManager) {
_this.serverProcess['request']++;
dataModule = layer.bubbleSettings[i].dataSource;
queryModule = layer.bubbleSettings[i].query instanceof Query ?
layer.bubbleSettings[i].query : new Query();
// eslint-disable-next-line @typescript-eslint/no-explicit-any
var dataManager = dataModule.executeQuery(queryModule);
// eslint-disable-next-line @typescript-eslint/no-explicit-any
dataManager.then(function (e) {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
layer.bubbleSettings[i].dataSource = processResult(e);
});
}
};
for (var i = 0; i < layer.bubbleSettings.length; i++) {
_loop_2(i);
}
}
if (layer.dataSource instanceof MapAjax || (!isNullOrUndefined(layer.dataSource) && !isNullOrUndefined(layer.dataSource['dataOptions']))) {
_this.processAjaxRequest(layer, layer.dataSource, 'DataSource');
}
if (_this.serverProcess['request'] === _this.serverProcess['response'] && length === layerIndex) {
_this.processResponseJsonData(null);
}
});
};
// eslint-disable-next-line @typescript-eslint/no-explicit-any
Maps.prototype.processAjaxRequest = function (layer, localAjax, type) {
var _this = this;
this.serverProcess['request']++;
var fetchApiModule = new Fetch(localAjax.dataOptions, localAjax.type, localAjax.contentType);
// eslint-disable-next-line @typescript-eslint/no-explicit-any
fetchApiModule.onSuccess = function (args) {
if (!isNullOrUndefined(args.type) && args.type === 'application/octet-stream') {
var reader_1 = new FileReader();
//eslint-disable-next-line @typescript-eslint/no-this-alias
var map_1 = _this;
// eslint-disable-next-line @typescript-eslint/tslint/config
reader_1.onload = function () {
args = JSON.parse(reader_1.result.toString());
map_1.processResponseJsonData('Fetch', args, layer, type);
};
reader_1.readAsText(args);
}
else {
_this.processResponseJsonData('Fetch', args, layer, type);
}
};
fetchApiModule.send(localAjax.sendData);
};
/**
* This method is used to process the JSON data to render the maps.
*
* @param {string} processType - Specifies the process type in maps.
* @param {any | string} data - Specifies the data for maps.
* @param {LayerSettings} layer - Specifies the layer for the maps.
* @param {string} dataType - Specifies the data type for maps.
* @returns {void}
* @private
*/
Maps.prototype.processResponseJsonData = function (processType,
// eslint-disable-next-line @typescript-eslint/no-explicit-any
data, layer, dataType) {
this.serverProcess['response']++;
if (processType) {
if (dataType === 'ShapeData') {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
layer.shapeData = (processType === 'DataManager') ? processResult(data) : data;
}
else {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
layer.dataSource = (processType === 'DataManager') ? processResult(data) : data;
}
}
if (!isNullOrUndefined(processType) && this.serverProcess['request'] === this.serverProcess['response']) {
var collection = this.layersCollection;
this.layersCollection = [];
for (var i = 0; i < collection.length; i++) {
if (collection[i].isBaseLayer) {
this.layersCollection.push(collection[i]);
}
}
for (var j = 0; j < collection.length; j++) {
if (!collection[j].isBaseLayer) {
this.layersCollection.push(collection[j]);
}
}
this.renderMap();
}
else if (isNullOrUndefined(processType)) {
this.renderMap();
}
};
Maps.prototype.renderMap = function () {
if (this.legendModule && this.legendSettings.visible) {
this.legendModule.renderLegend();
}
this.createTile();
if (this.zoomSettings.enable && this.zoomModule) {
this.zoomModule.createZoomingToolbars();
}
if (!isNullOrUndefined(this.dataLabelModule)) {
this.dataLabelModule.dataLabelCollections = [];
}
this.mapLayerPanel.measureLayerPanel();
if (!isNullOrUndefined(this.svgObject)) {
this.element.appendChild(this.svgObject);
}
this.setSecondaryElementPosition();
for (var i = 0; i < this.layers.length; i++) {
if (this.layers[i].selectionSettings && this.layers[i].selectionSettings.enable &&
this.layers[i].initialShapeSelection.length > 0 && this.checkInitialRender) {
var checkSelection = this.layers[i].selectionSettings.enableMultiSelect;
this.layers[i].selectionSettings.enableMultiSelect = checkSelection ? checkSelection : true;
var shapeSelection = this.layers[i].initialShapeSelection;
for (var j = 0; j < this.layers[i].initialShapeSelection.length; j++) {
this.shapeSelection(i, shapeSelection[j].shapePath, shapeSelection[j].shapeValue, true);
}
this.layers[i].selectionSettings.enableMultiSelect = checkSelection;
if (i === this.layers.length - 1) {
this.checkInitialRender = false;
}
}
if (!this.isResize) {
for (var k = 0; k < this.layers[i].markerSettings.length; k++) {
// eslint-disable-next-line max-len
if (this.layers[i].markerSettings[k].selectionSettings && this.layers[i].markerSettings[k].selectionSettings.enable
&& this.layers[i].markerSettings[k].initialMarkerSelection.length > 0) {
var markerSelectionValues = this.layers[i].markerSettings[k].initialMarkerSelection;
for (var j = 0; j < markerSelectionValues.length; j++) {
this.markerInitialSelection(i, k, this.layers[i].markerSettings[k], markerSelectionValues[j].latitude, markerSelectionValues[j].longitude);
}
}
}
}
}
if (!isNullOrUndefined(document.getElementById(this.element.id + '_tile_parent'))) {
var svg = this.svgObject.getBoundingClientRect();
var element = document.getElementById(this.element.id);
var tileElement = document.getElementById(this.element.id + '_tile_parent');
var tileElement1 = document.getElementById(this.element.id + '_tiles');
var tile = tileElement.getBoundingClientRect();
var top_1;
var left = void 0;
left = parseFloat(tileElement.style.left);
var bottom = svg.bottom - tile.bottom - element.offsetTop;
top_1 = parseFloat(tileElement.style.top);
top_1 = (bottom <= 11) ? top_1 : (!isNullOrUndefined(this.legendModule) && this.legendSettings.position === 'Bottom') ? this.mapAreaRect.y : (top_1 * 2);
left = (bottom <= 11) ? left : !isNullOrUndefined(this.legendModule) ? left : (left * 2);
tileElement.style.top = top_1 + 'px';
tileElement.style.left = left + 'px';
tileElement1.style.top = top_1 + 'px';
tileElement1.style.left = left + 'px';
if (!isNullOrUndefined(this.legendModule) && this.legendModule.totalPages.length > 0) {
tileElement.style.height = tileElement1.style.height = this.legendModule.legendTotalRect.height + 'px';
tileElement.style.width = tileElement1.style.width = this.legendModule.legendTotalRect.width + 'px';
}
}
this.arrangeTemplate();
if (this.annotationsModule) {
if (this.width !== '0px' && this.height !== '0px' && this.width !== '0%' && this.height !== '0%') {
this.annotationsModule.renderAnnotationElements();
}
}
this.element.style.outline = 'none';
this.element.style.position = 'relative';
for (var i = 0; i < document.getElementsByTagName('path').length - 1; i++) {
if (document.getElementsByTagName('path')[i].id.indexOf('shapeIndex') > -1) {
document.getElementsByTagName('path')[i].style.outline = 'none';
}
}
this.zoomingChange();
if (this.zoomModule && this.isDevice) {
this.zoomModule.removeToolbarOpacity(this.isTileMap ? Math.round(this.tileZoomLevel) : this.mapScaleValue, this.element.id + '_Zooming_');
}
if (!this.isZoomByPosition && !this.zoomNotApplied) {
this.triggerZoomEvent();
}
this.isResize = false;
};
Maps.prototype.triggerZoomEvent = function () {
var loadedArgs;
var minMaxLatitudeLongitude = this.getMinMaxLatitudeLongitude();
// eslint-disable-next-line prefer-const
loadedArgs = {
maps: this, isResized: this.isResize, minLatitude: minMaxLatitudeLongitude.minLatitude,
maxLatitude: minMaxLatitudeLongitude.maxLatitude, minLongitude: minMaxLatitudeLongitude.minLongitude,
maxLongitude: minMaxLatitudeLongitude.maxLongitude, cancel: false, name: 'Loaded'
};
this.trigger('loaded', loadedArgs);
//eslint-enable @typescript-eslint/prefer-const
};
/**
* To apply color to the initial selected marker.
*
* @param {SelectionSettingsModel} selectionSettings - Specifies the selection settings
* @param {Maps} map - Specifies the instance of the maps
* @param {Element} targetElement - Specifies the target element
* @param {object} data - Specifies the data
* @returns {void}
* @private
*/
Maps.prototype.markerSelection = function (selectionSettings, map, targetElement, data) {
var border = {
color: selectionSettings.border.color,
width: selectionSettings.border.width / map.scale,
opacity: selectionSettings.border.opacity
};
var markerSelectionProperties = {
opacity: selectionSettings.opacity,
fill: selectionSettings.fill,
border: border,
target: targetElement.id,
cancel: false,
data: data,
maps: map
};
if (!getElement('MarkerselectionMap')) {
document.body.appendChild(createStyle('MarkerselectionMap', 'MarkerselectionMapStyle', markerSelectionProperties));
}
else {
customizeStyle('MarkerselectionMap', 'MarkerselectionMapStyle', markerSelectionProperties);
}
if (this.selectedMarkerElementId.length === 0 || selectionSettings.enableMultiSelect) {
if (targetElement.tagName === 'g') {
targetElement.children[0].setAttribute('class', 'MarkerselectionMapStyle');
this.selectedMarkerElementId.push(targetElement.children[0].id);
}
else {
targetElement.setAttribute('class', 'MarkerselectionMapStyle');
this.selectedMarkerElementId.push(targetElement.id);
}
}
};
/**
* initial selection of marker.
*
* @param {number} layerIndex - Specifies the layer index
* @param {number} markerIndex - Specifies the marker index
* @param {MarkerSettingsModel} markerSettings - Specifies the marker settings
* @param {number} latitude - Specifies hte latitude
* @param {number} longitude - Specifies the longitude
* @returns {void}
* @private
*/
Maps.prototype.markerInitialSelection = function (layerIndex, markerIndex, markerSettings, latitude, longitude) {
var selectionSettings = markerSettings.selectionSettings;
if (selectionSettings.enable) {
for (var i = 0; i < markerSettings.dataSource['length']; i++) {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
var data = markerSettings.dataSource[i];
if (data['latitude'] === latitude && data['longitude'] === longitude) {
var targetId = this.element.id + '_' + 'LayerIndex_' + layerIndex + '_MarkerIndex_' + markerIndex +
'_dataIndex_' + i;
this.markerSelection(selectionSettings, this, getElement(targetId), data);
}
}
}
};
/**
* Render the map area border.
*
* @returns {void}
*/
Maps.prototype.renderArea = function () {
var width = this.mapsArea.border.width;
var background = this.mapsArea.background;
if (width > 0 || (background || this.themeStyle.areaBackgroundColor)) {
var mapBorder = {
opacity: isNullOrUndefined(this.mapsArea.border.opacity) ? 1 : this.mapsArea.border.opacity,
color: this.mapsArea.border.color, width: this.mapsArea.border.width
};
var rect = new RectOption(this.element.id + '_MapAreaBorder', background || this.themeStyle.areaBackgroundColor, mapBorder, 1, this.mapAreaRect);
this.svgObject.appendChild(this.renderer.drawRectangle(rect));
}
};
/**
* To add tab index for map element.
*
* @returns {void}
*/
Maps.prototype.addTabIndex = function () {
this.element.setAttribute('aria-label', this.description || 'Maps Element');
this.element.setAttribute('role', 'region');
this.element.tabIndex = this.tabIndex;
};
Maps.prototype.setSecondaryElementPosition = function () {
var element = getElementByID(this.element.id + '_Secondary_Element');
var rect = this.element.getBoundingClientRect();
var svgElement = getElementByID(this.element.id + '_svg');
if (!isNullOrUndefined(svgElement)) {
var svgRect = svgElement.getBoundingClientRect();
element.style.left = Math.max(svgRect.left - rect.left, 0) + 'px';
element.style.top = Math.max(svgRect.top - rect.top, 0) + 'px';
}
};
Maps.prototype.zoomingChange = function () {
var left;
var top;
if (getElementByID(this.element.id + '_Layer_Collections') && this.zoomModule) {
this.zoomModule.layerCollectionEle = getElementByID(this.element.id + '_Layer_Collections');
}
if (this.isTileMap && getElementByID(this.element.id + '_Tile_SVG') && getElementByID(this.element.id + '_tile_parent')) {
var tileElement = getElementByID(this.element.id + '_tile_parent');
var tileSvgElement = getElementByID(this.element.id + '_Tile_SVG');
var tileSvgParentElement = getElementByID(this.element.id + '_Tile_SVG_Parent');
var tileRect = tileElement.getBoundingClientRect();
var tileSvgRect = tileSvgElement.getBoundingClientRect();
left = (tileRect.left - tileSvgRect.left);
top = (tileRect.top - tileSvgRect.top);
tileSvgParentElement.style.left = left + 'px';
tileSvgParentElement.style.top = top + 'px';
if (!isNullOrUndefined(this.legendModule) && this.legendModule.totalPages.length > 0) {
tileElement.style.width = tileSvgElement.style.width =
this.legendModule.legendTotalRect.width.toString();
tileElement.style.height = tileSvgElement.style.height =
this.legendModule.legendTotalRect.height.toString();
tileSvgParentElement.style.width = this.legendModule.legendTotalRect.width + 'px';
tileSvgParentElement.style.height = this.legendModule.legendTotalRect.height + 'px';
}
var markerTemplateElements = document.getElementsByClassName('template');
if (!isNullOrUndefined(markerTemplateElements) && markerTemplateElements.length > 0) {
for (var i = 0; i < markerTemplateElements.length; i++) {
var templateGroupEle = markerTemplateElements[i];
templateGroupEle.style.left = left + 'px';
templateGroupEle.style.top = top + 'px';
}
}
}
if (this.zoomSettings.zoomFactor >= 0) {
if (this.zoomModule && this.zoomModule.toolBarGroup && this.zoomSettings.enable) {
this.zoomModule.alignToolBar();
}
var elements = document.getElementById(this.element.id + '_Layer_Collections');
if (!isNullOrUndefined(elements) && elements.childElementCount > 0) {
for (var i = 0; i < elements.childNodes.length; i++) {
var childElement = elements.childNodes[i];
if (childElement.tagName === 'g' && childElement.id.indexOf('_Legend_Group') === -1) {
var layerIndex = parseFloat(childElement.id.split('_LayerIndex_')[1].split('_')[0]);
for (var j = 0; j < childElement.childNodes.length; j++) {
var childNode = childElement.childNodes[j];
if (!(childNode.id.indexOf('_Markers_Group') > -1) &&
(!(childNode.id.indexOf('_bubble_Group') > -1)) &&
(!(childNode.id.indexOf('_dataLableIndex_Group') > -1))) {
changeBorderWidth(childNode, layerIndex, this.scale, this);
}
}
}
}
}
if (this.zoomModule && ((this.previousScale !== this.scale) || this.zoomNotApplied || this.isZoomByPosition)) {
this.zoomModule.applyTransform(this, false, true);
}
}
};
Maps.prototype.createSecondaryElement = function () {
if (isNullOrUndefined(document.getElementById(this.element.id + '_Secondary_Element'))) {
var secondaryElement = createElement('div', {
id: this.element.id + '_Secondary_Element'
});
secondaryElement.style.cssText = 'position: relative;z-index:2;';
this.element.appendChild(secondaryElement);
}
};
/**
* @returns {void}
*/
Maps.prototype.getMinMaxLatitudeLongitude = function () {
var mapsElement = document.getElementById(this.element.id);
if (!isNullOrUndefined(mapsElement)) {
var element = mapsElement.getBoundingClientRect();
var marginLeft = getProcessedMarginValue(this.margin.left);
var minPosition = this.isTileMap ?
this.pointToLatLong((this.mapAreaRect.x - marginLeft), -this.mapAreaRect.y) :
this.getGeoLocation(0, (this.mapAreaRect.x + element.left), this.mapAreaRect.y);
var maxPosition = this.isTileMap ? this.pointToLatLong(this.mapAreaRect.width, (this.mapAreaRect.height - this.mapAreaRect.y)) :
this.getGeoLocation(0, (this.mapAreaRect.x + element.left + this.mapAreaRect.width), (this.mapAreaRect.y + this.mapAreaRect.height));
var MinMaxLatitudeLongitude = {
minLatitude: minPosition.latitude, maxLatitude: maxPosition.latitude, minLongitude: minPosition.longitude,
maxLongitude: maxPosition.longitude
};
return MinMaxLatitudeLongitude;
}
else {
return { minLatitude: 0, maxLatitude: 0, minLongitude: 0,
maxLongitude: 0 };
}
};
/**
* @returns {void}
* @private
*/
Maps.prototype.arrangeTemplate = function () {
var _this = this;
if (document.getElementById(this.element.id + '_Legend_Border')) {
document.getElementById(this.element.id + '_Legend_Border').style.pointerEvents = 'none';
}
var templateElements = document.getElementsByClassName(this.element.id + '_template');
if (!isNullOrUndefined(templateElements) && templateElements.length > 0 &&
getElementByID(this.element.id + '_Layer_Collections') && !this.isTileMap) {
Array.prototype.forEach.call(templateElements, function (templateGroupEle) {
var offSetLetValue = 0;
var offSetTopValue = 0;
if (!isNullOrUndefined(templateGroupEle) && templateGroupEle.childElementCount > 0) {
var layerOffset = getElementByID(_this.element.id + '_Layer_Collections').getBoundingClientRect();
var elementOffset = getElementByID(templateGroupEle.id).getBoundingClientRect();
if (templateGroupEle.id.indexOf('Marker') === -1) {
offSetLetValue = _this.isTileMap ? 0 : (layerOffset.left < elementOffset.left) ?
-(Math.abs(elementOffset.left - layerOffset.left)) : (Math.abs(elementOffset.left - layerOffset.left));
offSetTopValue = _this.isTileMap ? 0 : (layerOffset.top < elementOffset.top) ?
-(Math.abs(elementOffset.top - layerOffset.top)) : Math.abs(elementOffset.top - layerOffset.top);
}
Array.prototype.forEach.call(templateGroupEle.childNodes, function (currentTemplate) {
if (currentTemplate.id.indexOf('Marker') === -1) {
currentTemplate.style.left = parseFloat(currentTemplate.style.left) + offSetLetValue + 'px';
currentTemplate.style.top = parseFloat(currentTemplate.style.top) + offSetTopValue + 'px';
currentTemplate.style.transform = 'translate(-50%, -50%)';
}
});
}
});
}
};
Maps.prototype.createTile = function () {
var mainLayer = this.layersCollection[0];
var padding = 0;
if (mainLayer.isBaseLayer && (!isNullOrUndefined(mainLayer.urlTemplate) && mainLayer.urlTemplate !== '' && isNullOrUndefined(mainLayer.shapeData))) {
removeElement(this.element.id + '_tile_parent');
removeElement(this.element.id + '_tiles');
removeElement('animated_tiles');
var ele = createElement('div', {
id: this.element.id + '_tile_parent'
});
var marginRight = getProcessedMarginValue(this.margin.right);
ele.style.cssText = 'position: absolute; left: ' +
(this.mapAreaRect.x) + 'px; right: ' + (marginRight) + 'px; top: '
+ (this.mapAreaRect.y + padding) + 'px; height: ' +
(this.mapAreaRect.height) + 'px; width: '
+ (this.mapAreaRect.width) + 'px; overflow: hidden;';
var ele1 = createElement('div', {
id: this.element.id + '_tiles'
});
ele1.style.cssText = 'position: absolute; left: ' +
(this.mapAreaRect.x) + 'px; right: ' + (marginRight) + 'px; top: '
+ (this.mapAreaRect.y + padding) + 'px; height: ' + (this.mapAreaRect.height) + 'px; width: '
+ (this.mapAreaRect.width) + 'px; overflow: hidden;';
this.element.appendChild(ele);
this.element.appendChild(ele1);
}
};
/**
* To initilize the private varibales of maps.
*
* @returns {void}
*/
Maps.prototype.initPrivateVariable = function () {
if (this.element.id === '') {
var collection = document.getElementsByClassName('e-maps').length;
this.element.id = 'maps_control_' + collection;
}
this.renderer = new SvgRenderer(this.element.id);
this.mapLayerPanel = new LayerPanel(this);
};
Maps.prototype.findBaseAndSubLayers = function () {
var _this = this;
var baseIndex = this.baseLayerIndex;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
var mainLayers = [];
var subLayers = [];
this.layersCollection = [];
Array.prototype.forEach.call(this.layers, function (layer) {
// eslint-disable-next-line @typescript-eslint/no-unused-expressions
(layer.type === 'Layer') ? mainLayers.push(layer) : subLayers.push(layer);
});
for (var i = 0; i < mainLayers.length; i++) {
var baseLayer = mainLayers[i];
if (baseLayer.visible && baseIndex === i) {
baseLayer.isBaseLayer = true;
this.isTileMap = !isNullOrUndefined(baseLayer.shapeData) ? false : true;
this.layersCollection.push(baseLayer);
break;
}
else if (i === mainLayers.length - 1) {
this.layersCollection.push(mainLayers[0]);
break;
}
}
subLayers.map(function (subLayer) {
if (subLayer.visible) {
_this.layersCollection.push(subLayer);
}
});
};
/**
* Render the map border.
*
* @private
* @returns {void}
*/
Maps.prototype.renderBorder = function () {
var width = this.border.width;
var borderElement = this.svgObject.querySelector('#' + this.element.id + '_MapBorder');
if ((width > 0 || (this.background || this.themeStyle.backgroundColor)) && isNullOrUndefined(borderElement)) {
var border = {
opacity: isNullOrUndefined(this.border.opacity) ? 1 : this.border.opacity,
color: this.border.color, width: this.border.width
};
var borderRect = new RectOption(this.element.id + '_MapBorder', this.background || this.themeStyle.backgroundColor, border, 1, new Rect(width / 2, width / 2, this.availableSize.width - width, this.availableSize.height - width));
this.svgObject.appendChild(this.renderer.drawRectangle(borderRect));
}
else {
borderElement.setAttribute('fill', this.background || this.themeStyle.backgroundColor);
}
};
/**
* Render the title and subtitle.
*
* @param {TitleSettingsModel} title - Specifies the title
* @param {string} type - Specifies the type
* @param {Rect} bounds - Specifies the bounds
* @param {Element} groupEle - Specifies the group element
* @returns {void}
* @private
*/
Maps.prototype.renderTitle = function (title, type, bounds, groupEle) {
var style = {
size: title.textStyle.size,
color: title.textStyle.color,
fontFamily: title.textStyle.fontFamily,
fontWeight: title.textStyle.fontWeight,
fontStyle: title.textStyle.fontStyle,
opacity: title.textStyle.opacity
};
var height;
var marginTop = getProcessedMarginValue(this.margin.top);
var marginBottom = getProcessedMarginValue(this.margin.bottom);
var marginLeft = getProcessedMarginValue(this.margin.left);
var marginRight = getProcessedMarginValue(this.margin.right);
var width = Math.abs((marginLeft + marginRight) - this.availableSize.width);
style.fontFamily = !isNullOrUndefined(style.fontFamily) ? style.fontFamily : this.themeStyle.fontFamily;
style.fontWeight = type === 'title' ? style.fontWeight || this.themeStyle.titleFontWeight : style.fontWeight || this.themeStyle.titleFontWeight;
style.size = type === 'title' ? (style.size || this.themeStyle.titleFontSize) : (style.size || this.themeStyle.subTitleFontSize || Theme.mapsSubTitleFont.size);
if (title.text) {
if (isNullOrUndefined(groupEle)) {
groupEle = this.renderer.createGroup({ id: this.element.id + '_Title_Group' });
}
var trimmedTitle = textTrim(width, title.text, style);
var elementSize = measureText(trimmedTitle, style);
var rect = (isNullOrUndefined(bounds)) ? new Rect(marginLeft, marginTop, this.availableSize.width, this.availableSize.height) : bounds;
var location_1 = findPosition(rect, !isNullOrUndefined(title.alignment) ? title.alignment : 'Center', elementSize, type);
var options = new TextOption(this.element.id + '_Map_' + type, location_1.x, location_1.y, 'start', trimmedTitle);
var titleBounds = new Rect(location_1.x, location_1.y, elementSize.width, elementSize.height);
var element = renderTextElement(options, style, style.color || (type === 'title' ? this.themeStyle.titleFontColor : this.themeStyle.subTitleFontColor), groupEle);
element.setAttribute('aria-label', title.text);
element.setAttribute('role', 'region');
if ((type === 'title' && !title.subtitleSettings.text) || (type === 'subtitle')) {
height = Math.abs((titleBounds.y + marginBottom) - this.availableSize.height);
this.mapAreaRect = new Rect(marginLeft, titleBounds.y + 10, width, height - 10);
}
if (type !== 'subtitle' && title.subtitleSettings.text) {
this.renderTitle(title.subtitleSettings, 'subtitle', titleBounds, groupEle);
}
else {
this.svgObject.appendChild(groupEle);
}
}
else {
height = Math.abs((marginTop + marginBottom) - this.availableSize.height);
this.mapAreaRect = new Rect(marginLeft, marginTop, width, height);
}
};
/**
* To create svg element for maps.
*
* @returns {void}
*/
Maps.prototype.createSVG = function () {
this.removeSvg();
createSvg(this);
};
/**
* To Remove the SVG.
*
* @returns {void}
*/
Maps.prototype.removeSvg = function () {
removeElement(this.element.id + '_Secondary_Element');
removeElement(this.element.id + '_tile_parent');
removeElement(this.element.id + '_tiles');
if (this.svgObject) {
while (this.svgObject.childNodes.length > 0) {
this.svgObject.removeChild(this.svgObject.firstChild);
}
if (!this.svgObject.hasChildNodes() && this.svgObject.parentNode) {
remove(this.svgObject);
}
}
this.clearTemplate();
};
/**
* To bind event handlers for maps.
*
* @returns {void}
*/
Maps.prototype.wireEVents = function () {
//let cancelEvent: string = Browser.isPointer ? 'pointerleave' : 'mouseleave';
EventHandler.add(this.element, 'click', this.mapsOnClick, this);
EventHandler.add(this.element, 'contextmenu', this.mapsOnRightClick, this);
EventHandler.add(this.element, 'dblclick', this.mapsOnDoubleClick, this);
EventHandler.add(this.element, Browser.touchStartEvent, this.mouseDownOnMap, this);
EventHandler.add(this.element, Browser.touchMoveEvent, this.mouseMoveOnMap, this);
EventHandler.add(this.element, Browser.touchEndEvent, this.mouseEndOnMap, this);
EventHandler.add(this.element, 'pointerleave mouseleave', this.mouseLeaveOnMap, this);
EventHandler.add(this.element, 'keydown', this.keyDownHandler, this);
EventHandler.add(this.element, 'keyup', this.keyUpHandler, this);
// EventHandler.add(this.element, cancelEvent, this.mouseLeaveOnMap, this);
this.resizeEvent = this.mapsOnResize.bind(this);
window.addEventListener((Browser.isTouch && ('orientation' in window && 'onorientationchange' in window)) ? 'orientationchange' : 'resize', this.resizeEvent);
};
/**
* To unbind event handlers from maps.
*
* @returns {void}
*/
Maps.prototype.unWireEVents = function () {
//let cancelEvent: string = Browser.isPointer ? 'pointerleave' : 'mouseleave';
EventHandler.remove(this.element, 'click', this.mapsOnClick);
EventHandler.remove(this.element, 'contextmenu', this.mapsOnRightClick);
EventHandler.remove(this.element, 'dblclick', this.mapsOnDoubleClick);
EventHandler.remove(this.element, Browser.touchStartEvent, this.mouseDownOnMap);
EventHandler.remove(this.element, Browser.touchMoveEvent, this.mouseMoveOnMap);
EventHandler.remove(this.element, Browser.touchEndEvent, this.mouseEndOnMap);
EventHandler.remove(this.element, 'pointerleave mouseleave', this.mouseLeaveOnMap);
EventHandler.remove(this.element, 'keydown', this.keyDownHandler);
EventHandler.remove(this.element, 'keyup', this.keyUpHandler);
//EventHandler.remove(this.element, cancelEvent, this.mouseLeaveOnMap);
window.removeEventListener((Browser.isTouch && ('orientation' in window && 'onorientationchange' in window)) ? 'orientationchange' : 'resize', this.resizeEvent);
};
/**
* This method is used to perform operations when mouse pointer leave from maps.
*
* @param {PointerEvent} e - Specifies the pointer event on maps.
* @returns {void}
* @private
*/
//eslint-disable-next-line @typescript-eslint/no-unused-vars
Maps.prototype.mouseLeaveOnMap = function (e) {
if (document.getElementsByClassName('highlightMapStyle').length > 0 && this.legendModule) {
this.legendModule.removeShapeHighlightCollection();
removeClass(document.getElementsByClassName('highlightMapStyle')[0]);
}
};
/**
* This method is used to perform operations when keyboard key from maps.
*
* @param {KeyboardEvent} event - Specifies the keyboard event on maps.
* @returns {void}
* @private
*/
Maps.prototype.keyUpHandler = function (event) {
var id = event.target['id'];
if (this.isTileMap) {
this.removeTileMap();
}
if (event.code === 'Tab' && id.indexOf('_LayerIndex_') > -1 && id.indexOf('shapeIndex') > -1) {
this.keyboardHighlightSelection(id, event);
}
else if (id.indexOf('_LayerIndex_') === -1 && id.indexOf('shapeIndex') === -1 &&
getElementsByClassName('highlightMapStyle').length > 0) {
removeClass(getElementsByClassName('highlightMapStyle')[0]);
if (this.legendSettings.visible && this.legendModule) {
this.legendModule.removeShapeHighlightCollection();
}
}
};
Maps.prototype.keyboardHighlightSelection = function (id, event) {
var key = event.type;
var layerIndex = parseInt(id.split('_LayerIndex_')[1].split('_')[0], 10);
var shapeIndex = parseInt(id.split('_shapeIndex_')[1].split('_')[0], 10);
//eslint-disable-next-line @typescript-eslint/no-explicit-any
var shapeData = this.layers[layerIndex].shapeData['features']['length'] > shapeIndex ?
this.layers[layerIndex].shapeData['features'][shapeIndex]['properties'] : null;
var dataIndex = parseInt(id.split('_dataIndex_')[1].split('_')[0], 10);
// eslint-disable-next-line @typescript-eslint/no-explicit-any
var data = isNullOrUndefined(dataIndex) ? null : this.layers[layerIndex].dataSource[dataIndex];
if (this.layers[layerIndex].selectionSettings.enable && key === 'keydown' && this.selectionModule) {
this.selectionModule.selectionsettings = this.layers[layerIndex].selectionSettings;
this.selectionModule.selectionType = 'Shape';
this.selectionModule.selectElement(event.target, layerIndex, data, shapeData);
}
else if (this.highlightModule && (this.layers[layerIndex].highlightSettings.enable && key === 'keyup' &&
!event.target.classList.contains('ShapeselectionMapStyle'))) {
this.highlightModule.highlightSettings = this.layers[l