Blazor Geographic Polyline Map
In Blazor map component, you can use the IgbGeographicPolylineSeries to display geo-spatial data using polylines in a geographic context. This type of geographic series is often used to render roads or connections between geographic locations such as cities or airports.
Blazor Geographic Polyline Map Example
The IgbGeographicPolylineSeries works a lot like the IgbGeographicShapeSeries except that geo-spatial data is rendered with polylines instead of polygons.
Data Requirements
Similarly to other types of geographic series in the control, the IgbGeographicPolylineSeries has the DataSource property which can be bound to an array of objects. In addition, each data item in this object must have one data column that stores single/multiple shapes using an array of arrays of objects with x and y values representing geographic locations. This data column is then mapped to the ShapeMemberPath property. The IgbGeographicPolylineSeries uses points of this mapped data column to plot polygons in the control.
Code Snippet
The following code shows how to bind the IgbGeographicPolylineSeries to locations of cities loaded from a shape file using the IgbShapeDataSource.
@using IgniteUI.Blazor.Controls
<IgbGeographicMap Height="100%" Width="100%" Zoomable="true">
<IgbGeographicPolylineSeries Outline="Red" ShapefileDataSource="DataSource" />
</IgbGeographicMap>
@code {
public IgbShapeDataSource DataSource;
protected override void OnInitialized()
{
this.DataSource = new IgbShapeDataSource()
{
ShapefileSource = "https://static.infragistics.com/xplatform/shapes/AmericanRoads.shp",
DatabaseSource = "https://static.infragistics.com/xplatform/shapes/AmericanRoads.dbf"
};
}
}