Web Components Shape Styling on Geographic Shape Series
This topic explains how to apply custom styling to the IgcGeographicShapeSeriesComponent
in the Web Components IgcGeographicMapComponent
.
Web Components Shape Styling on Geographic Shape Series Example
EXAMPLE
MapShapeStyleUtility.ts
WorldUtils.ts
TS
HTML
CSS
import { Style } from 'igniteui-webcomponents-core' ;
export abstract class ShapeStyling {
public defaultStroke = 'black' ;
public defaultFill = 'gray' ;
public defaultThickness = 0.5 ;
public defaultOpacity = 1.0 ;
public defaultStyle = new Style();
constructor ( ) {
this .defaultStyle = new Style();
this .defaultStyle.stroke = this .defaultStroke;
this .defaultStyle.fill = this .defaultFill;
this .defaultStyle.opacity = this .defaultOpacity;
this .defaultStyle.strokeThickness = this .defaultThickness;
}
public abstract generate(record: any ): Style;
public getValue(itemMemberPath: string , item : any ): any {
let itemValue = null ;
if (item.fieldValues !== undefined ) {
if (item.fieldsNames.indexOf(itemMemberPath) >= 0 ) {
itemValue = item.fieldValues[itemMemberPath];
} else {
console .log('WARNING: ShapefileRecord does not have ' + itemMemberPath + ' in fieldValues property' );
}
} else if (item.hasOwnProperty(itemMemberPath)) {
itemValue = item[itemMemberPath];
} else {
console .log('WARNING: Shape data item does not have ' + itemMemberPath + ' property' );
}
return itemValue;
}
}
export class ShapeRandomStyling extends ShapeStyling {
public shapeThickness = 0.5 ;
public shapeOpacity = 1.0 ;
public shapeStrokeColors = ['black' ];
public shapeFillColors = ['red' , 'orange' , 'yellow' ];
public styleMappings = new Map <string , Style>();
public generate(record: any ): Style {
const id = record.fieldValues.Name || this .getRandomValue(0 , 1000 );
if (this .styleMappings.has(id)) {
return this .styleMappings.get(id);
} else {
const randStroke = this .getRandomItem(this .shapeStrokeColors);
const randFill = this .getRandomItem(this .shapeFillColors);
const shapeStyle = new Style();
shapeStyle.stroke = this .shapeStrokeColors[randStroke];
shapeStyle.fill = this .shapeFillColors[randFill];
shapeStyle.opacity = this .shapeOpacity;
shapeStyle.strokeThickness = this .shapeThickness;
this .styleMappings.set(id, shapeStyle);
return shapeStyle;
}
}
public getRandomValue(min: number , max : number ): number {
return Math .round(min + (Math .random() * (max - min)));
}
public getRandomItem(array: any []): any {
return this .getRandomValue(0 , array.length - 1 );
}
}
export class ShapeScaleStyling extends ShapeStyling {
public shapeThickness = 0.5 ;
public shapeOpacity = 1.0 ;
public shapeStrokeColors = ['black' ];
public shapeFillColors = ['red' , 'orange' , 'yellow' ];
public itemMemberPath = '' ;
public itemMinimumValue = 0 ;
public itemMaximumValue = 1000 ;
public isLogarithmic = true ;
public generate(record: any ): Style {
let itemValue = this .getValue(this .itemMemberPath, record);
if (itemValue === null ) {
return this .defaultStyle;
}
let fillColor = this .defaultFill;
let strokeColor = this .defaultStroke;
let scaleValue = this .getScaledValue(itemValue);
if (!Number .isNaN(scaleValue)) {
let fillIndex = Math .round(scaleValue * (this .shapeFillColors.length - 1 ));
let strokeIndex = Math .round(scaleValue * (this .shapeStrokeColors.length - 1 ));
fillColor = this .shapeFillColors[fillIndex];
strokeColor = this .shapeStrokeColors[strokeIndex];
}
const shapeStyle = new Style();
shapeStyle.fill = fillColor;
shapeStyle.stroke = strokeColor;
shapeStyle.strokeThickness = this .shapeThickness;
shapeStyle.opacity = this .shapeOpacity;
return shapeStyle;
}
public getScaledValue(value: number ): number {
if (!Number .isFinite(value) || Number .isNaN(value)) { return Number .NaN; }
let min = !Number .isFinite(this .itemMinimumValue) || Number .isNaN(this .itemMinimumValue) ? 0 : this .itemMinimumValue;
let max = !Number .isFinite(this .itemMaximumValue) || Number .isNaN(this .itemMaximumValue) ? 1000 : this .itemMaximumValue;
if (value < min || value > max) { return Number .NaN; }
if (this .isLogarithmic) {
return this .getLogarithmicValue(min, max, value);
} else {
return this .getLinearValue(min, max, value);
}
}
public getLogarithmicValue (min: number , max: number , value: number ) {
if (!Number .isFinite(value)) { return Number .NaN; }
let newMin = Math .log10(min);
let newMax = Math .log10(max);
let newVal = Math .log10(value);
if (!Number .isFinite(newMin)) { newMin = 0.0 ; }
if (!Number .isFinite(newMax)) { newMax = 1000 ; }
if (newVal < 0 ) { newVal = 0.0 ; }
return this .getLinearValue(newMin, newMax, newVal);
}
public getLinearValue (min: number , max: number , value: number ) {
if (!Number .isFinite(value)) { return Number .NaN; }
if (value < min || value > max) { return Number .NaN; }
let scaledValue = (value - min) / (max - min);
return scaledValue;
}
}
export class ShapeRangeStyling extends ShapeStyling {
public itemMemberPath = '' ;
public ranges: ShapeRange[] = [];
constructor ( ) {
super ();
this .ranges.push({ minimum : 0 , maximum : 50 , fill : 'yellow' } );
this .ranges.push({ minimum : 0 , maximum : 100 , fill : 'red' } );
}
public generate(record: any ): Style {
let itemValue = this .getValue(this .itemMemberPath, record);
if (itemValue === null ) {
return this .defaultStyle;
}
for (const range of this .ranges) {
if (range.minimum <= itemValue && itemValue < range.maximum) {
const shapeStyle = new Style();
shapeStyle.opacity = range.opacity || this .defaultOpacity;
shapeStyle.fill = range.fill || this .defaultFill;
shapeStyle.stroke = range.stroke || this .defaultStroke;
shapeStyle.strokeThickness = range.strokeThickness || this .defaultThickness;
return shapeStyle;
}
}
return this .defaultStyle;
}
}
export class ShapeRange {
public minimum: number ;
public maximum: number ;
public opacity?: number ;
public fill: string ;
public stroke?: string ;
public strokeThickness?: number ;
}
export class ShapeComparisonStyling extends ShapeStyling {
public itemMemberPath = '' ;
public itemMappings: ShapeComparison[] = [];
public generate(record: any ): Style {
let itemValue = this .getValue(this .itemMemberPath, record);
if (itemValue === null || itemValue === "" ) {
return this .defaultStyle;
}
for (const mapping of this .itemMappings) {
if (mapping.itemValue === itemValue) {
const shapeStyle = new Style();
shapeStyle.opacity = mapping.opacity || this .defaultOpacity;
shapeStyle.fill = mapping.fill || this .defaultFill;
shapeStyle.stroke = mapping.stroke || this .defaultStroke;
shapeStyle.strokeThickness = mapping.strokeThickness || this .defaultThickness;
return shapeStyle;
}
}
return this .defaultStyle;
}
}
export class ShapeComparison {
public itemValue: string ;
public opacity?: number ;
public fill: string ;
public stroke?: string ;
public strokeThickness?: number ;
}
ts コピー
export class WorldUtils {
public static calcPaths(origin: any , dest : any ): any [] {
let interval = 200 ;
let paths: any [] = [[]];
let pathID = 0 ;
let distance = this .calcDistance(origin, dest);
if (distance <= interval) {
paths[pathID].push({ x : origin.lon, y : origin.lat });
paths[pathID].push({ x : dest.lon, y : dest.lat });
} else {
let current = origin;
let previous = origin;
for (let dist = interval; dist <= distance; dist += interval)
{
previous = current
paths[pathID].push({ x : current.lon, y : current.lat });
let bearing = this .calcBearing(current, dest);
current = this .calcDestination(current, bearing, interval);
if (previous.lon > 150 && current.lon < -150 ) {
paths[pathID].push({ x : 180 , y : current.lat });
paths.push([]);
pathID++
current = { lon : -180 , lat : current.lat }
} else if (previous.lon < -150 && current.lon > 150 ) {
paths[pathID].push({ x : -180 , y : current.lat });
paths.push([]);
pathID++
current = { lon : 180 , lat : current.lat }
}
}
paths[pathID].push({ x : dest.lon, y : dest.lat });
}
return paths;
}
public static calcBearing(origin: any , dest : any ): number
{
origin = this .toRadianLocation(origin);
dest = this .toRadianLocation(dest);
let range = (dest.lon - origin.lon);
let y = Math .sin(range) * Math .cos(dest.lat);
let x = Math .cos(origin.lat) * Math .sin(dest.lat) -
Math .sin(origin.lat) * Math .cos(dest.lat) * Math .cos(range);
let angle = Math .atan2(y, x);
return this .toDegreesNormalized(angle);
}
public static calcDestination(origin: any , bearing : number , distance : number ): any {
let radius = 6371.0 ;
origin = this .toRadianLocation(origin);
bearing = this .toRadians(bearing);
distance = distance / radius;
let lat = Math .asin(Math .sin(origin.lat) * Math .cos(distance) +
Math .cos(origin.lat) * Math .sin(distance) * Math .cos(bearing));
let x = Math .sin(bearing) * Math .sin(distance) * Math .cos(origin.lat);
let y = Math .cos(distance) - Math .sin(origin.lat) * Math .sin(origin.lat);
let lon = origin.lon + Math .atan2(x, y);
lon = (lon + 3 * Math .PI) % (2 * Math .PI) - Math .PI;
lon = this .toDegrees(lon);
lat = this .toDegrees(lat);
return { lon : lon, lat : lat };
}
public static calcDistance(origin: any , dest : any ): number {
origin = this .toRadianLocation(origin);
dest = this .toRadianLocation(dest);
let sinProd = Math .sin(origin.lat) * Math .sin(dest.lat);
let cosProd = Math .cos(origin.lat) * Math .cos(dest.lat);
let lonDelta = (dest.lon - origin.lon);
let angle = Math .acos(sinProd + cosProd * Math .cos(lonDelta));
let distance = angle * 6371.0 ;
return distance;
}
public static toRadianLocation(geoPoint: any ): any {
let x = this .toRadians(geoPoint.lon);
let y = this .toRadians(geoPoint.lat);
return { lon : x, lat : y };
}
public static toRadians(degrees: number ): number
{
return degrees * Math .PI / 180 ;
}
public static toDegrees(radians: number ): number {
return (radians * 180.0 / Math .PI);
}
public static toDegreesNormalized(radians: number ): number
{
let degrees = this .toDegrees(radians);
degrees = (degrees + 360 ) % 360 ;
return degrees;
}
public static toStringLat(latitude: number ): string {
let str = Math .abs(latitude).toFixed(1 ) + "°" ;
return latitude > 0 ? str + "N" : str + "S" ;
}
public static toStringLon(coordinate: number ): string {
let val = Math .abs(coordinate);
let str = val < 100 ? val.toFixed(1 ) : val.toFixed(0 );
return coordinate > 0 ? str + "°E" : str + "°W" ;
}
public static toStringAbbr(value: number ): string {
if (value > 1000000000000 ) {
return (value / 1000000000000 ).toFixed(1 ) + " T"
} else if (value > 1000000000 ) {
return (value / 1000000000 ).toFixed(1 ) + " B"
} else if (value > 1000000 ) {
return (value / 1000000 ).toFixed(1 ) + " M"
} else if (value > 1000 ) {
return (value / 1000 ).toFixed(1 ) + " K"
}
return value.toFixed(0 );
}
public static getLongitude(location: any ): number {
if (location.x) return location.x;
if (location.lon) return location.lon;
if (location.longitude) return location.longitude;
return Number .NaN;
}
public static getLatitude(location: any ): number {
if (location.y) return location.y;
if (location.lat) return location.lat;
if (location.latitude) return location.latitude;
return Number .NaN;
}
public static getBounds(locations: any []): any {
let minLat = 90 ;
let maxLat = -90 ;
let minLon = 180 ;
let maxLon = -180 ;
for (const location of locations) {
const crrLon = this .getLongitude(location);
if (!Number .isNaN(crrLon)) {
minLon = Math .min(minLon, crrLon);
maxLon = Math .max(maxLon, crrLon);
}
const crrLat = this .getLatitude(location);
if (!Number .isNaN(crrLat)) {
minLat = Math .min(minLat, crrLat);
maxLat = Math .max(maxLat, crrLat);
}
}
const geoBounds = {
left : minLon,
top : minLat,
width : Math .abs(maxLon - minLon),
height : Math .abs(maxLat - minLat)
};
return geoBounds;
}
public static getNightShapes(): any [] {
let nightShape = [];
let line: any [] = [];
for (let lon = -180 ; lon <= 180 ; lon += 1 ) {
let x = lon;
let y = 75 * Math .cos(lon * Math .PI / 180 );
line.push({x : x, y : y});
}
let coordinateLine = {points : [line]};
nightShape.push(coordinateLine);
return nightShape;
}
}
ts コピー import { WorldUtils } from './WorldUtils' ;
import { ShapeStyling } from './MapShapeStyleUtility' ;
import { ShapeScaleStyling } from './MapShapeStyleUtility' ;
import { ShapeRangeStyling } from './MapShapeStyleUtility' ;
import { ShapeRandomStyling } from './MapShapeStyleUtility' ;
import { ShapeComparisonStyling } from './MapShapeStyleUtility' ;
import { html } from 'lit-html' ;
import { IgcGeographicMapModule } from 'igniteui-webcomponents-maps' ;
import { IgcGeographicMapComponent } from 'igniteui-webcomponents-maps' ;
import { IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts' ;
import { IgcGeographicShapeSeriesComponent } from 'igniteui-webcomponents-maps' ;
import { IgcShapeDataSource } from 'igniteui-webcomponents-core' ;
import { IgcShapefileRecord } from 'igniteui-webcomponents-core' ;
import { IgcStyleShapeEventArgs } from 'igniteui-webcomponents-charts' ;
import { ModuleManager } from 'igniteui-webcomponents-core' ;
ModuleManager.register(
IgcDataChartInteractivityModule,
IgcGeographicMapModule
);
export class MapShapeStyling {
public geoMap: IgcGeographicMapComponent;
public geoSeries: IgcGeographicShapeSeriesComponent;
public shapeRecords: any [] = [];
public currentShapeStyling: ShapeStyling;
public shapeRandomStyling: ShapeRandomStyling;
public shapeComparisonStyling: ShapeComparisonStyling;
public shapeScaleStyling: ShapeScaleStyling;
public shapeRangeStyling: ShapeRangeStyling;
constructor ( ) {
this .onDataLoaded = this .onDataLoaded.bind(this );
this .onOptionsSelected = this .onOptionsSelected.bind(this );
this .onStylingShape = this .onStylingShape.bind(this );
this .shapeRandomStyling = new ShapeRandomStyling();
this .shapeRandomStyling.shapeStrokeColors = ['Black' ];
this .shapeRandomStyling.shapeFillColors = ['#8C23D1' , '#0E9759' , '#B4D336' , '#F2A464' , '#D74545' , 'DodgerBlue' ];
this .shapeScaleStyling = new ShapeScaleStyling();
this .shapeScaleStyling.defaultFill = 'Gray' ;
this .shapeScaleStyling.shapeStrokeColors = ['Black' ];
this .shapeScaleStyling.shapeFillColors = ['DodgerBlue' , 'yellow' , '#c2f542' , '#e8c902' , '#e8b602' , '#e87902' , 'brown' ];
this .shapeScaleStyling.itemMinimumValue = 5000 ;
this .shapeScaleStyling.itemMaximumValue = 2000000000 ;
this .shapeScaleStyling.itemMemberPath = 'Population' ;
this .shapeScaleStyling.isLogarithmic = true ;
this .shapeRangeStyling = new ShapeRangeStyling();
this .shapeRangeStyling.defaultFill = 'Gray' ;
this .shapeRangeStyling.itemMemberPath = 'Population' ;
this .shapeRangeStyling.ranges = [
{ fill : 'yellow' , minimum : 5000 , maximum : 10000000 , },
{ fill : 'orange' , minimum : 10000000 , maximum : 100000000 , },
{ fill : 'red' , minimum : 100000000 , maximum : 500000000 , },
{ fill : 'brown' , minimum : 500000000 , maximum : 2000000000 , },
];
this .shapeComparisonStyling = new ShapeComparisonStyling();
this .shapeComparisonStyling.defaultFill = 'Gray' ;
this .shapeComparisonStyling.itemMemberPath = 'Region' ;
this .shapeComparisonStyling.itemMappings = [
{ 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 : 'DodgerBlue' , itemValue : 'Eastern Europe' },
{ fill : '#22c928' , itemValue : 'South America' },
{ fill : '#b64fff' , itemValue : 'Melanesia' },
{ fill : '#b64fff' , itemValue : 'Micronesia' },
{ fill : '#b64fff' , itemValue : 'Polynesia' },
{ fill : '#b64fff' , itemValue : 'Australia' },
];
this .currentShapeStyling = this .shapeComparisonStyling;
this .geoMap = document .getElementById('geoMap' ) as IgcGeographicMapComponent;
this .geoMap.backgroundContent = undefined ;
const sds = new IgcShapeDataSource();
sds.importCompleted = this .onDataLoaded;
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.dataBind();
let optionsSelected = document .getElementById('OptionsSelect' );
optionsSelected!.addEventListener('change' , this .onOptionsSelected);
}
public onDataLoaded (sds: IgcShapeDataSource, e: any ) {
this .shapeRecords = sds.getPointData();
console .log('loaded WorldCountries.shp ' + this .shapeRecords.length);
this .geoSeries = new IgcGeographicShapeSeriesComponent();
this .geoSeries.name = 'series' ;
this .geoSeries.dataSource = this .shapeRecords;
this .geoSeries.shapeMemberPath = 'points' ;
this .geoSeries.brush = 'rgba(146, 146, 146, 0.6)' ;
this .geoSeries.outline = 'Black' ;
this .geoSeries.tooltipTemplate = this .createTooltip;
this .geoSeries.thickness = 1 ;
this .geoSeries.styleShape = this .onStylingShape;
this .geoMap.series.add(this .geoSeries);
}
public onStylingShape (s: IgcGeographicShapeSeriesComponent, args: IgcStyleShapeEventArgs ) {
const itemRecord = args.item as IgcShapefileRecord;
const shapeStyle = this .currentShapeStyling.generate(itemRecord);
args.shapeOpacity = shapeStyle.opacity;
args.shapeFill = shapeStyle.fill;
args.shapeStroke = shapeStyle.stroke;
args.shapeStrokeThickness = shapeStyle.strokeThickness;
}
public onOptionsSelected = (e: any ) => {
const stylingType = e.target.value;
if (stylingType === 'ShapeComparisonStyling' ) {
this .currentShapeStyling = this .shapeComparisonStyling;
} else if (stylingType === 'ShapeScaleStyling' ) {
this .currentShapeStyling = this .shapeScaleStyling;
} else if (stylingType === 'ShapeRangeStyling' ) {
this .currentShapeStyling = this .shapeRangeStyling;
} else {
this .currentShapeStyling = this .shapeRandomStyling;
}
this .geoSeries.dataSource = this .shapeRecords;
}
public createTooltip(context: any ): any {
if (!context) return null ;
const dataItem = context.item as any ;
if (!dataItem) return null ;
if (!dataItem.fieldValues) return null ;
const reg = dataItem.fieldValues.Region;
const name = dataItem.fieldValues.Name;
const pop = WorldUtils.toStringAbbr(dataItem.fieldValues.Population);
return html`<div >
<div class ='tooltipTitle' > ${name} </div >
<div class ='tooltipTable' >
<div class ='tooltipRow' >
<div class ='tooltipLbl' > Region</div >
<div class ='tooltipVal' > ${reg} </div >
</div >
<div class ='tooltipRow' >
<div class ='tooltipLbl' > Population</div >
<div class ='tooltipVal' > ${pop} </div >
</div >
</div > ` ;
}
}
new MapShapeStyling();
ts コピー <!DOCTYPE html >
<html >
<head >
<title > MapShapeStyling</title >
<meta charset ="UTF-8" />
<link rel ="shortcut icon" href ="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
<link rel ="stylesheet" href ="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel ="stylesheet" href ="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
<link rel ="stylesheet" href ="https://fonts.googleapis.com/css?family=Titillium Web" />
<link rel ="stylesheet" href ="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type ="text/css" />
</head >
<body >
<div id ="root" >
<div class ="container sample" >
<div class ="options horizontal" >
<span class ="options-label" > Shape Styling: </span >
<select value ="ShapeComparisonStyling" id ="OptionsSelect" >
<option > ShapeComparisonStyling</option >
<option > ShapeScaleStyling</option >
<option > ShapeRangeStyling</option >
<option > ShapeRandomStyling</option >
</select >
</div >
<igc-geographic-map id ="geoMap" width ="100%" height ="100%" >
<Igc-geographic-shape-series id ="shapeSeries" >
</Igc-geographic-shape-series >
</igc-geographic-map >
</div >
</div >
<% if (false) { %><script src ="src/index.ts" > </script > <% } %>
</body >
</html >
html コピー
Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.
Required Imports
Shape styling requires that you import the following classes:
import { IgcGeographicShapeSeriesComponent } from 'igniteui-webcomponents-maps' ;
import { IgcStyleShapeEventArgs } from 'igniteui-webcomponents-charts' ;
import { IgcShapeDataSource } from 'igniteui-webcomponents-core' ;
import { IgcShapefileRecord } from 'igniteui-webcomponents-core' ;
ts
Note that the following code examples are using the Shape Styling Utility file that provides four different ways of styling shapes:
Shape Random Styling
This code snippet creates instances of ShapeRandomStyling that will randomly assign fill colors to the countries of the world.
import { ShapeRandomStyling } from './ShapeStylingUtility' ;
this .shapeRandomStyling = new ShapeRandomStyling();
this .shapeRandomStyling.shapeStrokeColors = ['Black' ];
this .shapeRandomStyling.shapeFillColors = ['#8C23D1' , '#0E9759' , '#B4D336' , '#F2A464' , '#D74545' , 'DodgerBlue' ];
this .geoSeries = new IgcGeographicShapeSeriesComponent();
this .geoSeries.styleShape = this .onStylingShape;
public onStylingShape (s: IgcGeographicShapeSeriesComponent, args: IgcStyleShapeEventArgs ) {
const itemRecord = args.item as IgcShapefileRecord;
const shapeStyle = this .ShapeRandomStyling.getStyle(itemRecord);
args.shapeOpacity = shapeStyle.opacity;
args.shapeFill = shapeStyle.fill;
args.shapeStroke = shapeStyle.stroke;
args.shapeStrokeThickness = shapeStyle.strokeThickness;
}
ts
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 { ShapeScaleStyling } from './ShapeStylingUtility' ;
this .shapeScaleStyling = new ShapeScaleStyling();
this .shapeScaleStyling.itemMinimumValue = 5000 ;
this .shapeScaleStyling.itemMaximumValue = 2000000000 ;
this .shapeScaleStyling.itemMemberPath = 'Population' ;
this .shapeScaleStyling.isLogarithmic = true ;
this .shapeScaleStyling.defaultFill = 'Gray' ;
this .shapeScaleStyling.shapeStrokeColors = ['Black' ];
this .shapeScaleStyling.shapeFillColors = ['DodgerBlue' , 'yellow' , '#c2f542' , '#e8c902' , '#e8b602' , '#e87902' , 'brown' ];
this .geoSeries = new IgcGeographicShapeSeriesComponent();
this .geoSeries.styleShape = this .onStylingShape;
public onStylingShape (s: IgcGeographicShapeSeriesComponent, args: IgcStyleShapeEventArgs ) {
const itemRecord = args.item as IgcShapefileRecord;
const shapeStyle = this .shapeScaleStyling.getStyle(itemRecord);
args.shapeOpacity = shapeStyle.opacity;
args.shapeFill = shapeStyle.fill;
args.shapeStroke = shapeStyle.stroke;
args.shapeStrokeThickness = shapeStyle.strokeThickness;
}
ts
Shape Range Styling
This code snippet creates instances of ShapeRangeStyling that will assign colors to shape of countries based on ranges of population.
import { ShapeRangeStyling } from './ShapeStylingUtility' ;
this .shapeRangeStyling = new ShapeRangeStyling();
this .shapeRangeStyling.defaultFill = 'Gray' ;
this .shapeRangeStyling.itemMemberPath = 'Population' ;
this .shapeRangeStyling.ranges = [
{ fill : 'yellow' , minimum : 5000 , maximum : 10000000 , },
{ fill : 'orange' , minimum : 10000000 , maximum : 100000000 , },
{ fill : 'red' , minimum : 100000000 , maximum : 500000000 , },
{ fill : 'brown' , minimum : 500000000 , maximum : 2000000000 , },
];
this .geoSeries = new IgcGeographicShapeSeriesComponent();
this .geoSeries.styleShape = this .onStylingShape;
public onStylingShape (s: IgcGeographicShapeSeriesComponent, args: IgcStyleShapeEventArgs ) {
const itemRecord = args.item as IgcShapefileRecord;
const shapeStyle = this .shapeRangeStyling.getStyle(itemRecord);
args.shapeOpacity = shapeStyle.opacity;
args.shapeFill = shapeStyle.fill;
args.shapeStroke = shapeStyle.stroke;
args.shapeStrokeThickness = shapeStyle.strokeThickness;
}
ts
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 { ShapeComparisonStyling } from './ShapeStylingUtility' ;
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' },
];
this .geoSeries = new IgcGeographicShapeSeriesComponent();
this .geoSeries.styleShape = this .onStylingShape;
public onStylingShape (s: IgcGeographicShapeSeriesComponent, args: IgcStyleShapeEventArgs ) {
const itemRecord = args.item as IgcShapefileRecord;
const shapeStyle = this .shapeComparisonStyling.getStyle(itemRecord);
args.shapeOpacity = shapeStyle.opacity;
args.shapeFill = shapeStyle.fill;
args.shapeStroke = shapeStyle.stroke;
args.shapeStrokeThickness = shapeStyle.strokeThickness;
}
ts
API References