@syncfusion/ej2-maps 19.4.55 → 20.1.48
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +29 -0
- package/dist/ej2-maps.umd.min.js +2 -2
- package/dist/ej2-maps.umd.min.js.map +1 -1
- package/dist/es6/ej2-maps.es2015.js +253 -117
- package/dist/es6/ej2-maps.es2015.js.map +1 -1
- package/dist/es6/ej2-maps.es5.js +254 -118
- package/dist/es6/ej2-maps.es5.js.map +1 -1
- package/dist/global/ej2-maps.min.js +2 -2
- package/dist/global/ej2-maps.min.js.map +1 -1
- package/dist/global/index.d.ts +1 -1
- package/package.json +12 -12
- package/src/maps/layers/data-label.js +1 -1
- package/src/maps/layers/legend.js +1 -1
- package/src/maps/layers/marker.js +4 -4
- package/src/maps/maps.js +20 -8
- package/src/maps/model/export-image.js +21 -12
- package/src/maps/model/export-pdf.js +16 -9
- package/src/maps/model/print.js +24 -2
- package/src/maps/model/theme.js +4 -4
- package/src/maps/user-interaction/annotation.js +1 -1
- package/src/maps/user-interaction/tooltip.d.ts +2 -1
- package/src/maps/user-interaction/tooltip.js +17 -9
- package/src/maps/user-interaction/zoom.js +121 -68
- package/src/maps/utils/enum.d.ts +5 -1
- package/src/maps/utils/helper.d.ts +9 -1
- package/src/maps/utils/helper.js +29 -4
|
@@ -1204,7 +1204,7 @@ function marker(eventArgs, markerSettings, markerData, dataIndex, location, tran
|
|
|
1204
1204
|
*/
|
|
1205
1205
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
1206
1206
|
function markerTemplate(eventArgs, templateFn, markerID, data, markerIndex, markerTemplate, location, transPoint, scale, offset, maps) {
|
|
1207
|
-
templateFn = getTemplateFunction(eventArgs.template);
|
|
1207
|
+
templateFn = getTemplateFunction(eventArgs.template, maps);
|
|
1208
1208
|
if (templateFn && (templateFn(data, maps, eventArgs.template, maps.element.id + '_MarkerTemplate' + markerIndex, false).length)) {
|
|
1209
1209
|
const templateElement = templateFn(data, maps, eventArgs.template, maps.element.id + '_MarkerTemplate' + markerIndex, false);
|
|
1210
1210
|
const markerElement = convertElement(templateElement, markerID, data, markerIndex, maps);
|
|
@@ -1240,8 +1240,10 @@ function maintainSelection(elementId, elementClass, element, className) {
|
|
|
1240
1240
|
if (elementId) {
|
|
1241
1241
|
for (let index = 0; index < elementId.length; index++) {
|
|
1242
1242
|
if (element.getAttribute('id') === elementId[index]) {
|
|
1243
|
-
if (
|
|
1244
|
-
|
|
1243
|
+
if (index === 0 || element.tagName === 'g') {
|
|
1244
|
+
if (!isNullOrUndefined(elementClass) && !isNullOrUndefined(elementClass.id)) {
|
|
1245
|
+
document.body.appendChild(elementClass);
|
|
1246
|
+
}
|
|
1245
1247
|
if (element.id.indexOf('_MarkerIndex_') > -1 && element.childElementCount > 0) {
|
|
1246
1248
|
element.children[0].setAttribute('class', className);
|
|
1247
1249
|
}
|
|
@@ -2198,6 +2200,22 @@ function fixInitialScaleForTile(map) {
|
|
|
2198
2200
|
function getElementByID(id) {
|
|
2199
2201
|
return document.getElementById(id);
|
|
2200
2202
|
}
|
|
2203
|
+
/**
|
|
2204
|
+
* Function to get clientElement from id.
|
|
2205
|
+
*
|
|
2206
|
+
* @param {string} id - Specifies the id
|
|
2207
|
+
* @returns {Element} - Returns the element
|
|
2208
|
+
* @private
|
|
2209
|
+
*/
|
|
2210
|
+
function getClientElement(id) {
|
|
2211
|
+
const element = document.getElementById(id);
|
|
2212
|
+
if (!isNullOrUndefined(element)) {
|
|
2213
|
+
return element.getClientRects()[0];
|
|
2214
|
+
}
|
|
2215
|
+
else {
|
|
2216
|
+
return null;
|
|
2217
|
+
}
|
|
2218
|
+
}
|
|
2201
2219
|
/**
|
|
2202
2220
|
* To apply internalization
|
|
2203
2221
|
*
|
|
@@ -2218,7 +2236,7 @@ function Internalize(maps, value) {
|
|
|
2218
2236
|
* @private
|
|
2219
2237
|
*/
|
|
2220
2238
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
2221
|
-
function getTemplateFunction(template) {
|
|
2239
|
+
function getTemplateFunction(template, maps) {
|
|
2222
2240
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
2223
2241
|
let templateFn = null;
|
|
2224
2242
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
@@ -2226,6 +2244,9 @@ function getTemplateFunction(template) {
|
|
|
2226
2244
|
if (document.querySelectorAll(template).length) {
|
|
2227
2245
|
templateFn = compile(document.querySelector(template).innerHTML.trim());
|
|
2228
2246
|
}
|
|
2247
|
+
else if (maps.isVue || maps.isVue3) {
|
|
2248
|
+
templateFn = compile(template);
|
|
2249
|
+
}
|
|
2229
2250
|
}
|
|
2230
2251
|
catch (e) {
|
|
2231
2252
|
templateFn = compile(template);
|
|
@@ -2628,6 +2649,7 @@ function createTooltip(id, text, top, left, fontSize) {
|
|
|
2628
2649
|
'left:' + left.toString() + 'px;' +
|
|
2629
2650
|
'color: #000000; ' +
|
|
2630
2651
|
'background:' + '#FFFFFF' + ';' +
|
|
2652
|
+
'z-index: 2;' +
|
|
2631
2653
|
'position:absolute;border:1px solid #707070;font-size:' + fontSize + ';border-radius:2px;';
|
|
2632
2654
|
if (!tooltip) {
|
|
2633
2655
|
tooltip = createElement('div', {
|
|
@@ -2828,6 +2850,9 @@ function changeBorderWidth(element, index, scale, maps) {
|
|
|
2828
2850
|
currentStroke = (isNullOrUndefined(borderWidth) ? 0 : borderWidth);
|
|
2829
2851
|
}
|
|
2830
2852
|
}
|
|
2853
|
+
else {
|
|
2854
|
+
currentStroke = (isNullOrUndefined(borderWidth) ? 0 : borderWidth);
|
|
2855
|
+
}
|
|
2831
2856
|
}
|
|
2832
2857
|
else {
|
|
2833
2858
|
currentStroke = (isNullOrUndefined(borderWidth) ? 0 : borderWidth);
|
|
@@ -3354,11 +3379,11 @@ function getShapeColor(theme) {
|
|
|
3354
3379
|
themePalette = ['#5ECB9B', '#A860F1', '#EBA844', '#557EF7', '#E9599B',
|
|
3355
3380
|
'#BFC529', '#3BC6CF', '#7A68EC', '#74B706', '#EA6266'];
|
|
3356
3381
|
break;
|
|
3357
|
-
case '
|
|
3382
|
+
case 'fluent':
|
|
3358
3383
|
themePalette = ['#614570', '#4C6FB1', '#CC6952', '#3F579A', '#4EA09B',
|
|
3359
3384
|
'#6E7A89', '#D4515C', '#E6AF5D', '#639751', '#9D4D69'];
|
|
3360
3385
|
break;
|
|
3361
|
-
case '
|
|
3386
|
+
case 'fluentdark':
|
|
3362
3387
|
themePalette = ['#8AB113', '#2A72D5', '#43B786', '#584EC6', '#E85F9C',
|
|
3363
3388
|
'#6E7A89', '#EA6266', '#EBA844', '#26BC7A', '#BC4870'];
|
|
3364
3389
|
break;
|
|
@@ -3647,7 +3672,7 @@ function getThemeStyle(theme) {
|
|
|
3647
3672
|
shapeFill: '#495057'
|
|
3648
3673
|
};
|
|
3649
3674
|
break;
|
|
3650
|
-
case '
|
|
3675
|
+
case 'fluent':
|
|
3651
3676
|
style = {
|
|
3652
3677
|
backgroundColor: 'rgba(255,255,255, 0.0)',
|
|
3653
3678
|
areaBackgroundColor: 'rgba(255,255,255, 0.0)',
|
|
@@ -3670,7 +3695,7 @@ function getThemeStyle(theme) {
|
|
|
3670
3695
|
shapeFill: '#F3F2F1'
|
|
3671
3696
|
};
|
|
3672
3697
|
break;
|
|
3673
|
-
case '
|
|
3698
|
+
case 'fluentdark':
|
|
3674
3699
|
style = {
|
|
3675
3700
|
backgroundColor: 'rgba(255,255,255, 0.0)',
|
|
3676
3701
|
areaBackgroundColor: 'rgba(255,255,255, 0.0)',
|
|
@@ -4639,10 +4664,10 @@ class Marker {
|
|
|
4639
4664
|
eventArgs = markerShapeChoose(eventArgs, data);
|
|
4640
4665
|
const lng = (!isNullOrUndefined(markerSettings.longitudeValuePath)) ?
|
|
4641
4666
|
Number(getValueFromObject(data, markerSettings.longitudeValuePath)) : !isNullOrUndefined(data['longitude']) ?
|
|
4642
|
-
parseFloat(data['longitude']) : !isNullOrUndefined(data['Longitude']) ? parseFloat(data['Longitude']) :
|
|
4667
|
+
parseFloat(data['longitude']) : !isNullOrUndefined(data['Longitude']) ? parseFloat(data['Longitude']) : null;
|
|
4643
4668
|
const lat = (!isNullOrUndefined(markerSettings.latitudeValuePath)) ?
|
|
4644
4669
|
Number(getValueFromObject(data, markerSettings.latitudeValuePath)) : !isNullOrUndefined(data['latitude']) ?
|
|
4645
|
-
parseFloat(data['latitude']) : !isNullOrUndefined(data['Latitude']) ? parseFloat(data['Latitude']) :
|
|
4670
|
+
parseFloat(data['latitude']) : !isNullOrUndefined(data['Latitude']) ? parseFloat(data['Latitude']) : null;
|
|
4646
4671
|
const offset = markerSettings.offset;
|
|
4647
4672
|
if (!eventArgs.cancel && markerSettings.visible && !isNullOrUndefined(lng) && !isNullOrUndefined(lat)) {
|
|
4648
4673
|
const markerID = this.maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_'
|
|
@@ -4687,7 +4712,7 @@ class Marker {
|
|
|
4687
4712
|
this.maps.renderReactTemplates();
|
|
4688
4713
|
}
|
|
4689
4714
|
}
|
|
4690
|
-
if (markerTemplateEle.childElementCount === (
|
|
4715
|
+
if (markerTemplateEle.childElementCount === (markerDataLength - markerCount - nullCount) && getElementByID(this.maps.element.id + '_Secondary_Element')) {
|
|
4691
4716
|
getElementByID(this.maps.element.id + '_Secondary_Element').appendChild(markerTemplateEle);
|
|
4692
4717
|
if (this.maps.checkInitialRender) {
|
|
4693
4718
|
if (currentLayer.markerClusterSettings.allowClustering) {
|
|
@@ -4937,7 +4962,7 @@ class Marker {
|
|
|
4937
4962
|
if ((target.indexOf('_cluster_') > -1)) {
|
|
4938
4963
|
let isClusterSame = false;
|
|
4939
4964
|
const clusterElement = document.getElementById(target.indexOf('_datalabel_') > -1 ? target.split('_datalabel_')[0] : target);
|
|
4940
|
-
const indexes = clusterElement.innerHTML.split(',').map(Number);
|
|
4965
|
+
const indexes = layer.markerClusterSettings.shape === 'Balloon' ? clusterElement.children[0].innerHTML.split(',').map(Number) : clusterElement.innerHTML.split(',').map(Number);
|
|
4941
4966
|
collection = [];
|
|
4942
4967
|
for (const i of indexes) {
|
|
4943
4968
|
collection.push({ data: marker$$1.dataSource[i], index: i });
|
|
@@ -6771,7 +6796,7 @@ class Annotations {
|
|
|
6771
6796
|
if (argsData.cancel) {
|
|
6772
6797
|
return;
|
|
6773
6798
|
}
|
|
6774
|
-
templateFn = getTemplateFunction(argsData.content);
|
|
6799
|
+
templateFn = getTemplateFunction(argsData.content, this.map);
|
|
6775
6800
|
if (templateFn && templateFn(this.map, this.map, argsData.content, this.map.element.id + '_ContentTemplate_' + annotationIndex).length) {
|
|
6776
6801
|
templateElement = Array.prototype.slice.call(templateFn(this.map, this.map, argsData.content, this.map.element.id + '_ContentTemplate_' + annotationIndex));
|
|
6777
6802
|
const length = templateElement.length;
|
|
@@ -6883,6 +6908,10 @@ let Maps = class Maps extends Component {
|
|
|
6883
6908
|
* Resize the map
|
|
6884
6909
|
*/
|
|
6885
6910
|
this.isResize = false;
|
|
6911
|
+
/**
|
|
6912
|
+
* @private
|
|
6913
|
+
*/
|
|
6914
|
+
this.isReset = false;
|
|
6886
6915
|
/** @private */
|
|
6887
6916
|
this.baseSize = new Size(0, 0);
|
|
6888
6917
|
/** @public */
|
|
@@ -7209,12 +7238,14 @@ let Maps = class Maps extends Component {
|
|
|
7209
7238
|
this.checkInitialRender = false;
|
|
7210
7239
|
}
|
|
7211
7240
|
}
|
|
7212
|
-
|
|
7213
|
-
|
|
7214
|
-
&& this.layers[i].markerSettings[k].
|
|
7215
|
-
|
|
7216
|
-
|
|
7217
|
-
|
|
7241
|
+
if (!this.isResize) {
|
|
7242
|
+
for (let k = 0; k < this.layers[i].markerSettings.length; k++) {
|
|
7243
|
+
if (this.layers[i].markerSettings[k].selectionSettings && this.layers[i].markerSettings[k].selectionSettings.enable
|
|
7244
|
+
&& this.layers[i].markerSettings[k].initialMarkerSelection.length > 0) {
|
|
7245
|
+
const markerSelectionValues = this.layers[i].markerSettings[k].initialMarkerSelection;
|
|
7246
|
+
for (let j = 0; j < markerSelectionValues.length; j++) {
|
|
7247
|
+
this.markerInitialSelection(i, k, this.layers[i].markerSettings[k], markerSelectionValues[j].latitude, markerSelectionValues[j].longitude);
|
|
7248
|
+
}
|
|
7218
7249
|
}
|
|
7219
7250
|
}
|
|
7220
7251
|
}
|
|
@@ -7292,7 +7323,8 @@ let Maps = class Maps extends Component {
|
|
|
7292
7323
|
markerSelection(selectionSettings, map, targetElement, data) {
|
|
7293
7324
|
const border = {
|
|
7294
7325
|
color: selectionSettings.border.color,
|
|
7295
|
-
width: selectionSettings.border.width / map.scale
|
|
7326
|
+
width: selectionSettings.border.width / map.scale,
|
|
7327
|
+
opacity: selectionSettings.border.opacity
|
|
7296
7328
|
};
|
|
7297
7329
|
const markerSelectionProperties = {
|
|
7298
7330
|
opacity: selectionSettings.opacity,
|
|
@@ -7312,9 +7344,11 @@ let Maps = class Maps extends Component {
|
|
|
7312
7344
|
if (this.selectedMarkerElementId.length === 0 || selectionSettings.enableMultiSelect) {
|
|
7313
7345
|
if (targetElement.tagName === 'g') {
|
|
7314
7346
|
targetElement.children[0].setAttribute('class', 'MarkerselectionMapStyle');
|
|
7347
|
+
this.selectedMarkerElementId.push(targetElement.children[0].id);
|
|
7315
7348
|
}
|
|
7316
7349
|
else {
|
|
7317
7350
|
targetElement.setAttribute('class', 'MarkerselectionMapStyle');
|
|
7351
|
+
this.selectedMarkerElementId.push(targetElement.id);
|
|
7318
7352
|
}
|
|
7319
7353
|
}
|
|
7320
7354
|
}
|
|
@@ -8527,7 +8561,10 @@ let Maps = class Maps extends Component {
|
|
|
8527
8561
|
if (!isNullOrUndefined(newProp.layers[x])) {
|
|
8528
8562
|
const collection = Object.keys(newProp.layers[x]);
|
|
8529
8563
|
for (const collectionProp of collection) {
|
|
8530
|
-
if (collectionProp === '
|
|
8564
|
+
if (collectionProp === 'layerType' && newProp.layers[x].layerType === 'OSM') {
|
|
8565
|
+
this.isReset = true;
|
|
8566
|
+
}
|
|
8567
|
+
else if (collectionProp === 'markerSettings') {
|
|
8531
8568
|
isMarker = true;
|
|
8532
8569
|
}
|
|
8533
8570
|
else if (collectionProp === 'staticMapType') {
|
|
@@ -9613,7 +9650,7 @@ class DataLabel {
|
|
|
9613
9650
|
this.value[index] = { rightWidth: xpositionEnds, leftWidth: xpositionStart, heightTop: start, heightBottom: end };
|
|
9614
9651
|
let labelElement;
|
|
9615
9652
|
if (eventargs.template !== '') {
|
|
9616
|
-
templateFn = getTemplateFunction(eventargs.template);
|
|
9653
|
+
templateFn = getTemplateFunction(eventargs.template, this.maps);
|
|
9617
9654
|
const templateElement = templateFn ? templateFn(!isNullOrUndefined(datasrcObj) ?
|
|
9618
9655
|
datasrcObj : shapeData['properties'], this.maps, eventargs.template, this.maps.element.id + '_LabelTemplate', false) : document.createElement('div');
|
|
9619
9656
|
templateElement.innerHTML = !templateFn ? eventargs.template : '';
|
|
@@ -11220,7 +11257,7 @@ class Legend {
|
|
|
11220
11257
|
data[this.maps.legendSettings.showLegendPath];
|
|
11221
11258
|
if (marker$$1.visible && showLegend && (!isNullOrUndefined(data['latitude'])) && (!isNullOrUndefined(data['longitude']))) {
|
|
11222
11259
|
if (marker$$1.template) {
|
|
11223
|
-
templateFn = getTemplateFunction(marker$$1.template);
|
|
11260
|
+
templateFn = getTemplateFunction(marker$$1.template, this.maps);
|
|
11224
11261
|
const templateElement = templateFn(this.maps);
|
|
11225
11262
|
const markerEle = isNullOrUndefined(templateElement.childElementCount) ? templateElement[0] :
|
|
11226
11263
|
templateElement;
|
|
@@ -12693,6 +12730,10 @@ class MapsTooltip {
|
|
|
12693
12730
|
fill: tooltipArgs.fill || this.maps.themeStyle.tooltipFillColor
|
|
12694
12731
|
});
|
|
12695
12732
|
}
|
|
12733
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
12734
|
+
if (this.maps.isVue || this.maps.isVue3) {
|
|
12735
|
+
this.svgTooltip.controlInstance = this.maps;
|
|
12736
|
+
}
|
|
12696
12737
|
this.svgTooltip.opacity = this.maps.themeStyle.tooltipFillOpacity || this.svgTooltip.opacity;
|
|
12697
12738
|
this.svgTooltip.appendTo(tooltipEle);
|
|
12698
12739
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
@@ -12706,9 +12747,7 @@ class MapsTooltip {
|
|
|
12706
12747
|
}
|
|
12707
12748
|
}
|
|
12708
12749
|
else {
|
|
12709
|
-
this.
|
|
12710
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
12711
|
-
this.maps.clearTemplate();
|
|
12750
|
+
this.clearTooltip();
|
|
12712
12751
|
}
|
|
12713
12752
|
});
|
|
12714
12753
|
if (this.svgTooltip) {
|
|
@@ -12723,9 +12762,7 @@ class MapsTooltip {
|
|
|
12723
12762
|
});
|
|
12724
12763
|
}
|
|
12725
12764
|
else {
|
|
12726
|
-
this.
|
|
12727
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
12728
|
-
this.maps.clearTemplate();
|
|
12765
|
+
this.clearTooltip();
|
|
12729
12766
|
}
|
|
12730
12767
|
}
|
|
12731
12768
|
else {
|
|
@@ -12735,9 +12772,7 @@ class MapsTooltip {
|
|
|
12735
12772
|
this.maps.notify(click, this);
|
|
12736
12773
|
}
|
|
12737
12774
|
else {
|
|
12738
|
-
this.
|
|
12739
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
12740
|
-
this.maps.clearTemplate();
|
|
12775
|
+
this.clearTooltip();
|
|
12741
12776
|
}
|
|
12742
12777
|
}
|
|
12743
12778
|
}
|
|
@@ -12781,8 +12816,18 @@ class MapsTooltip {
|
|
|
12781
12816
|
}
|
|
12782
12817
|
}
|
|
12783
12818
|
removeTooltip() {
|
|
12819
|
+
let isTooltipRemoved = false;
|
|
12784
12820
|
if (document.getElementsByClassName('EJ2-maps-Tooltip').length > 0) {
|
|
12785
12821
|
remove(document.getElementsByClassName('EJ2-maps-Tooltip')[0]);
|
|
12822
|
+
isTooltipRemoved = true;
|
|
12823
|
+
}
|
|
12824
|
+
return isTooltipRemoved;
|
|
12825
|
+
}
|
|
12826
|
+
clearTooltip() {
|
|
12827
|
+
const isTooltipRemoved = this.removeTooltip();
|
|
12828
|
+
if (isTooltipRemoved) {
|
|
12829
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
12830
|
+
this.maps.clearTemplate();
|
|
12786
12831
|
}
|
|
12787
12832
|
}
|
|
12788
12833
|
// eslint-disable-next-line valid-jsdoc
|
|
@@ -12914,8 +12959,13 @@ class Zoom {
|
|
|
12914
12959
|
translatePointY = (currentHeight < map.mapAreaRect.height) ? (availSize.y + ((-(minBounds['y'])) + ((availSize.height / 2) - (mapTotalHeight / 2)))) : translatePointY;
|
|
12915
12960
|
map.translatePoint = new Point(translatePointX, translatePointY);
|
|
12916
12961
|
map.scale = newZoomFactor;
|
|
12917
|
-
this.triggerZoomEvent(prevTilePoint, prevLevel, type)
|
|
12918
|
-
|
|
12962
|
+
if (this.triggerZoomEvent(prevTilePoint, prevLevel, type)) {
|
|
12963
|
+
map.translatePoint = map.previousPoint;
|
|
12964
|
+
map.scale = map.previousScale;
|
|
12965
|
+
}
|
|
12966
|
+
else {
|
|
12967
|
+
this.applyTransform();
|
|
12968
|
+
}
|
|
12919
12969
|
}
|
|
12920
12970
|
else if ((map.isTileMap) && (newZoomFactor >= minZoom && newZoomFactor <= maxZoom)) {
|
|
12921
12971
|
this.getTileTranslatePosition(prevLevel, newZoomFactor, position, type);
|
|
@@ -12932,31 +12982,38 @@ class Zoom {
|
|
|
12932
12982
|
}
|
|
12933
12983
|
map.translatePoint.y = (map.tileTranslatePoint.y - (0.01 * map.mapScaleValue)) / map.scale;
|
|
12934
12984
|
map.translatePoint.x = (map.tileTranslatePoint.x - (0.01 * map.mapScaleValue)) / map.scale;
|
|
12935
|
-
this.triggerZoomEvent(prevTilePoint, prevLevel, type)
|
|
12936
|
-
|
|
12937
|
-
|
|
12938
|
-
|
|
12939
|
-
|
|
12940
|
-
document.getElementById(this.maps.element.id + '_LayerIndex_1').style.display = 'none';
|
|
12985
|
+
if (this.triggerZoomEvent(prevTilePoint, prevLevel, type)) {
|
|
12986
|
+
map.translatePoint = map.tileTranslatePoint = new Point(0, 0);
|
|
12987
|
+
map.scale = map.previousScale;
|
|
12988
|
+
map.tileZoomLevel = prevLevel;
|
|
12989
|
+
map.zoomSettings.zoomFactor = map.previousScale;
|
|
12941
12990
|
}
|
|
12942
|
-
|
|
12943
|
-
|
|
12944
|
-
|
|
12945
|
-
|
|
12946
|
-
setTimeout(() => {
|
|
12947
|
-
// if (type === 'ZoomOut') {
|
|
12948
|
-
// element1.removeChild(element1.children[element1.childElementCount - 1]);
|
|
12949
|
-
// if (element1.childElementCount) {
|
|
12950
|
-
// element1.removeChild(element1.children[element1.childElementCount - 1]);
|
|
12951
|
-
// } else {
|
|
12952
|
-
// element1 = element1;
|
|
12953
|
-
// }
|
|
12954
|
-
// }
|
|
12955
|
-
this.applyTransform();
|
|
12991
|
+
else {
|
|
12992
|
+
if (document.querySelector('.GroupElement')) {
|
|
12993
|
+
document.querySelector('.GroupElement').style.display = 'none';
|
|
12994
|
+
}
|
|
12956
12995
|
if (document.getElementById(this.maps.element.id + '_LayerIndex_1')) {
|
|
12957
|
-
document.getElementById(this.maps.element.id + '_LayerIndex_1').style.display = '
|
|
12996
|
+
document.getElementById(this.maps.element.id + '_LayerIndex_1').style.display = 'none';
|
|
12958
12997
|
}
|
|
12959
|
-
|
|
12998
|
+
this.markerLineAnimation(map);
|
|
12999
|
+
map.mapLayerPanel.generateTiles(newZoomFactor, map.tileTranslatePoint, type + 'wheel', null, position);
|
|
13000
|
+
const element1 = document.getElementById(this.maps.element.id + '_tiles');
|
|
13001
|
+
const animationDuration = this.maps.layersCollection[0].animationDuration;
|
|
13002
|
+
setTimeout(() => {
|
|
13003
|
+
// if (type === 'ZoomOut') {
|
|
13004
|
+
// element1.removeChild(element1.children[element1.childElementCount - 1]);
|
|
13005
|
+
// if (element1.childElementCount) {
|
|
13006
|
+
// element1.removeChild(element1.children[element1.childElementCount - 1]);
|
|
13007
|
+
// } else {
|
|
13008
|
+
// element1 = element1;
|
|
13009
|
+
// }
|
|
13010
|
+
// }
|
|
13011
|
+
this.applyTransform();
|
|
13012
|
+
if (document.getElementById(this.maps.element.id + '_LayerIndex_1')) {
|
|
13013
|
+
document.getElementById(this.maps.element.id + '_LayerIndex_1').style.display = 'block';
|
|
13014
|
+
}
|
|
13015
|
+
}, animationDuration);
|
|
13016
|
+
}
|
|
12960
13017
|
}
|
|
12961
13018
|
this.maps.zoomNotApplied = false;
|
|
12962
13019
|
}
|
|
@@ -12978,6 +13035,7 @@ class Zoom {
|
|
|
12978
13035
|
};
|
|
12979
13036
|
}
|
|
12980
13037
|
map.trigger('zoom', zoomArgs);
|
|
13038
|
+
return zoomArgs.cancel;
|
|
12981
13039
|
}
|
|
12982
13040
|
getTileTranslatePosition(prevLevel, currentLevel, position, type) {
|
|
12983
13041
|
const map = this.maps;
|
|
@@ -13003,6 +13061,7 @@ class Zoom {
|
|
|
13003
13061
|
const zoomRect = this.zoomingRect;
|
|
13004
13062
|
const maxZoom = map.zoomSettings.maxZoom;
|
|
13005
13063
|
const minZoom = map.zoomSettings.minZoom;
|
|
13064
|
+
let isZoomCancelled;
|
|
13006
13065
|
if (zoomRect.height > 0 && zoomRect.width > 0) {
|
|
13007
13066
|
const x = this.zoomingRect.x + (this.zoomingRect.width / 2);
|
|
13008
13067
|
const y = this.zoomingRect.y + (this.zoomingRect.height / 2);
|
|
@@ -13015,7 +13074,11 @@ class Zoom {
|
|
|
13015
13074
|
const translatePointY = translatePoint.y - (((size.height / scale) - (size.height / zoomCalculationFactor)) / (size.height / y));
|
|
13016
13075
|
map.translatePoint = new Point(translatePointX, translatePointY);
|
|
13017
13076
|
map.scale = zoomCalculationFactor;
|
|
13018
|
-
this.triggerZoomEvent(prevTilePoint, prevLevel, '');
|
|
13077
|
+
isZoomCancelled = this.triggerZoomEvent(prevTilePoint, prevLevel, '');
|
|
13078
|
+
if (isZoomCancelled) {
|
|
13079
|
+
map.translatePoint = map.previousPoint;
|
|
13080
|
+
map.scale = map.previousScale;
|
|
13081
|
+
}
|
|
13019
13082
|
}
|
|
13020
13083
|
else {
|
|
13021
13084
|
zoomCalculationFactor = prevLevel + (Math.round(prevLevel + (((size.width / zoomRect.width) + (size.height / zoomRect.height)) / 2)));
|
|
@@ -13028,13 +13091,21 @@ class Zoom {
|
|
|
13028
13091
|
map.translatePoint.y = (map.tileTranslatePoint.y - (0.5 * Math.pow(2, zoomCalculationFactor))) /
|
|
13029
13092
|
(Math.pow(2, zoomCalculationFactor));
|
|
13030
13093
|
map.scale = (Math.pow(2, zoomCalculationFactor));
|
|
13031
|
-
this.triggerZoomEvent(prevTilePoint, prevLevel, '');
|
|
13032
|
-
|
|
13094
|
+
isZoomCancelled = this.triggerZoomEvent(prevTilePoint, prevLevel, '');
|
|
13095
|
+
if (isZoomCancelled) {
|
|
13096
|
+
map.translatePoint = map.tileTranslatePoint = new Point(0, 0);
|
|
13097
|
+
map.scale = map.tileZoomLevel = map.zoomSettings.zoomFactor = prevLevel;
|
|
13098
|
+
}
|
|
13099
|
+
else {
|
|
13100
|
+
map.mapLayerPanel.generateTiles(zoomCalculationFactor, map.tileTranslatePoint);
|
|
13101
|
+
}
|
|
13102
|
+
}
|
|
13103
|
+
if (!isZoomCancelled) {
|
|
13104
|
+
map.mapScaleValue = zoomCalculationFactor;
|
|
13105
|
+
this.applyTransform(true);
|
|
13106
|
+
this.maps.zoomNotApplied = false;
|
|
13107
|
+
this.zoomingRect = null;
|
|
13033
13108
|
}
|
|
13034
|
-
map.mapScaleValue = zoomCalculationFactor;
|
|
13035
|
-
this.applyTransform(true);
|
|
13036
|
-
this.maps.zoomNotApplied = false;
|
|
13037
|
-
this.zoomingRect = null;
|
|
13038
13109
|
}
|
|
13039
13110
|
}
|
|
13040
13111
|
setInteraction(newInteraction) {
|
|
@@ -13063,6 +13134,7 @@ class Zoom {
|
|
|
13063
13134
|
this.pinchFactor *= newScale;
|
|
13064
13135
|
this.pinchFactor = Math.min(this.maps.zoomSettings.maxZoom, Math.max(this.pinchFactor, this.maps.zoomSettings.minZoom));
|
|
13065
13136
|
const zoomCalculationFactor = this.pinchFactor;
|
|
13137
|
+
let isZoomCancelled;
|
|
13066
13138
|
if (!map.isTileMap) {
|
|
13067
13139
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
13068
13140
|
const minBounds = map.baseMapRectBounds['min'];
|
|
@@ -13078,7 +13150,11 @@ class Zoom {
|
|
|
13078
13150
|
translatePointY = (currentHeight < map.mapAreaRect.height) ? (availSize.y + ((-(minBounds['y'])) + ((availSize.height / 2) - (mapTotalHeight / 2)))) : translatePointY;
|
|
13079
13151
|
map.translatePoint = new Point(translatePointX, translatePointY);
|
|
13080
13152
|
map.scale = zoomCalculationFactor;
|
|
13081
|
-
this.triggerZoomEvent(prevTilePoint, prevLevel, '');
|
|
13153
|
+
isZoomCancelled = this.triggerZoomEvent(prevTilePoint, prevLevel, '');
|
|
13154
|
+
if (isZoomCancelled) {
|
|
13155
|
+
map.translatePoint = map.previousPoint;
|
|
13156
|
+
map.scale = map.previousScale;
|
|
13157
|
+
}
|
|
13082
13158
|
}
|
|
13083
13159
|
else {
|
|
13084
13160
|
const newTileFactor = zoomCalculationFactor;
|
|
@@ -13089,10 +13165,20 @@ class Zoom {
|
|
|
13089
13165
|
map.translatePoint.y = (map.tileTranslatePoint.y - (0.5 * Math.pow(2, newTileFactor))) /
|
|
13090
13166
|
(Math.pow(2, newTileFactor));
|
|
13091
13167
|
map.scale = (Math.pow(2, newTileFactor));
|
|
13092
|
-
this.triggerZoomEvent(prevTilePoint, prevLevel, '');
|
|
13093
|
-
|
|
13168
|
+
isZoomCancelled = this.triggerZoomEvent(prevTilePoint, prevLevel, '');
|
|
13169
|
+
if (isZoomCancelled) {
|
|
13170
|
+
map.translatePoint = map.tileTranslatePoint = new Point(0, 0);
|
|
13171
|
+
map.scale = map.previousScale;
|
|
13172
|
+
map.tileZoomLevel = prevLevel;
|
|
13173
|
+
map.zoomSettings.zoomFactor = map.previousScale;
|
|
13174
|
+
}
|
|
13175
|
+
else {
|
|
13176
|
+
map.mapLayerPanel.generateTiles(newTileFactor, map.tileTranslatePoint);
|
|
13177
|
+
}
|
|
13178
|
+
}
|
|
13179
|
+
if (!isZoomCancelled) {
|
|
13180
|
+
this.applyTransform();
|
|
13094
13181
|
}
|
|
13095
|
-
this.applyTransform();
|
|
13096
13182
|
}
|
|
13097
13183
|
drawZoomRectangle() {
|
|
13098
13184
|
const map = this.maps;
|
|
@@ -13369,10 +13455,10 @@ class Zoom {
|
|
|
13369
13455
|
}
|
|
13370
13456
|
const lati = (!isNullOrUndefined(markerSettings.latitudeValuePath)) ?
|
|
13371
13457
|
Number(getValueFromObject(data, markerSettings.latitudeValuePath)) : !isNullOrUndefined(data['latitude']) ?
|
|
13372
|
-
parseFloat(data['latitude']) : !isNullOrUndefined(data['Latitude']) ? data['Latitude'] :
|
|
13458
|
+
parseFloat(data['latitude']) : !isNullOrUndefined(data['Latitude']) ? data['Latitude'] : null;
|
|
13373
13459
|
const long = (!isNullOrUndefined(markerSettings.longitudeValuePath)) ?
|
|
13374
13460
|
Number(getValueFromObject(data, markerSettings.longitudeValuePath)) : !isNullOrUndefined(data['longitude']) ?
|
|
13375
|
-
parseFloat(data['longitude']) : !isNullOrUndefined(data['Longitude']) ? data['Longitude'] :
|
|
13461
|
+
parseFloat(data['longitude']) : !isNullOrUndefined(data['Longitude']) ? data['Longitude'] : null;
|
|
13376
13462
|
const offset = markerSettings.offset;
|
|
13377
13463
|
if (!eventArgs.cancel && markerSettings.visible && !isNullOrUndefined(long) && !isNullOrUndefined(lati)) {
|
|
13378
13464
|
const markerID = this.maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_'
|
|
@@ -13392,10 +13478,10 @@ class Zoom {
|
|
|
13392
13478
|
nullCount += (!isNaN(lati) && !isNaN(long)) ? 0 : 1;
|
|
13393
13479
|
markerTemplateCounts += (eventArgs.cancel) ? 1 : 0;
|
|
13394
13480
|
markerCounts += (eventArgs.cancel) ? 1 : 0;
|
|
13395
|
-
this.maps.markerNullCount = (
|
|
13396
|
-
? this.maps.markerNullCount : this.maps.markerNullCount
|
|
13481
|
+
this.maps.markerNullCount = (isNullOrUndefined(lati) || isNullOrUndefined(long))
|
|
13482
|
+
? this.maps.markerNullCount + 1 : this.maps.markerNullCount;
|
|
13397
13483
|
const markerDataLength = markerDatas.length - this.maps.markerNullCount;
|
|
13398
|
-
if (markerSVGObject.childElementCount === (
|
|
13484
|
+
if (markerSVGObject.childElementCount === (markerDataLength - markerTemplateCounts - nullCount) && (type !== 'Template')) {
|
|
13399
13485
|
layerElement.appendChild(markerSVGObject);
|
|
13400
13486
|
if (currentLayers.markerClusterSettings.allowClustering) {
|
|
13401
13487
|
this.maps.svgObject.appendChild(markerSVGObject);
|
|
@@ -13403,7 +13489,7 @@ class Zoom {
|
|
|
13403
13489
|
clusterTemplate(currentLayers, markerSVGObject, this.maps, layerIndex, markerSVGObject, layerElement, true, true);
|
|
13404
13490
|
}
|
|
13405
13491
|
}
|
|
13406
|
-
if (markerTemplateElements.childElementCount === (
|
|
13492
|
+
if (markerTemplateElements.childElementCount === (markerDataLength - markerCounts - nullCount) && getElementByID(this.maps.element.id + '_Secondary_Element')) {
|
|
13407
13493
|
getElementByID(this.maps.element.id + '_Secondary_Element').appendChild(markerTemplateElements);
|
|
13408
13494
|
if (scale >= 1) {
|
|
13409
13495
|
if (currentLayers.markerClusterSettings.allowClustering) {
|
|
@@ -13798,8 +13884,13 @@ class Zoom {
|
|
|
13798
13884
|
map.translatePoint = new Point(translatePointX, translatePointY);
|
|
13799
13885
|
map.zoomTranslatePoint = map.translatePoint;
|
|
13800
13886
|
map.scale = zoomFactor;
|
|
13801
|
-
this.triggerZoomEvent(prevTilePoint, prevLevel, type)
|
|
13802
|
-
|
|
13887
|
+
if (this.triggerZoomEvent(prevTilePoint, prevLevel, type)) {
|
|
13888
|
+
map.translatePoint = map.zoomTranslatePoint = map.previousPoint;
|
|
13889
|
+
map.scale = map.previousScale;
|
|
13890
|
+
}
|
|
13891
|
+
else {
|
|
13892
|
+
this.applyTransform(true);
|
|
13893
|
+
}
|
|
13803
13894
|
}
|
|
13804
13895
|
else if ((map.isTileMap) && ((zoomFactor >= minZoom && zoomFactor <= maxZoom) || map.isReset)) {
|
|
13805
13896
|
let tileZoomFactor = prevLevel < minZoom && !map.isReset ? minZoom : zoomFactor;
|
|
@@ -13816,25 +13907,32 @@ class Zoom {
|
|
|
13816
13907
|
map.tileTranslatePoint.y = map.initialTileTranslate.y;
|
|
13817
13908
|
tileZoomFactor = map.tileZoomLevel = map.mapScaleValue = map.initialZoomLevel;
|
|
13818
13909
|
}
|
|
13819
|
-
this.triggerZoomEvent(prevTilePoint, prevLevel, type)
|
|
13820
|
-
|
|
13821
|
-
|
|
13822
|
-
|
|
13823
|
-
|
|
13824
|
-
}
|
|
13825
|
-
if (document.querySelector('.GroupElement')) {
|
|
13826
|
-
document.querySelector('.GroupElement').style.display = 'none';
|
|
13910
|
+
if (this.triggerZoomEvent(prevTilePoint, prevLevel, type)) {
|
|
13911
|
+
map.translatePoint = map.tileTranslatePoint = new Point(0, 0);
|
|
13912
|
+
map.scale = map.previousScale;
|
|
13913
|
+
map.tileZoomLevel = prevLevel;
|
|
13914
|
+
map.zoomSettings.zoomFactor = map.previousScale;
|
|
13827
13915
|
}
|
|
13828
|
-
|
|
13829
|
-
|
|
13830
|
-
|
|
13831
|
-
const animationDuration = this.maps.layersCollection[0].animationDuration;
|
|
13832
|
-
setTimeout(() => {
|
|
13833
|
-
this.applyTransform(true);
|
|
13916
|
+
else {
|
|
13917
|
+
map.translatePoint.y = (map.tileTranslatePoint.y - (0.01 * map.mapScaleValue)) / map.scale;
|
|
13918
|
+
map.translatePoint.x = (map.tileTranslatePoint.x - (0.01 * map.mapScaleValue)) / map.scale;
|
|
13834
13919
|
if (document.getElementById(this.maps.element.id + '_LayerIndex_1')) {
|
|
13835
|
-
document.getElementById(this.maps.element.id + '_LayerIndex_1').style.display = '
|
|
13920
|
+
document.getElementById(this.maps.element.id + '_LayerIndex_1').style.display = 'none';
|
|
13836
13921
|
}
|
|
13837
|
-
|
|
13922
|
+
if (document.querySelector('.GroupElement')) {
|
|
13923
|
+
document.querySelector('.GroupElement').style.display = 'none';
|
|
13924
|
+
}
|
|
13925
|
+
this.markerLineAnimation(map);
|
|
13926
|
+
map.mapLayerPanel.generateTiles(tileZoomFactor, map.tileTranslatePoint, type);
|
|
13927
|
+
const element1 = document.getElementById(this.maps.element.id + '_tiles');
|
|
13928
|
+
const animationDuration = this.maps.layersCollection[0].animationDuration;
|
|
13929
|
+
setTimeout(() => {
|
|
13930
|
+
this.applyTransform(true);
|
|
13931
|
+
if (document.getElementById(this.maps.element.id + '_LayerIndex_1')) {
|
|
13932
|
+
document.getElementById(this.maps.element.id + '_LayerIndex_1').style.display = 'block';
|
|
13933
|
+
}
|
|
13934
|
+
}, animationDuration);
|
|
13935
|
+
}
|
|
13838
13936
|
}
|
|
13839
13937
|
this.maps.zoomNotApplied = false;
|
|
13840
13938
|
}
|
|
@@ -13843,7 +13941,7 @@ class Zoom {
|
|
|
13843
13941
|
const map = this.maps;
|
|
13844
13942
|
this.toolBarGroup = map.renderer.createGroup({
|
|
13845
13943
|
id: map.element.id + '_Zooming_KitCollection',
|
|
13846
|
-
opacity: map.theme.toLowerCase() === '
|
|
13944
|
+
opacity: map.theme.toLowerCase() === 'fluentdark' ? 0.6 : 0.3
|
|
13847
13945
|
});
|
|
13848
13946
|
const kitHeight = 16;
|
|
13849
13947
|
const kitWidth = 16;
|
|
@@ -14247,14 +14345,14 @@ class Zoom {
|
|
|
14247
14345
|
if (document.getElementById(map.element.id + '_Zooming_ToolBar_Pan_Group')) {
|
|
14248
14346
|
if (!this.maps.zoomSettings.enablePanning) {
|
|
14249
14347
|
if (target.id.indexOf('_Zooming_ToolBar') > -1 || target.id.indexOf('_Zooming_Rect') > -1) {
|
|
14250
|
-
getElementByID(map.element.id + '_Zooming_ToolBar_Pan_Rect').setAttribute('opacity', map.theme.toLowerCase() === '
|
|
14251
|
-
getElementByID(map.element.id + '_Zooming_ToolBar_Pan').setAttribute('opacity', map.theme.toLowerCase() === '
|
|
14348
|
+
getElementByID(map.element.id + '_Zooming_ToolBar_Pan_Rect').setAttribute('opacity', map.theme.toLowerCase() === 'fluentdark' ? '0.6' : '0.3');
|
|
14349
|
+
getElementByID(map.element.id + '_Zooming_ToolBar_Pan').setAttribute('opacity', map.theme.toLowerCase() === 'fluentdark' ? '0.6' : '0.3');
|
|
14252
14350
|
}
|
|
14253
14351
|
}
|
|
14254
14352
|
}
|
|
14255
14353
|
}
|
|
14256
14354
|
else {
|
|
14257
|
-
getElementByID(map.element.id + '_Zooming_KitCollection').setAttribute('opacity', map.theme.toLowerCase() === '
|
|
14355
|
+
getElementByID(map.element.id + '_Zooming_KitCollection').setAttribute('opacity', map.theme.toLowerCase() === 'fluentdark' ? '0.6' : '0.3');
|
|
14258
14356
|
if (!this.maps.zoomSettings.enablePanning && document.getElementById(map.element.id + '_Zooming_ToolBar_Pan_Group')) {
|
|
14259
14357
|
getElementByID(map.element.id + '_Zooming_ToolBar_Pan_Rect').setAttribute('opacity', '1');
|
|
14260
14358
|
getElementByID(map.element.id + '_Zooming_ToolBar_Pan').setAttribute('opacity', '1');
|
|
@@ -14459,7 +14557,29 @@ class Print {
|
|
|
14459
14557
|
* @private
|
|
14460
14558
|
*/
|
|
14461
14559
|
getHTMLContent(elements) {
|
|
14462
|
-
const
|
|
14560
|
+
const elementRect = getClientElement(this.control.element.id);
|
|
14561
|
+
let div = createElement('div');
|
|
14562
|
+
let divElement = this.control.element.cloneNode(true);
|
|
14563
|
+
if (this.control.isTileMap) {
|
|
14564
|
+
for (let i = 0; i < divElement.childElementCount; i++) {
|
|
14565
|
+
if (divElement.children[i].id === this.control.element.id + '_tile_parent') {
|
|
14566
|
+
divElement.children[i].style.removeProperty('height');
|
|
14567
|
+
divElement.children[i].style.removeProperty('width');
|
|
14568
|
+
divElement.children[i].style.removeProperty('top');
|
|
14569
|
+
divElement.children[i].style.removeProperty('left');
|
|
14570
|
+
divElement.children[i].style.removeProperty('right');
|
|
14571
|
+
divElement.children[i].style.removeProperty('overflow');
|
|
14572
|
+
const svgElement = document.getElementById(this.control.element.id + '_Tile_SVG_Parent');
|
|
14573
|
+
divElement.children[i].children[0].style.overflow = 'hidden';
|
|
14574
|
+
divElement.children[i].children[0].style.position = 'absolute';
|
|
14575
|
+
divElement.children[i].children[0].style.height = svgElement.style.height;
|
|
14576
|
+
divElement.children[i].children[0].style.width = svgElement.style.width;
|
|
14577
|
+
divElement.children[i].children[0].style.left = svgElement.style.left;
|
|
14578
|
+
divElement.children[i].children[0].style.top = svgElement.style.top;
|
|
14579
|
+
break;
|
|
14580
|
+
}
|
|
14581
|
+
}
|
|
14582
|
+
}
|
|
14463
14583
|
if (elements) {
|
|
14464
14584
|
if (elements instanceof Array) {
|
|
14465
14585
|
Array.prototype.forEach.call(elements, (value) => {
|
|
@@ -14474,7 +14594,7 @@ class Print {
|
|
|
14474
14594
|
}
|
|
14475
14595
|
}
|
|
14476
14596
|
else {
|
|
14477
|
-
div.appendChild(
|
|
14597
|
+
div.appendChild(divElement);
|
|
14478
14598
|
}
|
|
14479
14599
|
return div;
|
|
14480
14600
|
}
|
|
@@ -14538,17 +14658,19 @@ class ImageExport {
|
|
|
14538
14658
|
const toolbarEle = document.getElementById(this.control.element.id + '_ToolBar');
|
|
14539
14659
|
const svgParent = document.getElementById(this.control.element.id + '_Tile_SVG_Parent');
|
|
14540
14660
|
let svgDataElement;
|
|
14661
|
+
let tileSvg;
|
|
14662
|
+
let svgObject = getElementByID(this.control.element.id + '_svg').cloneNode(true);
|
|
14541
14663
|
if (!this.control.isTileMap) {
|
|
14542
14664
|
svgDataElement = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">' +
|
|
14543
14665
|
this.control.svgObject.outerHTML + '</svg>';
|
|
14544
14666
|
}
|
|
14545
14667
|
else {
|
|
14546
|
-
|
|
14668
|
+
tileSvg = getElementByID(this.control.element.id + '_Tile_SVG').cloneNode(true);
|
|
14547
14669
|
svgDataElement = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">' +
|
|
14548
|
-
|
|
14670
|
+
svgObject.outerHTML + tileSvg.outerHTML + '</svg>';
|
|
14549
14671
|
}
|
|
14550
14672
|
const url = window.URL.createObjectURL(new Blob(type === 'SVG' ? [svgDataElement] :
|
|
14551
|
-
[(new XMLSerializer()).serializeToString(
|
|
14673
|
+
[(new XMLSerializer()).serializeToString(svgObject)], { type: 'image/svg+xml' }));
|
|
14552
14674
|
if (type === 'SVG') {
|
|
14553
14675
|
if (allowDownload) {
|
|
14554
14676
|
triggerDownload(fileName, type, url, isDownload);
|
|
@@ -14579,6 +14701,9 @@ class ImageExport {
|
|
|
14579
14701
|
image.src = url;
|
|
14580
14702
|
}
|
|
14581
14703
|
else {
|
|
14704
|
+
const svgParentElement = document.getElementById(this.control.element.id + '_MapAreaBorder');
|
|
14705
|
+
let top = parseFloat(svgParentElement.getAttribute('y'));
|
|
14706
|
+
let left = parseFloat(svgParentElement.getAttribute('x'));
|
|
14582
14707
|
const imgxHttp = new XMLHttpRequest();
|
|
14583
14708
|
const imgTileLength = this.control.mapLayerPanel.tiles.length;
|
|
14584
14709
|
for (let i = 0; i <= imgTileLength + 1; i++) {
|
|
@@ -14588,22 +14713,26 @@ class ImageExport {
|
|
|
14588
14713
|
ctxt.fillStyle = this.control.background ? this.control.background : '#FFFFFF';
|
|
14589
14714
|
ctxt.fillRect(0, 0, this.control.availableSize.width, this.control.availableSize.height);
|
|
14590
14715
|
ctxt.font = this.control.titleSettings.textStyle.size + ' Arial';
|
|
14591
|
-
|
|
14592
|
-
|
|
14716
|
+
let titleElement = document.getElementById(this.control.element.id + '_Map_title');
|
|
14717
|
+
if (!isNullOrUndefined(titleElement)) {
|
|
14718
|
+
ctxt.fillStyle = titleElement.getAttribute('fill');
|
|
14719
|
+
ctxt.fillText(this.control.titleSettings.text, parseFloat(titleElement.getAttribute('x')), parseFloat(titleElement.getAttribute('y')));
|
|
14720
|
+
}
|
|
14593
14721
|
exportTileImg.onload = (() => {
|
|
14594
14722
|
if (i === 0 || i === imgTileLength + 1) {
|
|
14595
14723
|
if (i === 0) {
|
|
14596
14724
|
ctxt.setTransform(1, 0, 0, 1, 0, 0);
|
|
14597
|
-
ctxt.rect(0,
|
|
14725
|
+
ctxt.rect(0, top, parseFloat(svgParent.style.width), parseFloat(svgParent.style.height));
|
|
14598
14726
|
ctxt.clip();
|
|
14599
14727
|
}
|
|
14600
14728
|
else {
|
|
14601
|
-
ctxt.setTransform(1, 0, 0, 1,
|
|
14729
|
+
ctxt.setTransform(1, 0, 0, 1, left, top);
|
|
14602
14730
|
}
|
|
14603
14731
|
}
|
|
14604
14732
|
else {
|
|
14605
|
-
|
|
14606
|
-
|
|
14733
|
+
const tileParent = document.getElementById(this.control.element.id + '_tile_parent');
|
|
14734
|
+
ctxt.setTransform(1, 0, 0, 1, parseFloat(tile.style.left) + left, parseFloat(tile.style.top) +
|
|
14735
|
+
top);
|
|
14607
14736
|
}
|
|
14608
14737
|
ctxt.drawImage(exportTileImg, 0, 0);
|
|
14609
14738
|
if (i === imgTileLength + 1) {
|
|
@@ -14629,7 +14758,7 @@ class ImageExport {
|
|
|
14629
14758
|
}
|
|
14630
14759
|
else {
|
|
14631
14760
|
setTimeout(() => {
|
|
14632
|
-
exportTileImg.src = window.URL.createObjectURL(new Blob([(new XMLSerializer()).serializeToString(
|
|
14761
|
+
exportTileImg.src = window.URL.createObjectURL(new Blob([(new XMLSerializer()).serializeToString(tileSvg)], { type: 'image/svg+xml' }));
|
|
14633
14762
|
}, 300);
|
|
14634
14763
|
}
|
|
14635
14764
|
}
|
|
@@ -14707,8 +14836,8 @@ class PdfExport {
|
|
|
14707
14836
|
const exportElement = this.control.svgObject.cloneNode(true);
|
|
14708
14837
|
const backgroundElement = exportElement.childNodes[0];
|
|
14709
14838
|
const backgroundColor = backgroundElement.getAttribute('fill');
|
|
14710
|
-
if ((this.control.theme === 'Tailwind' || this.control.theme === 'TailwindDark' || this.control.theme === 'Bootstrap5' || this.control.theme === 'Bootstrap5Dark'
|
|
14711
|
-
&& (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
|
|
14839
|
+
if ((this.control.theme === 'Tailwind' || this.control.theme === 'TailwindDark' || this.control.theme === 'Bootstrap5' || this.control.theme === 'Bootstrap5Dark'
|
|
14840
|
+
|| this.control.theme === 'Fluent' || this.control.theme === 'FluentDark') && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
|
|
14712
14841
|
exportElement.childNodes[0].setAttribute('fill', 'rgba(255,255,255, 1)');
|
|
14713
14842
|
}
|
|
14714
14843
|
const url = window.URL.createObjectURL(new Blob(type === 'SVG' ? [svgData] :
|
|
@@ -14737,6 +14866,9 @@ class PdfExport {
|
|
|
14737
14866
|
image.src = url;
|
|
14738
14867
|
}
|
|
14739
14868
|
else {
|
|
14869
|
+
const svgParentElement = document.getElementById(this.control.element.id + '_MapAreaBorder');
|
|
14870
|
+
let top = parseFloat(svgParentElement.getAttribute('y'));
|
|
14871
|
+
let left = parseFloat(svgParentElement.getAttribute('x'));
|
|
14740
14872
|
const xHttp = new XMLHttpRequest();
|
|
14741
14873
|
const tileLength = this.control.mapLayerPanel.tiles.length;
|
|
14742
14874
|
for (let i = 0; i <= tileLength + 1; i++) {
|
|
@@ -14746,22 +14878,25 @@ class PdfExport {
|
|
|
14746
14878
|
ctx.fillStyle = this.control.background ? this.control.background : '#FFFFFF';
|
|
14747
14879
|
ctx.fillRect(0, 0, this.control.availableSize.width, this.control.availableSize.height);
|
|
14748
14880
|
ctx.font = this.control.titleSettings.textStyle.size + ' Arial';
|
|
14749
|
-
|
|
14750
|
-
|
|
14881
|
+
let titleElement = document.getElementById(this.control.element.id + '_Map_title');
|
|
14882
|
+
if (!isNullOrUndefined(titleElement)) {
|
|
14883
|
+
ctx.fillStyle = titleElement.getAttribute('fill');
|
|
14884
|
+
ctx.fillText(this.control.titleSettings.text, parseFloat(titleElement.getAttribute('x')), parseFloat(titleElement.getAttribute('y')));
|
|
14885
|
+
}
|
|
14751
14886
|
tileImg.onload = (() => {
|
|
14752
14887
|
if (i === 0 || i === tileLength + 1) {
|
|
14753
14888
|
if (i === 0) {
|
|
14754
14889
|
ctx.setTransform(1, 0, 0, 1, 0, 0);
|
|
14755
|
-
ctx.rect(0,
|
|
14890
|
+
ctx.rect(0, top, parseFloat(svgParent.style.width), parseFloat(svgParent.style.height));
|
|
14756
14891
|
ctx.clip();
|
|
14757
14892
|
}
|
|
14758
14893
|
else {
|
|
14759
|
-
ctx.setTransform(1, 0, 0, 1,
|
|
14894
|
+
ctx.setTransform(1, 0, 0, 1, left, top);
|
|
14760
14895
|
}
|
|
14761
14896
|
}
|
|
14762
14897
|
else {
|
|
14763
|
-
|
|
14764
|
-
|
|
14898
|
+
const tileParent = document.getElementById(this.control.element.id + '_tile_parent');
|
|
14899
|
+
ctx.setTransform(1, 0, 0, 1, parseFloat(tile.style.left) + left, parseFloat(tile.style.top) + top);
|
|
14765
14900
|
}
|
|
14766
14901
|
ctx.drawImage(tileImg, 0, 0);
|
|
14767
14902
|
if (i === tileLength + 1) {
|
|
@@ -14787,7 +14922,8 @@ class PdfExport {
|
|
|
14787
14922
|
}
|
|
14788
14923
|
else {
|
|
14789
14924
|
setTimeout(() => {
|
|
14790
|
-
|
|
14925
|
+
let tileSvg = document.getElementById(this.control.element.id + '_Tile_SVG');
|
|
14926
|
+
tileImg.src = window.URL.createObjectURL(new Blob([(new XMLSerializer()).serializeToString(tileSvg)], { type: 'image/svg+xml' }));
|
|
14791
14927
|
}, 300);
|
|
14792
14928
|
}
|
|
14793
14929
|
}
|
|
@@ -14831,5 +14967,5 @@ class PdfExport {
|
|
|
14831
14967
|
* exporting all modules from maps index
|
|
14832
14968
|
*/
|
|
14833
14969
|
|
|
14834
|
-
export { Maps, load, loaded, click, rightClick, doubleClick, resize, tooltipRender, shapeSelected, shapeHighlight, mousemove, mouseup, mousedown, layerRendering, shapeRendering, markerRendering, markerClusterRendering, markerClick, markerClusterClick, markerMouseMove, markerClusterMouseMove, dataLabelRendering, bubbleRendering, bubbleClick, bubbleMouseMove, animationComplete, legendRendering, annotationRendering, itemSelection, itemHighlight, beforePrint, zoomIn, zoomOut, pan, Annotation, Arrow, Font, Border, CenterPosition, TooltipSettings, Margin, ConnectorLineSettings, MarkerClusterSettings, MarkerClusterData, ColorMappingSettings, InitialMarkerSelectionSettings, InitialShapeSelectionSettings, SelectionSettings, HighlightSettings, NavigationLineSettings, BubbleSettings, CommonTitleSettings, SubTitleSettings, TitleSettings, ZoomSettings, ToggleLegendSettings, LegendSettings, DataLabelSettings, ShapeSettings, MarkerBase, MarkerSettings, LayerSettings, Tile, MapsAreaSettings, Size, stringToNumber, calculateSize, createSvg, getMousePosition, degreesToRadians, radiansToDegrees, convertGeoToPoint, convertTileLatLongToPoint, xToCoordinate, yToCoordinate, aitoff, roundTo, sinci, acos, calculateBound, triggerDownload, Point, MinMax, GeoLocation, measureText, TextOption, PathOption, ColorValue, RectOption, CircleOption, PolygonOption, PolylineOption, LineOption, Line, MapLocation, Rect, PatternOptions, renderTextElement, convertElement, formatValue, convertStringToValue, convertElementFromLabel, drawSymbols, getValueFromObject, markerColorChoose, markerShapeChoose, clusterTemplate, mergeSeparateCluster, clusterSeparate, marker, markerTemplate, maintainSelection, maintainStyleClass, appendShape, drawCircle, drawRectangle, drawPath, drawPolygon, drawPolyline, drawLine, calculateShapes, drawDiamond, drawTriangle, drawCross, drawHorizontalLine, drawVerticalLine, drawStar, drawBalloon, drawPattern, getFieldData, checkShapeDataFields, checkPropertyPath, filter, getRatioOfBubble, findMidPointOfPolygon, isCustomPath, textTrim, findPosition, removeElement, calculateCenterFromPixel, getTranslate, getZoomTranslate, fixInitialScaleForTile, getElementByID, Internalize, getTemplateFunction, getElement, getShapeData, triggerShapeEvent, getElementsByClassName, querySelector, getTargetElement, createStyle, customizeStyle, triggerItemSelectionEvent, removeClass, elementAnimate, timeout, showTooltip, wordWrap, createTooltip, drawSymbol, renderLegendShape, getElementOffset, changeBorderWidth, changeNavaigationLineWidth, targetTouches, calculateScale, getDistance, getTouches, getTouchCenter, sum, zoomAnimate, animate, MapAjax, smoothTranslate, compareZoomFactor, calculateZoomLevel, processResult, LayerPanel, Bubble, BingMap, Marker, ColorMapping, DataLabel, NavigationLine, Legend, Highlight, Selection, MapsTooltip, Zoom, Annotations, Print, ImageExport, PdfExport };
|
|
14970
|
+
export { Maps, load, loaded, click, rightClick, doubleClick, resize, tooltipRender, shapeSelected, shapeHighlight, mousemove, mouseup, mousedown, layerRendering, shapeRendering, markerRendering, markerClusterRendering, markerClick, markerClusterClick, markerMouseMove, markerClusterMouseMove, dataLabelRendering, bubbleRendering, bubbleClick, bubbleMouseMove, animationComplete, legendRendering, annotationRendering, itemSelection, itemHighlight, beforePrint, zoomIn, zoomOut, pan, Annotation, Arrow, Font, Border, CenterPosition, TooltipSettings, Margin, ConnectorLineSettings, MarkerClusterSettings, MarkerClusterData, ColorMappingSettings, InitialMarkerSelectionSettings, InitialShapeSelectionSettings, SelectionSettings, HighlightSettings, NavigationLineSettings, BubbleSettings, CommonTitleSettings, SubTitleSettings, TitleSettings, ZoomSettings, ToggleLegendSettings, LegendSettings, DataLabelSettings, ShapeSettings, MarkerBase, MarkerSettings, LayerSettings, Tile, MapsAreaSettings, Size, stringToNumber, calculateSize, createSvg, getMousePosition, degreesToRadians, radiansToDegrees, convertGeoToPoint, convertTileLatLongToPoint, xToCoordinate, yToCoordinate, aitoff, roundTo, sinci, acos, calculateBound, triggerDownload, Point, MinMax, GeoLocation, measureText, TextOption, PathOption, ColorValue, RectOption, CircleOption, PolygonOption, PolylineOption, LineOption, Line, MapLocation, Rect, PatternOptions, renderTextElement, convertElement, formatValue, convertStringToValue, convertElementFromLabel, drawSymbols, getValueFromObject, markerColorChoose, markerShapeChoose, clusterTemplate, mergeSeparateCluster, clusterSeparate, marker, markerTemplate, maintainSelection, maintainStyleClass, appendShape, drawCircle, drawRectangle, drawPath, drawPolygon, drawPolyline, drawLine, calculateShapes, drawDiamond, drawTriangle, drawCross, drawHorizontalLine, drawVerticalLine, drawStar, drawBalloon, drawPattern, getFieldData, checkShapeDataFields, checkPropertyPath, filter, getRatioOfBubble, findMidPointOfPolygon, isCustomPath, textTrim, findPosition, removeElement, calculateCenterFromPixel, getTranslate, getZoomTranslate, fixInitialScaleForTile, getElementByID, getClientElement, Internalize, getTemplateFunction, getElement, getShapeData, triggerShapeEvent, getElementsByClassName, querySelector, getTargetElement, createStyle, customizeStyle, triggerItemSelectionEvent, removeClass, elementAnimate, timeout, showTooltip, wordWrap, createTooltip, drawSymbol, renderLegendShape, getElementOffset, changeBorderWidth, changeNavaigationLineWidth, targetTouches, calculateScale, getDistance, getTouches, getTouchCenter, sum, zoomAnimate, animate, MapAjax, smoothTranslate, compareZoomFactor, calculateZoomLevel, processResult, LayerPanel, Bubble, BingMap, Marker, ColorMapping, DataLabel, NavigationLine, Legend, Highlight, Selection, MapsTooltip, Zoom, Annotations, Print, ImageExport, PdfExport };
|
|
14835
14971
|
//# sourceMappingURL=ej2-maps.es2015.js.map
|