DevExtreme React - Add and Remove

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

jQuery
JavaScript
$(function() {
    $("#mapContainer").dxMap({
        zoom: 5,
        markers: [
            { location: "40.749825, -73.090443" },
            { location: "42.743244, -71.594375" },
            { location: "37.058435, -74.903842" }
        ]
    });
});
Angular
HTML
TypeScript
<dx-map
    [zoom]="5"
    [markers]="mapMarkers">
</dx-map>
import { DxMapModule } from "devextreme-angular";
// ...
export class AppComponent {
    mapMarkers = [
        { location: "40.749825, -73.090443" },
        { location: "42.743244, -71.594375" },
        { location: "37.058435, -74.903842" }
    ];
}
@NgModule({
    imports: [
        // ...
        DxMapModule
    ],
    // ...
})

View Demo

To add or remove a marker at runtime, call the addMarker(markerOptions) or removeMarker(marker) method.

JavaScript
var 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.

JavaScript
$(function() {
    var 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 () {
            var markers = map.option("markers");
            var markerCount = markers.length;
            if (markerCount < 1)
                return;
            // Removes the last marker
            map.removeMarker(markers[markerCount - 1]);
        }
    });
});

With Angular, AngularJS, or Knockout, use a different technique. Bind the markers option of the Map widget to a component property (in Angular), a scope property (in AngularJS) or an observable array (in Knockout).

Angular
HTML
TypeScript
<dx-map
    [zoom]="10"
    [markers]="mapMarkers"
    (onClick)="addMarker($event)">
</dx-map>
<dx-button
    text="Remove the Last Marker"
    (onClick)="removeMarker()">
</dx-button>
import { DxMapModule, DxButtonModule } from "devextreme-angular";
// ...
export class AppComponent {
    mapMarkers = [
        { location: "40.749825, -73.090443" },
        { location: "42.743244, -71.594375" }
    ];
    addMarker (e) {
        this.mapMarkers.push({ location: e.location });
    };
    removeMarker () {
        this.mapMarkers.pop();
    }
}
@NgModule({
    imports: [
        // ...
        DxMapModule,
        DxButtonModule
    ],
    // ...
})
AngularJS
HTML
JavaScript
<div ng-controller="DemoController">
    <div dx-map="{
        zoom: 10,
        onClick: addMarker,
        bindingOptions: {
            markers: 'mapMarkers'
        }
    }"></div>
    <div dx-button="{
        text: 'Remove the Last Marker',
        onClick: removeMarker
    }"></div>
</div>
angular.module('DemoApp', ['dx'])
    .controller('DemoController', function DemoController($scope) {
        $scope.mapMarkers = [
            { location: "40.749825, -73.090443" },
            { location: "42.743244, -71.594375" }
        ];
        $scope.addMarker = function (e) {
            $scope.mapMarkers.push({ location: e.location });
        }
        $scope.removeMarker = function () {
            $scope.mapMarkers.pop();
        };
    });
Knockout
HTML
JavaScript
<div data-bind="dxMap: { 
    zoom: 10,
    onClick: addMarker,
    markers: mapMarkers 
}"></div>
<div data-bind="dxButton: {
    text: 'Remove the Last Marker',
    onClick: removeMarker
}"></div>
var viewModel = {
    mapMarkers: ko.observableArray([
        { location: "40.749825, -73.090443" },
        { location: "42.743244, -71.594375" }
    ]),
    addMarker: function (e) {
        viewModel.mapMarkers.push({ location: e.location });
    },
    removeMarker: function () {
        viewModel.mapMarkers.pop();
    }
};

ko.applyBindings(viewModel);
See Also