React Map - Add and Remove

To add markers at design-time, pass an array of objects to the markers property. A marker requires only its location to be specified.

  • import React from 'react';
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import { Map } from 'devextreme-react/map';
  •  
  • const mapMarkers = [
  • { location: "40.749825, -73.090443" },
  • { location: "42.743244, -71.594375" },
  • { location: "37.058435, -74.903842" }
  • ];
  •  
  • class App extends React.Component {
  • render() {
  • return (
  • <Map
  • defaultZoom={5}
  • markers={mapMarkers}
  • />
  • );
  • }
  • }
  •  
  • export default App;

View Demo

To add or remove a marker at runtime, bind the markers property of the Map to a state property:

  • import React from 'react';
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import { Map } from 'devextreme-react/map';
  • import { Button } from 'devextreme-react/button';
  •  
  • class App extends React.Component {
  • constructor(props) {
  • super(props);
  •  
  • this.state = {
  • mapMarkers: [
  • { location: "40.749825, -73.090443" },
  • { location: "42.743244, -71.594375" }
  • ]
  • };
  •  
  • this.addMarker = this.addMarker.bind(this);
  • this.removeMarker = this.removeMarker.bind(this);
  • }
  •  
  • addMarker() {
  • this.state.mapMarkers.push({ location: e.location });
  • }
  •  
  • removeMarker() {
  • this.state.mapMarkers.pop();
  • }
  •  
  • render() {
  • return (
  • <div>
  • <Map
  • defaultZoom={10}
  • markers={this.state.mapMarkers}
  • onClick={this.addMarker}
  • />
  • <Button
  • text="Remove the Last Marker"
  • onClick={this.removeMarker}
  • />
  • </div>
  • );
  • }
  • }
  •  
  • export default App;
See Also