React 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.common.css';
  • 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, call the addRoute(routeOptions) or removeRoute(route) method.

JavaScript
  • const routesCollection = [{
  • locations: [
  • "40.753889, -73.981389",
  • "Brooklyn Bridge,New York,NY"
  • ]
  • }, {
  • locations: [
  • [40.8304282, -73.9455893],
  • [40.767693, -73.9962566],
  • [40.7198128, -74.0012278]
  • ]
  • }];
  •  
  • // Adds a route
  • map.addRoute(routesCollection[0]);
  •  
  • // Adds several routes
  • map.addRoute(routesCollection);
  •  
  • // Removes the route with specific configuration
  • map.removeRoute(routesCollection[0]);
  •  
  • // Removes the route with index 1 in the "routes" array
  • map.removeRoute(1);
  •  
  • // Removes the routes with specific configurations
  • map.removeRoute(routesCollection);
  •  
  • // Removes the routes with indexes 0 and 2 in the "routes" array
  • map.removeRoute([0, 2]);

With Angular, Vue, or React, use a different technique. Bind the routes property of the Map UI component 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.common.css';
  • 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