Web Components Binding Shape Files with Geo-spatial Data

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

Web Components Binding Shape Files with Geo-spatial Data Example

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

When both source properties are set to non-null values, then the IgcShapefileRecord 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 IgcShapefileRecord is populated with IgxShapefileRecord 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 IgcShapefileRecord 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.

 TODO - ADD CODE SNIPPET

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 IgcShapefileRecord is an example such array because it contains a list of IgxShapefileRecord objects.

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

This data structure is suitable for use in most Geographic Series as long as appropriate data columns are mapped to them.

Code Snippet

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

<igc-geographic-map id="geoMap" width="100%" height="100%">

</igc-geographic-map>

connectedCallback() {
    this.geoMap = document.getElementById("geoMap") as IgcGeographicMapComponent;

    const sds = new IgcShapeDataSource();
    sds.importCompleted = this.onDataLoaded;
    sds.shapefileSource = "../shapes/WorldCities.shp";
    sds.databaseSource  = "../shapes/WorldCities.dbf";
    sds.dataBind();
}

onDataLoaded(sds: IgcShapeDataSource, e: any) {
    const shapeRecords = sds.getPointData();
    console.log("loaded WorldCities.shp " + shapeRecords.length);
    const geoLocations: any[] = [];
    // parsing shapefile data and creating geo-locations
    for (const record of shapeRecords) {
        const pop = record.fieldValues.POPULATION;
        if (pop > 0) {
            // each shapefile record has just one point
            const location = {
                latitude: record.points[0][0].y,
                longitude: record.points[0][0].x,
                city: record.fieldValues.NAME,
                population: pop
            };
            geoLocations.push(location);
        }
    }

    const geoSeries = new IgcGeographicSymbolSeriesComponent();
    geoSeries.dataSource = geoLocations;
    geoSeries.markerType = MarkerType.Circle;
    geoSeries.latitudeMemberPath  = "latitude";
    geoSeries.longitudeMemberPath = "longitude";
    geoSeries.markerBrush = "LightGray";
    geoSeries.markerOutline = "Black";
    geoSeries.tooltipTemplate = this.createTooltip;

    this.geoMap.series.add(geoSeries);
}

API References