DevExtreme Angular - Handle the Related Events
The Map widget fires the markerAdded and markerRemoved events when a marker is added or removed. To handle them, assign functions to the onMarkerAdded and onMarkerRemoved options, respectively.
jQuery
JavaScript
$(function() { $("#mapContainer").dxMap({ center: { lat: 40.749825, lng: -73.987963 }, zoom: 10, onMarkerAdded: function (e) { var addedMarker = e.options; // The original marker used by the current map provider var originalMarker = e.originalMarker; // Event handling commands go here }, onMarkerRemoved: function (e) { var removedMarker = e.options; // Event handling commands go here } }); });
Angular
HTML
TypeScript
<dx-map [center]="{ lat: 40.749825, lng: -73.987963 }" [zoom]="10" (onMarkerAdded)="markerAdded($event)" (onMarkerRemoved)="markerRemoved($event)"> </dx-map>
import { DxMapModule } from "devextreme-angular"; // ... export class AppComponent { markerAdded (e) { let addedMarker = e.options; // The original marker used by the current map provider let originalMarker = e.originalMarker; // Event handling commands go here }; markerRemoved (e) { let removedMarker = e.options; // Event handling commands go here } } @NgModule({ imports: [ // ... DxMapModule ], // ... })
If you are going to change event handlers at runtime, or if you need to attach several handlers to a single event, subscribe to the markerAdded and markerRemoved events using the on(eventName, eventHandler) method. This approach is more typical of jQuery.
JavaScript
var markerRemovedHandler1 = function (e) { var removedMarker = e.options; // First handler of the "markerRemoved" event }; var markerRemovedHandler2 = function (e) { var removedMarker = e.options; // Second handler of the "markerRemoved" event }; $("#mapContainer").dxMap("instance") .on("markerRemoved", markerRemovedHandler1) .on("markerRemoved", markerRemovedHandler2);
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.