Vue Map - routes

An array of routes shown on the map.

Selector: DxRoute
Type:

Array<Object>

Raised Events: onRouteAdded onRouteRemoved

View Demo

color

Specifies the color of the line displaying the route.

Type:

String

Default Value: '#0000FF'

This property supports the following colors:

locations[]

Contains an array of objects making up the route.

Selector: DxLocation
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"

mode

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

Type:

RouteMode

|

String

Default Value: 'driving'

You can choose between two predefined modes— 'driving' or 'walking'—regardless of the current provider. Additionally, provider-specific modes are available:

  • Google

    • DRIVING
    • BICYCLING
    • TRANSIT
    • WALKING

  • Azure

    • bicycle
    • bus
    • car
    • motorcycle
    • pedestrian
    • taxi
    • truck
    • van

  • Bing

    • driving
    • transit
    • truck
    • walking
NOTE

If the route does not render as expected, consider the following:

  • Not every provider supports all possible route modes. Make sure that you specify a supported mode.
  • Check that you specify a provider-specific spelling (compare Google's BICYCLING and Azure's bicycle).
  • DevExtreme Map allows partial access to provider’s API. If you changed configuration, the provider may no longer support the route mode you specified.

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