DevExtreme Vue - Zoom and Center the Map

The center option centers the Map on a specific location. The center option accepts the following location formats in addition to the formats the current provider accepts:

  • { lat: 40.749825, lng: -73.987963 }
  • "40.749825, -73.987963"
  • [ 40.749825, -73.987963 ]
  • "Brooklyn Bridge,New York,NY"

To zoom the Map, set the zoom option. The lower the value, the larger the displayed area.

jQuery
HTML
JavaScript
<div id="mapContainer"></div>
$(function() {
    $("#mapContainer").dxMap({
        center: { lat: 40.749825, lng: -73.987963 },
        zoom: 10
    });
});
Angular
HTML
TypeScript
<dx-map
    [center]="centerCoordinates"
    [zoom]="10">
</dx-map>
import { DxMapModule } from "devextreme-angular";
// ...
export class AppComponent {
    centerCoordinates = { lat: 40.749825, lng: -73.987963 };
}
@NgModule({
    imports: [
        // ...
        DxMapModule
    ],
    // ...
})
Vue
<template>
    <DxMap
        :zoom="10"
        :center="centerCoordinates"
    />
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { DxMap } from 'devextreme-vue/map';

export default {
    components: {
        DxMap
    },
    data() {
        return {
            centerCoordinates: { lat: 40.749825, lng: -73.987963 }
        };
    }
}
</script>
React
import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { Map } from 'devextreme-react/map';

const centerCoordinates = { lat: 40.749825, lng: -73.987963 };

class App extends React.Component {
    render() {
        return (
            <Map
                defaultZoom={10}
                defaultCenter={centerCoordinates}
            />
        );
    }
}

export default App;

Note that the widget can automatically change the center and zoom options to display all markers and routes and align them with the widget's center. To disable this behavior, assign false to the autoAdjust option.

jQuery
JavaScript
$(function() {
    $("#mapContainer").dxMap({
        center: { lat: 40.749825, lng: -73.987963 },
        zoom: 7,
        markers: [
            { location: "42.743244, -71.594375" },
            { location: "37.058435, -74.903842" }
        ],
        autoAdjust: false
    });
});
Angular
HTML
TypeScript
<dx-map
    [center]="centerCoordinates"
    [zoom]="7"
    [autoAdjust]="false"
    [markers]="mapMarkers">
</dx-map>
import { DxMapModule } from "devextreme-angular";
// ...
export class AppComponent {
    centerCoordinates = { lat: 40.749825, lng: -73.987963 };
    mapMarkers = [
        { location: "42.743244, -71.594375" },
        { location: "37.058435, -74.903842" }
    ];
}
@NgModule({
    imports: [
        // ...
        DxMapModule
    ],
    // ...
})
Vue
<template>
    <DxMap
        :zoom="7"
        :center="centerCoordinates"
        :autoAdjust="false"
        :markers="mapMarkers"
    />
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { DxMap } from 'devextreme-vue/map';

export default {
    components: {
        DxMap
    },
    data() {
        return {
            centerCoordinates: { lat: 40.749825, lng: -73.987963 },
            mapMarkers: [
                { location: "42.743244, -71.594375" },
                { location: "37.058435, -74.903842" }
            ]
        };
    }
}
</script>
React
import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { Map } from 'devextreme-react/map';

const centerCoordinates = { lat: 40.749825, lng: -73.987963 };
const mapMarkers = [
    { location: "42.743244, -71.594375" },
    { location: "37.058435, -74.903842" }
];

class App extends React.Component {
    render() {
        return (
            <Map
                zoom={7}
                defaultCenter={centerCoordinates}
                markers={mapMarkers}
                autoAdjust={false}
            />
        );
    }
}

export default App;
See Also