Configuration routes[]

An array of routes shown on the map.

Type: Array
Show Example:
AngularJS
Knockout
jQuery
<div ng-controller="demoController" style="height: 100%;">
    <div dx-tabs="{
        dataSource: providers,
        onItemClick: tabClicked,
        selectedIndex: 1
    }"></div>
    <div dx-map="{
        routes: mapRoutes,
        zoom: 14,
        bindingOptions: {
            provider: 'currentProvider'
        }
    }"></div>
</div>
var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function ($scope) {
    $scope.providers = ["bing", "google", "googleStatic"];
    $scope.currentProvider = "google";
    $scope.tabClicked = function (e) {
        $scope.currentProvider = e.itemData;
    };
    $scope.mapRoutes = [{
        color: "red",
        weight: 2,
        locations: ["40.748302 -73.978518", "40.748625 -73.992363", "40.757823 -73.995297"]
    },
    {
        color: "blue",
        weight: 4,
        locations: ["40.747802 -73.995297", "40.746302 -73.978518", "40.757823 -73.978518"]
    },
    {
        color: "green",
        weight: 6,
        locations: ["40.749802 -73.981018", "40.749825 -73.987963", "40.755823 -73.986397"]
    }];
});
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});
body{
    text-align: center;
}
.dx-map{
    margin: 10px;
    height: 370px;
}
<div data-bind="dxTabs: {
    dataSource: providers,
    onItemClick: tabClicked,
    selectedIndex: 1
}"></div>
<div data-bind="dxMap: {
    center: '40.753935, -73.983963',
    routes: mapRoutes,
    zoom: 14,
    provider: currentProvider
}"></div>
var myViewModel = {
    providers: ["bing", "google", "googleStatic"],
    currentProvider: ko.observable("google"),
    tabClicked: function (e) {
        this.currentProvider(e.itemData);
    },
    mapRoutes: [{
        color: "red",
        weight: 2,
        locations: [ "40.748302 -73.978518", "40.748625 -73.992363", "40.757823 -73.995297" ]
    },
    {
        color: "blue",
        weight: 4,
        locations: [ "40.747802 -73.995297", "40.746302 -73.978518", "40.757823 -73.978518" ]
    },
    {
        color: "green",
        weight: 6,
        locations: [ "40.749802 -73.981018", "40.749825 -73.987963", "40.755823 -73.986397" ]
    }]
}
ko.applyBindings(myViewModel);
body{
    text-align: center;
}
.dx-map{
    margin: 10px;
    height: 370px;
}
<div id="providersTabs"></div>
<div id="myMap"></div>
$("#providersTabs").dxTabs({
    dataSource: ["bing", "google", "googleStatic"],
    selectedIndex: 1,
    onItemClick: function (e) {
        $("#myMap").dxMap("instance").option("provider", e.itemData);
    }
});
$("#myMap").dxMap({
    provider: "google",
    zoom: 14,
    routes: [{
        color: "red",
        weight: 2,
        locations: ["40.748302 -73.978518", "40.748625 -73.992363", "40.757823 -73.995297"]
    },
    {
        color: "blue",
        weight: 4,
        locations: ["40.747802 -73.995297", "40.746302 -73.978518", "40.757823 -73.978518"]
    },
    {
        color: "green",
        weight: 6,
        locations: ["40.749802 -73.981018", "40.749825 -73.987963", "40.755823 -73.986397"]
    }]
});
body{
    text-align: center;
}
.dx-map{
    margin: 10px;
    height: 370px;
}

color

Specifies the color of the line displaying the route.

Type: String
Default Value: '#0000FF'

locations[]

Contains an array of objects making up the route.

Type: Array

These objects have the same structure as an object passed to the center option.

mode

Specifies a transportation mode to be used in the displayed route.

Type: String
Default Value: 'driving'
Accepted Values: 'driving' | 'walking'

opacity

Specifies the opacity of the line displaying the route.

Type: Number
Default Value: 0.5

weight

Specifies the thickness of the line displaying the route in pixels.

Type: Number
Default Value: 5