React Shape Styling on Geographic Shape Series

This topic explains how to apply custom styling to the IgrGeographicShapeSeries in the React IgrGeographicMap.

React Shape Styling on Geographic Shape Series Example

The four styling classes each section uses — ShapeRandomStyling, ShapeScaleStyling, ShapeRangeStyling and ShapeComparisonStyling — come from the Shape Styling Utility, which publishes the file to copy into your own project.

Required Imports

Shape styling requires that you import the following classes:

import { IgrGeographicMap, IgrGeographicShapeSeries } from 'igniteui-react-maps';
import { IgrShapeDataSource, IgrShapefileRecord } from 'igniteui-react-core';
import { IgrAssigningShapeStyleEventArgs } from 'igniteui-react-charts';

Shape Random Styling

This code snippet creates instances of ShapeRandomStyling that will randomly assign fill colors to the countries of the world.

import { IgrGeographicShapeSeries, IgrGeographicShapeSeriesBase } from 'igniteui-react-maps';
import { IgrShapeDataSource, IgrShapefileRecord } from 'igniteui-react-core';
import { IgrAssigningShapeStyleEventArgs } from 'igniteui-react-charts';
// ...
public shapeRandomStyling: ShapeRandomStyling;

// Random styling: each country keeps the color it is first given.
public mapShapeRandomStyling(): Promise<void> {
    this.shapeRandomStyling = new ShapeRandomStyling();
    this.shapeRandomStyling.shapeStrokeColors = ['Black'];
    this.shapeRandomStyling.shapeFillColors = ['#8C23D1', '#0E9759', '#B4D336', '#F2A464', '#D74545', 'DodgerBlue'];

    var map = this.geoMap;

    // loading a shapefile with the geographic polygons of world countries
    var sds = new IgrShapeDataSource();
    sds.shapefileSource = "https://static.infragistics.com/xplatform/shapes/world_countries_all.shp";
    sds.databaseSource = "https://static.infragistics.com/xplatform/shapes/world_countries_all.dbf";
    return new Promise((resolve) => {
        sds.importCompleted = (s: IgrShapeDataSource, e: any) => {
            var geoSeries = new IgrGeographicShapeSeries({ name: "geographicShapeSeries1" });
            geoSeries.dataSource = s.getPointData();
            geoSeries.shapeMemberPath = "points";
            // the series asks for each shape's style as it draws it, which it only does when it is
            // allowed to take one
            geoSeries.isCustomShapeStyleAllowed = true;
            geoSeries.assigningShapeStyle = this.onStylingShape.bind(this);
            map.series.add(geoSeries);
            resolve();
        };
        sds.dataBind();
    });
}

public onStylingShape(s: IgrGeographicShapeSeriesBase, args: IgrAssigningShapeStyleEventArgs): void {
    // the event covers a range of items rather than one, so the record is asked for by index
    var itemRecord = args.getItems(args.startIndex, args.endIndex)[0] as IgrShapefileRecord;
    var shapeStyle = this.shapeRandomStyling.generate(itemRecord);
    args.opacity = shapeStyle.opacity;
    args.fill = shapeStyle.fill;
    args.stroke = shapeStyle.stroke;
    args.strokeThickness = shapeStyle.strokeThickness;
}

Shape Scale Styling

This code snippet creates instances of ShapeScaleStyling that will assign fill colors to shape of countries based on population scaled on logarithmic scale.

import { IgrGeographicShapeSeries, IgrGeographicShapeSeriesBase } from 'igniteui-react-maps';
import { IgrShapeDataSource, IgrShapefileRecord } from 'igniteui-react-core';
import { IgrAssigningShapeStyleEventArgs } from 'igniteui-react-charts';
// ...
public shapeScaleStyling: ShapeScaleStyling;

// Scale styling: a color taken from a scale across a range of values.
public mapShapeScaleStyling(): void {
    this.shapeScaleStyling = new ShapeScaleStyling();
    this.shapeScaleStyling.defaultFill = 'Gray';
    this.shapeScaleStyling.shapeStrokeColors = ['Black'];
    this.shapeScaleStyling.shapeFillColors = ['DodgerBlue', 'yellow', '#c2f542', '#e8c902', '#e8b602', '#e87902', 'brown'];
    this.shapeScaleStyling.itemMemberPath = 'Population';
    this.shapeScaleStyling.itemMinimumValue = 5000;
    this.shapeScaleStyling.itemMaximumValue = 2000000000; // 2 Billions
    this.shapeScaleStyling.isLogarithmic = true;

    var map = this.geoMap;

    // loading a shapefile with the geographic polygons of world countries
    var sds = new IgrShapeDataSource();
    sds.shapefileSource = "https://static.infragistics.com/xplatform/shapes/world_countries_all.shp";
    sds.databaseSource = "https://static.infragistics.com/xplatform/shapes/world_countries_all.dbf";
    sds.importCompleted = (s: IgrShapeDataSource, e: any) => {
        var geoSeries = new IgrGeographicShapeSeries({ name: "geographicShapeSeries1" });
        geoSeries.dataSource = s.getPointData();
        geoSeries.shapeMemberPath = "points";
        // the series asks for each shape's style as it draws it, which it only does when it is
        // allowed to take one
        geoSeries.isCustomShapeStyleAllowed = true;
        geoSeries.assigningShapeStyle = this.onStylingShape.bind(this);
        map.series.add(geoSeries);
    };
    sds.dataBind();
}

public onStylingShape(s: IgrGeographicShapeSeriesBase, args: IgrAssigningShapeStyleEventArgs): void {
    // the event covers a range of items rather than one, so the record is asked for by index
    var itemRecord = args.getItems(args.startIndex, args.endIndex)[0] as IgrShapefileRecord;
    var shapeStyle = this.shapeScaleStyling.generate(itemRecord);
    args.opacity = shapeStyle.opacity;
    args.fill = shapeStyle.fill;
    args.stroke = shapeStyle.stroke;
    args.strokeThickness = shapeStyle.strokeThickness;
}

Shape Range Styling

This code snippet creates instances of ShapeRangeStyling that will assign colors to shape of countries based on ranges of population.

import { IgrGeographicShapeSeries, IgrGeographicShapeSeriesBase } from 'igniteui-react-maps';
import { IgrShapeDataSource, IgrShapefileRecord } from 'igniteui-react-core';
import { IgrAssigningShapeStyleEventArgs } from 'igniteui-react-charts';
// ...
public shapeRangeStyling: ShapeRangeStyling;

// Range styling: a color per band of values.
public mapShapeRangeStyling(): void {
    this.shapeRangeStyling = new ShapeRangeStyling();
    this.shapeRangeStyling.defaultFill = 'Gray';
    this.shapeRangeStyling.itemMemberPath = 'Population';
    this.shapeRangeStyling.ranges = [
        { fill: 'yellow', minimum: 5000, maximum: 10000000, },        // 5 K - 10 M
        { fill: 'orange', minimum: 10000000, maximum: 100000000, },   // 10 M - 100 M
        { fill: 'red',    minimum: 100000000, maximum: 500000000, },  // 100 M - 500 M
        { fill: 'brown',  minimum: 500000000, maximum: 2000000000, }, // 500 M - 2 B
    ];

    var map = this.geoMap;

    // loading a shapefile with the geographic polygons of world countries
    var sds = new IgrShapeDataSource();
    sds.shapefileSource = "https://static.infragistics.com/xplatform/shapes/world_countries_all.shp";
    sds.databaseSource = "https://static.infragistics.com/xplatform/shapes/world_countries_all.dbf";
    sds.importCompleted = (s: IgrShapeDataSource, e: any) => {
        var geoSeries = new IgrGeographicShapeSeries({ name: "geographicShapeSeries1" });
        geoSeries.dataSource = s.getPointData();
        geoSeries.shapeMemberPath = "points";
        // the series asks for each shape's style as it draws it, which it only does when it is
        // allowed to take one
        geoSeries.isCustomShapeStyleAllowed = true;
        geoSeries.assigningShapeStyle = this.onStylingShape.bind(this);
        map.series.add(geoSeries);
    };
    sds.dataBind();
}

public onStylingShape(s: IgrGeographicShapeSeriesBase, args: IgrAssigningShapeStyleEventArgs): void {
    // the event covers a range of items rather than one, so the record is asked for by index
    var itemRecord = args.getItems(args.startIndex, args.endIndex)[0] as IgrShapefileRecord;
    var shapeStyle = this.shapeRangeStyling.generate(itemRecord);
    args.opacity = shapeStyle.opacity;
    args.fill = shapeStyle.fill;
    args.stroke = shapeStyle.stroke;
    args.strokeThickness = shapeStyle.strokeThickness;
}

Shape Comparison Styling

This code snippet creates instances of ShapeComparisonStyling that will assign colors to countries based on their region name in the world.

import { IgrGeographicShapeSeries, IgrGeographicShapeSeriesBase } from 'igniteui-react-maps';
import { IgrShapeDataSource, IgrShapefileRecord } from 'igniteui-react-core';
import { IgrAssigningShapeStyleEventArgs } from 'igniteui-react-charts';
// ...
public shapeComparisonStyling: ShapeComparisonStyling;

// Comparison styling: a color per named value.
public mapShapeComparisonStyling(): Promise<void> {
    this.shapeComparisonStyling = new ShapeComparisonStyling();
    this.shapeComparisonStyling.defaultFill = 'Gray';
    this.shapeComparisonStyling.itemMemberPath = 'Region';
    this.shapeComparisonStyling.itemMappings = [
        { fill: 'Red', itemValue: 'Eastern Europe' },
        { fill: 'Red', itemValue: 'Central Asia' },
        { fill: 'Red', itemValue: 'Eastern Asia' },
        { fill: 'Orange', itemValue: 'Southern Asia' },
        { fill: 'Orange', itemValue: 'Middle East' },
        { fill: 'Orange', itemValue: 'Northern Africa' },
        { fill: 'Yellow', itemValue: 'Eastern Africa' },
        { fill: 'Yellow', itemValue: 'Western Africa' },
        { fill: 'Yellow', itemValue: 'Middle Africa' },
        { fill: 'Yellow', itemValue: 'Southern Africa' },
        { fill: 'DodgerBlue', itemValue: 'Central America' },
        { fill: 'DodgerBlue', itemValue: 'Northern America' },
        { fill: 'DodgerBlue', itemValue: 'Western Europe' },
        { fill: 'DodgerBlue', itemValue: 'Southern Europe' },
        { fill: 'DodgerBlue', itemValue: 'Northern Europe' },
        { fill: '#22c928', itemValue: 'South America' },
        { fill: '#b64fff', itemValue: 'Melanesia' },
        { fill: '#b64fff', itemValue: 'Micronesia' },
        { fill: '#b64fff', itemValue: 'Polynesia' },
        { fill: '#b64fff', itemValue: 'Australia' },
    ];

    var map = this.geoMap;

    // loading a shapefile with the geographic polygons of world countries
    var sds = new IgrShapeDataSource();
    sds.shapefileSource = "https://static.infragistics.com/xplatform/shapes/world_countries_all.shp";
    sds.databaseSource = "https://static.infragistics.com/xplatform/shapes/world_countries_all.dbf";
    return new Promise((resolve) => {
        sds.importCompleted = (s: IgrShapeDataSource, e: any) => {
            var geoSeries = new IgrGeographicShapeSeries({ name: "geographicShapeSeries1" });
            geoSeries.dataSource = s.getPointData();
            geoSeries.shapeMemberPath = "points";
            // the series asks for each shape's style as it draws it, which it only does when it is
            // allowed to take one
            geoSeries.isCustomShapeStyleAllowed = true;
            geoSeries.assigningShapeStyle = this.onStylingShape.bind(this);
            map.series.add(geoSeries);
            resolve();
        };
        sds.dataBind();
    });
}

public onStylingShape(s: IgrGeographicShapeSeriesBase, args: IgrAssigningShapeStyleEventArgs): void {
    // the event covers a range of items rather than one, so the record is asked for by index
    var itemRecord = args.getItems(args.startIndex, args.endIndex)[0] as IgrShapefileRecord;
    var shapeStyle = this.shapeComparisonStyling.generate(itemRecord);
    args.opacity = shapeStyle.opacity;
    args.fill = shapeStyle.fill;
    args.stroke = shapeStyle.stroke;
    args.strokeThickness = shapeStyle.strokeThickness;
}

API References