Vue Map - Add and Remove

To add routes at design-time, pass an array of objects to the routes property. A route requires only its locations to be specified. The locations will be connected and make up the route.

  • <template>
  • <DxMap
  • :zoom="5"
  • :routes="mapRoutes"
  • />
  • </template>
  •  
  • <script>
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import { DxMap } from 'devextreme-vue/map';
  •  
  • export default {
  • components: {
  • DxMap
  • },
  • data() {
  • return {
  • mapRoutes: [{
  • locations: [
  • { lat: 40.782500, lng: -73.966111 },
  • "40.755833, -73.986389",
  • [ 40.753889, -73.981389 ],
  • "Brooklyn Bridge,New York,NY"
  • ]
  • }]
  • };
  • }
  • }
  • </script>

View Demo

To add or remove a route at runtime, bind the routes property of the Map to a component property.

  • <template>
  • <div>
  • <DxMap
  • :zoom="10"
  • :routes="mapRoutes"
  • />
  • <DxButton
  • text="Add the Route"
  • @click="addRoute"
  • />
  • <DxButton
  • text="Remove the Route"
  • @click="removeRoute"
  • />
  • </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 {
  • mapRoutes: [{
  • locations: [
  • { lat: 40.782500, lng: -73.966111 },
  • "40.755833, -73.986389",
  • [ 40.753889, -73.981389 ],
  • "Brooklyn Bridge,New York,NY"
  • ]
  • }]
  • };
  • },
  • methods: {
  • addRoute() {
  • this.mapRoutes.push({
  • locations: [
  • "40.753889, -73.981389",
  • "Brooklyn Bridge,New York,NY"
  • ]
  • });
  • },
  • removeRoute() {
  • this.mapRoutes.pop();
  • }
  • }
  • }
  • </script>
See Also