VectorMap ZoomingAndCentering Demo - Use separate component methods c…

…alls instead of chain (#27743)

apps/demos/Demos/VectorMap/ZoomingAndCentering/Angular/app/app.component.ts

@@ -3,7 +3,8 @@ import {
 } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { DxVectorMapComponent, DxVectorMapModule, DxButtonModule } from 'devextreme-angular';
+import { DxButtonModule } from 'devextreme-angular';
+import { DxVectorMapModule, DxVectorMapComponent, DxVectorMapTypes } from 'devextreme-angular/ui/vector-map';
 import * as mapsData from 'devextreme-dist/js/vectormap-data/world.js';
 import { Marker, Service } from './app.service';
 
@@ -43,9 +44,10 @@ export class AppComponent {
     }
   }
 
-  markerClick({ target, component }) {
-    if (target?.layer.type === 'marker') {
-      component.center(target.coordinates()).zoomFactor(10);
+  markerClick(e: DxVectorMapTypes.ClickEvent) {
+    if (e.target?.layer.type === 'marker') {
+      e.component.center(e.target.coordinates());
+      e.component.zoomFactor(10);
     }
   }
 

apps/demos/Demos/VectorMap/ZoomingAndCentering/React/App.tsx

@@ -3,6 +3,7 @@ import VectorMap, {
   ITooltipProps,
   Layer,
   Tooltip,
+  VectorMapTypes,
 } from 'devextreme-react/vector-map';
 
 import Button from 'devextreme-react/button';
@@ -19,9 +20,10 @@ const customizeTooltip: ITooltipProps['customizeTooltip'] = (arg) => {
   return null;
 };
 
-const markerClick = ({ target, component }) => {
-  if (target?.layer.type === 'marker') {
-    component.center(target.coordinates()).zoomFactor(10);
+const markerClick = (e: VectorMapTypes.ClickEvent) => {
+  if (e.target?.layer.type === 'marker') {
+    e.component.center(e.target.coordinates());
+    e.component.zoomFactor(10);
   }
 };
 

apps/demos/Demos/VectorMap/ZoomingAndCentering/ReactJs/App.js

@@ -11,9 +11,10 @@ const customizeTooltip = (arg) => {
   }
   return null;
 };
-const markerClick = ({ target, component }) => {
-  if (target?.layer.type === 'marker') {
-    component.center(target.coordinates()).zoomFactor(10);
+const markerClick = (e) => {
+  if (e.target?.layer.type === 'marker') {
+    e.component.center(e.target.coordinates());
+    e.component.zoomFactor(10);
   }
 };
 const App = () => {

apps/demos/Demos/VectorMap/ZoomingAndCentering/Vue/App.vue

@@ -30,6 +30,7 @@ import {
   DxVectorMap,
   DxLayer,
   DxTooltip,
+  DxVectorMapTypes,
 } from 'devextreme-vue/vector-map';
 import {
   DxButton,
@@ -46,9 +47,10 @@ function customizeTooltip(info) {
   }
   return null;
 }
-function markerClick(e) {
+function markerClick(e: DxVectorMapTypes.ClickEvent) {
   if (e.target?.layer.type === 'marker') {
-    e.component.center(e.target.coordinates()).zoomFactor(10);
+    e.component.center(e.target.coordinates());
+    e.component.zoomFactor(10);
   }
 }
 function reset() {

apps/demos/Demos/VectorMap/ZoomingAndCentering/jQuery/index.js

@@ -11,7 +11,8 @@ $(() => {
     },
     onClick(e) {
       if (e.target && e.target.layer.type === 'marker') {
-        e.component.center(e.target.coordinates()).zoomFactor(10);
+        e.component.center(e.target.coordinates());
+        e.component.zoomFactor(10);
       }
     },
     bounds: [-180, 85, 180, -60],