Angular Map - Zoom and Center the Map
The center property centers the Map on a specific location. The center property 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 property. 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.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.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 UI component can automatically change the center and zoom properties to display all markers and routes and align them with the UI component's center. To disable this behavior, assign false to the autoAdjust property.
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.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.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
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.