Premium

Angular Binding and Overlaying Multiple Shape Files

In the Ignite UI for Angular map, you can add multiple geographic series objects to overlay a few shapefiles with geo-spacial data. For example, IgxGeographicSymbolSeriesComponent for plotting geographic locations of ports, the IgxGeographicPolylineSeriesComponent for plotting routes between ports, and the IgxGeographicShapeSeriesComponent for plotting shapes of countries.

Angular Binding and Overlaying Multiple Shape Files Example

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 IgxShapefileRecord class. Refer to the Binding Shape Files topic for more information about IgxShapefileRecord object.

IgxGeographicSymbolSeriesComponent – displays locations of major cities
IgxGeographicPolylineSeriesComponent – displays routes between major ports
IgxGeographicShapeSeriesComponent – 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:

import { IgxGeographicShapeSeriesComponent, IgxGeographicPolylineSeriesComponent, IgxGeographicSymbolSeriesComponent } from 'igniteui-angular-maps';
import { IgxShapeDataSource } from 'igniteui-angular-core';
import { IgxGeographicMapComponent } from 'igniteui-angular-maps';

import { IgxGeographicMapModule } from 'igniteui-angular-maps';
import { IgxDataChartInteractivityModule } from 'igniteui-angular-charts';
// ...
// app.module.ts
@NgModule({
    imports: [
    IgxGeographicMapModule,
    IgxDataChartInteractivityModule
    ]
})
export class AppModule { }

Creating Series

Next, we need to create a map with a few Geographic Series that will later load different type of shapefile.

<igx-geographic-map
    #geoMap
    height="100%"
    width="100%"
    zoomable="true">
    <igx-geographic-shape-series
        #polygonSeries
        shapeMemberPath="points"
        shapeFill="rgb(150, 150, 150)"
        shapeStroke="Black"
        shapeStrokeThickness=1>
    </igx-geographic-shape-series>
    <igx-geographic-polyline-series
        #lineSeries
        shapeMemberPath="points"
        shapeStroke="rgba(147, 15, 180, 0.5)"
        thickness=3>
    </igx-geographic-polyline-series>
    <igx-geographic-symbol-series
        #symbolSeries
        longitudeMemberPath="longitude"
        latitudeMemberPath="latitude"
        markerType="Circle"
        markerOutline="rgba(2, 102, 196, 1)"
        markerBrush="White">
    </igx-geographic-symbol-series>
</igx-geographic-map>

Loading Shapefiles

Next, in constructor of your page, add a IgxShapefileRecord for each shapefile that you want to display in the geographic map component. Each source is given the method that turns its records into data; those methods belong to a MapMultipleShapesReaders class, and the sections below show each of them.

import { IgxShapeDataSource } from 'igniteui-angular-core';
import { IgxGeographicMapComponent } from 'igniteui-angular-maps';
// ...
private mapMultipleShapesReaders: MapMultipleShapesReaders = new MapMultipleShapesReaders();
// ...
var root = "https://static.infragistics.com/xplatform/shapes/";
var readers = this.mapMultipleShapesReaders;
var map = this.geoMap;

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

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

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

Processing Polygons

Process shapes data loaded in IgxShapefileRecord with countries of the world and assign it to IgxGeographicShapeSeriesComponent object.

/** Country shapes, with the fields the tooltip shows taken from the .DBF file. */
public readPolygons(sds: IgxShapeDataSource, e: any, map: IgxGeographicMapComponent): void {
    var geoPolygons: any[] = [];
    var pointData = sds.getPointData();
    // parsing shapefile data and creating geo-polygons
    for (var i = 0; i < pointData.length; i++) {
        var record = pointData[i];
        // using field/column names from .DBF file
        geoPolygons.push({
            points: record.points,
            name: record.fieldValues.NAME,
            gdp: record.fieldValues.GDP,
            population: record.fieldValues.POPULATION
        });
    }

    var shapeSeries = map.series.item(0) as IgxGeographicShapeSeriesComponent;
    shapeSeries.dataSource = geoPolygons;
}

Processing Polyline

Process shapes data loaded in IgxShapefileRecord with communication routes between major cities and assign it to IgxGeographicPolylineSeriesComponent object.

/** Connections between places, each record one path. */
public readPolylines(sds: IgxShapeDataSource, e: any, map: IgxGeographicMapComponent): void {
    var geoPolylines: any[] = [];
    var pointData = sds.getPointData();
    // parsing shapefile data and creating geo-polylines
    for (var i = 0; i < pointData.length; i++) {
        var record = pointData[i];
        // using field/column names from .DBF file
        geoPolylines.push({
            points: record.points,
            name: record.fieldValues.Name,
            capacity: record.fieldValues.CapacityG,
            distance: record.fieldValues.DistanceKM,
            isOverLand: record.fieldValues.OverLand === 0,
            isActive: record.fieldValues.NotLive !== 0,
            service: record.fieldValues.InService
        });
    }

    var lineSeries = map.series.item(1) as IgxGeographicPolylineSeriesComponent;
    lineSeries.dataSource = geoPolylines;
}

Processing Points

Process shapes data loaded in IgxShapefileRecord with locations of major cities and assign it to IgxGeographicSymbolSeriesComponent object.

/** Cities with a known population, one point per record. */
public readPoints(sds: IgxShapeDataSource, e: any, map: IgxGeographicMapComponent): void {
    var geoLocations: any[] = [];
    var pointData = sds.getPointData();
    // parsing shapefile data and creating geo-locations
    for (var i = 0; i < pointData.length; i++) {
        var record = pointData[i];
        var pop = record.fieldValues.POPULATION;
        if (pop > 0) {
            // each of these records holds a single point
            // using field/column names from .DBF file
            geoLocations.push({
                latitude: record.points[0][0].y,
                longitude: record.points[0][0].x,
                city: record.fieldValues.NAME,
                population: pop
            });
        }
    }

    var symbolSeries = map.series.item(2) as IgxGeographicSymbolSeriesComponent;
    symbolSeries.dataSource = geoLocations;
}

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.

<igx-geographic-map
    #geoMap
    height="100%"
    width="100%"
    [backgroundContent]="null">
</igx-geographic-map>

Summary

For your convenience, all above code snippets are combined into one code block below that you can easily copy to your project.

<igx-geographic-map
    #geoMap
    height="100%"
    width="100%"
    zoomable="true">
    <igx-geographic-shape-series
        #polygonSeries
        shapeMemberPath="points"
        shapeFill="rgb(150, 150, 150)"
        shapeStroke="Black"
        shapeStrokeThickness=1>
    </igx-geographic-shape-series>
    <igx-geographic-polyline-series
        #lineSeries
        shapeMemberPath="points"
        shapeStroke="rgba(147, 15, 180, 0.5)"
        thickness=3>
    </igx-geographic-polyline-series>
    <igx-geographic-symbol-series
        #symbolSeries
        longitudeMemberPath="longitude"
        latitudeMemberPath="latitude"
        markerType="Circle"
        markerOutline="rgba(2, 102, 196, 1)"
        markerBrush="White">
    </igx-geographic-symbol-series>
</igx-geographic-map>

import { IgxShapeDataSource } from 'igniteui-angular-core';
import { IgxGeographicMapComponent } from 'igniteui-angular-maps';
// ...
private mapMultipleShapesReaders: MapMultipleShapesReaders = new MapMultipleShapesReaders();
// ...
var root = "https://static.infragistics.com/xplatform/shapes/";
var readers = this.mapMultipleShapesReaders;
var map = this.geoMap;

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

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

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

More Frameworks

Desktop

Cross Platform

Three bundles, one subscription

Popular Searches

Search In

Jump To

Ask our engineers directly

More Frameworks

Desktop

Cross Platform

Three bundles, one subscription

Angular Binding and Overlaying Multiple Shape Files