All docs
V19.1
24.2
The page you are viewing does not exist in version 24.2.
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.

JavaScript/jQuery Map - routes

An array of routes shown on the map.

Type:

Array<Object>

Raised Events: onRouteAdded onRouteRemoved

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<Object>

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 use the Map as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control, 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'

Use the GeoMapRouteMode enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. 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