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
    @inject IIgniteUIBlazor IgniteUIBlazor
    
    <IgbGeographicMap Height="100%" Width="100%" Zoomable="true">
        <IgbGeographicPolylineSeries Outline="Red" ShapefileDataSource="DataSource" />
    </IgbGeographicMap>
    
    @code {
    
        public IgbShapeDataSource DataSource;
    
        protected override void OnInitialized()
        {
            IgbGeographicMapModule.Register(IgniteUIBlazor);
    
            this.DataSource = new IgbShapeDataSource()
            {
                ShapefileSource = "https://static.infragistics.com/xplatform/shapes/AmericanRoads.shp",
                DatabaseSource = "https://static.infragistics.com/xplatform/shapes/AmericanRoads.dbf"
            };
        }
    }
    

    API Members