DxMapRoute Class

Contains a route’s settings.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v25.1.dll

NuGet Package: DevExpress.Blazor

Declaration

C#

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

Razor

<DxMap Zoom="14"
       Provider="MapProvider.Azure"
       Width="950px"
       Height="400px"
       ControlsVisible="true" >
    <DxMapApiKeys Azure="@MapApiKeyProvider.GetAzureProviderKey()" />
    <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>

Run Demo: Map Routes

Implements

IComponent

IHandleEvent

IHandleAfterRender

IDisposable

Inheritance

Object

ComponentBase

DxSettingsComponent<DevExpress.Blazor.ClientComponents.Internal.MapRouteModel>

DxComplexSettingsComponent<DxMapRoute, DevExpress.Blazor.ClientComponents.Internal.MapRouteModel>

DxMapRoute