@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.
@@ -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 (isNullOrUndefined(getElement(elementClass.id)) || index === 0) {
1244
- document.body.appendChild(elementClass);
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 'fluentui':
3382
+ case 'fluent':
3358
3383
  themePalette = ['#614570', '#4C6FB1', '#CC6952', '#3F579A', '#4EA09B',
3359
3384
  '#6E7A89', '#D4515C', '#E6AF5D', '#639751', '#9D4D69'];
3360
3385
  break;
3361
- case 'fluentuidark':
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 'fluentui':
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 'fluentuidark':
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']) : 0;
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']) : 0;
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 === (markerData.length - markerCount - nullCount) && getElementByID(this.maps.element.id + '_Secondary_Element')) {
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
- for (let k = 0; k < this.layers[i].markerSettings.length; k++) {
7213
- if (this.layers[i].markerSettings[k].selectionSettings && this.layers[i].markerSettings[k].selectionSettings.enable
7214
- && this.layers[i].markerSettings[k].initialMarkerSelection.length > 0) {
7215
- const markerSelectionValues = this.layers[i].markerSettings[k].initialMarkerSelection;
7216
- for (let j = 0; j < markerSelectionValues.length; j++) {
7217
- this.markerInitialSelection(i, k, this.layers[i].markerSettings[k], markerSelectionValues[j].latitude, markerSelectionValues[j].longitude);
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 === 'markerSettings') {
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.removeTooltip();
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.removeTooltip();
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.removeTooltip();
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
- this.applyTransform();
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
- if (document.querySelector('.GroupElement')) {
12937
- document.querySelector('.GroupElement').style.display = 'none';
12938
- }
12939
- if (document.getElementById(this.maps.element.id + '_LayerIndex_1')) {
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
- this.markerLineAnimation(map);
12943
- map.mapLayerPanel.generateTiles(newZoomFactor, map.tileTranslatePoint, type + 'wheel', null, position);
12944
- const element1 = document.getElementById(this.maps.element.id + '_tiles');
12945
- const animationDuration = this.maps.layersCollection[0].animationDuration;
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 = 'block';
12996
+ document.getElementById(this.maps.element.id + '_LayerIndex_1').style.display = 'none';
12958
12997
  }
12959
- }, animationDuration);
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
- map.mapLayerPanel.generateTiles(zoomCalculationFactor, map.tileTranslatePoint);
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
- map.mapLayerPanel.generateTiles(newTileFactor, map.tileTranslatePoint);
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'] : 0;
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'] : 0;
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 = (!isNullOrUndefined(lati) || !isNullOrUndefined(long))
13396
- ? this.maps.markerNullCount : this.maps.markerNullCount + 1;
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 === (markerDatas.length - markerTemplateCounts - nullCount) && (type !== 'Template')) {
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 === (markerDatas.length - markerCounts - nullCount) && getElementByID(this.maps.element.id + '_Secondary_Element')) {
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
- this.applyTransform(true);
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
- map.translatePoint.y = (map.tileTranslatePoint.y - (0.01 * map.mapScaleValue)) / map.scale;
13821
- map.translatePoint.x = (map.tileTranslatePoint.x - (0.01 * map.mapScaleValue)) / map.scale;
13822
- if (document.getElementById(this.maps.element.id + '_LayerIndex_1')) {
13823
- document.getElementById(this.maps.element.id + '_LayerIndex_1').style.display = 'none';
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
- this.markerLineAnimation(map);
13829
- map.mapLayerPanel.generateTiles(tileZoomFactor, map.tileTranslatePoint, type);
13830
- const element1 = document.getElementById(this.maps.element.id + '_tiles');
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 = 'block';
13920
+ document.getElementById(this.maps.element.id + '_LayerIndex_1').style.display = 'none';
13836
13921
  }
13837
- }, animationDuration);
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() === 'fluentuidark' ? 0.6 : 0.3
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() === 'fluentuidark' ? '0.6' : '0.3');
14251
- getElementByID(map.element.id + '_Zooming_ToolBar_Pan').setAttribute('opacity', map.theme.toLowerCase() === 'fluentuidark' ? '0.6' : '0.3');
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() === 'fluentuidark' ? '0.6' : '0.3');
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 div = createElement('div');
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(this.control.element.cloneNode(true));
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
- const tileSvg = document.getElementById(this.control.element.id + '_Tile_SVG');
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
- this.control.svgObject.outerHTML + tileSvg.outerHTML + '</svg>';
14670
+ svgObject.outerHTML + tileSvg.outerHTML + '</svg>';
14549
14671
  }
14550
14672
  const url = window.URL.createObjectURL(new Blob(type === 'SVG' ? [svgDataElement] :
14551
- [(new XMLSerializer()).serializeToString(this.control.svgObject)], { type: 'image/svg+xml' }));
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
- ctxt.fillStyle = document.getElementById(this.control.element.id + '_Map_title').getAttribute('fill');
14592
- ctxt.fillText(this.control.titleSettings.text, parseFloat(document.getElementById(this.control.element.id + '_Map_title').getAttribute('x')), parseFloat(document.getElementById(this.control.element.id + '_Map_title').getAttribute('y')));
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, parseFloat(svgParent.style.top), parseFloat(svgParent.style.width), parseFloat(svgParent.style.height));
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, parseFloat(svgParent.style.left), parseFloat(svgParent.style.top));
14729
+ ctxt.setTransform(1, 0, 0, 1, left, top);
14602
14730
  }
14603
14731
  }
14604
14732
  else {
14605
- ctxt.setTransform(1, 0, 0, 1, parseFloat(tile.style.left) + 10, parseFloat(tile.style.top) +
14606
- (parseFloat(document.getElementById(this.control.element.id + '_tile_parent').style.top)));
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(document.getElementById(this.control.element.id + '_Tile_SVG'))], { type: 'image/svg+xml' }));
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
- ctx.fillStyle = document.getElementById(this.control.element.id + '_Map_title').getAttribute('fill');
14750
- ctx.fillText(this.control.titleSettings.text, parseFloat(document.getElementById(this.control.element.id + '_Map_title').getAttribute('x')), parseFloat(document.getElementById(this.control.element.id + '_Map_title').getAttribute('y')));
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, parseFloat(svgParent.style.top), parseFloat(svgParent.style.width), parseFloat(svgParent.style.height));
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, parseFloat(svgParent.style.left), parseFloat(svgParent.style.top));
14894
+ ctx.setTransform(1, 0, 0, 1, left, top);
14760
14895
  }
14761
14896
  }
14762
14897
  else {
14763
- ctx.setTransform(1, 0, 0, 1, parseFloat(tile.style.left) + 10, parseFloat(tile.style.top) +
14764
- (parseFloat(document.getElementById(this.control.element.id + '_tile_parent').style.top)));
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
- tileImg.src = window.URL.createObjectURL(new Blob([(new XMLSerializer()).serializeToString(document.getElementById(this.control.element.id + '_Tile_SVG'))], { type: 'image/svg+xml' }));
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