Premium

Blazor Binding Multiple Data Sources

In the Ignite UI for Blazor map, you can add multiple geographic series objects to overlay custom data sources with geo-spacial data. For example, IgbGeographicSymbolSeries for plotting geographic locations of airports, the IgbGeographicPolylineSeries for plotting flights between airports, and 2nd IgbGeographicPolylineSeries for plotting gridlines of major geographic coordinates.

Blazor Binding Multiple Data Sources Example

This topic takes you step-by-step towards displaying multiple geographic series that will plot following geo-spatial data:

IgbGeographicSymbolSeries – displays locations of major airports
IgbGeographicPolylineSeries – displays flights between airports
IgbGeographicPolylineSeries – displays gridlines of major coordinates

You can use geographic series in this or other combinations to plot desired data.

Creating Data Sources

Create data sources for all geographic series that you want to display in the Ignite UI for Blazor map. For example, you can the use WorldConnections script.

@code {

    public List<WorldCity> Airports;
    public List<FlightInfo> Flights;
    public List<CoordinateLine> Coordinates;

    protected override void OnInitialized()
    {
        Airports = WorldConnections.GetAirports();
        Flights = WorldConnections.GetFlights();
        Coordinates = WorldConnections.GetGridlines();
    }
}

Overlaying Flights

Create first IgbGeographicPolylineSeries object with flight connections between major airports and add it to the Series collection of the Ignite UI for Blazor map.

<IgbGeographicMap Height="100%" Width="100%" Zoomable="true">
    <IgbGeographicPolylineSeries DataSource="Flights" ShapeMemberPath="Points"
        ShapeStroke="rgba(196, 14, 14, 0.05)" ShapeStrokeThickness="4" />
</IgbGeographicMap>

Overlaying Gridlines

Create second IgbGeographicPolylineSeries object with geographic gridlines and add it to the Series collection of the Ignite UI for Blazor map.

<IgbGeographicMap Height="100%" Width="100%" Zoomable="true">
    <IgbGeographicPolylineSeries DataSource="Coordinates" ShapeMemberPath="Points"
        ShapeStroke="Gray" ShapeStrokeThickness="1" />
</IgbGeographicMap>

Overlaying Airports

Create IgbGeographicSymbolSeries object with airport points and add it to the Series collection of the geographic Ignite UI for Blazor map.

<IgbGeographicMap Height="100%" Width="100%" Zoomable="true">
    <IgbGeographicSymbolSeries DataSource="Airports" LatitudeMemberPath="Lat"
        LongitudeMemberPath="Lon" MarkerType="MarkerType.Circle"
        MarkerBrush="#AAD3DF" MarkerOutline="Black" Thickness="1" />
</IgbGeographicMap>

Summary

For your convenience, all above code snippets are combined into one code block below that you can easily copy to your project.

@using IgniteUI.Blazor.Controls


<IgbGeographicMap Height="100%" Width="100%" Zoomable="true">
    <IgbGeographicPolylineSeries DataSource="Flights" ShapeMemberPath="Points"
        ShapeStroke="rgba(196, 14, 14, 0.05)" ShapeStrokeThickness="4" />
    <IgbGeographicPolylineSeries DataSource="Coordinates" ShapeMemberPath="Points"
        ShapeStroke="Gray" ShapeStrokeThickness="1">
    </IgbGeographicPolylineSeries>
    <IgbGeographicSymbolSeries DataSource="Airports" LatitudeMemberPath="Lat"
        LongitudeMemberPath="Lon" MarkerType="MarkerType.Circle"
        MarkerBrush="#AAD3DF" MarkerOutline="Black" Thickness="1" />
</IgbGeographicMap>

@code {

    private List<WorldCity> Airports;
    private List<FlightInfo> Flights;
    private List<CoordinateLine> Coordinates;

    protected override void OnInitialized()
    {
        Airports = WorldConnections.GetAirports();
        Flights = WorldConnections.GetFlights();
        Coordinates = WorldConnections.GetGridlines();
    }
}

Blazor Binding Multiple Data Sources