Socket
Socket
Sign inDemoInstall

@syncfusion/ej2-maps

Package Overview
Dependencies
Maintainers
3
Versions
168
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@syncfusion/ej2-maps - npm Package Compare versions

Comparing version 24.2.9 to 25.1.35

14

CHANGELOG.md

@@ -13,2 +13,12 @@ <!-- markdownlint-disable MD010 -->

#### New Features
- `#I544447` - Maps will display data labels with improved performance when multiple layers are set.
- `#I524572` - The threshold limit for rendering the markers and marker clusters has now been increased, with improved performance to a decent extent. Nearly 6,000 markers can now be rendered and clustered, with enhanced rendering, zooming, and panning functionalities.
- The tooltip and its template can now be displayed over the polygon shapes in the Maps. Tooltip templates can include custom items such as images, text, and HTML elements.
## 24.2.4 (2024-02-06)
### Maps
#### Bug Fixes

@@ -78,3 +88,3 @@

- An animated transition will now occur on the initial rendering of data labels and not during any dynamic updates.
- An animation transition will now occur when the data labels are first rendered.

@@ -451,3 +461,3 @@ #### Bug Fixes

- `#I240833` - Some labels disappear when you change "colorMapping" and refresh the map issue has been fixed.
- `I240804` - The issue with dynamically updating the zoom factor has been fixed
- `I240804` - The issue with dynamically updating the zoom factor has been fixed.
- `I241873` - The issue with zooming the map component with a single click has been fixed

@@ -454,0 +464,0 @@

2

dist/global/index.d.ts
/*!
* filename: index.d.ts
* version : 24.2.9
* version : 25.1.35
* Copyright Syncfusion Inc. 2001 - 2023. All rights reserved.

@@ -5,0 +5,0 @@ * Use of this code is subject to the terms of our license.

26

package.json
{
"_from": "@syncfusion/ej2-maps@*",
"_id": "@syncfusion/ej2-maps@24.2.3",
"_id": "@syncfusion/ej2-maps@16.42.7",
"_inBundle": false,
"_integrity": "sha512-BaaTF4jeFZlhezCjeUOzd7aQM/3otxJo5NGf/qauIMwrYjSq22pdOPme89Ptnu64FW3tEua9lUxZ5R3dGOK16g==",
"_integrity": "sha512-NlcqBKvee5acIzRhuW6lTfmKVWkT3FvyKs3eSTanBYPLHOgQ2RvL7o3QCH0YhoqWHtSm/DlwKxR9ZN2qqv7//g==",
"_location": "/@syncfusion/ej2-maps",

@@ -26,6 +26,6 @@ "_phantomChildren": {},

],
"_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-maps/-/ej2-maps-24.2.3.tgz",
"_shasum": "8d7d8c62ba2b21ab6c14b3f5a2e37cb3fdbdbd23",
"_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-release/@syncfusion/ej2-maps/-/ej2-maps-16.42.7.tgz",
"_shasum": "fc9aee98313d4f59d93909fbcb1bbe912d0a2ce2",
"_spec": "@syncfusion/ej2-maps@*",
"_where": "/jenkins/workspace/elease-automation_release_24.1.1/packages/included",
"_where": "/jenkins/workspace/elease-automation_release_25.1.1/packages/included",
"author": {

@@ -39,9 +39,9 @@ "name": "Syncfusion Inc."

"dependencies": {
"@syncfusion/ej2-base": "~24.2.7",
"@syncfusion/ej2-buttons": "~24.2.7",
"@syncfusion/ej2-compression": "~24.2.3",
"@syncfusion/ej2-data": "~24.2.3",
"@syncfusion/ej2-file-utils": "~24.2.3",
"@syncfusion/ej2-pdf-export": "~24.2.3",
"@syncfusion/ej2-svg-base": "~24.2.3"
"@syncfusion/ej2-base": "~25.1.35",
"@syncfusion/ej2-buttons": "~25.1.35",
"@syncfusion/ej2-compression": "~25.1.35",
"@syncfusion/ej2-data": "~25.1.35",
"@syncfusion/ej2-file-utils": "~25.1.35",
"@syncfusion/ej2-pdf-export": "~25.1.35",
"@syncfusion/ej2-svg-base": "~25.1.35"
},

@@ -98,4 +98,4 @@ "deprecated": false,

"typings": "index.d.ts",
"version": "24.2.9",
"version": "25.1.35",
"sideEffects": false
}

5

src/maps/layers/bubble.js

@@ -227,6 +227,6 @@ import { ColorMapping, bubbleRendering } from '../index';

var index = parseInt(id[1].split('_')[0], 10);
var layer = this.maps.layers[index];
// eslint-disable-next-line @typescript-eslint/no-explicit-any
var data;
if (target.indexOf('_BubbleIndex_') > -1) {
var layer = this.maps.layers[index];
var bubbleIndex = parseInt(id[1].split('_BubbleIndex_')[1], 10);

@@ -281,4 +281,3 @@ var dataIndex = parseInt(id[1].split('_BubbleIndex_')[1].split('_dataIndex_')[1], 10);

this.bubbleCollection = [];
//TODO: Calling the below code throws spec issue.
//this.maps = null;
this.maps = null;
};

@@ -285,0 +284,0 @@ return Bubble;

1

src/maps/layers/color-mapping.d.ts

@@ -7,3 +7,2 @@ import { Maps } from '../../index';

export declare class ColorMapping {
private maps;
constructor(maps: Maps);

@@ -10,0 +9,0 @@ /**

1

src/maps/layers/color-mapping.js

@@ -9,3 +9,2 @@ import { ColorValue } from '../index';

function ColorMapping(maps) {
this.maps = maps;
}

@@ -12,0 +11,0 @@ /**

36

src/maps/layers/data-label.js

@@ -1,2 +0,2 @@

import { findMidPointOfPolygon, Rect, filter, getTemplateFunction, getZoomTranslate, getTranslate, RectOption, convertElementFromLabel, Point, TextOption, renderTextElement, textTrim, measureText, Internalize } from '../utils/helper';
import { findMidPointOfPolygon, Rect, filter, getTemplateFunction, getZoomTranslate, getTranslate, RectOption, convertElementFromLabel, Point, TextOption, renderTextElement, textTrim, Internalize, measureTextElement } from '../utils/helper';
import { isNullOrUndefined, Animation, animationMode } from '@syncfusion/ej2-base';

@@ -86,3 +86,3 @@ import { dataLabelRendering } from '../model/constants';

style.fontWeight = style.fontWeight || this.maps.themeStyle.fontWeight || Theme.dataLabelFont.fontWeight;
shape = shapes['property'];
shape = !isNullOrUndefined(shapes) ? shapes['property'] : null;
var properties = (Object.prototype.toString.call(layer.shapePropertyPath) === '[object Array]' ?

@@ -119,3 +119,3 @@ layer.shapePropertyPath : [layer.shapePropertyPath]);

layer.dataSource, layer.shapeDataPath, shapeData['properties'][propertyPath], layer.shapeDataPath);
if (!isNullOrUndefined(shapes['property'])) {
if (!isNullOrUndefined(shapes) && !isNullOrUndefined(shapes['property'])) {
shapePoint = [[]];

@@ -223,9 +223,9 @@ if (!layerData[index]['_isMultiPolygon'] && layerData[index]['type'] !== 'Point' && layerData[index]['type'] !== 'MultiPoint') {

}
var textSize = measureText(text, style);
var textSize = measureTextElement(text, style);
var trimmedLable = text;
var elementSize = textSize;
var startY = location['y'] - textSize['height'] / 4;
var endY = location['y'] + textSize['height'] / 4;
var start = ((location['y'] + transPoint['y']) * scale) - textSize['height'] / 4;
var end = ((location['y'] + transPoint['y']) * scale) + textSize['height'] / 4;
var startY = location['y'] - textSize['height'] / 2;
var endY = location['y'] + textSize['height'] / 2;
var start = ((location['y'] + transPoint['y']) * scale) - textSize['height'] / 2;
var end = ((location['y'] + transPoint['y']) * scale) + textSize['height'] / 2;
position = filter(shapePoint[midIndex], startY, endY);

@@ -271,4 +271,4 @@ if (!isPoint && position.length > 5 && (shapeData['geometry']['type'] !== 'MultiPolygon') &&

var textType = typeof text === 'number' ? text.toString() : text;
trimmedLable = textTrim(width, textType, style);
elementSize = measureText(trimmedLable, style);
trimmedLable = textTrim(width, textType, style, null, true);
elementSize = measureTextElement(trimmedLable, style);
options = new TextOption(labelId, textLocation.x, textLocation.y, 'middle', trimmedLable, '', '');

@@ -314,3 +314,3 @@ }

difference = width - (_this.value[index]['rightWidth'] - _this.value[index]['leftWidth']);
trimmedLable = textTrim(difference, text, style);
trimmedLable = textTrim(difference, text, style, null, true);
break;

@@ -321,3 +321,3 @@ }

difference = Math.abs(width - (_this.value[index]['rightWidth'] - _this.value[index]['leftWidth']));
trimmedLable = textTrim(difference, text, style);
trimmedLable = textTrim(difference, text, style, null, true);
break;

@@ -328,3 +328,3 @@ }

}
elementSize = measureText(trimmedLable, style);
elementSize = measureTextElement(trimmedLable, style);
intersect.push(_this.value[index]);

@@ -363,2 +363,4 @@ options = new TextOption(labelId, textLocation.x, (textLocation.y), 'middle', trimmedLable, '', '');

element = renderTextElement(options, style, style.color || _this.maps.themeStyle.dataLabelFontColor, group);
element.setAttribute('aria-label', text);
element.setAttribute('role', 'region');
element.setAttribute('visibility', layer.dataLabelSettings.animationDuration > 0 || animationMode === 'Enable' ? 'hidden' : 'visibile');

@@ -373,3 +375,3 @@ if (zoomLabelsPosition && scaleZoomValue > 1 && !_this.maps.zoomNotApplied) {

element.setAttribute('transform', 'translate( ' + (((location['x'] + transPoint.x) * scale) + labelArgs.offsetX) + ' '
+ ((((location['y'] + transPoint.y) * scale) + (elementSize.height / 4)) + labelArgs.offsetY) + ' )');
+ ((((location['y'] + transPoint.y) * scale) + (elementSize.height / 2)) + labelArgs.offsetY) + ' )');
}

@@ -424,5 +426,5 @@ group.appendChild(element);

// eslint-disable-next-line @typescript-eslint/no-explicit-any
shapes.map(function (current) {
Array.prototype.forEach.call(shapes, function (current) {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
current.map(function (shape) {
Array.prototype.forEach.call(current, function (shape) {
points.push(new Point(shape['point']['x'], shape['point']['y']));

@@ -434,3 +436,3 @@ });

// eslint-disable-next-line @typescript-eslint/no-explicit-any
shapes.map(function (current) {
Array.prototype.forEach.call(shapes, function (current) {
points.push(new Point(current['point']['x'], current['point']['y']));

@@ -437,0 +439,0 @@ });

4

src/maps/layers/marker.d.ts

@@ -11,2 +11,4 @@ import { Maps } from '../../index';

private markerSVGObject;
initialMarkerCluster: number[][][];
zoomedMarkerCluster: number[][][];
/**

@@ -72,2 +74,4 @@ * @private

markerClusterMouseMove(e: PointerEvent): void;
/** @private */
initializeMarkerClusterList(): void;
/**

@@ -74,0 +78,0 @@ * Get module name.

29

src/maps/layers/marker.js

@@ -14,2 +14,4 @@ import { markerRendering, convertTileLatLongToPoint, MapLocation, markerDragStart } from '../index';

this.sameMarkerData = [];
this.initialMarkerCluster = [];
this.zoomedMarkerCluster = [];
}

@@ -47,8 +49,7 @@ Marker.prototype.markerRender = function (maps, layerElement, layerIndex, factor, type) {

}
var _loop_1 = function (markerIndex) {
var markerSettings = currentLayer.markerSettings[markerIndex];
Array.prototype.forEach.call(currentLayer.markerSettings, function (markerSettings, markerIndex) {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
var markerData = markerSettings.dataSource;
var _loop_2 = function (dataIndex) {
var data = markerData[dataIndex];
// eslint-disable-next-line @typescript-eslint/no-explicit-any
Array.prototype.forEach.call(markerData, function (data, dataIndex) {
maps.markerNullCount = markerIndex > 0 && dataIndex === 0 ? 0 : maps.markerNullCount;

@@ -127,11 +128,4 @@ var eventArgs = {

});
};
// eslint-disable-next-line @typescript-eslint/no-explicit-any
for (var dataIndex = 0; dataIndex < markerData.length; dataIndex++) {
_loop_2(dataIndex);
}
};
for (var markerIndex = 0; markerIndex < currentLayer.markerSettings.length; markerIndex++) {
_loop_1(markerIndex);
}
});
});
};

@@ -499,2 +493,9 @@ /**

};
/** @private */
Marker.prototype.initializeMarkerClusterList = function () {
for (var i = 0; i < this.maps.layers.length; i++) {
this.initialMarkerCluster[i] = [];
this.zoomedMarkerCluster[i] = [];
}
};
/**

@@ -519,2 +520,4 @@ * Get module name.

this.sameMarkerData = [];
this.initialMarkerCluster = [];
this.zoomedMarkerCluster = [];
};

@@ -521,0 +524,0 @@ return Marker;

1

src/maps/layers/polygon.d.ts

@@ -6,3 +6,2 @@ import { Maps } from '../../index';

export declare class Polygon {
private maps;
constructor(maps: Maps);

@@ -9,0 +8,0 @@ /**

5

src/maps/layers/polygon.js

@@ -7,3 +7,2 @@ import { PathOption, calculatePolygonPath, maintainSelection } from '../utils/helper';

function Polygon(maps) {
this.maps = maps;
}

@@ -20,3 +19,2 @@ /**

Polygon.prototype.polygonRender = function (maps, layerIndex, factor) {
var _this = this;
var currentLayer = maps.layersCollection[layerIndex];

@@ -35,3 +33,3 @@ var polygonsSVGObject = maps.renderer.createGroup({

var polygonEle = maps.renderer.drawPath(pathOptions);
maintainSelection(_this.maps.selectedPolygonElementId, _this.maps.polygonSelectionClass, polygonEle, 'PolygonselectionMapStyle');
maintainSelection(maps.selectedPolygonElementId, maps.polygonSelectionClass, polygonEle, 'PolygonselectionMapStyle');
polygonSVGObject.appendChild(polygonEle);

@@ -57,3 +55,2 @@ polygonsSVGObject.appendChild(polygonSVGObject);

Polygon.prototype.destroy = function () {
this.maps = null;
};

@@ -60,0 +57,0 @@ return Polygon;

14

src/maps/maps-model.d.ts

@@ -388,2 +388,16 @@ import { Component, NotifyPropertyChanges, INotifyPropertyChanged, Property, Fetch } from '@syncfusion/ej2-base';import { EventHandler, Browser, EmitType, isNullOrUndefined, createElement, setValue, extend } from '@syncfusion/ej2-base';import { Event, remove, L10n, Collection, Internationalization, Complex } from '@syncfusion/ej2-base';import { ModuleDeclaration } 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 } from './utils/helper';import { ZoomSettings, LegendSettings } from './model/base';import { LayerSettings, TitleSettings, Border, Margin, MapsAreaSettings, Annotation, CenterPosition } from './model/base';import { ZoomSettingsModel, LegendSettingsModel, LayerSettingsModel, BubbleSettingsModel, PolygonSettingsModel } from './model/base-model';import { MarkerSettingsModel, SelectionSettingsModel, InitialMarkerSelectionSettingsModel } from './model/base-model';import { TitleSettingsModel, BorderModel, MarginModel, CenterPositionModel, InitialShapeSelectionSettingsModel } from './model/base-model';import { MapsAreaSettingsModel, AnnotationModel } from './model/base-model';import { Bubble } from './layers/bubble';import { Legend } from './layers/legend';import { Marker } from './layers/marker';import { Highlight } from './user-interaction/highlight';import { Selection } from './user-interaction/selection';import { MapsTooltip } from './user-interaction/tooltip';import { Zoom } from './user-interaction/zoom';import { load, click, onclick, rightClick, loaded, doubleClick, resize, shapeSelected, zoomIn } from './model/constants';import { ProjectionType, MapsTheme, PanDirection, TooltipGesture } from './utils/enum';import { getThemeStyle, Theme } from './model/theme';import { ILoadEventArgs, ILoadedEventArgs, IMinMaxLatitudeLongitude, IMouseEventArgs, IResizeEventArgs, ITooltipRenderEventArgs } from './model/interface';import { GeoPosition, ITooltipRenderCompleteEventArgs, ILegendRenderingEventArgs } from './model/interface';import { ILayerRenderingEventArgs, IShapeRenderingEventArgs, IMarkerRenderingEventArgs, IMarkerClickEventArgs } from './model/interface';import { IMarkerMoveEventArgs, ILabelRenderingEventArgs, IBubbleMoveEventArgs, IBubbleClickEventArgs } from './model/interface';import { IMarkerClusterClickEventArgs, IMarkerClusterMoveEventArgs, IMarkerClusterRenderingEventArgs } from './model/interface';import { ISelectionEventArgs, IShapeSelectedEventArgs, IMapPanEventArgs, IMapZoomEventArgs } from './model/interface';import { IBubbleRenderingEventArgs, IAnimationCompleteEventArgs, IPrintEventArgs, IThemeStyle } from './model/interface';import { LayerPanel } from './layers/layer-panel';import { GeoLocation, 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 { FontModel, DataLabel, MarkerSettings, IAnnotationRenderingEventArgs, IMarkerDragEventArgs } from './index';import { NavigationLineSettingsModel, changeBorderWidth } from './index';import { NavigationLine } from './layers/navigation-selected-line';import { Polygon } from './layers/polygon';import { DataManager, Query } from '@syncfusion/ej2-data';import { ExportType } from '../maps/utils/enum';import { PdfPageOrientation } from '@syncfusion/ej2-pdf-export';import { Print } from './model/print';import { PdfExport } from './model/export-pdf';import { ImageExport } from './model/export-image';

/**
* This event is triggered after performing the panning action.
*
* @event panComplete
*/
panComplete?: EmitType<IMapPanEventArgs>;
/**
* This event is triggered after the zooming operation is completed.
*
* @event zoomComplete
*/
zoomComplete?: EmitType<IMapPanEventArgs>;
}

16

src/maps/maps.d.ts

@@ -462,2 +462,14 @@ /**

/**
* This event is triggered after performing the panning action.
*
* @event panComplete
*/
panComplete: EmitType<IMapPanEventArgs>;
/**
* This event is triggered after the zooming operation is completed.
*
* @event zoomComplete
*/
zoomComplete: EmitType<IMapPanEventArgs>;
/**
* Specifies the function to format the text contents in the maps.

@@ -664,3 +676,3 @@ *

dataLabelShape: number[];
zoomShapeCollection: object[];
zoomShapeCollection: string[];
zoomLabelPositions: object[];

@@ -914,3 +926,3 @@ mouseDownEvent: Object;

/** @private */
getClickLocation(targetId: string, pageX: number, pageY: number, targetElement: HTMLElement, x: number, y: number): GeoPosition;
getClickLocation(targetId: string, pageX: number, pageY: number, targetElement: HTMLElement, x: number, y: number, type?: string): GeoPosition;
private removeTileMap;

@@ -917,0 +929,0 @@ /**

51

src/maps/model/base-model.d.ts

@@ -468,2 +468,33 @@ import { Property, ChildProperty, Complex, Collection } from '@syncfusion/ej2-base';import { DataManager, Query } from '@syncfusion/ej2-data';import { Alignment, LegendPosition, LegendType, LegendMode, ShapeLayerType, Type, MarkerType, Orientation, MapAjax } from '../../index';import { SmartLabelMode, IntersectAction } from '../../index';import { Theme } from './theme';import { Point, GeoLocation, Coordinate } from '../utils/helper';import { BingMapType, LegendArrangement, LegendShape, BubbleType, StaticMapType, ToolbarItem } from '../utils/enum';import { AnnotationAlignment, GeometryType, LabelPosition, LabelIntersectAction } from '../index';

/**
* Interface for a class PolygonTooltipSettings
*/
export interface PolygonTooltipSettingsModel {
/**
* Shows or hides the tooltip of the polygon shapes. When this property is set as false, the tooltip for all the polygon shapes in a layer will not be visible.
*
* @default false
*/
visible?: boolean;
/**
* Gets or sets the fill color for the tooltip of the polygon shape.
*
* @default ''
*/
fill?: string;
/**
* Gets or sets the attributes such as width, color and opacity of the border of the tooltip element of the polygon shape.
*/
border?: BorderModel;
/**
* Gets or sets the font properties of the text content of the tooltip element of the polygon shape.
*/
textStyle?: FontModel;
}
/**
* Interface for a class Margin

@@ -865,2 +896,17 @@ */

/**
* Specifies the tooltip text to be displayed for the polygon shape. If it is not set, the tooltip will not be displayed.
*
* @default ''
*/
tooltipText?: string;
/**
* Specifies any HTML content as a tooltip on the polygon shape. If it is not set, the tooltip will not be displayed.
*
* @default ''
* @aspType string
*/
tooltipTemplate?: string | Function;
}

@@ -888,2 +934,7 @@

/**
* Specifies the properties such as visibility, fill, border and text style to customize the tooltip.
*/
tooltipSettings?: PolygonTooltipSettingsModel;
}

@@ -890,0 +941,0 @@

44

src/maps/model/base.d.ts

@@ -11,3 +11,3 @@ /**

import { DataLabelSettingsModel, TooltipSettingsModel, SubTitleSettingsModel, SelectionSettingsModel, PolygonSettingModel } from './base-model';
import { HighlightSettingsModel, ToggleLegendSettingsModel, ConnectorLineSettingsModel } from './base-model';
import { HighlightSettingsModel, ToggleLegendSettingsModel, ConnectorLineSettingsModel, PolygonTooltipSettingsModel } from './base-model';
import { InitialShapeSelectionSettingsModel, InitialMarkerSelectionSettingsModel, ZoomToolbarSettingsModel, ZoomToolbarButtonSettingsModel } from './base-model';

@@ -404,2 +404,27 @@ import { Point, GeoLocation, Coordinate } from '../utils/helper';

/**
* Specifies the properties such as visibility, fill, border and text style to customize the tooltip.
*/
export declare class PolygonTooltipSettings extends ChildProperty<PolygonTooltipSettings> {
/**
* Shows or hides the tooltip of the polygon shapes. When this property is set as false, the tooltip for all the polygon shapes in a layer will not be visible.
*
* @default false
*/
visible: boolean;
/**
* Gets or sets the fill color for the tooltip of the polygon shape.
*
* @default ''
*/
fill: string;
/**
* Gets or sets the attributes such as width, color and opacity of the border of the tooltip element of the polygon shape.
*/
border: BorderModel;
/**
* Gets or sets the font properties of the text content of the tooltip element of the polygon shape.
*/
textStyle: FontModel;
}
/**
* Gets or sets the options to customize the margin of the maps.

@@ -772,2 +797,15 @@ */

points: Coordinate[];
/**
* Specifies the tooltip text to be displayed for the polygon shape. If it is not set, the tooltip will not be displayed.
*
* @default ''
*/
tooltipText: string;
/**
* Specifies any HTML content as a tooltip on the polygon shape. If it is not set, the tooltip will not be displayed.
*
* @default ''
* @aspType string
*/
tooltipTemplate: string | Function;
}

@@ -791,2 +829,6 @@ /**

highlightSettings: HighlightSettingsModel;
/**
* Specifies the properties such as visibility, fill, border and text style to customize the tooltip.
*/
tooltipSettings: PolygonTooltipSettingsModel;
}

@@ -793,0 +835,0 @@ /**

32

src/maps/model/base.js

@@ -307,2 +307,25 @@ var __extends = (this && this.__extends) || (function () {

/**
* Specifies the properties such as visibility, fill, border and text style to customize the tooltip.
*/
var PolygonTooltipSettings = /** @class */ (function (_super) {
__extends(PolygonTooltipSettings, _super);
function PolygonTooltipSettings() {
return _super !== null && _super.apply(this, arguments) || this;
}
__decorate([
Property(false)
], PolygonTooltipSettings.prototype, "visible", void 0);
__decorate([
Property('')
], PolygonTooltipSettings.prototype, "fill", void 0);
__decorate([
Complex({ color: 'transparent', width: 1 }, Border)
], PolygonTooltipSettings.prototype, "border", void 0);
__decorate([
Complex({ fontFamily: null, size: null, fontWeight: null }, Font)
], PolygonTooltipSettings.prototype, "textStyle", void 0);
return PolygonTooltipSettings;
}(ChildProperty));
export { PolygonTooltipSettings };
/**
* Gets or sets the options to customize the margin of the maps.

@@ -560,2 +583,8 @@ */

], PolygonSetting.prototype, "points", void 0);
__decorate([
Property('')
], PolygonSetting.prototype, "tooltipText", void 0);
__decorate([
Property('')
], PolygonSetting.prototype, "tooltipTemplate", void 0);
return PolygonSetting;

@@ -582,2 +611,5 @@ }(ChildProperty));

], PolygonSettings.prototype, "highlightSettings", void 0);
__decorate([
Complex({}, PolygonTooltipSettings)
], PolygonSettings.prototype, "tooltipSettings", void 0);
return PolygonSettings;

@@ -584,0 +616,0 @@ }(ChildProperty));

12

src/maps/model/constants.d.ts

@@ -188,2 +188,14 @@ /**

/**
* Specifies the maps pan complete event name.
*
* @private
*/
export declare const panComplete: string;
/**
* Specifies the maps zoom complete event name.
*
* @private
*/
export declare const zoomComplete: string;
/**
* Specifies the maps item highlight event name.

@@ -190,0 +202,0 @@ *

12

src/maps/model/constants.js

@@ -188,2 +188,14 @@ /**

/**
* Specifies the maps pan complete event name.
*
* @private
*/
export var panComplete = 'panComplete';
/**
* Specifies the maps zoom complete event name.
*
* @private
*/
export var zoomComplete = 'zoomComplete';
/**
* Specifies the maps item highlight event name.

@@ -190,0 +202,0 @@ *

8

src/maps/model/interface.d.ts

@@ -207,2 +207,10 @@ /**

eventArgs?: PointerEvent;
/**
* Defines the latitude value of the position of the mouse pointer.
*/
latitude?: number;
/**
* Defines the longitude value of the position of the mouse pointer.
*/
longitude?: number;
}

@@ -209,0 +217,0 @@ /**

261

src/maps/user-interaction/tooltip.js

@@ -48,2 +48,3 @@ import { tooltipRender } from '../index';

var option;
var polygonTooltipOption;
var currentData = '';

@@ -61,6 +62,26 @@ var targetId = target.id;

this.tooltipTargetID = targetId;
var polygonTextStyle;
var polygonFill;
var polygon;
var latitude = null;
var longitude = null;
var latLongValue = this.maps.getClickLocation(targetId, e.pageX, e.pageY, target, e['layerX'], e['layerY'], 'tooltip');
if (!isNullOrUndefined(latLongValue)) {
latitude = latLongValue.latitude;
longitude = latLongValue.longitude;
}
var isPolygon = targetId.indexOf('_PolygonIndex_') > -1;
var istooltipRender = (targetId.indexOf('_shapeIndex_') > -1)
|| (targetId.indexOf('_MarkerIndex_') > -1) || (targetId.indexOf('_BubbleIndex_') > -1);
|| (targetId.indexOf('_MarkerIndex_') > -1) || (targetId.indexOf('_BubbleIndex_') > -1)
|| (targetId.indexOf('_PolygonIndex_') > -1);
if (istooltipRender && this.maps.markerDragArgument === null) {
if (targetId.indexOf('_shapeIndex_') > -1) {
if (targetId.indexOf('_PolygonIndex_') > -1) {
var polygonIndex = parseInt(targetId.split('_PolygonIndex_')[1].split('_')[0], 10);
polygonTooltipOption = layer.polygonSettings.tooltipSettings;
polygon = layer.polygonSettings.polygons[polygonIndex];
polygonTextStyle = polygonTooltipOption.textStyle;
polygonFill = polygonTooltipOption.fill;
tooltipContent.push(polygon.tooltipText);
}
else if (targetId.indexOf('_shapeIndex_') > -1) {
option = layer.tooltipSettings;

@@ -168,113 +189,132 @@ var shape = parseInt(targetId.split('_shapeIndex_')[1].split('_')[0], 10);

}
if (document.getElementById(this.tooltipId)) {
tooltipEle = document.getElementById(this.tooltipId);
}
else {
tooltipEle = createElement('div', {
id: this.maps.element.id + '_mapsTooltip',
className: 'EJ2-maps-Tooltip'
});
if (isNullOrUndefined(option.template) || option.template === '' || this.maps.tooltipDisplayMode === 'MouseMove') {
tooltipEle.style.cssText = 'position: absolute;pointer-events:none;';
if (isPolygon ? polygonTooltipOption.visible : option.visible) {
if (document.getElementById(this.tooltipId)) {
tooltipEle = document.getElementById(this.tooltipId);
}
else {
tooltipEle.style.position = 'absolute';
tooltipEle = createElement('div', {
id: this.maps.element.id + '_mapsTooltip',
className: 'EJ2-maps-Tooltip'
});
if (isNullOrUndefined(isPolygon ? polygon.tooltipTemplate : option.template) || (isPolygon ? polygon.tooltipTemplate === '' : option.template === '') || this.maps.tooltipDisplayMode === 'MouseMove') {
tooltipEle.style.cssText = 'position: absolute;pointer-events:none;';
}
else {
tooltipEle.style.position = 'absolute';
}
document.getElementById(this.maps.element.id + '_Secondary_Element').appendChild(tooltipEle);
}
document.getElementById(this.maps.element.id + '_Secondary_Element').appendChild(tooltipEle);
}
if (typeof option.template !== 'function' && option.template !== null && Object.keys(typeof option.template === 'object' ? option.template : {}).length === 1) {
option.template = option.template[Object.keys(option.template)[0]];
}
templateData = this.setTooltipContent(option, templateData);
var tooltipTextStyle = {
color: option.textStyle.color, fontFamily: option.textStyle.fontFamily, fontStyle: option.textStyle.fontStyle,
fontWeight: option.textStyle.fontWeight, opacity: option.textStyle.opacity, size: option.textStyle.size
};
var tooltipOption = {
location: location, text: tooltipContent, data: templateData,
textStyle: tooltipTextStyle,
template: option.template
};
tooltipArgs = {
cancel: false, name: tooltipRender,
options: tooltipOption,
fill: option.fill,
maps: this.maps,
element: target, eventArgs: e, content: !isNullOrUndefined(currentData) ? currentData.toString() : ''
};
// eslint-disable-next-line @typescript-eslint/no-unused-vars
this.maps.trigger(tooltipRender, tooltipArgs, function (args) {
if (!tooltipArgs.cancel && option.visible && !isNullOrUndefined(currentData) &&
(targetId.indexOf('_cluster_') === -1 && targetId.indexOf('_dataLabel_') === -1)) {
_this.maps['isProtectedOnChange'] = true;
tooltipArgs.options['textStyle']['size'] = tooltipArgs.options['textStyle']['size']
|| _this.maps.themeStyle.fontSize;
tooltipArgs.options['textStyle']['color'] = tooltipArgs.options['textStyle']['color']
|| _this.maps.themeStyle.tooltipFontColor;
tooltipArgs.options['textStyle']['fontFamily'] = tooltipArgs.options['textStyle']['fontFamily']
|| _this.maps.themeStyle.fontFamily;
tooltipArgs.options['textStyle']['fontWeight'] = tooltipArgs.options['textStyle']['fontWeight']
|| _this.maps.themeStyle.fontWeight;
tooltipArgs.options['textStyle']['opacity'] = tooltipArgs.options['textStyle']['opacity']
|| _this.maps.themeStyle.tooltipTextOpacity;
if (tooltipArgs.cancel) {
_this.svgTooltip = new Tooltip({
enable: true,
header: '',
data: option['data'],
template: option['template'],
content: tooltipArgs.content.toString() !== currentData.toString() ? [tooltipArgs.content.toString()] :
[currentData.toString()],
shapes: [],
location: option['location'],
palette: [markerFill],
areaBounds: _this.maps.mapAreaRect,
textStyle: option['textStyle'],
availableSize: _this.maps.availableSize,
fill: option.fill || _this.maps.themeStyle.tooltipFillColor,
enableShadow: true
});
if (typeof (isPolygon ? polygon.tooltipTemplate !== 'function' : option.template !== 'function') && (isPolygon ? polygon.tooltipTemplate !== null : option.template !== null) && Object.keys(typeof (isPolygon ? polygon.tooltipTemplate === 'object' : option.template === 'object') ? (isPolygon ? polygon.tooltipTemplate : option.template) : {}).length === 1) {
if (isPolygon) {
polygon.tooltipTemplate = polygon.tooltipTemplate[Object.keys(polygon.tooltipTemplate)[0]];
}
else {
_this.svgTooltip = new Tooltip({
enable: true,
header: '',
data: tooltipArgs.options['data'],
template: tooltipArgs.options['template'],
content: tooltipArgs.content.toString() !== currentData.toString() ? [tooltipArgs.content.toString()] :
[currentData.toString()],
shapes: [],
location: tooltipArgs.options['location'],
palette: [markerFill],
areaBounds: _this.maps.mapAreaRect,
textStyle: tooltipArgs.options['textStyle'],
availableSize: _this.maps.availableSize,
fill: tooltipArgs.fill || _this.maps.themeStyle.tooltipFillColor,
enableShadow: true
});
option.template = option.template[Object.keys(option.template)[0]];
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
if (_this.maps.isVue || _this.maps.isVue3) {
_this.svgTooltip.controlInstance = _this.maps;
}
_this.svgTooltip.opacity = _this.maps.themeStyle.tooltipFillOpacity || _this.svgTooltip.opacity;
_this.svgTooltip.appendTo(tooltipEle);
// eslint-disable-next-line @typescript-eslint/no-explicit-any
_this.maps.renderReactTemplates();
}
templateData = this.setTooltipContent(option, templateData);
var tooltipTextStyle = {
// eslint-disable-next-line max-len
color: isPolygon ? polygonTextStyle.color : option.textStyle.color, fontFamily: isPolygon ? polygonTextStyle.fontFamily : option.textStyle.fontFamily, fontStyle: isPolygon ? polygonTextStyle.fontStyle : option.textStyle.fontStyle,
// eslint-disable-next-line max-len
fontWeight: isPolygon ? polygonTextStyle.fontWeight : option.textStyle.fontWeight, opacity: isPolygon ? polygonTextStyle.opacity : option.textStyle.opacity, size: isPolygon ? polygonTextStyle.size : option.textStyle.size
};
var tooltipOption = {
location: location, text: tooltipContent, data: templateData,
textStyle: tooltipTextStyle,
template: isPolygon ? polygon.tooltipTemplate : option.template
};
tooltipArgs = {
cancel: false, name: tooltipRender,
options: tooltipOption,
fill: isPolygon ? polygonFill : option.fill,
maps: this.maps, latitude: latitude, longitude: longitude,
element: target, eventArgs: e, content: isPolygon ? polygon.tooltipText : !isNullOrUndefined(currentData) ? currentData.toString() : ''
};
if (tooltipArgs.content !== '' || tooltipArgs.options['template'] !== '') {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
this.maps.trigger(tooltipRender, tooltipArgs, function (args) {
if (!tooltipArgs.cancel && !isNullOrUndefined(currentData) &&
(targetId.indexOf('_cluster_') === -1 && targetId.indexOf('_dataLabel_') === -1)) {
_this.maps['isProtectedOnChange'] = true;
tooltipArgs.options['textStyle']['size'] = tooltipArgs.options['textStyle']['size']
|| _this.maps.themeStyle.fontSize;
tooltipArgs.options['textStyle']['color'] = tooltipArgs.options['textStyle']['color']
|| _this.maps.themeStyle.tooltipFontColor;
tooltipArgs.options['textStyle']['fontFamily'] = tooltipArgs.options['textStyle']['fontFamily']
|| _this.maps.themeStyle.fontFamily;
tooltipArgs.options['textStyle']['fontWeight'] = tooltipArgs.options['textStyle']['fontWeight']
|| _this.maps.themeStyle.fontWeight;
tooltipArgs.options['textStyle']['opacity'] = tooltipArgs.options['textStyle']['opacity']
|| _this.maps.themeStyle.tooltipTextOpacity;
if (tooltipArgs.cancel) {
_this.svgTooltip = new Tooltip({
enable: true,
header: '',
data: option['data'],
template: option['template'],
content: tooltipArgs.content.toString() !== currentData.toString() ? [tooltipArgs.content.toString()] :
[currentData.toString()],
shapes: [],
location: option['location'],
palette: [markerFill],
areaBounds: _this.maps.mapAreaRect,
textStyle: option['textStyle'],
availableSize: _this.maps.availableSize,
fill: option.fill || _this.maps.themeStyle.tooltipFillColor,
enableShadow: true,
border: isPolygon ? polygonTooltipOption.border : option.border
});
}
else {
_this.svgTooltip = new Tooltip({
enable: true,
header: '',
data: tooltipArgs.options['data'],
template: tooltipArgs.options['template'],
content: tooltipArgs.content.toString() !== currentData.toString() ? [tooltipArgs.content.toString()] :
[currentData.toString()],
shapes: [],
location: tooltipArgs.options['location'],
palette: [markerFill],
areaBounds: _this.maps.mapAreaRect,
textStyle: tooltipArgs.options['textStyle'],
availableSize: _this.maps.availableSize,
fill: tooltipArgs.fill || _this.maps.themeStyle.tooltipFillColor,
enableShadow: true,
border: isPolygon ? polygonTooltipOption.border : option.border
});
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
if (_this.maps.isVue || _this.maps.isVue3) {
_this.svgTooltip.controlInstance = _this.maps;
}
_this.svgTooltip.opacity = _this.maps.themeStyle.tooltipFillOpacity || _this.svgTooltip.opacity;
_this.svgTooltip.appendTo(tooltipEle);
// eslint-disable-next-line @typescript-eslint/no-explicit-any
_this.maps.renderReactTemplates();
}
else {
_this.clearTooltip(e.target);
}
});
}
else {
_this.clearTooltip(e.target);
this.clearTooltip(e.target);
}
});
if (this.svgTooltip) {
this.maps.trigger('tooltipRenderComplete', {
cancel: false, name: 'tooltipRenderComplete', maps: this.maps, options: tooltipOption,
element: this.svgTooltip.element
});
if (this.svgTooltip) {
this.maps.trigger('tooltipRenderComplete', {
cancel: false, name: 'tooltipRenderComplete', maps: this.maps, options: tooltipOption,
element: this.svgTooltip.element
});
}
if (this.svgTooltip) {
this.maps.trigger('tooltipRenderComplete', {
cancel: false, name: 'tooltipRenderComplete', maps: this.maps, options: tooltipOption, element: this.svgTooltip.element
});
}
else {
this.clearTooltip(e.target);
}
}
if (this.svgTooltip) {
this.maps.trigger('tooltipRenderComplete', {
cancel: false, name: 'tooltipRenderComplete', maps: this.maps, options: tooltipOption, element: this.svgTooltip.element
});
}
else {

@@ -329,6 +369,8 @@ this.clearTooltip(e.target);

MapsTooltip.prototype.mouseUpHandler = function (e) {
this.renderTooltip(e);
if (this.maps.tooltipDisplayMode === 'MouseMove') {
clearTimeout(this.clearTimeout);
this.clearTimeout = setTimeout(this.removeTooltip.bind(this), 2000);
if (!isNullOrUndefined(this.maps)) {
this.renderTooltip(e);
if (this.maps.tooltipDisplayMode === 'MouseMove') {
clearTimeout(this.clearTimeout);
this.clearTimeout = setTimeout(this.removeTooltip.bind(this), 2000);
}
}

@@ -387,3 +429,3 @@ };

if (this.maps.tooltipDisplayMode === 'DoubleClick') {
this.maps.off('dblclick', this.removeTooltip);
this.maps.off('dblclick', this.renderTooltip);
}

@@ -419,4 +461,3 @@ else if (this.maps.tooltipDisplayMode === 'Click') {

this.svgTooltip = null;
//TODO: Calling the below code throws spec issue.
//this.maps = null;
this.maps = null;
};

@@ -423,0 +464,0 @@ return MapsTooltip;

8

src/maps/user-interaction/zoom.d.ts

@@ -21,3 +21,3 @@ import { Maps, ITouches } from '../../index';

/** @private */
isPanning: boolean;
isPanModeEnabled: boolean;
/** @private */

@@ -68,6 +68,3 @@ mouseEnter: boolean;

private startTouches;
private zoomshapewidth;
private index;
/** @private */
intersect: any[];
private templateCount;

@@ -108,2 +105,3 @@ private distanceX;

performPinchZooming(e: PointerEvent | TouchEvent): void;
private triggerZoomComplete;
/**

@@ -127,3 +125,3 @@ * @private

*/
applyTransform(maps: Maps, animate?: boolean): void;
applyTransform(maps: Maps, animate?: boolean, isPanning?: boolean): void;
private markerTranslates;

@@ -130,0 +128,0 @@ /**

8

src/maps/utils/helper.d.ts

@@ -222,2 +222,4 @@ import { Maps, FontModel, BorderModel, LayerSettings } from '../../index';

export declare function measureText(text: string, font: FontModel): Size;
/** @private */
export declare function measureTextElement(text: string, font: FontModel): Size;
/**

@@ -488,2 +490,6 @@ * Internal use of text options

export declare function clusterTemplate(currentLayer: LayerSettings, markerTemplate: HTMLElement | Element, maps: Maps, layerIndex: number, markerCollection: Element, layerElement: Element, check: boolean, zoomCheck: boolean): boolean;
/** @private */
export declare function markerClusterListHandler(maps: Maps, currentZoomFactor: number, layerIndex: number, index: number, indexCollection: number[]): void;
/** @private */
export declare function markerBoundsComparer(tempElement: Element, markerBounds: ClientRect, colloideBounds: ClientRect[], indexCollection: number[], p: number): void;
/**

@@ -821,3 +827,3 @@ *

*/
export declare function textTrim(maxWidth: number, text: string, font: FontModel): string;
export declare function textTrim(maxWidth: number, text: string, font: FontModel, width?: number, isCanvasMeasure?: boolean, widthList?: number[]): string;
/**

@@ -824,0 +830,0 @@ * Method to calculate x position of title

.github/PULL_REQUEST_TEMPLATE/Bug.md
.github/PULL_REQUEST_TEMPLATE/Feature.md
dist/ej2-maps.min.js

Sorry, the diff of this file is too big to display

dist/ej2-maps.umd.min.js

Sorry, the diff of this file is too big to display

dist/ej2-maps.umd.min.js.map

Sorry, the diff of this file is not supported yet

dist/es6/ej2-maps.es2015.js

Sorry, the diff of this file is too big to display

dist/es6/ej2-maps.es2015.js.map

Sorry, the diff of this file is not supported yet

dist/es6/ej2-maps.es5.js

Sorry, the diff of this file is too big to display

dist/es6/ej2-maps.es5.js.map

Sorry, the diff of this file is not supported yet

dist/global/ej2-maps.min.js

Sorry, the diff of this file is too big to display

dist/global/ej2-maps.min.js.map

Sorry, the diff of this file is not supported yet

src/maps/layers/layer-panel.js

Sorry, the diff of this file is too big to display

src/maps/layers/legend.js

Sorry, the diff of this file is too big to display

src/maps/maps.js

Sorry, the diff of this file is too big to display

src/maps/user-interaction/zoom.js

Sorry, the diff of this file is too big to display

src/maps/utils/helper.js

Sorry, the diff of this file is too big to display

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc