JavaScript/jQuery Map - routes

An array of routes shown on the map.

Type:

Array<Object>

Raised Events: onRouteAdded onRouteRemoved

View Demo

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