All docs
V20.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

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.

jQuery
JavaScript
$(function() {
    $("#mapContainer").dxMap({
        center: { lat: 40.749825, lng: -73.987963 },
        zoom: 10,
        onRouteAdded: function (e) {
            const addedRoute = e.options;
            // The original route used by the current map provider 
            const originalRoute = e.originalRoute;
            // Event handling commands go here
        },
        onRouteRemoved: function (e) {
            const 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) {
        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
    ],
    // ...
})
Vue
<template>
    <DxMap
        :zoom="10"
        :center="centerCoordinates"
        @route-added="routeAdded"
        @route-removed="routeRemoved"
    />
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { DxMap } from 'devextreme-vue/map';

export default {
    components: {
        DxMap
    },
    data() {
        return {
            centerCoordinates: { lat: 40.749825, lng: -73.987963 }
        };
    },
    methods: {
        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
        }
    }
}
</script>
React
import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { Map } from 'devextreme-react/map';

const centerCoordinates = { lat: 40.749825, lng: -73.987963 };

class App extends React.Component {
    constructor(props) {
        super(props);

        this.routeRemoved = this.routeAdded.bind(this);
        this.routeRemoved = this.routeRemoved.bind(this);
    }

    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
    }

    render() {
        return (
            <Map
                defaultZoom={10}
                defaultCenter={centerCoordinates}
                onRouteAdded={this.routeAdded}
                onRouteRemoved={this.routeRemoved}
            />
        );
    }
}

export default App;

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);
See Also