@syncfusion/ej2-maps 20.1.47 → 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.
Files changed (15) hide show
  1. package/CHANGELOG.md +9 -1
  2. package/dist/ej2-maps.umd.min.js +2 -2
  3. package/dist/ej2-maps.umd.min.js.map +1 -1
  4. package/dist/es6/ej2-maps.es2015.js +127 -62
  5. package/dist/es6/ej2-maps.es2015.js.map +1 -1
  6. package/dist/es6/ej2-maps.es5.js +129 -64
  7. package/dist/es6/ej2-maps.es5.js.map +1 -1
  8. package/dist/global/ej2-maps.min.js +2 -2
  9. package/dist/global/ej2-maps.min.js.map +1 -1
  10. package/dist/global/index.d.ts +1 -1
  11. package/package.json +7 -7
  12. package/src/maps/maps.js +8 -1
  13. package/src/maps/model/export-image.js +7 -4
  14. package/src/maps/model/export-pdf.js +6 -4
  15. package/src/maps/user-interaction/zoom.js +111 -58
package/dist/es6/ej2-maps.es5.js CHANGED
@@ -7173,6 +7173,10 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
7173
7173
  * Resize the map
7174
7174
  */
7175
7175
  _this.isResize = false;
7176
+ /**
7177
+ * @private
7178
+ */
7179
+ _this.isReset = false;
7176
7180
  /** @private */
7177
7181
  _this.baseSize = new Size(0, 0);
7178
7182
  /** @public */
@@ -8843,7 +8847,10 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
8843
8847
  var collection = Object.keys(newProp.layers[x]);
8844
8848
  for (var _b = 0, collection_1 = collection; _b < collection_1.length; _b++) {
8845
8849
  var collectionProp = collection_1[_b];
8846
- if (collectionProp === 'markerSettings') {
8850
+ if (collectionProp === 'layerType' && newProp.layers[x].layerType === 'OSM') {
8851
+ this.isReset = true;
8852
+ }
8853
+ else if (collectionProp === 'markerSettings') {
8847
8854
  isMarker = true;
8848
8855
  }
8849
8856
  else if (collectionProp === 'staticMapType') {
@@ -13283,8 +13290,13 @@ var Zoom = /** @__PURE__ @class */ (function () {
13283
13290
  translatePointY = (currentHeight < map.mapAreaRect.height) ? (availSize.y + ((-(minBounds['y'])) + ((availSize.height / 2) - (mapTotalHeight / 2)))) : translatePointY;
13284
13291
  map.translatePoint = new Point(translatePointX, translatePointY);
13285
13292
  map.scale = newZoomFactor;
13286
- this.triggerZoomEvent(prevTilePoint, prevLevel, type);
13287
- this.applyTransform();
13293
+ if (this.triggerZoomEvent(prevTilePoint, prevLevel, type)) {
13294
+ map.translatePoint = map.previousPoint;
13295
+ map.scale = map.previousScale;
13296
+ }
13297
+ else {
13298
+ this.applyTransform();
13299
+ }
13288
13300
  }
13289
13301
  else if ((map.isTileMap) && (newZoomFactor >= minZoom && newZoomFactor <= maxZoom)) {
13290
13302
  this.getTileTranslatePosition(prevLevel, newZoomFactor, position, type);
@@ -13301,31 +13313,38 @@ var Zoom = /** @__PURE__ @class */ (function () {
13301
13313
  }
13302
13314
  map.translatePoint.y = (map.tileTranslatePoint.y - (0.01 * map.mapScaleValue)) / map.scale;
13303
13315
  map.translatePoint.x = (map.tileTranslatePoint.x - (0.01 * map.mapScaleValue)) / map.scale;
13304
- this.triggerZoomEvent(prevTilePoint, prevLevel, type);
13305
- if (document.querySelector('.GroupElement')) {
13306
- document.querySelector('.GroupElement').style.display = 'none';
13316
+ if (this.triggerZoomEvent(prevTilePoint, prevLevel, type)) {
13317
+ map.translatePoint = map.tileTranslatePoint = new Point(0, 0);
13318
+ map.scale = map.previousScale;
13319
+ map.tileZoomLevel = prevLevel;
13320
+ map.zoomSettings.zoomFactor = map.previousScale;
13307
13321
  }
13308
- if (document.getElementById(this.maps.element.id + '_LayerIndex_1')) {
13309
- document.getElementById(this.maps.element.id + '_LayerIndex_1').style.display = 'none';
13322
+ else {
13323
+ if (document.querySelector('.GroupElement')) {
13324
+ document.querySelector('.GroupElement').style.display = 'none';
13325
+ }
13326
+ if (document.getElementById(this.maps.element.id + '_LayerIndex_1')) {
13327
+ document.getElementById(this.maps.element.id + '_LayerIndex_1').style.display = 'none';
13328
+ }
13329
+ this.markerLineAnimation(map);
13330
+ map.mapLayerPanel.generateTiles(newZoomFactor, map.tileTranslatePoint, type + 'wheel', null, position);
13331
+ var element1 = document.getElementById(this.maps.element.id + '_tiles');
13332
+ var animationDuration = this.maps.layersCollection[0].animationDuration;
13333
+ setTimeout(function () {
13334
+ // if (type === 'ZoomOut') {
13335
+ // element1.removeChild(element1.children[element1.childElementCount - 1]);
13336
+ // if (element1.childElementCount) {
13337
+ // element1.removeChild(element1.children[element1.childElementCount - 1]);
13338
+ // } else {
13339
+ // element1 = element1;
13340
+ // }
13341
+ // }
13342
+ _this.applyTransform();
13343
+ if (document.getElementById(_this.maps.element.id + '_LayerIndex_1')) {
13344
+ document.getElementById(_this.maps.element.id + '_LayerIndex_1').style.display = 'block';
13345
+ }
13346
+ }, animationDuration);
13310
13347
  }
13311
- this.markerLineAnimation(map);
13312
- map.mapLayerPanel.generateTiles(newZoomFactor, map.tileTranslatePoint, type + 'wheel', null, position);
13313
- var element1 = document.getElementById(this.maps.element.id + '_tiles');
13314
- var animationDuration = this.maps.layersCollection[0].animationDuration;
13315
- setTimeout(function () {
13316
- // if (type === 'ZoomOut') {
13317
- // element1.removeChild(element1.children[element1.childElementCount - 1]);
13318
- // if (element1.childElementCount) {
13319
- // element1.removeChild(element1.children[element1.childElementCount - 1]);
13320
- // } else {
13321
- // element1 = element1;
13322
- // }
13323
- // }
13324
- _this.applyTransform();
13325
- if (document.getElementById(_this.maps.element.id + '_LayerIndex_1')) {
13326
- document.getElementById(_this.maps.element.id + '_LayerIndex_1').style.display = 'block';
13327
- }
13328
- }, animationDuration);
13329
13348
  }
13330
13349
  this.maps.zoomNotApplied = false;
13331
13350
  };
@@ -13347,6 +13366,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
13347
13366
  };
13348
13367
  }
13349
13368
  map.trigger('zoom', zoomArgs);
13369
+ return zoomArgs.cancel;
13350
13370
  };
13351
13371
  Zoom.prototype.getTileTranslatePosition = function (prevLevel, currentLevel, position, type) {
13352
13372
  var map = this.maps;
@@ -13372,6 +13392,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
13372
13392
  var zoomRect = this.zoomingRect;
13373
13393
  var maxZoom = map.zoomSettings.maxZoom;
13374
13394
  var minZoom = map.zoomSettings.minZoom;
13395
+ var isZoomCancelled;
13375
13396
  if (zoomRect.height > 0 && zoomRect.width > 0) {
13376
13397
  var x = this.zoomingRect.x + (this.zoomingRect.width / 2);
13377
13398
  var y = this.zoomingRect.y + (this.zoomingRect.height / 2);
@@ -13384,7 +13405,11 @@ var Zoom = /** @__PURE__ @class */ (function () {
13384
13405
  var translatePointY = translatePoint.y - (((size.height / scale) - (size.height / zoomCalculationFactor)) / (size.height / y));
13385
13406
  map.translatePoint = new Point(translatePointX, translatePointY);
13386
13407
  map.scale = zoomCalculationFactor;
13387
- this.triggerZoomEvent(prevTilePoint, prevLevel, '');
13408
+ isZoomCancelled = this.triggerZoomEvent(prevTilePoint, prevLevel, '');
13409
+ if (isZoomCancelled) {
13410
+ map.translatePoint = map.previousPoint;
13411
+ map.scale = map.previousScale;
13412
+ }
13388
13413
  }
13389
13414
  else {
13390
13415
  zoomCalculationFactor = prevLevel + (Math.round(prevLevel + (((size.width / zoomRect.width) + (size.height / zoomRect.height)) / 2)));
@@ -13397,13 +13422,21 @@ var Zoom = /** @__PURE__ @class */ (function () {
13397
13422
  map.translatePoint.y = (map.tileTranslatePoint.y - (0.5 * Math.pow(2, zoomCalculationFactor))) /
13398
13423
  (Math.pow(2, zoomCalculationFactor));
13399
13424
  map.scale = (Math.pow(2, zoomCalculationFactor));
13400
- this.triggerZoomEvent(prevTilePoint, prevLevel, '');
13401
- map.mapLayerPanel.generateTiles(zoomCalculationFactor, map.tileTranslatePoint);
13425
+ isZoomCancelled = this.triggerZoomEvent(prevTilePoint, prevLevel, '');
13426
+ if (isZoomCancelled) {
13427
+ map.translatePoint = map.tileTranslatePoint = new Point(0, 0);
13428
+ map.scale = map.tileZoomLevel = map.zoomSettings.zoomFactor = prevLevel;
13429
+ }
13430
+ else {
13431
+ map.mapLayerPanel.generateTiles(zoomCalculationFactor, map.tileTranslatePoint);
13432
+ }
13433
+ }
13434
+ if (!isZoomCancelled) {
13435
+ map.mapScaleValue = zoomCalculationFactor;
13436
+ this.applyTransform(true);
13437
+ this.maps.zoomNotApplied = false;
13438
+ this.zoomingRect = null;
13402
13439
  }
13403
- map.mapScaleValue = zoomCalculationFactor;
13404
- this.applyTransform(true);
13405
- this.maps.zoomNotApplied = false;
13406
- this.zoomingRect = null;
13407
13440
  }
13408
13441
  };
13409
13442
  Zoom.prototype.setInteraction = function (newInteraction) {
@@ -13432,6 +13465,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
13432
13465
  this.pinchFactor *= newScale;
13433
13466
  this.pinchFactor = Math.min(this.maps.zoomSettings.maxZoom, Math.max(this.pinchFactor, this.maps.zoomSettings.minZoom));
13434
13467
  var zoomCalculationFactor = this.pinchFactor;
13468
+ var isZoomCancelled;
13435
13469
  if (!map.isTileMap) {
13436
13470
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
13437
13471
  var minBounds = map.baseMapRectBounds['min'];
@@ -13447,7 +13481,11 @@ var Zoom = /** @__PURE__ @class */ (function () {
13447
13481
  translatePointY = (currentHeight < map.mapAreaRect.height) ? (availSize.y + ((-(minBounds['y'])) + ((availSize.height / 2) - (mapTotalHeight / 2)))) : translatePointY;
13448
13482
  map.translatePoint = new Point(translatePointX, translatePointY);
13449
13483
  map.scale = zoomCalculationFactor;
13450
- this.triggerZoomEvent(prevTilePoint, prevLevel, '');
13484
+ isZoomCancelled = this.triggerZoomEvent(prevTilePoint, prevLevel, '');
13485
+ if (isZoomCancelled) {
13486
+ map.translatePoint = map.previousPoint;
13487
+ map.scale = map.previousScale;
13488
+ }
13451
13489
  }
13452
13490
  else {
13453
13491
  var newTileFactor = zoomCalculationFactor;
@@ -13458,10 +13496,20 @@ var Zoom = /** @__PURE__ @class */ (function () {
13458
13496
  map.translatePoint.y = (map.tileTranslatePoint.y - (0.5 * Math.pow(2, newTileFactor))) /
13459
13497
  (Math.pow(2, newTileFactor));
13460
13498
  map.scale = (Math.pow(2, newTileFactor));
13461
- this.triggerZoomEvent(prevTilePoint, prevLevel, '');
13462
- map.mapLayerPanel.generateTiles(newTileFactor, map.tileTranslatePoint);
13499
+ isZoomCancelled = this.triggerZoomEvent(prevTilePoint, prevLevel, '');
13500
+ if (isZoomCancelled) {
13501
+ map.translatePoint = map.tileTranslatePoint = new Point(0, 0);
13502
+ map.scale = map.previousScale;
13503
+ map.tileZoomLevel = prevLevel;
13504
+ map.zoomSettings.zoomFactor = map.previousScale;
13505
+ }
13506
+ else {
13507
+ map.mapLayerPanel.generateTiles(newTileFactor, map.tileTranslatePoint);
13508
+ }
13509
+ }
13510
+ if (!isZoomCancelled) {
13511
+ this.applyTransform();
13463
13512
  }
13464
- this.applyTransform();
13465
13513
  };
13466
13514
  Zoom.prototype.drawZoomRectangle = function () {
13467
13515
  var map = this.maps;
@@ -14172,8 +14220,13 @@ var Zoom = /** @__PURE__ @class */ (function () {
14172
14220
  map.translatePoint = new Point(translatePointX, translatePointY);
14173
14221
  map.zoomTranslatePoint = map.translatePoint;
14174
14222
  map.scale = zoomFactor;
14175
- this.triggerZoomEvent(prevTilePoint, prevLevel, type);
14176
- this.applyTransform(true);
14223
+ if (this.triggerZoomEvent(prevTilePoint, prevLevel, type)) {
14224
+ map.translatePoint = map.zoomTranslatePoint = map.previousPoint;
14225
+ map.scale = map.previousScale;
14226
+ }
14227
+ else {
14228
+ this.applyTransform(true);
14229
+ }
14177
14230
  }
14178
14231
  else if ((map.isTileMap) && ((zoomFactor >= minZoom && zoomFactor <= maxZoom) || map.isReset)) {
14179
14232
  var tileZoomFactor = prevLevel < minZoom && !map.isReset ? minZoom : zoomFactor;
@@ -14190,25 +14243,32 @@ var Zoom = /** @__PURE__ @class */ (function () {
14190
14243
  map.tileTranslatePoint.y = map.initialTileTranslate.y;
14191
14244
  tileZoomFactor = map.tileZoomLevel = map.mapScaleValue = map.initialZoomLevel;
14192
14245
  }
14193
- this.triggerZoomEvent(prevTilePoint, prevLevel, type);
14194
- map.translatePoint.y = (map.tileTranslatePoint.y - (0.01 * map.mapScaleValue)) / map.scale;
14195
- map.translatePoint.x = (map.tileTranslatePoint.x - (0.01 * map.mapScaleValue)) / map.scale;
14196
- if (document.getElementById(this.maps.element.id + '_LayerIndex_1')) {
14197
- document.getElementById(this.maps.element.id + '_LayerIndex_1').style.display = 'none';
14246
+ if (this.triggerZoomEvent(prevTilePoint, prevLevel, type)) {
14247
+ map.translatePoint = map.tileTranslatePoint = new Point(0, 0);
14248
+ map.scale = map.previousScale;
14249
+ map.tileZoomLevel = prevLevel;
14250
+ map.zoomSettings.zoomFactor = map.previousScale;
14198
14251
  }
14199
- if (document.querySelector('.GroupElement')) {
14200
- document.querySelector('.GroupElement').style.display = 'none';
14201
- }
14202
- this.markerLineAnimation(map);
14203
- map.mapLayerPanel.generateTiles(tileZoomFactor, map.tileTranslatePoint, type);
14204
- var element1 = document.getElementById(this.maps.element.id + '_tiles');
14205
- var animationDuration = this.maps.layersCollection[0].animationDuration;
14206
- setTimeout(function () {
14207
- _this.applyTransform(true);
14208
- if (document.getElementById(_this.maps.element.id + '_LayerIndex_1')) {
14209
- document.getElementById(_this.maps.element.id + '_LayerIndex_1').style.display = 'block';
14252
+ else {
14253
+ map.translatePoint.y = (map.tileTranslatePoint.y - (0.01 * map.mapScaleValue)) / map.scale;
14254
+ map.translatePoint.x = (map.tileTranslatePoint.x - (0.01 * map.mapScaleValue)) / map.scale;
14255
+ if (document.getElementById(this.maps.element.id + '_LayerIndex_1')) {
14256
+ document.getElementById(this.maps.element.id + '_LayerIndex_1').style.display = 'none';
14210
14257
  }
14211
- }, animationDuration);
14258
+ if (document.querySelector('.GroupElement')) {
14259
+ document.querySelector('.GroupElement').style.display = 'none';
14260
+ }
14261
+ this.markerLineAnimation(map);
14262
+ map.mapLayerPanel.generateTiles(tileZoomFactor, map.tileTranslatePoint, type);
14263
+ var element1 = document.getElementById(this.maps.element.id + '_tiles');
14264
+ var animationDuration = this.maps.layersCollection[0].animationDuration;
14265
+ setTimeout(function () {
14266
+ _this.applyTransform(true);
14267
+ if (document.getElementById(_this.maps.element.id + '_LayerIndex_1')) {
14268
+ document.getElementById(_this.maps.element.id + '_LayerIndex_1').style.display = 'block';
14269
+ }
14270
+ }, animationDuration);
14271
+ }
14212
14272
  }
14213
14273
  this.maps.zoomNotApplied = false;
14214
14274
  }
@@ -14981,6 +15041,9 @@ var ImageExport = /** @__PURE__ @class */ (function () {
14981
15041
  image_1.src = url;
14982
15042
  }
14983
15043
  else {
15044
+ var svgParentElement = document.getElementById(_this.control.element.id + '_MapAreaBorder');
15045
+ var top_1 = parseFloat(svgParentElement.getAttribute('y'));
15046
+ var left_1 = parseFloat(svgParentElement.getAttribute('x'));
14984
15047
  var imgxHttp = new XMLHttpRequest();
14985
15048
  var imgTileLength_1 = _this.control.mapLayerPanel.tiles.length;
14986
15049
  var _loop_1 = function (i) {
@@ -14999,17 +15062,17 @@ var ImageExport = /** @__PURE__ @class */ (function () {
14999
15062
  if (i === 0 || i === imgTileLength_1 + 1) {
15000
15063
  if (i === 0) {
15001
15064
  ctxt_1.setTransform(1, 0, 0, 1, 0, 0);
15002
- ctxt_1.rect(0, parseFloat(svgParent.style.top), parseFloat(svgParent.style.width), parseFloat(svgParent.style.height));
15065
+ ctxt_1.rect(0, top_1, parseFloat(svgParent.style.width), parseFloat(svgParent.style.height));
15003
15066
  ctxt_1.clip();
15004
15067
  }
15005
15068
  else {
15006
- ctxt_1.setTransform(1, 0, 0, 1, parseFloat(svgParent.style.left), parseFloat(svgParent.style.top));
15069
+ ctxt_1.setTransform(1, 0, 0, 1, left_1, top_1);
15007
15070
  }
15008
15071
  }
15009
15072
  else {
15010
15073
  var tileParent = document.getElementById(_this.control.element.id + '_tile_parent');
15011
- ctxt_1.setTransform(1, 0, 0, 1, parseFloat(tile.style.left) + 10, parseFloat(tile.style.top) +
15012
- (parseFloat(tileParent.style.top)));
15074
+ ctxt_1.setTransform(1, 0, 0, 1, parseFloat(tile.style.left) + left_1, parseFloat(tile.style.top) +
15075
+ top_1);
15013
15076
  }
15014
15077
  ctxt_1.drawImage(exportTileImg, 0, 0);
15015
15078
  if (i === imgTileLength_1 + 1) {
@@ -15148,6 +15211,9 @@ var PdfExport = /** @__PURE__ @class */ (function () {
15148
15211
  image.src = url;
15149
15212
  }
15150
15213
  else {
15214
+ var svgParentElement = document.getElementById(_this.control.element.id + '_MapAreaBorder');
15215
+ var top_1 = parseFloat(svgParentElement.getAttribute('y'));
15216
+ var left_1 = parseFloat(svgParentElement.getAttribute('x'));
15151
15217
  var xHttp = new XMLHttpRequest();
15152
15218
  var tileLength_1 = _this.control.mapLayerPanel.tiles.length;
15153
15219
  var _loop_1 = function (i) {
@@ -15166,17 +15232,16 @@ var PdfExport = /** @__PURE__ @class */ (function () {
15166
15232
  if (i === 0 || i === tileLength_1 + 1) {
15167
15233
  if (i === 0) {
15168
15234
  ctx.setTransform(1, 0, 0, 1, 0, 0);
15169
- ctx.rect(0, parseFloat(svgParent.style.top), parseFloat(svgParent.style.width), parseFloat(svgParent.style.height));
15235
+ ctx.rect(0, top_1, parseFloat(svgParent.style.width), parseFloat(svgParent.style.height));
15170
15236
  ctx.clip();
15171
15237
  }
15172
15238
  else {
15173
- ctx.setTransform(1, 0, 0, 1, parseFloat(svgParent.style.left), parseFloat(svgParent.style.top));
15239
+ ctx.setTransform(1, 0, 0, 1, left_1, top_1);
15174
15240
  }
15175
15241
  }
15176
15242
  else {
15177
15243
  var tileParent = document.getElementById(_this.control.element.id + '_tile_parent');
15178
- ctx.setTransform(1, 0, 0, 1, parseFloat(tile.style.left) + 10, parseFloat(tile.style.top) +
15179
- (parseFloat(tileParent.style.top)));
15244
+ ctx.setTransform(1, 0, 0, 1, parseFloat(tile.style.left) + left_1, parseFloat(tile.style.top) + top_1);
15180
15245
  }
15181
15246
  ctx.drawImage(tileImg, 0, 0);
15182
15247
  if (i === tileLength_1 + 1) {