Navigation Lines in Blazor Maps Component

4 Nov 20253 minutes to read

Navigation lines denote the path between two locations and can represent flight or sea routes. Enable navigation lines by setting the Visible property of MapsNavigationLine to true.

Customization

The following properties and classes in MapsNavigationLine customize navigation lines in Maps:

• Color – Applies the line color.
• DashArray – Defines dash and gap patterns for the line stroke.
• Width – Sets the line width.
• Angle – Adjusts the curvature angle of the line.
• MapsNavigationLineHighlightSettings – Configures highlight settings.
• MapsNavigationLineSelectionSettings – Configures selection settings.

To draw a line between two cities on the world map, use Latitude and Longitude values to specify start and end points.

@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 }">
                </MapsNavigationLine>
            </MapsNavigationLines>
        </MapsLayer>
    </MapsLayers>
</SfMaps>

Enabling the arrows

Enable an arrow on the navigation line by setting the ShowArrow property of MapsArrow to true. Customize arrow appearance with the following properties:

• Color – Applies the arrow color.
• Offset – Sets the arrow offset along the line.
• Position – Positions the arrow on the line. Possible values: Start and End.
• Size – Sets the arrow size in pixels.

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