@syncfusion/ej2-maps 20.4.38 → 20.4.42

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.
@@ -8264,7 +8264,7 @@ let Maps = class Maps extends Component {
8264
8264
  }
8265
8265
  removeTileMap() {
8266
8266
  const animateElement = document.getElementById(this.element.id + '_animated_tiles');
8267
- if (!isNullOrUndefined(this.currentTiles) && animateElement.childElementCount !== this.currentTiles.childElementCount) {
8267
+ if (!isNullOrUndefined(this.currentTiles) && animateElement.childElementCount < this.currentTiles.childElementCount) {
8268
8268
  for (let l = animateElement.childElementCount - 1; l >= this.currentTiles.childElementCount; l--) {
8269
8269
  animateElement.removeChild(animateElement.children[l]);
8270
8270
  }
@@ -12190,12 +12190,13 @@ class Legend {
12190
12190
  }
12191
12191
  if (targetEle !== null) {
12192
12192
  legendShapeId = querySelector(this.maps.element.id + '_Legend_Shape_Index_' + legendIndex, this.maps.element.id);
12193
- legendShapeId.setAttribute('fill', '#E5E5E5');
12194
- if (this.maps.legendSettings.shape === 'HorizontalLine' || this.maps.legendSettings.shape === 'VerticalLine' || this.maps.legendSettings.shape === 'Cross') {
12195
- legendShapeId.setAttribute('stroke', '#E5E5E5');
12196
- }
12197
12193
  legendTextId = querySelector(this.maps.element.id + '_Legend_Text_Index_' + legendIndex, this.maps.element.id);
12198
- legendTextId.setAttribute('fill', '#E5E5E5');
12194
+ if (!this.maps.legendSettings.toggleLegendSettings.applyShapeSettings) {
12195
+ this.setToggleAttributes(legendTextId, legendShapeId, legendToggleFill, legendToggleOpacity, legendToggleBorderColor, legendToggleBorderWidth, legendToggleBorderOpacity, legendToggleFill);
12196
+ }
12197
+ else {
12198
+ this.setToggleAttributes(legendTextId, legendShapeId, this.maps.layers[k].shapeSettings.fill, this.maps.layers[k].shapeSettings.opacity, this.maps.layers[k].shapeSettings.border.color, isNullOrUndefined(this.maps.layers[k].shapeSettings.border.width) ? 0 : this.maps.layers[k].shapeSettings.border.width, isNullOrUndefined(this.maps.layers[k].shapeSettings.border.opacity) ? this.maps.layers[k].shapeSettings.opacity : this.maps.layers[k].shapeSettings.border.opacity, this.maps.layers[k].shapeSettings.fill);
12199
+ }
12199
12200
  }
12200
12201
  }
12201
12202
  else {
@@ -12207,12 +12208,11 @@ class Legend {
12207
12208
  }
12208
12209
  if (targetEle !== null) {
12209
12210
  legendShapeId = querySelector(this.maps.element.id + '_Legend_Shape_Index_' + legendIndex, this.maps.element.id);
12210
- legendShapeId.setAttribute('fill', this.legendCollection[legendIndex]['fill']);
12211
+ legendTextId = querySelector(this.maps.element.id + '_Legend_Text_Index_' + legendIndex, this.maps.element.id);
12212
+ this.setToggleAttributes(legendTextId, legendShapeId, this.legendCollection[legendIndex]['fill'], this.legendCollection[legendIndex]['opacity'], this.legendCollection[legendIndex]['shapeBorder']['color'], this.legendCollection[legendIndex]['shapeBorder']['width'], this.legendCollection[legendIndex]['shapeBorder']['opacity'], '#757575');
12211
12213
  if (this.maps.legendSettings.shape === 'HorizontalLine' || this.maps.legendSettings.shape === 'VerticalLine' || this.maps.legendSettings.shape === 'Cross') {
12212
12214
  legendShapeId.setAttribute('stroke', this.legendCollection[legendIndex]['fill']);
12213
12215
  }
12214
- legendTextId = querySelector(this.maps.element.id + '_Legend_Text_Index_' + legendIndex, this.maps.element.id);
12215
- legendTextId.setAttribute('fill', '#757575');
12216
12216
  }
12217
12217
  }
12218
12218
  }
@@ -12259,9 +12259,13 @@ class Legend {
12259
12259
  }
12260
12260
  if (targetEle !== null) {
12261
12261
  legendTextId = querySelector(this.maps.element.id + '_Legend_Text_Index_' + legendIndex, this.maps.element.id);
12262
- legendTextId.setAttribute('fill', '#E5E5E5');
12263
12262
  legendShapeId = querySelector(this.maps.element.id + '_Legend_Shape_Index_' + legendIndex, this.maps.element.id);
12264
- legendShapeId.setAttribute('fill', '#E5E5E5');
12263
+ if (!this.maps.legendSettings.toggleLegendSettings.applyShapeSettings) {
12264
+ this.setToggleAttributes(legendTextId, legendShapeId, legendToggleFill, legendToggleOpacity, legendToggleBorderColor, legendToggleBorderWidth, legendToggleBorderOpacity, legendToggleFill);
12265
+ }
12266
+ else {
12267
+ this.setToggleAttributes(legendTextId, legendShapeId, this.maps.layers[j].shapeSettings.fill, this.maps.layers[j].shapeSettings.opacity, this.maps.layers[j].shapeSettings.border.color, isNullOrUndefined(this.maps.layers[j].shapeSettings.border.width) ? 0 : this.maps.layers[j].shapeSettings.border.width, isNullOrUndefined(this.maps.layers[j].shapeSettings.border.opacity) ? this.maps.layers[j].shapeSettings.opacity : this.maps.layers[j].shapeSettings.border.opacity, this.maps.layers[j].shapeSettings.fill);
12268
+ }
12265
12269
  }
12266
12270
  }
12267
12271
  else {
@@ -12280,9 +12284,8 @@ class Legend {
12280
12284
  layerElement.setAttribute('stroke', this.maps.layers[j].shapeSettings.border.color);
12281
12285
  if (targetEle !== null) {
12282
12286
  legendTextId = querySelector(this.maps.element.id + '_Legend_Text_Index_' + legendIndex, this.maps.element.id);
12283
- legendTextId.setAttribute('fill', '#757575');
12284
12287
  legendShapeId = querySelector(this.maps.element.id + '_Legend_Shape_Index_' + legendIndex, this.maps.element.id);
12285
- legendShapeId.setAttribute('fill', this.legendCollection[legendIndex]['fill']);
12288
+ this.setToggleAttributes(legendTextId, legendShapeId, this.legendCollection[legendIndex]['fill'], this.legendCollection[legendIndex]['opacity'], this.legendCollection[legendIndex]['shapeBorder']['color'], this.legendCollection[legendIndex]['shapeBorder']['width'], this.legendCollection[legendIndex]['shapeBorder']['opacity'], '#757575');
12286
12289
  }
12287
12290
  }
12288
12291
  }
@@ -12334,9 +12337,13 @@ class Legend {
12334
12337
  }
12335
12338
  if (targetEle !== null) {
12336
12339
  legendTextId = querySelector(this.maps.element.id + '_Legend_Index_' + legendIndex + '_Text', this.maps.element.id);
12337
- legendTextId.setAttribute('fill', '#E5E5E5');
12338
12340
  legendShapeId = querySelector(this.maps.element.id + '_Legend_Index_' + legendIndex, this.maps.element.id);
12339
- legendShapeId.setAttribute('fill', '#E5E5E5');
12341
+ if (!this.maps.legendSettings.toggleLegendSettings.applyShapeSettings) {
12342
+ this.setToggleAttributes(legendTextId, legendShapeId, legendToggleFill, legendToggleOpacity, legendToggleBorderColor, legendToggleBorderWidth, legendToggleBorderOpacity, legendToggleFill);
12343
+ }
12344
+ else {
12345
+ this.setToggleAttributes(legendTextId, legendShapeId, this.maps.layers[k].shapeSettings.fill, this.maps.layers[k].shapeSettings.opacity, this.maps.layers[k].shapeSettings.border.color, (isNullOrUndefined(this.maps.layers[k].shapeSettings.border.width) ? 0 : this.maps.layers[k].shapeSettings.border.width), (isNullOrUndefined(this.maps.layers[k].shapeSettings.border.opacity) ? this.maps.layers[k].shapeSettings.opacity : this.maps.layers[k].shapeSettings.border.opacity), this.maps.layers[k].shapeSettings.fill);
12346
+ }
12340
12347
  }
12341
12348
  }
12342
12349
  else {
@@ -12349,6 +12356,10 @@ class Legend {
12349
12356
  if (targetEle !== null) {
12350
12357
  legendShapeId = querySelector(this.maps.element.id + '_Legend_Index_' + legendIndex, this.maps.element.id);
12351
12358
  legendShapeId.setAttribute('fill', this.legendCollection[legendIndex]['fill']);
12359
+ legendShapeId.setAttribute('fill-opacity', this.legendCollection[legendIndex]['opacity']);
12360
+ legendShapeId.setAttribute('stroke', this.legendCollection[legendIndex]['shapeBorder']['color']);
12361
+ legendShapeId.setAttribute('stroke-width', this.legendCollection[legendIndex]['shapeBorder']['width']);
12362
+ legendShapeId.setAttribute('stroke-opacity', this.legendCollection[legendIndex]['shapeBorder']['opacity']);
12352
12363
  legendTextId = querySelector(this.maps.element.id + '_Legend_Index_' + legendIndex + '_Text', this.maps.element.id);
12353
12364
  legendTextId.setAttribute('fill', '#757575');
12354
12365
  }
@@ -12397,9 +12408,13 @@ class Legend {
12397
12408
  }
12398
12409
  if (targetEle !== null) {
12399
12410
  legendShapeId = querySelector(this.maps.element.id + '_Legend_Index_' + legendIndex, this.maps.element.id);
12400
- legendShapeId.setAttribute('fill', '#E5E5E5');
12401
12411
  legendTextId = querySelector(this.maps.element.id + '_Legend_Index_' + legendIndex + '_Text', this.maps.element.id);
12402
- legendTextId.setAttribute('fill', '#E5E5E5');
12412
+ if (!this.maps.legendSettings.toggleLegendSettings.applyShapeSettings) {
12413
+ this.setToggleAttributes(legendTextId, legendShapeId, legendToggleFill, legendToggleOpacity, legendToggleBorderColor, legendToggleBorderWidth, legendToggleBorderOpacity, legendToggleFill);
12414
+ }
12415
+ else {
12416
+ this.setToggleAttributes(legendTextId, legendShapeId, this.maps.layers[0].shapeSettings.fill, this.maps.layers[k].shapeSettings.opacity, this.maps.layers[0].shapeSettings.border.color, isNullOrUndefined(this.maps.layers[k].shapeSettings.border.width) ? 0 : this.maps.layers[k].shapeSettings.border.width, isNullOrUndefined(this.maps.layers[k].shapeSettings.border.opacity) ? this.maps.layers[k].shapeSettings.opacity : this.maps.layers[k].shapeSettings.border.opacity, this.maps.layers[0].shapeSettings.fill);
12417
+ }
12403
12418
  }
12404
12419
  }
12405
12420
  else {
@@ -12419,9 +12434,8 @@ class Legend {
12419
12434
  mapLegendElement.setAttribute('fill', this.legendCollection[legendIndex]['fill']);
12420
12435
  if (targetEle !== null) {
12421
12436
  legendTextId = querySelector(this.maps.element.id + '_Legend_Index_' + legendIndex + '_Text', this.maps.element.id);
12422
- legendTextId.setAttribute('fill', '#757575');
12423
12437
  legendShapeId = querySelector(this.maps.element.id + '_Legend_Index_' + legendIndex, this.maps.element.id);
12424
- legendShapeId.setAttribute('fill', this.legendCollection[legendIndex]['fill']);
12438
+ this.setToggleAttributes(legendTextId, legendShapeId, this.legendCollection[legendIndex]['fill'], this.legendCollection[legendIndex]['opacity'], this.legendCollection[legendIndex]['shapeBorder']['color'], this.legendCollection[legendIndex]['shapeBorder']['width'], this.legendCollection[legendIndex]['shapeBorder']['opacity'], '#757575');
12425
12439
  }
12426
12440
  }
12427
12441
  }
@@ -12498,6 +12512,16 @@ class Legend {
12498
12512
  }
12499
12513
  return legendData;
12500
12514
  }
12515
+ setToggleAttributes(textElement, shapeElement, fillColor, fillOpacity, borderColor, borderWidth, borderOpacity, textColor) {
12516
+ textElement.setAttribute('fill', textColor);
12517
+ shapeElement.setAttribute('fill', fillColor);
12518
+ shapeElement.setAttribute('fill-opacity', (fillOpacity).toString());
12519
+ shapeElement.setAttribute('stroke', borderColor);
12520
+ shapeElement.setAttribute('stroke-width', (borderWidth).toString());
12521
+ if (!isNullOrUndefined(borderOpacity)) {
12522
+ shapeElement.setAttribute('stroke-opacity', (borderOpacity).toString());
12523
+ }
12524
+ }
12501
12525
  legendGradientColor(colorMap, legendIndex) {
12502
12526
  let legendFillColor;
12503
12527
  const xmlns = 'http://www.w3.org/2000/svg';
@@ -13893,7 +13917,8 @@ class Zoom {
13893
13917
  this.index = layerElement.id.indexOf('_LayerIndex_') > -1 && parseFloat(layerElement.id.split('_LayerIndex_')[1].split('_')[0]);
13894
13918
  this.currentLayer = maps.layersCollection[this.index];
13895
13919
  const factor = maps.mapLayerPanel.calculateFactor(this.currentLayer);
13896
- for (let j = 0; j < layerElement.childElementCount; j++) {
13920
+ const elementCount = layerElement.childElementCount;
13921
+ for (let j = 0; j < elementCount; j++) {
13897
13922
  let currentEle = layerElement.childNodes[j];
13898
13923
  if (!(currentEle.id.indexOf('_Markers_Group') > -1) && (!(currentEle.id.indexOf('_bubble_Group') > -1))
13899
13924
  && (!(currentEle.id.indexOf('_dataLableIndex_Group') > -1))) {