Blazor Binding and Overlaying Multiple Shape Files

    In the Ignite UI for Blazor map, you can add multiple geographic series objects to overlay a few shapefiles with geo-spacial data. For example, IgbGeographicSymbolSeries for plotting geographic locations of ports, the IgbGeographicPolylineSeries for plotting routes between ports, and the IgbGeographicShapeSeries for plotting shapes of countries.

    Blazor Binding and Overlaying Multiple Shape Files Example

    EXAMPLE
    MODULES
    RAZOR
    CSS

    Like this sample? Get access to our complete Ignite UI for Blazor toolkit and start building your own apps in minutes. Download it for free.

    This topic takes you step-by-step towards displaying multiple geographic series in the map component. All geographic series plot following geo-spatial data loaded from shape files using the IgbShapeDataSource class. Refer to the Binding Shape Files topic for more information about IgbShapeDataSource object.

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

    Importing Components

    First, let's import required components and modules:

    // in Program.cs file
    
    builder.Services.AddIgniteUIBlazor(
        typeof(IgbGeographicMapModule),
        typeof(IgbDataChartInteractivityModule)
    );
    razor

    Creating Series

    Next, we need to create a map with a few Geographic Series that will later load different type of shapefile.

    <IgbGeographicMap Height="100%" Width="100%" Zoomable="true">
        <IgbGeographicShapeSeries ShapefileDataSource="@AsiaShape" Outline="Black" Thickness="1" Brush="Red" />
        <IgbGeographicShapeSeries ShapefileDataSource="@EuropeShape" Outline="Black" Thickness="1" Brush="Purple" />
    </IgbGeographicMap>
    razor

    Loading Shapefiles

    Next, in constructor of your page, add a IgbShapeDataSource for each shapefile that you want to display in the geographic map component.

    public IgbShapeDataSource AsiaShape;
    public IgbShapeDataSource EuropeShape;
    
    protected override void OnInitialized()
    {
        this.AsiaShape = new IgbShapeDataSource()
        {
            ShapefileSource = "https://static.infragistics.com/xplatform/shapes/world_region_asia.shp",
            DatabaseSource = "https://static.infragistics.com/xplatform/shapes/world_region_asia.dbf"
        };
    
        this.EuropeShape = new IgbShapeDataSource()
        {
            ShapefileSource = "https://static.infragistics.com/xplatform/shapes/world_region_europe.shp",
            DatabaseSource = "https://static.infragistics.com/xplatform/shapes/world_region_europe.dbf"
        };
    }
    razor

    Map Background

    Also, you might want to hide geographic imagery from the map background content if your shape files provided sufficient geographic context (e.g. shape of countries) for your application.

    <IgbGeographicMap Height="100%" Width="100%" BackgroundContent="@null"/>
    razor

    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">
        <IgbGeographicShapeSeries ShapefileDataSource="AsiaShape" Outline="Black" Thickness="1" Brush="Red" />
        <IgbGeographicShapeSeries ShapefileDataSource="EuropeShape" Outline="Black" Thickness="1" Brush="Purple" />
    </IgbGeographicMap>
    
    @code {
    
        public IgbShapeDataSource AsiaShape;
        public IgbShapeDataSource EuropeShape;
    
        protected override void OnInitialized()
        {
            this.AsiaShape = new IgbShapeDataSource()
            {
                ShapefileSource = "https://static.infragistics.com/xplatform/shapes/world_region_asia.shp",
                DatabaseSource = "https://static.infragistics.com/xplatform/shapes/world_region_asia.dbf"
            };
    
            this.EuropeShape = new IgbShapeDataSource()
            {
                ShapefileSource = "https://static.infragistics.com/xplatform/shapes/world_region_europe.shp",
                DatabaseSource = "https://static.infragistics.com/xplatform/shapes/world_region_europe.dbf"
            };
        }
    }
    razor

    API References