Search results

Center position zooming

You can achieve the center position zooming by using the centerPosition and zoomFactor APIs as mentioned in the following code example. The center position is used to configure the zoom level of maps, and zoom factor is used to specify the center position where the map should be displayed.

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

// initialize Maps component
let map: Maps = new Maps({
    zoomSettings:{
    enable:false,
    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="usa.js"></script>
    <script src="data.js"></script>
    <script src="california.js"></script>
    <script src="texas.js"></script>
    <script src="africa_continent.js"></script>
    <script src="africa.js"></script>
    <script src="cluster.js"></script>
    <script src="systemjs.config.js"></script>
</head>

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

</html>