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
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.
IgbGeographicSymbolSeries
– displays locations of major citiesIgbGeographicPolylineSeries
– displays routes between major portsIgbGeographicShapeSeries
– displays shapes of countries of the world
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