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.
jQuery
$(function() { $("#mapContainer").dxMap({ zoom: 5, markers: [ { location: "40.749825, -73.090443" }, { location: "42.743244, -71.594375" }, { location: "37.058435, -74.903842" } ] }); });
Angular
<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 ], // ... })
To add or remove a marker at runtime, call the addMarker(markerOptions) or removeMarker(marker) method.
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.
$(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
<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
<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
<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
If you have technical questions, please create a support ticket in the DevExpress Support Center.