Vue Map - Add and Remove
To add markers at design-time, pass an array of objects to the markers property. A marker requires only its location to be specified.
jQuery
$(function() { $("#mapContainer").dxMap({ zoom: 5, markers: [ { location: "40.749825, -73.090443" }, { location: "42.743244, -71.594375" }, { location: "37.058435, -74.903842" } ] }); });
Angular
<dx-map [zoom]="5" [markers]="mapMarkers"> </dx-map>
import { DxMapModule } from "devextreme-angular"; // ... export class AppComponent { mapMarkers = [ { location: "40.749825, -73.090443" }, { location: "42.743244, -71.594375" }, { location: "37.058435, -74.903842" } ]; } @NgModule({ imports: [ // ... DxMapModule ], // ... })
Vue
<template> <DxMap :zoom="5" :markers="mapMarkers" /> </template> <script> import 'devextreme/dist/css/dx.light.css'; import { DxMap } from 'devextreme-vue/map'; export default { components: { DxMap }, data() { return { mapMarkers: [ { location: "40.749825, -73.090443" }, { location: "42.743244, -71.594375" }, { location: "37.058435, -74.903842" } ] }; } } </script>
React
import React from 'react'; import 'devextreme/dist/css/dx.light.css'; import { Map } from 'devextreme-react/map'; const mapMarkers = [ { location: "40.749825, -73.090443" }, { location: "42.743244, -71.594375" }, { location: "37.058435, -74.903842" } ]; class App extends React.Component { render() { return ( <Map defaultZoom={5} markers={mapMarkers} /> ); } } export default App;
jQuery
To add or remove a marker at runtime, call the addMarker(markerOptions) or removeMarker(marker) method.
const markersCollection = [ { location: "40.749825, -73.090443" }, { location: "42.743244, -71.594375", tooltip: { isShown: true } } ]; // Adds a marker map.addMarker(markersCollection[0]); // Adds several markers map.addMarker(markersCollection); // Removes the marker with specific configuration map.removeMarker(markersCollection[1]); // Removes the marker with index 2 in the "markers" array map.removeMarker(2); // Removes the markers with specific configurations map.removeMarker(markersCollection); // Removes the markers with indexes 0 and 4 in the "markers" array map.removeMarker([0, 4]);
In the following code, a marker is added each time a user clicks someplace on the Map. The last marker from the markers array is removed when the user clicks the Button under the Map.
$(function() { const map = $("#mapContainer").dxMap({ center: { lat: 40.749825, lng: -73.987963 }, zoom: 10, onClick: function (e) { e.component.addMarker({ // Location of the clicked point on the map location: e.location }); } }).dxMap("instance"); $("#removeMarker").dxButton({ text: "Remove the Last Marker", onClick: function () { const markers = map.option("markers"); const markerCount = markers.length; if (markerCount < 1) return; // Removes the last marker map.removeMarker(markers[markerCount - 1]); } }); });
Angular
To add or remove a marker at runtime, bind the markers property of the Map to a component property:
<dx-map [zoom]="10" [markers]="mapMarkers" (onClick)="addMarker($event)"> </dx-map> <dx-button text="Remove the Last Marker" (onClick)="removeMarker()"> </dx-button>
import { DxMapModule, DxButtonModule } from "devextreme-angular"; // ... export class AppComponent { mapMarkers = [ { location: "40.749825, -73.090443" }, { location: "42.743244, -71.594375" } ]; addMarker (e) { this.mapMarkers.push({ location: e.location }); }; removeMarker () { this.mapMarkers.pop(); } } @NgModule({ imports: [ // ... DxMapModule, DxButtonModule ], // ... })
Vue
To add or remove a marker at runtime, bind the markers property of the Map to a component property:
<template> <div> <DxMap :zoom="10" :markers="mapMarkers" @click="addMarker" /> <DxButton text="Remove the Last Marker" @click="removeMarker" /> </div> </template> <script> import 'devextreme/dist/css/dx.light.css'; import { DxMap } from 'devextreme-vue/map'; import { DxButton } from 'devextreme-vue/button'; export default { components: { DxMap, DxButton }, data() { return { mapMarkers: [ { location: "40.749825, -73.090443" }, { location: "42.743244, -71.594375" } ] }; }, methods: { addMarker(e) { this.mapMarkers.push({ location: e.location }); }, removeMarker() { this.mapMarkers.pop(); } } } </script>
React
To add or remove a marker at runtime, bind the markers property of the Map to a state property:
import React from 'react'; import 'devextreme/dist/css/dx.light.css'; import { Map } from 'devextreme-react/map'; import { Button } from 'devextreme-react/button'; class App extends React.Component { constructor(props) { super(props); this.state = { mapMarkers: [ { location: "40.749825, -73.090443" }, { location: "42.743244, -71.594375" } ] }; this.addMarker = this.addMarker.bind(this); this.removeMarker = this.removeMarker.bind(this); } addMarker() { this.state.mapMarkers.push({ location: e.location }); } removeMarker() { this.state.mapMarkers.pop(); } render() { return ( <div> <Map defaultZoom={10} markers={this.state.mapMarkers} onClick={this.addMarker} /> <Button text="Remove the Last Marker" onClick={this.removeMarker} /> </div> ); } } export default App;
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.