Angular 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
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.