Blazor Geographic Polygon Map
In Blazor map component, you can use the IgbGeographicShapeSeries to display geo-spatial data using shape polygons in a geographic context. This type of geographic series is often used to render shapes of countries or regions defined by geographic locations.
Blazor Geographic Polygon Map Example
The IgbGeographicShapeSeries works a lot like the IgbGeographicPolylineSeries except that geo-spatial data is rendered with polygons instead of polylines.
Data Requirements
Similar to other types of geographic series in the map control, the IgbGeographicShapeSeries 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 IgbGeographicShapeSeries uses points of this mapped data column to plot polygons in the map control.
Code Snippet
The following code demonstrates how to bind the IgbGeographicShapeSeries to shapes of countries in the world loaded from a shape file using the IgbShapeDataSource.
@using IgniteUI.Blazor.Controls
<IgbGeographicMap Height="100%" Width="100%" Zoomable="true">
<GeographicShapeSeries ShapefileDataSource="DataSource"/>
</IgbGeographicMap>
@code {
public IgbShapeDataSource DataSource;
protected override void OnInitialized()
{
this.DataSource = new IgbShapeDataSource()
{
ShapefileSource = "https://static.infragistics.com/xplatform/shapes/WorldCountries.shp",
DatabaseSource = "https://static.infragistics.com/xplatform/shapes/WorldCountries.dbf"
};
}
}