DevExtreme Angular - Handle the Related Events
The Map widget fires the routeAdded and routeRemoved events when a marker is added or removed. To handle them, assign functions to the onRouteAdded and onRouteRemoved options, respectively.
jQuery
JavaScript
$(function() { $("#mapContainer").dxMap({ center: { lat: 40.749825, lng: -73.987963 }, zoom: 10, onRouteAdded: function (e) { var addedRoute = e.options; // The original route used by the current map provider var originalRoute = e.originalRoute; // Event handling commands go here }, onRouteRemoved: function (e) { var removedRoute = e.options; // Event handling commands go here } }); });
Angular
HTML
TypeScript
<dx-map [center]="{ lat: 40.749825, lng: -73.987963 }" [zoom]="10" (onRouteAdded)="routeAdded($event)" (onRouteRemoved)="routeRemoved($event)"> </dx-map>
import { DxMapModule } from "devextreme-angular"; // ... export class AppComponent { routeAdded (e) { let addedRoute = e.options; // The original route used by the current map provider let originalRoute = e.originalRoute; // Event handling commands go here }; routeRemoved (e) { let removedRoute = 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 routeRemovedHandler1 = function (e) { var removedRoute = e.options; // First handler of the "routeRemoved" event }; var routeRemovedHandler2 = function (e) { var removedRoute = e.options; // Second handler of the "routeRemoved" event }; $("#mapContainer").dxMap("instance") .on("routeRemoved", routeRemovedHandler1) .on("routeRemoved", routeRemovedHandler2);
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.