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;
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
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.