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.
@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>
You can enable arrows in the navigation lines using the ShowArrow
property in MapsArrow
tag. You can also customize the following properties in arrow:
Start
or End
of line.@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>