Blazor Binding Shape Files with Geo-spatial Data

    The Ignite UI for Blazor map component, the IgbShapeDataSource class loads geo-spatial data (points/locations, polylines, polygons) from shape files and converts it to a collection of IgbShapefileRecord objects.

    Blazor Binding Shape Files with Geo-spatial Data Example

    The following table explains properties of the IgbShapeDataSource class for loading shape files.

    Propiedad Tipo Descripción
    ShapefileSource cadena Especifica el Uri de un archivo de forma (.shp) que contiene elementos de datos geoespaciales.
    DatabaseSource cadena Especifica el Uri de un archivo de base de datos de formas (.dbf) que contiene una tabla de datos para elementos de datos geoespaciales.

    When both source properties are set to non-null values, then the IgbShapeDataSource object’s ImportAsync method is invoked which in return performs fetching and reading the shape files and finally doing the conversion. After this operation is complete, the IgbShapeDataSource is populated with IgbShapefileRecord objects and the ImportCompleted event is raised in order to notify about completed process of loading and converting geo-spatial data from shape files.

    Loading Shapefiles

    The following code creates an instance of the IgbShapeDataSource object for loading a shape file that contains locations of major cities in the world. It also demonstrates how to handle the ImportCompleted event as a prerequisite for binding data to the map component.

    Binding Shapefiles

    In the map component, Geographic Series are used for displaying geo-spatial data that is loaded from shape files. All types of Geographic Series have an DataSource property which can be bound to an array of objects. The IgbShapeDataSource is an example such array because it contains a list of IgbShapefileRecord objects.

    The IgbShapefileRecord class provides properties for storing geo-spatial data, listed in the following table.

    Propiedad Descripción
    Points Contiene todos los puntos en una forma geoespacial cargada desde un archivo de forma (.shp). Por ejemplo, el país de Japón en un archivo de forma se representaría como una lista de un objeto de lista de puntos, donde:
    • La primera lista de puntos describe la forma de la isla de Hokkaido.
    • La segunda lista de puntos describe la forma de la isla Honshu.
    • La tercera lista de puntos describe la forma de la isla de Kyushu.
    • The fourth list of points describes shape of Shikoku island
    Fields Contiene una fila de datos del archivo de bases de datos de formas (.dbf) codificada por el nombre de una columna. Por ejemplo, un dato sobre el condado de Japón que incluye población, área, nombre de una capital, etc.

    Esta estructura de datos es adecuada para su uso en la mayoría de las series geográficas siempre que se les asigne las columnas de datos adecuadas.

    Code Snippet

    This code example assumes that shape files were loaded using the IgbShapeDataSource. The following code binds IgbGeographicPolylineSeries in the map component to the IgbShapeDataSource and maps the Points property of all IgbShapefileRecord objects.

    @using IgniteUI.Blazor.Controls


<IgbGeographicMap Height="100%" Width="100%" Zoomable="true">
    <IgbGeographicPolylineSeries ShapefileDataSource="@DataSource"
        ShapeFilterResolution="0.0"
        ShapeStrokeThickness="3"
        ShapeStroke="rgb(82, 82, 82, 0.4)"/>
</IgbGeographicMap>

@code {

    private ShapeDataSource DataSource;

    protected override void OnInitialized()
    {
        this.DataSource = new IgbShapeDataSource()
        {
            ShapefileSource = "https://static.infragistics.com/xplatform/shapes/WorldCableRoutes.shp",
            DatabaseSource = "https://static.infragistics.com/xplatform/shapes/WorldCableRoutes.dbf"
        };
    }
}

    API References