All docs
V19.1
24.1
The page you are viewing does not exist in version 24.1.
23.2
The page you are viewing does not exist in version 23.2.
23.1
The page you are viewing does not exist in version 23.1.
22.2
The page you are viewing does not exist in version 22.2.
22.1
The page you are viewing does not exist in version 22.1.
21.2
The page you are viewing does not exist in version 21.2.
21.1
The page you are viewing does not exist in version 21.1.
20.2
The page you are viewing does not exist in version 20.2.
20.1
The page you are viewing does not exist in version 20.1.
19.2
19.1
18.2
18.1
17.2
A newer version of this page is available. Switch to the current version.

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