DevExtreme jQuery - 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
Feedback