Web Components Geographic Polygon Map

    In Web Components map component, you can use the IgcGeographicShapeSeriesComponent 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.

    Web Components Geographic Polygon Map Example

    The IgcGeographicShapeSeriesComponent works a lot like the IgcGeographicPolylineSeriesComponent 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 IgcGeographicShapeSeriesComponent has the ItemsSource 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 IgcGeographicShapeSeriesComponent uses points of this mapped data column to plot polygons in the map control.

    Code Snippet

    The following code demonstrates how to bind the IgcGeographicShapeSeriesComponent to shapes of countries in the world loaded from a shape file using the IgcShapeDataSource.

    <igc-geographic-map id="geoMap" width="100%" height="100%">
    import { IgcGeographicShapeSeriesComponent } from 'igniteui-webcomponents-maps';
    import { IgcShapeDataSource } from 'igniteui-webcomponents-core';
    connectedCallback() {
        this.geoMap = document.getElementById("geoMap") as IgcGeographicMapComponent;
        // loading a shapefile with geographic shapes
        const sds = new IgcShapeDataSource();
        sds.importCompleted = this.onDataLoaded;
        sds.shapefileSource = "../shapes/WorldCountries.shp";
        sds.databaseSource  = "../shapes/WorldCountries.dbf";
    onDataLoaded(sds: IgcShapeDataSource, e: any) {
        const shapeRecords = sds.getPointData();
        const countriesNATO: any[] = [];
        const countriesSCO: any[] = [];
        const countriesARAB: any[] = [];
        const countriesOther: any[] = [];
        for (const record of shapeRecords) {
            // using field/column names from .DBF file
            const country = {
                points: record.points,
                name: record.fieldValues.NAME,
                org: record.fieldValues.ALLIANCE,
                pop: record.fieldValues.POPULATION
            const group = record.fieldValues.ALLIANCE;
            if (group === "NATO") {
            } else if (group === "SCO") {
            } else if (group === "ARAB LEAGUE") {
            } else {
        this.createSeries(countriesNATO, "rgb(32, 146, 252)", "NATO");
        this.createSeries(countriesSCO, "rgb(252, 32, 32)", "SCO");
        this.createSeries(countriesARAB, "rgb(14, 194, 14)", "AL");
        this.createSeries(countriesOther, "rgb(146, 146, 146)", "Other");
    createSeries(shapeData: any[], shapeBrush: string, shapeTitle: string)
        const seriesName = shapeTitle + "series";
        const geoSeries = new IgcGeographicShapeSeriesComponent();
        geoSeries.dataSource = shapeData;
        geoSeries.shapeMemberPath = "points";
        geoSeries.brush = shapeBrush;
        geoSeries.outline = "Black";
        geoSeries.thickness = 1;
        geoSeries.title = shapeTitle;

    API References