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