React Map - routes

An array of routes shown on the map.

Type:

Array<Object>

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