Search results

Zooming in Vue Maps component

24 May 2022 / 1 minute 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.

Copied to clipboard
    <div id="app">
          <div class='wrapper'>
            <ejs-maps :zoomSettings='zoomSettings' :centerPosition='centerPosition'>
                    <e-layer :shapeData='shapeData'></e-layer>

import Vue from 'vue';
import { MapsPlugin, Zoom } from '@syncfusion/ej2-vue-maps';
import { world_map } from './world-map.js';
export default {
data () {
    return {
        zoomSettings: {
            enable: true,
            zoomFactor: 13
        centerPosition: {
            latitude: 25.54244147012483,
            longitude: -89.62646484375
        shapeData: world_map,
provide: {
    maps: [Zoom]
  .wrapper {
    max-width: 400px;
    margin: 0 auto;