Angular Map - Handle the Related Events

The Map UI component fires the routeAdded and routeRemoved events when a marker is added or removed. To handle them, assign functions to the onRouteAdded and onRouteRemoved properties, respectively.

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) {
        const addedRoute = e.options;
        // The original route used by the current map provider 
        const originalRoute = e.originalRoute;
        // Event handling commands go here
    };
    routeRemoved (e) {
        const 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


const routeRemovedHandler1 = function (e) {
    const removedRoute = e.options;
    // First handler of the "routeRemoved" event
};
 
const routeRemovedHandler2 = function (e) {
    const removedRoute = e.options;
    // Second handler of the "routeRemoved" event
};
 
$("#mapContainer").dxMap("instance")
    .on("routeRemoved", routeRemovedHandler1)
    .on("routeRemoved", routeRemovedHandler2);

Angular Map - Handle the Related Events

See Also