DevExtreme jQuery/JS - 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.

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

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
  • ],
  • // ...
  • })
See Also