Skip to main content
All docs
V24.1

DxMapRoute Class

Contains a route’s settings.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

public class DxMapRoute :
    DxComplexSettingsComponent<DxMapRoute, MapRouteModel>,
    IModelProvider<ClientComponentCollectionModel<MapLocationModel>>

Remarks

The DxMapRoute component denotes a route in the map. To create a route, follow the steps below:

  1. Place a DxMapRoute component in the DxMapRoutes collection.
  2. Use the Mode property to specify the transportation mode to be used to build the route: Walking or Driving.
  3. Customize route style settings: Color, Opacity, and Weight.
  4. Add the DxMapRouteLocations component and populate it with key route points (DxMapRouteLocation objects).
<DxMap Zoom="14" Provider="MapProvider.Bing" Width="950px" Height="400px" ControlsVisible="true" >
    <DxMapApiKeys Bing="@MapApiKeyProvider.GetBingProviderKey()" />
    <DxMapRoutes>
        <DxMapRoute Color="green" Weight="9" Mode="MapRouteMode.Walking" >
            <DxMapRouteLocations>
                <DxMapRouteLocation GeoPosition="St. Paul's Cathedral,London" />
                <DxMapRouteLocation GeoPosition="Tate Modern,London" />
            </DxMapRouteLocations>
        </DxMapRoute>
        <DxMapRoute Color="red" Weight="9" Mode="MapRouteMode.Driving" >
            <DxMapRouteLocations>
                <DxMapRouteLocation GeoPosition="St. Paul's Cathedral,London" />
                <DxMapRouteLocation GeoPosition="Tate Modern,London" />
            </DxMapRouteLocations>
        </DxMapRoute>
    </DxMapRoutes>
</DxMap>

map with a walking and driving routes

Run Demo: Map Markers

Inheritance

Object
ComponentBase
DxSettingsComponent<DevExpress.Blazor.ClientComponents.Internal.MapRouteModel>
DxComplexSettingsComponent<DxMapRoute, DevExpress.Blazor.ClientComponents.Internal.MapRouteModel>
DxMapRoute
See Also