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.common.css';
- 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, call the addMarker(markerOptions) or removeMarker(marker) method.
- const markersCollection = [
- { location: "40.749825, -73.090443" },
- { location: "42.743244, -71.594375", tooltip: { isShown: true } }
- ];
- // Adds a marker
- map.addMarker(markersCollection[0]);
- // Adds several markers
- map.addMarker(markersCollection);
- // Removes the marker with specific configuration
- map.removeMarker(markersCollection[1]);
- // Removes the marker with index 2 in the "markers" array
- map.removeMarker(2);
- // Removes the markers with specific configurations
- map.removeMarker(markersCollection);
- // Removes the markers with indexes 0 and 4 in the "markers" array
- map.removeMarker([0, 4]);
In the following code, a marker is added each time a user clicks someplace on the Map. The last marker from the markers array is removed when the user clicks the Button under the Map.
- $(function() {
- const map = $("#mapContainer").dxMap({
- center: { lat: 40.749825, lng: -73.987963 },
- zoom: 10,
- onClick: function (e) {
- e.component.addMarker({
- // Location of the clicked point on the map
- location: e.location
- });
- }
- }).dxMap("instance");
- $("#removeMarker").dxButton({
- text: "Remove the Last Marker",
- onClick: function () {
- const markers = map.option("markers");
- const markerCount = markers.length;
- if (markerCount < 1)
- return;
- // Removes the last marker
- map.removeMarker(markers[markerCount - 1]);
- }
- });
- });
With Angular, Vue, or React, use a different technique. Bind the markers property of the Map UI component to a component property.
- import React from 'react';
- import 'devextreme/dist/css/dx.common.css';
- 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
If you have technical questions, please create a support ticket in the DevExpress Support Center.