DevExtreme React - Add and Remove

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

jQuery
JavaScript
$(function() {
    $("#mapContainer").dxMap({
        zoom: 5,
        routes: [{
            locations: [
                { lat: 40.782500, lng: -73.966111 },
                "40.755833, -73.986389",
                [ 40.753889, -73.981389 ],
                "Brooklyn Bridge,New York,NY"
            ]
        }]
    });
});
Angular
HTML
TypeScript
<dx-map
    [zoom]="5"
    [routes]="mapRoutes">
</dx-map>
import { DxMapModule } from "devextreme-angular";
// ...
export class AppComponent {
    mapRoutes = [{
        locations: [
            { lat: 40.782500, lng: -73.966111 },
            "40.755833, -73.986389",
            [ 40.753889, -73.981389 ],
            "Brooklyn Bridge,New York,NY"
        ]
    }];
}
@NgModule({
    imports: [
        // ...
        DxMapModule
    ],
    // ...
})

View Demo

To add or remove a route at runtime, call the addRoute(routeOptions) or removeRoute(route) method.

JavaScript
var 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, AngularJS, or Knockout, use a different technique. Bind the routes option of the Map widget to a component property (in Angular), a scope property (in AngularJS), or an observable array (in Knockout).

Angular
HTML
TypeScript
<dx-map
    [zoom]="10"
    [markers]="mapRoutes">
</dx-map>
<dx-button
    text="Add the Route"
    (onClick)="addRoute()">
</dx-button>
<dx-button
    text="Remove the Route"
    (onClick)="removeRoute()">
</dx-button>
import { DxMapModule, DxButtonModule } from "devextreme-angular";
// ...
export class AppComponent {
    mapRoutes = [{
        locations: [
            "40.782500, -73.966111",
            "40.755833, -73.986389"
        ]
    }];
    addRoute () {
        this.mapRoutes.push({
            locations: [
                "40.753889, -73.981389",
                "Brooklyn Bridge,New York,NY"
            ]
        });
    };
    removeRoute () {
        this.mapRoutes.pop();
    }
}
@NgModule({
    imports: [
        // ...
        DxMapModule,
        DxButtonModule
    ],
    // ...
})
AngularJS
HTML
JavaScript
<div ng-controller="DemoController">
    <div dx-map="{
        zoom: 10,
        bindingOptions: {
            routes: 'mapRoutes'
        }
    }"></div>
    <div dx-button="{
        text: 'Add the Route',
        onClick: addRoute
    }"></div>
    <div dx-button="{
        text: 'Remove the Route',
        onClick: removeRoute
    }"></div>
</div>
angular.module('DemoApp', ['dx'])
    .controller('DemoController', function DemoController($scope) {
        $scope.mapRoutes = [{
            locations: [
                "40.782500, -73.966111",
                "40.755833, -73.986389"
            ]
        }];
        $scope.addRoute = function () {
            $scope.mapRoutes.push({
                locations: [ 
                    "40.753889, -73.981389",
                    "Brooklyn Bridge,New York,NY"
                ]
            });
        }
        $scope.removeRoute = function () {
            $scope.mapRoutes.pop();
        };
    });
Knockout
HTML
JavaScript
<div data-bind="dxMap: { 
    zoom: 10,
    routes: mapRoutes 
}"></div>

<div data-bind="dxButton: {
    text: 'Add the Route',
    onClick: addRoute
}"></div>

<div data-bind="dxButton: {
    text: 'Remove the Route',
    onClick: removeRoute
}"></div>
var viewModel = {
    mapRoutes: ko.observableArray([{
        locations: [
            "40.782500, -73.966111",
            "40.755833, -73.986389"
        ]
    }]),
    addRoute: function () {
        viewModel.mapRoutes.push({
            locations: [ 
                "40.753889, -73.981389",
                "Brooklyn Bridge,New York,NY"
            ]
        });
    },
    removeRoute: function () {
        viewModel.mapRoutes.pop();
    }
};

ko.applyBindings(viewModel);
See Also