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