routes[]

An array of routes shown on the map.

Type: Array
Show Example:
AngularJS
Knockout
jQuery

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

You can specify the locations value in one of the following formats.

  • { lat: 40.749825, lng: -73.987963}
  • "40.749825, -73.987963"
  • [40.749825, -73.987963]
  • 'Brooklyn Bridge,New York,NY'

When you configure the Map using ASP.NET MVC Wrappers, specify this option using the Address() or Coordinates() method as shown in the following code.

Razor C#
Razor VB
@(Html.DevExtreme().Map()
    .Routes(routes => {
        routes.Add().Locations(locations => {
            locations.Add().Address("Brooklyn Bridge,New York,NY");
            locations.Add().Coordinates(40.753889, -73.95);
        });
    })
)
@(Html.DevExtreme().Map() _
    .Routes(Sub(routes)
        routes.Add().Locations(Sub(locations)
            locations.Add().Address("Brooklyn Bridge,New York,NY")
            locations.Add().Coordinates(40.753889, -73.95)
        End Sub)
    End Sub)
)

mode

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

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

When configuring the widget using ASP.NET MVC Wrappers, specify this option using the GeoMapRouteMode enum. This enum accepts the following values: Driving and 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