Angular Binding Shape Files with Geo-spatial Data

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

Angular Binding Shape Files with Geo-spatial Data Example

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

When both source properties are set to non-null values, then the IgxShapeDataSource 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 IgxShapeDataSource 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 IgxShapeDataSource object for loading a shape file that contains the world’s undersea cable routes. It also demonstrates how to handle the importCompleted event as a prerequisite for binding data to the map component.

import { IgxShapeDataSource } from 'igniteui-angular-core';
import { IgxGeographicMapComponent } from 'igniteui-angular-maps';
@ViewChild("map", { static: true } )
private map: IgxGeographicMapComponent
// ...
/**
 * What the shapefile becomes once it has loaded: records turned into routes, bound to the series that
 * draws them.
 *
 * A handler for the shape data source's importCompleted, and the source is created in code by the item
 * that requires this one — so there is nothing in a description to bind it to, and it is not an
 * initializer either.
 */
export class MapShpFileReaders {

    /** Each record is one cable route, with the fields the shapefile's database holds beside it. */
    public readRoutes(sds: IgxShapeDataSource, e: any, map: IgxGeographicMapComponent): void {
        var geoRoutes: any[] = [];
        var pointData = sds.getPointData();
        // parsing shapefile data and creating geo-locations
        for (var i = 0; i < pointData.length; i++) {
            var record = pointData[i];
            // using field/column names from .DBF file
            geoRoutes.push({
                points: record.points,
                name: record.fieldValues.Name,
                capacity: record.fieldValues.CapacityG,
                distance: record.fieldValues.DistanceKM
            });
        }

        var lineSeries = map.series.item(0) as IgxGeographicPolylineSeriesComponent;
        lineSeries.dataSource = geoRoutes;
    }
}
// ...
private mapShpFileReaders: MapShpFileReaders = new MapShpFileReaders();
var root = "https://static.infragistics.com/xplatform/shapes/";
var readers = this.mapShpFileReaders;
var map = this.map;

var sds = new IgxShapeDataSource();
sds.importCompleted.subscribe((s: IgxShapeDataSource, e: any) => readers.readRoutes(s, e, map));
sds.shapefileSource = root + "WorldCableRoutes.shp";
sds.databaseSource = root + "WorldCableRoutes.dbf";
sds.dataBind();

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 a dataSource property which can be bound to an array of objects. What a IgxShapeDataSource produces is an example of such an array, because each item in it is a IgxShapefileRecord.

The IgxShapefileRecord 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 IgxShapeDataSource. The following code binds IgxGeographicPolylineSeriesComponent in the map component to the records that source produced, and maps the IgxShapefileRecord.points property of each IgxShapefileRecord through shapeMemberPath.

<igx-geographic-map
    #map
    height="100%"
    width="100%"
    zoomable="true">
    <igx-geographic-polyline-series
        #lineSeries
        shapeMemberPath="points"
        shapeFilterResolution=0
        shapeStrokeThickness=3
        shapeStroke="rgb(82, 82, 82, 0.4)">
    </igx-geographic-polyline-series>
</igx-geographic-map>

API References