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.

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"
            ]
        }]
    });
});

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

AngularJS

JavaScript
angular.module('DemoApp', ['dx'])
    .controller('DemoController', function DemoController($scope) {
        $scope.mapRoutes = [{
            locations: [
                "40.782500, -73.966111",
                "40.755833, -73.986389"
            ]
        }];
        $scope.addRoute = function (e) {
            $scope.mapRoutes.push({
                locations: [ 
                    "40.753889, -73.981389",
                    "Brooklyn Bridge,New York,NY"
                ]
            });
        }
        $scope.removeRoute = function () {
            $scope.mapRoutes.pop();
        };
    });
HTML
<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>

Knockout

JavaScript
var viewModel = {
    mapRoutes: ko.observableArray([{
        locations: [
            "40.782500, -73.966111",
            "40.755833, -73.986389"
        ]
    }]),
    addRoute: function (e) {
        viewModel.mapRoutes.push({
            locations: [ 
                "40.753889, -73.981389",
                "Brooklyn Bridge,New York,NY"
            ]
        });
    },
    removeRoute: function () {
        viewModel.mapRoutes.pop();
    }
};

ko.applyBindings(viewModel);
HTML
<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>
See Also