Blazor [Preview]
Demos
Support
Forum
Download
Search results

Navigation Lines

The navigation lines are used to denote path between two locations. You can use this feature to draw the flight, train, and sea routes.

Customization

You can customize the following properties in the navigation lines by modifying their default values in MapsNavigationLine:

  • Color - Specifies the color of navigation line.
  • Dash array - Specifies the type of dash array line.
  • Width - Specifies the line width.
  • Angle - Specifies the navigation line angle.
  • Highlight settings - Customizes the opacity, border, and fill color when the cursor hovers over it.
  • Selection settings - Customizes the opacity, border, and fill color when the line is selected.

Refer to following code snippet to navigate line between two cities in the world map along with customization.

@using Syncfusion.EJ2.Blazor.Maps

<EjsMaps>
    <MapsLayers>
        <MapsLayer ShapeData='new {dataOptions ="https://cdn.syncfusion.com/maps/map-data/world-map.json"}'>
            <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>
</EjsMaps>

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.
@using Syncfusion.EJ2.Blazor.Maps

<EjsMaps>
    <MapsLayers>
        <MapsLayer ShapeData='new {dataOptions ="https://cdn.syncfusion.com/maps/map-data/world-map.json"}'>
            <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>
</EjsMaps>
Previous
Next