React Map - Handle the Related Events

The Map UI component fires the markerAdded and markerRemoved events when a marker is added or removed. To handle them, assign functions to the onMarkerAdded and onMarkerRemoved properties, respectively.

jQuery
JavaScript
$(function() {
    $("#mapContainer").dxMap({
        center: { lat: 40.749825, lng: -73.987963 },
        zoom: 10,
        onMarkerAdded: function (e) {
            const addedMarker = e.options;
            // The original marker used by the current map provider 
            const originalMarker = e.originalMarker;
            // Event handling commands go here
        },
        onMarkerRemoved: function (e) {
            const 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) {
        const addedMarker = e.options;
        // The original marker used by the current map provider 
        const originalMarker = e.originalMarker;
        // Event handling commands go here
    };
    markerRemoved (e) {
        const removedMarker = e.options;
        // Event handling commands go here
    }
}
@NgModule({
    imports: [
        // ...
        DxMapModule
    ],
    // ...
})
Vue
<template>
    <DxMap
        :zoom="10"
        :center="centerCoordinates"
        @marker-added="markerAdded"
        @marker-removed="markerRemoved"
    />
</template>

<script>
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: {
        markerAdded(e) {
            const addedMarker = e.options;
            // The original marker used by the current map provider 
            const originalMarker = e.originalMarker;
            // Event handling commands go here
        },
        markerRemoved(e) {
            const removedMarker = e.options;
            // Event handling commands go here
        }
    }
}
</script>
React
import React from 'react';
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.markerAdded = this.markerAdded.bind(this);
        this.markerRemoved = this.markerRemoved.bind(this);
    }

    markerAdded(e) {
        const addedMarker = e.options;
        // The original marker used by the current map provider 
        const originalMarker = e.originalMarker;
        // Event handling commands go here
    }

    markerRemoved(e) {
        const removedMarker = e.options;
        // Event handling commands go here
    }

    render() {
        return (
            <Map
                defaultZoom={10}
                defaultCenter={centerCoordinates}
                onMarkerAdded={this.markerAdded}
                onMarkerRemoved={this.markerRemoved}
            />
        );
    }
}

export default App;
jQuery

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.

JavaScript
const markerRemovedHandler1 = function (e) {
    const removedMarker = e.options;
    // First handler of the "markerRemoved" event
};

const markerRemovedHandler2 = function (e) {
    const removedMarker = e.options;
    // Second handler of the "markerRemoved" event
};

$("#mapContainer").dxMap("instance")
    .on("markerRemoved", markerRemovedHandler1)
    .on("markerRemoved", markerRemovedHandler2);
See Also