Blazor
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Navigation Lines in Blazor Maps component

28 Jul 2021 / 2 minutes to read

Navigation lines are used to denote the path between the two locations. We can use this feature as flight or train or sea routes.

Following example shows rendering the path between two locations using latitudes and longitudes.

Yon can customize the navigation line color, dashArray, width and angle by modifying their default values in MapsNavigationLine.

Refer the below code snippet to navigate line between two cities in World map.

Copied to clipboard
@using Syncfusion.Blazor.Maps

<SfMaps>
    <MapsLayers>
        <MapsLayer ShapeData='new {dataOptions ="https://cdn.syncfusion.com/maps/map-data/world-map.json"}' TValue="string">
            <MapsNavigationLines>
                <MapsNavigationLine Visible="true"
                                    Color="black"
                                    Angle="90"
                                    Width="2"
                                    DashArray="4"
                                    Latitude="new double[]{ 40.7128, 36.7783 }"
                                    Longitude="new double[]{ -74.0060, -119.4179 }">
                </MapsNavigationLine>
            </MapsNavigationLines>
        </MapsLayer>
    </MapsLayers>
</SfMaps>

Maps with navigation lines

Enabling arrows

You can enable arrows in the navigation lines using the ShowArrow property in MapsArrow tag. You can also customize the following properties in arrow:

  • Color - Specifies the color of arrow.
  • Offset - Specifies the arrow’s offset position.
  • Position - Specifies the arrow position to the Start or End of line.
  • Size - Specifies the arrow size in pixels.
Copied to clipboard
@using Syncfusion.Blazor.Maps

<SfMaps>
<MapsLayers>
    <MapsLayer ShapeData='new {dataOptions ="https://cdn.syncfusion.com/maps/map-data/world-map.json"}' TValue="string">
        <MapsNavigationLines>
            <MapsNavigationLine Visible="true"
                                Color="blue"
                                Angle="90"
                                Width="2"
                                DashArray="4"
                                Latitude="new double[]{ 40.7128, 36.7783 }"
                                Longitude="new double[]{ -74.0060, -119.4179 }">
                @*  To set arrow for navigation line  *@
                <MapsArrow ShowArrow="true" Color="blue"></MapsArrow>
            </MapsNavigationLine>
        </MapsNavigationLines>
    </MapsLayer>
</MapsLayers>
</SfMaps>
Previous
Next