@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,151 lines (1,149 loc) • 937 kB
JavaScript
import { isNullOrUndefined, createElement, merge, remove, animationMode, compile, Animation, SanitizeHtmlHelper, ChildProperty, Property, Complex, Collection, Fetch, extend, Component, setValue, Browser, EventHandler, Internationalization, L10n, Event, NotifyPropertyChanges, print } from '@syncfusion/ej2-base';
import { SvgRenderer, Tooltip } from '@syncfusion/ej2-svg-base';
import { DataManager, Query } from '@syncfusion/ej2-data';
import { PdfPageOrientation, PdfDocument, PdfBitmap } from '@syncfusion/ej2-pdf-export';
/* eslint-disable max-len */
/**
* Specifies the size information of an element.
*/
class Size {
constructor(width, height) {
this.width = width;
this.height = height;
}
}
/**
* To find number from string.
*
* @param {string} value Specifies the value
* @param {number} containerSize Specifies the container size
* @returns {number} Returns the number
* @private
*/
function stringToNumber(value, containerSize) {
if (typeof value !== 'string') {
return value;
}
if (!isNullOrUndefined(value)) {
return value.indexOf('%') !== -1 ? (containerSize / 100) * parseInt(value, 10) : parseInt(value, 10);
}
return null;
}
/**
* Method to calculate the width and height of the maps.
*
* @param {Maps} maps Specifies the maps instance
* @returns {void}
* @private
*/
function calculateSize(maps) {
maps.element.style.height = !isNullOrUndefined(maps.height) ? maps.height : 'auto';
maps.element.style.width = !isNullOrUndefined(maps.width) ? maps.width : 'auto';
maps.element.style.setProperty('display', 'block');
const containerWidth = maps.element.clientWidth;
const containerHeight = maps.element.clientHeight;
const containerElementWidth = (typeof maps.element.style.width === 'string') ?
stringToNumber(maps.element.style.width, containerWidth) : maps.element.style.width;
const containerElementHeight = (typeof maps.element.style.height === 'string') ?
stringToNumber(maps.element.style.height, containerHeight) : maps.element.style.height;
let availableSize = new Size(0, 0);
if (maps.width === '0px' || maps.width === '0%' || maps.height === '0%' || maps.height === '0px') {
availableSize = new Size(0, 0);
}
else {
availableSize = new Size(stringToNumber(maps.width, containerWidth) || containerWidth || containerElementWidth || 600, stringToNumber(maps.height, containerHeight) || containerHeight || containerElementHeight || (maps.isDevice ?
Math.min(window.innerWidth, window.innerHeight) : 450));
}
return availableSize;
}
/**
* Method to create svg for maps.
*
* @param {Maps} maps Specifies the map instance
* @returns {void}
* @private
*/
function createSvg(maps) {
maps.renderer = new SvgRenderer(maps.element.id);
maps.availableSize = calculateSize(maps);
maps.svgObject = maps.renderer.createSvg({
id: maps.element.id + '_svg',
width: maps.availableSize.width,
height: maps.availableSize.height
});
if (maps.width === '0px' || maps.width === '0%' || maps.height === '0%' || maps.height === '0px') {
maps.svgObject.setAttribute('height', '0');
maps.svgObject.setAttribute('width', '0');
}
}
/**
* Method to get the mouse position.
*
* @param {number} pageX - Specifies the pageX.
* @param {number} pageY - Specifies the pageY.
* @param {Element} element - Specifies the element.
* @returns {MapLocation} - Returns the location.
* @private
*/
function getMousePosition(pageX, pageY, element) {
const elementRect = element.getBoundingClientRect();
const pageXOffset = element.ownerDocument.defaultView.pageXOffset;
const pageYOffset = element.ownerDocument.defaultView.pageYOffset;
const clientTop = element.ownerDocument.documentElement.clientTop;
const clientLeft = element.ownerDocument.documentElement.clientLeft;
const positionX = elementRect.left + pageXOffset - clientLeft;
const positionY = elementRect.top + pageYOffset - clientTop;
return new MapLocation((pageX - positionX), (pageY - positionY));
}
/**
* Method to convert degrees to radians.
*
* @param {number} deg Specifies the degree value
* @returns {number} Returns the number
* @private
*/
function degreesToRadians(deg) {
return deg * (Math.PI / 180);
}
/**
* Convert radians to degrees method.
*
* @param {number} radian Specifies the radian value
* @returns {number} Returns the number
* @private
*/
function radiansToDegrees(radian) {
return radian * (180 / Math.PI);
}
/**
* Method for converting from latitude and longitude values to points.
*
* @param {number} latitude - Specifies the latitude.
* @param {number} longitude - Specifies the longitude.
* @param {number} factor - Specifies the factor.
* @param {LayerSettings} layer - Specifies the layer settings.
* @param {Maps} mapModel - Specifies the maps.
* @returns {Point} - Returns the point values.
* @private
*/
function convertGeoToPoint(latitude, longitude, factor, layer, mapModel) {
const mapSize = new Size(mapModel.mapAreaRect.width, mapModel.mapAreaRect.height);
let x;
let y;
let value;
let lat;
let lng;
let temp;
const longitudeMinMax = mapModel.baseMapBounds.longitude;
const latitudeMinMax = mapModel.baseMapBounds.latitude;
let latRadian = degreesToRadians(latitude);
const lngRadian = degreesToRadians(longitude);
const type = !isNullOrUndefined(mapModel.projectionType) ? mapModel.projectionType : 'Mercator';
const size = (mapModel.isTileMap) ? Math.pow(2, 1) * 256 : (isNullOrUndefined(factor)) ?
Math.min(mapSize.width, mapSize.height) : (Math.min(mapSize.width, mapSize.height) * factor);
if (layer.geometryType === 'Normal') {
x = isNullOrUndefined(factor) ? longitude : Math.abs((longitude - longitudeMinMax.min) * factor);
y = isNullOrUndefined(factor) ? latitude : Math.abs((latitudeMinMax.max - latitude) * factor);
}
else if (layer.geometryType === 'Geographic') {
switch (type) {
case 'Mercator': {
const pixelOrigin = new Point(size / 2, size / 2);
x = pixelOrigin.x + longitude * (size / 360);
const sinY = calculateBound(Math.sin(degreesToRadians(latitude)), -0.9999, 0.9999);
y = pixelOrigin.y + 0.5 * (Math.log((1 + sinY) / (1 - sinY))) * (-(size / (2 * Math.PI)));
break;
}
case 'Winkel3':
value = aitoff(lngRadian, latRadian);
lng = (value.x + lngRadian / (Math.PI / 2)) / 2;
lat = (value.y + latRadian) / 2;
break;
case 'Miller':
lng = lngRadian;
lat = (1.25 * Math.log(Math.tan((Math.PI / 4) + (.4 * latRadian))));
break;
case 'Eckert3':
temp = Math.sqrt(Math.PI * (4 + Math.PI));
lng = 2 / temp * lngRadian * (1 + Math.sqrt(1 - 4 * latRadian * latRadian / (Math.PI * Math.PI)));
lat = 4 / temp * latRadian;
break;
case 'AitOff':
value = aitoff(lngRadian, latRadian);
lng = value.x;
lat = value.y;
break;
case 'Eckert5':
lng = lngRadian * (1 + Math.cos(latRadian)) / Math.sqrt(2 + Math.PI);
lat = 2 * latRadian / Math.sqrt(2 + Math.PI);
break;
case 'Equirectangular':
lng = lngRadian;
lat = latRadian;
break;
case 'Eckert6': {
const epsilon = 1e-6;
temp = (1 + (Math.PI / 2)) * Math.sin(latRadian);
let delta = Infinity;
for (let i = 0; i < 10 && Math.abs(delta) > epsilon; i++) {
delta = (latRadian + (Math.sin(latRadian)) - temp) / (1 + Math.cos(latRadian));
latRadian = latRadian - delta;
}
temp = Math.sqrt(2 + Math.PI);
lng = lngRadian * (1 + Math.cos(latRadian)) / temp;
lat = 2 * latRadian / temp;
break;
}
}
x = (type === 'Mercator') ? x : roundTo(xToCoordinate(mapModel, radiansToDegrees(lng)), 3);
y = (type === 'Mercator') ? y : (-(roundTo(yToCoordinate(mapModel, radiansToDegrees(lat)), 3)));
}
return new Point(x, y);
}
/**
* @param {Maps} maps - Specifies the map control.
* @param {number} factor - Specifies the factor.
* @param {LayerSettings} currentLayer - Specifies the current layer.
* @param {Coordinate} markerData - Specifies the marker data.
* @returns {string} - Returns the path.
* @private
*/
function calculatePolygonPath(maps, factor, currentLayer, markerData) {
let path = '';
if (!isNullOrUndefined(markerData) && markerData.length > 1) {
Array.prototype.forEach.call(markerData, (data, dataIndex) => {
const lat = data.latitude;
const lng = data.longitude;
const location = (maps.isTileMap) ? convertTileLatLongToPoint(new MapLocation(lng, lat), factor, maps.tileTranslatePoint, true) : convertGeoToPoint(lat, lng, factor, currentLayer, maps);
if (dataIndex === 0) {
path += 'M ' + location.x + ' ' + location.y;
}
else {
path += ' L ' + location.x + ' ' + location.y;
}
});
path += ' z ';
}
return path;
}
/**
* Converting tile latitude and longitude to point.
*
* @param {MapLocation} center Specifies the map center location
* @param {number} zoomLevel Specifies the zoom level
* @param {MapLocation} tileTranslatePoint Specifies the tile translate point
* @param {boolean} isMapCoordinates Specifies the boolean value
* @returns {MapLocation} Returns the location value
* @private
*/
function convertTileLatLongToPoint(center, zoomLevel, tileTranslatePoint, isMapCoordinates) {
const size = Math.pow(2, zoomLevel) * 256;
const x = (center.x + 180) / 360;
const sinLatitude = Math.sin(center.y * Math.PI / 180);
const y = 0.5 - Math.log((1 + sinLatitude) / (1 - sinLatitude)) / (4 * Math.PI);
let pixelX = center.x;
let pixelY = center.y;
if (isMapCoordinates) {
pixelX = (x * size + 0.5) + tileTranslatePoint.x;
pixelY = (y * size + 0.5) + tileTranslatePoint.y;
}
return { x: pixelX, y: pixelY };
}
/**
* Method for calculate x point.
*
* @param {Maps} mapObject - Specifies the maps.
* @param {number} val - Specifies the value.
* @returns {number} - Returns the number.
* @private
*/
function xToCoordinate(mapObject, val) {
const longitudeMinMax = mapObject.baseMapBounds.longitude;
const totalSize = isNullOrUndefined(mapObject.baseSize) ? mapObject.mapAreaRect.width : mapObject.mapAreaRect.width +
(Math.abs(mapObject.baseSize.width - mapObject.mapAreaRect.width) / 2);
return Math.round(totalSize * (val - longitudeMinMax.min) / (longitudeMinMax.max - longitudeMinMax.min) * 100) / 100;
}
/**
* Method for calculate y point.
*
* @param {Maps} mapObject - Specifies the maps.
* @param {number} val - Specifies the value.
* @returns {number} - Returns the number.
* @private
*/
function yToCoordinate(mapObject, val) {
const latitudeMinMax = mapObject.baseMapBounds.latitude;
return Math.round(mapObject.mapAreaRect.height * (val - latitudeMinMax.min) / (latitudeMinMax.max - latitudeMinMax.min) * 100) / 100;
}
/**
* Method for calculate aitoff projection.
*
* @param {number} x - Specifies the x value.
* @param {number} y - Specifies the y value.
* @returns {Point} - Returns the point value.
* @private
*/
function aitoff(x, y) {
const cosy = Math.cos(y);
const sincia = sinci(acos(cosy * Math.cos(x /= 2)));
return new Point(2 * cosy * Math.sin(x) * sincia, Math.sin(y) * sincia);
}
/**
* Method to round the number.
*
* @param {number} a - Specifies the a value
* @param {number} b - Specifies the b value
* @returns {number} - Returns the number
* @private
*/
function roundTo(a, b) {
const c = Math.pow(10, b);
return (Math.round(a * c) / c);
}
/**
*
* @param {number} x - Specifies the x value
* @returns {number} - Returns the number
* @private
*/
function sinci(x) {
return x / Math.sin(x);
}
/**
*
* @param {number} a - Specifies the a value
* @returns {number} - Returns the number
* @private
*/
function acos(a) {
return Math.acos(a);
}
/**
* Method to calculate bound.
*
* @param {number} value Specifies the value
* @param {number} min Specifies the minimum value
* @param {number} max Specifies the maximum value
* @returns {number} Returns the value
* @private
*/
function calculateBound(value, min, max) {
if (!isNullOrUndefined(min)) {
value = Math.max(value, min);
}
if (!(isNullOrUndefined(max))) {
value = Math.min(value, max);
}
return value;
}
/**
* To trigger the download element.
*
* @param {string} fileName Specifies the file name
* @param {ExportType} type Specifies the type
* @param {string} url Specifies the url
* @param {boolean} isDownload Specifies whether download a file.
* @returns {void}
* @private
*/
function triggerDownload(fileName, type, url, isDownload) {
createElement('a', {
attrs: {
'download': fileName + '.' + type.toLocaleLowerCase(),
'href': url
}
}).dispatchEvent(new MouseEvent(isDownload ? 'click' : 'move', {
view: window,
bubbles: false,
cancelable: true
}));
}
/**
* Specifies the information of the position of the point in maps.
*/
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
}
/**
* Specifies the position of the legend on the map, with options to set the
* position values as percentages. The legend is placed relative to the Maps,
* ensuring responsiveness.
*/
class RelativePoint {
constructor(x, y) {
this.x = x;
this.y = y;
}
}
/**
* Defines the latitude and longitude values that define a map location.
*/
class Coordinate {
constructor(latitude, longitude) {
this.latitude = latitude;
this.longitude = longitude;
}
}
/**
* Map internal class for min and max
*
*/
class MinMax {
constructor(min, max) {
this.min = min;
this.max = max;
}
}
/**
* Map internal class locations
*/
class GeoLocation {
constructor(latitude, longitude) {
this.latitude = new MinMax(latitude.min, latitude.max);
this.longitude = new MinMax(longitude.min, longitude.max);
}
}
/**
* Function to measure the height and width of the text.
*
* @param {string} text Specifies the text
* @param {FontModel} font Specifies the font
* @returns {Size} Returns the size
* @private
*/
function measureText(text, font) {
let measureObject = document.getElementById('mapsmeasuretext');
if (measureObject === null) {
measureObject = document.createElement('text');
measureObject.id = 'mapsmeasuretext';
document.body.appendChild(measureObject);
}
measureObject.innerText = text;
measureObject.style.cssText = 'position: absolute; font-size: ' + (typeof (font.size) === 'number' ? (font.size + 'px') : font.size) +
'; font-weight: ' + font.fontWeight + '; font-style: ' + font.fontStyle + '; font-family: ' + font.fontFamily +
'; visibility: hidden; top: -100; left: 0; whiteSpace: nowrap; lineHeight: normal';
return new Size(measureObject.clientWidth, measureObject.clientHeight);
}
/**
* @param {string} text - Specifies the text.
* @param {FontModel} font - Specifies the font.
* @returns {Size} - Returns the size of text.
* @private
*/
function measureTextElement(text, font) {
let canvas = document.createElement('canvas');
// eslint-disable-next-line @typescript-eslint/tslint/config
const context = canvas.getContext('2d');
context.font = `${font.fontStyle} ${font.fontWeight} ${typeof font.size === 'number' ? font.size + 'px' : font.size} ${font.fontFamily}`;
const metrics = context.measureText(text);
const width = metrics.width;
const height = parseFloat(font.size) || 16;
canvas = null;
return new Size(width, height);
}
/**
* Internal use of text options.
*
* @private
*/
class TextOption {
constructor(id, x, y, anchor, text, transform = '', baseLine) {
this.transform = '';
this.baseLine = 'auto';
this.id = id;
this.text = text;
this.transform = transform;
this.anchor = anchor;
this.x = x;
this.y = y;
this.baseLine = baseLine;
}
}
/**
* Internal use of path options.
*
* @private
*/
class PathOption {
constructor(id, fill, width, color, fillOpacity, strokeOpacity, dashArray, d) {
this.id = id;
this['fill-opacity'] = fillOpacity;
this['stroke-opacity'] = strokeOpacity;
this.fill = fill;
this.stroke = color;
this['stroke-width'] = width;
this['stroke-dasharray'] = dashArray;
this.d = d;
}
}
/** @private */
class ColorValue {
constructor(r, g, b) {
this.r = r;
this.g = g;
this.b = b;
}
}
/**
* Internal use of rectangle options.
*
* @private
*/
class RectOption extends PathOption {
constructor(id, fill, border, fillOpacity, rect, rx, ry, transform, dashArray) {
super(id, fill, border.width, border.color, fillOpacity, border.opacity);
this.y = rect.y;
this.x = rect.x;
this.height = rect.height;
this.width = rect.width;
this.rx = rx ? rx : 0;
this.ry = ry ? ry : 0;
this.transform = transform ? transform : '';
this['stroke-dasharray'] = dashArray;
this['fill-opacity'] = fillOpacity;
this['stroke-opacity'] = border.opacity;
}
}
/**
* Internal use of circle options.
*
* @private
*/
class CircleOption extends PathOption {
constructor(id, fill, border, fillOpacity, cx, cy, r, dashArray) {
super(id, fill, border.width, border.color, fillOpacity, border.opacity, dashArray);
this.cy = cy;
this.cx = cx;
this.r = r;
this['stroke-dasharray'] = dashArray;
this['fill-opacity'] = fillOpacity;
this['stroke-opacity'] = border.opacity;
}
}
/**
* Internal use of polygon options.
*
* @private
*/
class PolygonOption extends PathOption {
constructor(id, points, fill, width, color, fillOpacity = 1, strokeOpacity = 1, dashArray = '') {
super(id, fill, width, color, fillOpacity, strokeOpacity, dashArray);
this.points = points;
}
}
/**
* Internal use of polyline options.
*
* @private
*/
class PolylineOption extends PolygonOption {
constructor(id, points, fill, width, color, fillOpacity = 1, strokeOpacity = 1, dashArray = '') {
super(id, points, fill, width, color, fillOpacity, strokeOpacity, dashArray);
}
}
/**
* Internal use of line options.
*
* @private
*/
class LineOption extends PathOption {
constructor(id, line, fill, width, color, fillOpacity = 1, strokeOpacity = 1, dashArray = '') {
super(id, fill, width, color, fillOpacity, strokeOpacity, dashArray);
this.x1 = line.x1;
this.y1 = line.y1;
this.x2 = line.x2;
this.y2 = line.y2;
}
}
/**
* Internal use of line.
*
* @property {number} Line - Specifies the line class
* @private
*/
class Line {
constructor(x1, y1, x2, y2) {
this.x1 = x1;
this.y1 = y1;
this.x2 = x2;
this.y2 = y2;
}
}
/**
* Internal use of map location type.
*
* @private
*/
class MapLocation {
constructor(x, y) {
this.x = x;
this.y = y;
}
}
/**
* Internal use of type rect.
*
* @private
*/
class Rect {
constructor(x, y, width, height) {
this.x = x;
this.y = y;
this.width = width;
this.height = height;
}
}
/**
* Internal use for pattern creation.
*
* @property {PatternOptions} PatternOptions - Specifies the pattern option class.
* @private
*/
class PatternOptions {
constructor(id, x, y, width, height, patternUnits = 'userSpaceOnUse', patternContentUnits = 'userSpaceOnUse', patternTransform = '', href = '') {
this.id = id;
this.x = x;
this.y = y;
this.width = width;
this.height = height;
this.patternUnits = patternUnits;
this.patternContentUnits = patternContentUnits;
this.patternTransform = patternTransform;
this.href = href;
}
}
/**
* Internal rendering of text.
*
* @param {TextOption} option Specifies the text option
* @param {FontModel} style Specifies the style
* @param {string} color Specifies the color
* @param {HTMLElement | Element} parent Specifies the parent element
* @param {boolean} isMinus Specifies the boolean value
* @returns {Element} Returns the html object
* @private
*/
function renderTextElement(option, style, color, parent, isMinus = false) {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const renderOptions = {
'id': option.id,
'x': option.x,
'y': option.y,
'fill': color,
'font-size': style.size,
'font-style': style.fontStyle,
'font-family': style.fontFamily,
'font-weight': style.fontWeight,
'text-anchor': option.anchor,
'transform': option.transform,
'opacity': style.opacity,
'dominant-baseline': option.baseLine
};
const text = typeof option.text === 'string' || typeof option.text === 'number' ? option.text : isMinus ? option.text[option.text.length - 1] : option.text[0];
let tspanElement;
const renderer = new SvgRenderer('');
let height;
const htmlObject = renderer.createText(renderOptions, text);
htmlObject.style['user-select'] = 'none';
htmlObject.style['font-family'] = style.fontFamily;
htmlObject.style['font-size'] = style.size;
htmlObject.style['font-weight'] = style.fontWeight;
htmlObject.style['font-color'] = style.color;
htmlObject.style['-moz-user-select'] = 'none';
htmlObject.style['-webkit-touch-callout'] = 'none';
htmlObject.style['-webkit-user-select'] = 'none';
htmlObject.style['-khtml-user-select'] = 'none';
htmlObject.style['-ms-user-select'] = 'none';
htmlObject.style['-o-user-select'] = 'none';
if (typeof option.text !== 'string' && option.text.length > 1) {
for (let i = 1, len = option.text.length; i < len; i++) {
height = (measureText(option.text[i], style).height);
tspanElement = renderer.createTSpan({
'x': option.x, 'id': option.id,
'y': (option.y) + ((isMinus) ? -(i * height) : (i * height))
}, isMinus ? option.text[option.text.length - (i + 1)] : option.text[i]);
htmlObject.appendChild(tspanElement);
}
}
parent.appendChild(htmlObject);
return htmlObject;
}
/**
* @param {HTMLCollection} element - Specifies the html collection
* @param {string} markerId - Specifies the marker id
* @param {object} data - Specifies the data
* @param {number} index - Specifies the index
* @param {Maps} mapObj - Specifies the map object
* @param {string} templateType - Specifies the template type
* @returns {HTMLElement} - Returns the html element
* @private
*/
function convertElement(element, markerId, data, index, mapObj, templateType) {
const childElement = createElement('div', {
id: markerId, className: mapObj.element.id + '_marker_template_element'
});
childElement.style.cssText = 'position: absolute;pointer-events: auto;';
let elementLength = element.length;
while (elementLength > 0) {
childElement.appendChild(element[0]);
elementLength--;
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
if (!mapObj.isReact || templateType !== 'function') {
let templateHtml = childElement.innerHTML;
const properties = Object.keys(data);
const regExp = RegExp;
for (let i = 0; i < properties.length; i++) {
if (typeof data[properties[i]] === 'object') {
templateHtml = convertStringToValue(templateHtml, '', data, mapObj);
// eslint-disable-next-line @typescript-eslint/ban-types
}
else if (properties[i].toLowerCase() !== 'latitude' && properties[i].toLowerCase() !== 'longitude') {
templateHtml = templateHtml.replace(new regExp('{{:' + properties[i] + '}}', 'g'), data[properties[i].toString()]);
}
}
childElement.innerHTML = templateHtml;
}
return childElement;
}
/**
*
* @param {string} value - Specifies the value
* @param {Maps} maps - Specifies the instance of the maps
* @returns {string} - Returns the string value
* @private
*/
function formatValue(value, maps) {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
let formatValue;
let formatFunction;
if (maps.format && !isNaN(Number(value))) {
formatFunction = maps.intl.getNumberFormat({ format: maps.format, useGrouping: maps.useGroupingSeparator });
formatValue = formatFunction(Number(value));
}
else {
formatValue = value;
}
return formatValue;
}
/**
*
* @param {string} stringTemplate - Specifies the template
* @param {string} format - Specifies the format
* @param {object} data - Specifies the data
* @param {Maps} maps - Specifies the instance of the maps
* @returns {string} - Returns the string value
* @private
*/
function convertStringToValue(stringTemplate, format, data, maps) {
let templateHtml = (stringTemplate === '') ? format : stringTemplate;
const templateValue = (stringTemplate === '') ? templateHtml.split('${') : templateHtml.split('{{:');
const regExp = RegExp;
for (let i = 0; i < templateValue.length; i++) {
if ((templateValue[i].indexOf('}}') > -1 && templateValue[i].indexOf('.') > -1) ||
(templateValue[i].indexOf('}') > -1 && templateValue[i].search('.') > -1)) {
const split = (stringTemplate === '') ? templateValue[i].split('}') : templateValue[i].split('}}');
for (let j = 0; j < split.length; j++) {
if (split[j].indexOf('.') > -1) {
const templateSplitValue = (getValueFromObject(data, split[j])).toString();
templateHtml = (stringTemplate === '') ?
templateHtml.split('${' + split[j] + '}').join(formatValue(templateSplitValue, maps)) :
templateHtml.replace(new regExp('{{:' + split[j] + '}}', 'g'), templateSplitValue);
}
}
}
}
return templateHtml;
}
/**
*
* @param {Element} element - Specifies the element
* @param {string} labelId - Specifies the label id
* @param {object} data - Specifies the data
* @returns {HTMLElement} - Returns the html element
* @private
*/
function convertElementFromLabel(element, labelId, data) {
const labelEle = isNullOrUndefined(element.childElementCount) ? element[0] : element;
let templateHtml = labelEle.outerHTML;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const properties = Object.keys(data);
const regExp = RegExp;
for (let i = 0; i < properties.length; i++) {
// eslint-disable-next-line @typescript-eslint/ban-types
templateHtml = templateHtml.replace(new regExp('{{:' + properties[i] + '}}', 'g'), data[properties[i].toString()]);
}
const templateEle = createElement('div', {
id: labelId,
innerHTML: templateHtml
});
templateEle.style.position = 'absolute';
return templateEle;
}
/**
*
* @param {MarkerType} shape - Specifies the shape
* @param {string} imageUrl - Specifies the image url
* @param {Point} location - Specifies the location
* @param {string} markerID - Specifies the marker id
* @param {any} shapeCustom - Specifies the shape custom
* @param {Element} markerCollection - Specifies the marker collection
* @param {Maps} maps - Specifies the instance of the maps
* @returns {Element} - Returns the element
* @private
*/
// eslint-disable-next-line @typescript-eslint/no-explicit-any
function drawSymbols(shape, imageUrl, location, markerID, shapeCustom, markerCollection, maps) {
let markerEle;
let x;
let y;
const size = shapeCustom['size'];
const borderColor = shapeCustom['borderColor'];
const borderWidth = parseFloat(shapeCustom['borderWidth']);
const borderOpacity = parseFloat(shapeCustom['borderOpacity']);
const fill = shapeCustom['fill'];
const dashArray = shapeCustom['dashArray'];
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const border = { color: borderColor, width: borderWidth, opacity: borderOpacity };
const opacity = shapeCustom['opacity'];
let rectOptions;
const pathOptions = new PathOption(markerID, fill, borderWidth, borderColor, opacity, borderOpacity, dashArray, '');
size.width = typeof (size.width) === 'string' ? parseInt(size.width, 10) : size.width;
size.height = typeof (size.height) === 'string' ? parseInt(size.height, 10) : size.height;
if (shape === 'Circle') {
const radius = (size.width + size.height) / 4;
const circleOptions = new CircleOption(markerID, fill, border, opacity, location.x, location.y, radius, dashArray);
markerEle = maps.renderer.drawCircle(circleOptions);
}
else if (shape === 'Rectangle') {
x = location.x - (size.width / 2);
y = location.y - (size.height / 2);
rectOptions = new RectOption(markerID, fill, border, opacity, new Rect(x, y, size.width, size.height), null, null, '', dashArray);
markerEle = maps.renderer.drawRectangle(rectOptions);
}
else if (shape === 'Image') {
x = location.x - (size.width / 2);
y = location.y - (markerID.indexOf('cluster') > -1 ? (size.height / 2) : size.height);
merge(pathOptions, { 'href': imageUrl, 'height': size.height, 'width': size.width, x: x, y: y });
markerEle = maps.renderer.drawImage(pathOptions);
}
else {
markerEle = calculateShapes(maps, shape, pathOptions, size, location, markerCollection);
}
return markerEle;
}
/**
*
* @param {object} data - Specifies the data
* @param {string} value - Specifies the value
* @returns {any} - Returns the data
* @private
*/
// eslint-disable-next-line @typescript-eslint/no-explicit-any
function getValueFromObject(data, value) {
if (!isNullOrUndefined(data) && !isNullOrUndefined(value)) {
const splits = value.replace(/\[/g, '.').replace(/\]/g, '').split('.');
if (splits.length === 1) {
data = data[splits[0]];
}
else {
for (let i = 0; i < splits.length && !isNullOrUndefined(data); i++) {
data = data[splits[i]];
}
}
}
return data;
}
/**
*
* @param {IMarkerRenderingEventArgs} eventArgs - Specifies the event arguments
* @param {object} data - Specifies the data
* @returns {IMarkerRenderingEventArgs} - Returns the arguments
* @private
*/
function markerColorChoose(eventArgs, data) {
const color = (!isNullOrUndefined(eventArgs.colorValuePath)) ? ((eventArgs.colorValuePath.indexOf('.') > -1) ? (getValueFromObject(data, eventArgs.colorValuePath)).toString() :
data[eventArgs.colorValuePath]) : data[eventArgs.colorValuePath];
eventArgs.fill = (!isNullOrUndefined(eventArgs.colorValuePath) &&
!isNullOrUndefined(color)) ?
((eventArgs.colorValuePath.indexOf('.') > -1) ? (getValueFromObject(data, eventArgs.colorValuePath)).toString() :
data[eventArgs.colorValuePath]) : eventArgs.fill;
return eventArgs;
}
/**
*
* @param {IMarkerRenderingEventArgs} eventArgs - Specifies the event arguments
* @param {object} data - Specifies the data
* @returns {IMarkerRenderingEventArgs} - Returns the arguments
* @private
*/
function markerShapeChoose(eventArgs, data) {
if (!isNullOrUndefined(eventArgs.shapeValuePath) && !isNullOrUndefined(data[eventArgs.shapeValuePath])) {
updateShape(eventArgs, data);
if (data[eventArgs.shapeValuePath] === 'Image') {
updateImageUrl(eventArgs, data);
}
}
else {
updateShape(eventArgs, data);
updateImageUrl(eventArgs, data);
}
return eventArgs;
}
/**
*
* @param {any} path - contains a dot, it implies that the desired property is nested within the object.
* @param {any} data - The data object from which the value is to be retrieved. This can be any object that contains the properties specified in the path.
* @returns {any} - Returns the value of the property specified in the path.
* @private
*/
// eslint-disable-next-line @typescript-eslint/no-explicit-any
function getValue(path, data) {
return (path.indexOf('.') > -1) ? getValueFromObject(data, path).toString() : data[path];
}
/**
*
* @param {any} eventArgs - Specifies the event arguments
* @param {any} data - Specifies the data
* @private
*/
// eslint-disable-next-line @typescript-eslint/no-explicit-any
function updateShape(eventArgs, data) {
if (!isNullOrUndefined(eventArgs.shapeValuePath)) {
const shape = getValue(eventArgs.shapeValuePath, data);
eventArgs.shape = (!isNullOrUndefined(shape) && shape.toString() !== '') ? shape : eventArgs.shape;
}
}
/**
*
* @param {any} eventArgs - Specifies the event arguments
* @param {any} data - Specifies the data
* @private
*/
// eslint-disable-next-line @typescript-eslint/no-explicit-any
function updateImageUrl(eventArgs, data) {
if (!isNullOrUndefined(eventArgs.imageUrlValuePath)) {
const imageUrl = getValue(eventArgs.imageUrlValuePath, data);
eventArgs.imageUrl = (!isNullOrUndefined(imageUrl)) ? imageUrl : eventArgs.imageUrl;
}
}
/**
*
* @param {LayerSettings} currentLayer - Specifies the current layer
* @param {HTMLElement | Element} markerTemplate - Specifies the marker template
* @param {Maps} maps - Specifies the instance of the maps
* @param {number} layerIndex - Specifies the layer index
* @param {number} markerIndex - Specifies the marker index
* @param {Element} markerCollection - Specifies the marker collection
* @param {Element} layerElement - Specifies the layer element
* @param {boolean} check - Specifies the boolean value
* @param {boolean} zoomCheck - Specifies the boolean value
* @param {any} translatePoint - Specifies the data
* @param {boolean} allowInnerClusterSetting - Specifies the boolean value
* @returns {boolean} -Returns boolean for cluster completion
* @private
*/
function clusterTemplate(currentLayer, markerTemplate, maps, layerIndex, markerIndex, markerCollection,
// eslint-disable-next-line @typescript-eslint/no-explicit-any
layerElement, check, zoomCheck, translatePoint, allowInnerClusterSetting) {
let bounds1;
let bounds2;
let colloideBounds = [];
let clusterColloideBounds = [];
let tempX = 0;
let tempY = 0;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
let data;
const markerSetting = currentLayer.markerSettings[markerIndex];
let options;
let textElement;
let tempElement1;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
let shapeCustom;
let tempElement;
const postionY = (15 / 4);
let m = 0;
let indexCollection = [];
const clusters = !allowInnerClusterSetting && currentLayer.markerClusterSettings.allowClustering ?
currentLayer.markerClusterSettings : markerSetting.clusterSettings;
const style = clusters.labelStyle;
const clusterGroup = maps.renderer.createGroup({ id: maps.element.id + '_LayerIndex_' + layerIndex + '_markerCluster' });
const eventArg = {
cancel: false, name: markerClusterRendering, fill: clusters.fill, height: clusters.height,
width: clusters.width, imageUrl: clusters.imageUrl, shape: clusters.shape,
data: data, maps: maps, cluster: clusters, border: clusters.border
};
const containerRect = maps.element.getBoundingClientRect();
// eslint-disable-next-line @typescript-eslint/no-unused-expressions
(maps.isTileMap) ? new Object() : getTranslate(maps, currentLayer, false);
let factor;
if (!maps.isTileMap) {
factor = maps.mapLayerPanel.calculateFactor(currentLayer);
}
let isClusteringCompleted = false;
const currentZoomFactor = !maps.isTileMap ? maps.mapScaleValue : maps.tileZoomLevel;
const markerGroup = (markerSetting.clusterSettings.allowClustering
|| (currentLayer.markerClusterSettings.allowClustering && currentLayer.markerSettings.length > 1))
? markerTemplate.querySelectorAll(`[id*='LayerIndex_${layerIndex}_MarkerIndex_${markerIndex}']:not([id*='_Group'])`)
: markerTemplate.childNodes;
// eslint-disable-next-line @typescript-eslint/no-unused-vars
maps.trigger('markerClusterRendering', eventArg, (clusterargs) => {
Array.prototype.forEach.call(markerGroup, (markerElement, o) => {
indexCollection = [];
if (markerElement['style']['visibility'] !== 'hidden') {
tempElement = markerElement;
bounds1 = tempElement.getBoundingClientRect();
indexCollection.push(o);
if (!isNullOrUndefined(bounds1)) {
const list = (maps.markerModule.zoomedMarkerCluster.length > 0 && maps.markerModule.zoomedMarkerCluster[layerIndex] && maps.markerModule.zoomedMarkerCluster[layerIndex][o] && maps.markerModule.zoomedMarkerCluster[layerIndex][o].length > 0)
|| (maps.markerModule.initialMarkerCluster.length > 0 && maps.markerModule.initialMarkerCluster[layerIndex] && maps.markerModule.initialMarkerCluster[layerIndex][o] && maps.markerModule.initialMarkerCluster[layerIndex][o].length > 0) ?
(maps.previousScale < currentZoomFactor ? maps.markerModule.zoomedMarkerCluster[layerIndex][o] : maps.markerModule.initialMarkerCluster[layerIndex][o]) : null;
if (!isNullOrUndefined(list) && list.length !== 0 && !markerSetting.clusterSettings.allowClustering) {
Array.prototype.forEach.call(list, (currentIndex) => {
if (o !== currentIndex) {
const otherMarkerElement = document.getElementById(maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_'
+ markerIndex + '_dataIndex_' + currentIndex);
if (otherMarkerElement && otherMarkerElement['style']['visibility'] !== 'hidden') {
markerBoundsComparer(otherMarkerElement, bounds1, colloideBounds, indexCollection, currentIndex);
}
}
});
}
else {
Array.prototype.forEach.call(markerGroup, (otherMarkerElement, p) => {
if (p >= o + 1 && otherMarkerElement['style']['visibility'] !== 'hidden') {
markerBoundsComparer(otherMarkerElement, bounds1, colloideBounds, indexCollection, p);
}
});
}
markerClusterListHandler(maps, currentZoomFactor, layerIndex, o, indexCollection);
tempX = bounds1.left + bounds1.width / 2;
tempY = bounds1.top + bounds1.height;
if (colloideBounds.length > 0) {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
indexCollection = indexCollection.filter((item, index, value) => value.indexOf(item) === index);
tempX = tempX - containerRect['left'];
tempY = (tempY - ((maps.availableSize.height <= containerRect['height']) ?
containerRect['top'] : (containerRect['bottom'] - containerRect['top'])));
const dataIndex = parseInt(markerElement['id'].split('_dataIndex_')[1].split('_')[0], 10);
const markerIndex = parseInt(markerElement['id'].split('_MarkerIndex_')[1].split('_')[0], 10);
const markerSetting = currentLayer.markerSettings[markerIndex];
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const markerData = markerSetting.dataSource[dataIndex];
let location;
const longitude = (!isNullOrUndefined(markerSetting.longitudeValuePath)) ?
Number(getValueFromObject(markerData, markerSetting.longitudeValuePath)) :
!isNullOrUndefined(markerData['longitude']) ? parseFloat(markerData['longitude']) :
!isNullOrUndefined(markerData['Longitude']) ? parseFloat(markerData['Longitude']) : 0;
const latitude = (!isNullOrUndefined(markerSetting.latitudeValuePath)) ?
Number(getValueFromObject(markerData, markerSetting.latitudeValuePath)) :
!isNullOrUndefined(markerData['latitude']) ? parseFloat(markerData['latitude']) :
!isNullOrUndefined(markerData['Latitude']) ? parseFloat(markerData['Latitude']) : 0;
if (!maps.isTileMap) {
location = convertGeoToPoint(latitude, longitude, factor, currentLayer, maps);
}
else if (maps.isTileMap) {
location = convertTileLatLongToPoint(new Point(longitude, latitude), maps.tileZoomLevel, maps.tileTranslatePoint, true);
}
markerElement['style']['visibility'] = 'hidden';
if (eventArg.cancel) {
shapeCustom = {
size: new Size(clusters.width, clusters.height),
fill: clusters.fill, borderColor: clusters.border.color,
borderWidth: clusters.border.width, opacity: clusters.opacity,
dashArray: clusters.dashArray, imageUrl: clusters.imageUrl, shape: clusters.shape
};
shapeCustom['borderOpacity'] = isNullOrUndefined(clusters.border.opacity) ? clusters.opacity : clusters.border.opacity;
}
else {
shapeCustom = {
size: new Size(eventArg.width, eventArg.height),
fill: eventArg.fill, borderColor: eventArg.border.color,
borderWidth: eventArg.border.width, opacity: clusters.opacity,
dashArray: clusters.dashArray, imageUrl: eventArg.imageUrl,
shape: eventArg.shape
};
shapeCustom['borderOpacity'] = isNullOrUndefined(eventArg.border.opacity) ? clusters.opacity : eventArg.border.opacity;
}
tempX = (maps.isTileMap) ? tempX : (markerTemplate.id.indexOf('_Markers_Group') > -1) ? tempX : tempX + postionY - (eventArg.width / 2);
tempY = (maps.isTileMap) ? tempY : (markerTemplate.id.indexOf('_Markers_Group') > -1) ? tempY : tempY - (eventArg.height / 2);
if (maps.isTileMap) {
tempX = location.x;
tempY = location.y;
}
else {
tempX = (((location.x + ((!isNullOrUndefined(maps.translatePoint) && maps.translatePoint.x !== 0 && !maps.isResize) ? maps.translatePoint.x : translatePoint.location.x)) * (isNullOrUndefined(maps.scale) ? translatePoint.scale : maps.scale)) + markerSetting.offset.x);
tempY = (((location.y + ((!isNullOrUndefined(maps.translatePoint) && maps.translatePoint.y !== 0 && !maps.isResize) ? maps.translatePoint.y : translatePoint.location.y)) * (isNullOrUndefined(maps.scale) ? translatePoint.scale : maps.scale)) + markerSetting.offset.y);
}
const clusterID = maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_' + markerIndex + '_dataIndex_' + dataIndex + '_cluster_' + (m);
const labelID = maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_' + markerIndex + '_dataIndex_' + dataIndex + '_cluster_' + (m) + '_datalabel_' + m;
m++;
const ele = drawSymbols(shapeCustom['shape'], shapeCustom['imageUrl'], { x: 0, y: 0 }, clusterID, shapeCustom, markerCollection, maps);
ele.setAttribute('transform', 'translate( ' + tempX + ' ' + tempY + ' )');
if (eventArg.shape === 'Balloon') {
ele.children[0].textContent = indexCollection.toString();
}
else {
ele.textContent = indexCollection.toString();
}
options = new TextOption(labelID, (0), postionY, 'middle', (colloideBounds.length + 1).toString(), '', '');
textElement = renderTextElement(options, style, style.color, markerCollection);
textElement.setAttribute('transform', 'translate( ' + tempX + ' ' + tempY + ' )');
const eleMarkerIndex = parseFloat(ele.id.split('_MarkerIndex_')[1]);
if ((markerSetting.clusterSettings.allowClustering && eleMarkerIndex === markerIndex) ||
(currentLayer.markerClusterSettings.allowClustering && currentLayer.markerSettings.length > 1 && eleMarkerIndex === markerIndex)) {
clusterGroup.appendChild(ele);
clusterGroup.appendChild(textElement);
}
else {
clusterGroup.appendChild(textElement);
clusterGroup.appendChild(ele);
}
}
}
colloideBounds = [];
}
else {
markerClusterListHandler(maps, currentZoomFactor, layerIndex, o, indexCollection);
}
isClusteringCompleted = true;
});
layerElement.appendChild(clusterGroup);
maps.svgObject.appendChild(layerElement);
maps.element.appendChild(maps.svgObject);
if (clusters.allowDeepClustering && !allowInnerClusterSetting) {
Array.prototype.forEach.call(clusterGroup.childNodes, (clusterElement, o) => {
if (clusterElement['style']['visibility'] !== 'hidden') {
tempElement = clusterElement;
bounds1 = tempElement.getBoundingClientRect();
if (!isNullOrUndefined(bounds1) && !(tempElement.id.indexOf('_datalabel_') > -1)) {
for (let p = o + 1; p < clusterGroup.childElementCount; p++) {
if (clusterGroup.childNodes[p]['style']['visibility'] !== 'hidden') {
tempElement1 = clusterGroup.childNodes[p];
bounds2 = tempElement1.getBoundingClientRect();
if (!isNullOrUndefined(bounds2) && !(tempElement1.id.indexOf('_datalabel_') > -1)) {
if (!(bounds1.left > bounds2.right || bounds1.right < bounds2.left
|| bounds1.top > bounds2.bottom || bounds1.bottom < bounds2.top)) {
clusterColloideBounds.push(tempElement1);
clusterColloideBounds.push(clusterGroup.childNodes[p - 1]);
clusterGroup.childNodes[p]['style']['visibility'] = 'hidden';
let eleMarkerIndex = !isNullOrUndefined(clusterGroup.childNodes[p + 1]) ?
parseFloat(clusterGroup.childNodes[p + 1].id.split('_MarkerIndex_')[1]) : null;
if ((markerSetting.clusterSettings.allowClustering && eleMarkerIndex === markerIndex) ||
(currentLayer.markerClusterSettings.allowClustering && currentLayer.markerSettings.length > 1 && eleMarkerIndex === markerIndex)) {
clusterGroup.childNodes[p + 1]['style']['visibility'] = 'hidden';
}
else {
eleMarkerIndex = parseFloat(clusterGroup.childNodes[p - 1].id.split('_MarkerIndex_')[1]);
clusterGroup.childNodes[p - 1]['style']['visibility'] = (eleMarkerIndex === markerIndex) ? 'hidden' : clusterGroup.childNodes[p - 1]['style']['visibility'];
}
indexCollection.push(p);
}
}
}
}
if (clusterColloideBounds.length > 0) {
tempElement = clusterElement;