Zooming in EJ2 TypeScript Maps control

27 Apr 20232 minutes to read

The center position zooming can be achieved by using the centerPosition and zoomFactor properties as mentioned in the following example. The center position is used to configure the zoom level of Maps, and the zoom factor is used to specify the center position where the Maps should be displayed.

index.ts
index.html
import { world_map } from './world-map.ts';
import { Maps,Zoom } from '@syncfusion/ej2-maps';
Maps.Inject(Zoom);

// initialize Maps component
let map: Maps = new Maps({
    zoomSettings:{
        enable: true,
        zoomFactor:13
    },
    centerPosition: {
        latitude: 25.54244147012483,
        longitude: -89.62646484375
    },
    layers: [
        {
            shapeData: world_map
        }
    ]
}, '#element');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Maps</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="world-map.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container' style="height: 500px; width: 700px">
        <div id='element'></div>
    </div>

</body>

</html>