React Map - Specify the Size

The default size of the Map UI component is 300x300 pixels. To change it, use to the width and height properties.

  • 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}
  • width="100%"
  • height={500}
  • />
  • );
  • }
  • }
  •  
  • export default App;

If you prefer specifying the UI component size using CSS, set the width and height properties to null.

App.js
styles.css
  • 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}
  • width={null}
  • height={null}
  • />
  • );
  • }
  • }
  •  
  • export default App;
  • #mapContainer {
  • width: 100%;
  • height: 500px;
  • }
See Also