This tutorial demonstrates how color providers can be used to customize the display. A colorprovider converts a value to a color based on its configuration. It interpolates the color to find the closest color corresponding to the value. Toolkit supports several types of Color Providers shown below. Predefined Scales can be used to quickly specify colormaps
# Base Color Provider
Below is an example for the basic color provider which allows linear gradient with stops.
import { DefaultColorProvider } from "@int/geotoolkit/util/DefaultColorProvider.ts";
import { ColorBar } from "@int/geotoolkit/controls/shapes/ColorBar.ts";
import { ColorBarLocation } from "@int/geotoolkit/controls/shapes/ColorBarLocation.ts";
import { Rect } from "@int/geotoolkit/util/Rect.ts";
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { Group } from "@int/geotoolkit/scene/Group.ts";
import { colors } from "/src/code/Carnac/Utils/ColorProviders/colors.ts";
function createScene(canvas) {
const colorprovider = new DefaultColorProvider({
"values": [-2, -1, 0, 1, 2],
"colors": colors
});
const rect = new ColorBar({
"location": ColorBarLocation.South,
"componentsizes": {
"colorbox": 30,
"axis": 20,
"title": 0
},
"colorprovider": colorprovider
}).setBounds(new Rect(40, 20, 300, 90));
return new Plot({
"canvaselement": canvas,
"root": new Group().addChild(rect)
});
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));
# Discrete Gradient Color Provider
Below is an example for the discrete gradient color provider which allows for a limited number of bins.
import { DiscreteGradientColorProvider } from "@int/geotoolkit/util/DiscreteGradientColorProvider.ts";
import { ColorBar } from "@int/geotoolkit/controls/shapes/ColorBar.ts";
import { ColorBarLocation } from "@int/geotoolkit/controls/shapes/ColorBarLocation.ts";
import { Rect } from "@int/geotoolkit/util/Rect.ts";
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { Group } from "@int/geotoolkit/scene/Group.ts";
import { colors } from "/src/code/Carnac/Utils/ColorProviders/colors.ts";
function createScene(canvas) {
const discreteCP = new DiscreteGradientColorProvider({
"values": [-2, -1, 0, 1, 2],
"colors": colors,
"bins": 16
});
const rectDiscrete = new ColorBar({
"location": ColorBarLocation.South,
"componentsizes": {
"colorbox": 30,
"axis": 20,
"title": 0
},
"colorprovider": discreteCP
}).setBounds(new Rect(40, 20, 300, 90));
return new Plot({
"canvaselement": canvas,
"root": new Group().addChild(rectDiscrete)
});
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));
# Default Log Color Provider
Below is an example for the default log color provider which emulates logarithmic behavior. The left colorbar shows Logarithmic mode and right one shows Linear mode.
import { DefaultLogColorProvider, DisplayStyle } from "@int/geotoolkit/util/DefaultLogColorProvider.ts";
import { ColorBar } from "@int/geotoolkit/controls/shapes/ColorBar.ts";
import { ColorBarLocation } from "@int/geotoolkit/controls/shapes/ColorBarLocation.ts";
import { Rect } from "@int/geotoolkit/util/Rect.ts";
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { Group } from "@int/geotoolkit/scene/Group.ts";
import { colors } from "/src/code/Carnac/Utils/ColorProviders/colors.ts";
function createScene(canvas) {
const defLogCPLog = new DefaultLogColorProvider({
"values": [1, 10, 100, 300, 1e3],
"colors": colors
}).setDisplayStyle(DisplayStyle.Logarithmic);
const defRectLog = new ColorBar({
"location": ColorBarLocation.South,
"componentsizes": {
"colorbox": 30,
"axis": 20,
"title": 0
},
"colorprovider": defLogCPLog
}).setBounds(new Rect(40, 20, 300, 90));
const defLogCPLin = new DefaultLogColorProvider({
"values": [1, 10, 100, 300, 1e3],
"colors": colors
}).setDisplayStyle(DisplayStyle.Linear);
const defRectLog2 = new ColorBar({
"location": ColorBarLocation.South,
"componentsizes": {
"colorbox": 30,
"axis": 20,
"title": 0
},
"colorprovider": defLogCPLin
}).setBounds(new Rect(340, 20, 600, 90));
return new Plot({
"canvaselement": canvas,
"root": new Group().addChild([defRectLog, defRectLog2])
});
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));
# Log Color Provider
Below is an example for the log color provider which emulates logarithmic behavoir with limited number of bins. The left colorbar shows Logarithmic mode and right one shows Linear mode.
import { DisplayStyle, LogColorProvider } from "@int/geotoolkit/util/LogColorProvider.ts";
import { ColorBar } from "@int/geotoolkit/controls/shapes/ColorBar.ts";
import { ColorBarLocation } from "@int/geotoolkit/controls/shapes/ColorBarLocation.ts";
import { Rect } from "@int/geotoolkit/util/Rect.ts";
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { Group } from "@int/geotoolkit/scene/Group.ts";
import { colors } from "/src/code/Carnac/Utils/ColorProviders/colors.ts";
function createScene(canvas) {
const logCPLog = new LogColorProvider({
"values": [1, 10, 100, 300, 1e3],
"colors": colors,
"bins": 16
}).setDisplayStyle(DisplayStyle.Logarithmic);
const rectLog = new ColorBar({
"location": ColorBarLocation.South,
"componentsizes": {
"colorbox": 30,
"axis": 20,
"title": 0
},
"colorprovider": logCPLog
}).setBounds(new Rect(40, 20, 300, 90));
const logCPLin = new LogColorProvider({
"values": [1, 10, 100, 300, 1e3],
"colors": colors,
"bins": 16
}).setDisplayStyle(DisplayStyle.Linear);
const rectLog2 = new ColorBar({
"location": ColorBarLocation.South,
"componentsizes": {
"colorbox": 30,
"axis": 20,
"title": 0
},
"colorprovider": logCPLin
}).setBounds(new Rect(340, 20, 600, 90));
return new Plot({
"canvaselement": canvas,
"root": new Group().addChild([rectLog, rectLog2])
});
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));
# Discrete Range Color Provider
Below is an example for the discrete range color provider which allows for specific bins.
import { Range } from "@int/geotoolkit/util/Range.ts";
import { RangeColorProvider } from "@int/geotoolkit/util/RangeColorProvider.ts";
import { ColorBar } from "@int/geotoolkit/controls/shapes/ColorBar.ts";
import { ColorBarLocation } from "@int/geotoolkit/controls/shapes/ColorBarLocation.ts";
import { Rect } from "@int/geotoolkit/util/Rect.ts";
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { Group } from "@int/geotoolkit/scene/Group.ts";
import { colors } from "/src/code/Carnac/Utils/ColorProviders/colors.ts";
function createScene(canvas) {
const myRangem2 = new Range(-2, -1.5);
const myRangem1 = new Range(-1.5, 0);
const myRange0 = new Range(0, 0.5);
const myRangep1 = new Range(0.5, 1);
const myRangep2 = new Range(1, 2);
const rangeCP = new RangeColorProvider({
"values": [myRangem2, myRangem1, myRange0, myRangep1, myRangep2],
"colors": colors
});
const rectRange = new ColorBar({
"location": ColorBarLocation.South,
"componentsizes": {
"colorbox": 30,
"axis": 20,
"title": 0
},
"colorprovider": rangeCP
}).setBounds(new Rect(40, 20, 300, 90));
return new Plot({
"canvaselement": canvas,
"root": new Group().addChild(rectRange)
});
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));
# Well Known Scales
Below are well known scales used to quickly specify colormaps.
import { KnownScales } from "@int/geotoolkit/util/ColorProvider.ts";
import { DefaultColorProvider } from "@int/geotoolkit/util/DefaultColorProvider.ts";
import { LinearGradientStyle } from "@int/geotoolkit/attributes/LinearGradientStyle.ts";
import { Point } from "@int/geotoolkit/util/Point.ts";
import { Rectangle } from "@int/geotoolkit/scene/shapes/Rectangle.ts";
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { Group } from "@int/geotoolkit/scene/Group.ts";
import { Text } from "@int/geotoolkit/scene/shapes/Text.ts";
import { AlignmentStyle, TextStyle } from "@int/geotoolkit/attributes/TextStyle.ts";
import { AnchorType } from "@int/geotoolkit/util/AnchorType.ts";
const BAR_WIDTH = 200;
const BAR_HEIGHT = 20;
const GAP_X = 5;
const GAP_Y = 5;
const GAP_COLUMN = 25;
const TEXT_WIDTH = 150;
function createScene(canvas) {
const grads = [
KnownScales.Autumn,
KnownScales.BlueToRed,
KnownScales.Cool,
KnownScales.Copper,
KnownScales.DarkBody,
KnownScales.Flag,
KnownScales.Gray,
KnownScales.Hot,
KnownScales.HSV,
KnownScales.Orange,
KnownScales.Rainbow,
KnownScales.Spring,
KnownScales.Summer,
KnownScales.Winter,
KnownScales.Bone,
KnownScales.Binary,
KnownScales.Pink,
KnownScales.Parula
];
const textStyle = new TextStyle({
"color": "grey",
"alignment": AlignmentStyle.Center,
"font": "12px Arial"
});
const bounds = canvas.getBoundingClientRect();
let x = GAP_X;
let y = GAP_Y;
const group = new Group();
for (let i = 0; i < grads.length; ++i) {
if (y >= bounds.height - BAR_HEIGHT - GAP_Y) {
y = GAP_Y;
x += BAR_WIDTH + GAP_X + TEXT_WIDTH + GAP_COLUMN;
}
const dcp = new DefaultColorProvider();
dcp.setScale(grads[i]);
const gradstyle = new LinearGradientStyle({
"startpoint": new Point(0, 0.5),
"endpoint": new Point(1, 0.5),
"colorprovider": dcp
});
const rectangle = new Rectangle({
"left": x + TEXT_WIDTH + GAP_X,
"top": y,
"width": BAR_WIDTH,
"height": BAR_HEIGHT,
"linestyle": {
"color": "black",
"pixelsnapmode": true
},
"fillstyle": gradstyle
});
const text = new Text({
"text": grads[i],
"ax": x,
"ay": y + BAR_HEIGHT / 2,
"textstyle": textStyle,
"alignment": AnchorType.LeftCenter
});
y += BAR_HEIGHT + GAP_Y;
group.addChild([text, rectangle]);
}
return new Plot({
"canvaselement": canvas,
"root": group
});
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));
# Color Bar
Below is an example for a orange color bar. See the Color Bar tutorial for more details.
import { DefaultColorProvider } from "@int/geotoolkit/util/DefaultColorProvider.ts";
import { KnownScales } from "@int/geotoolkit/util/ColorProvider.ts";
import { ColorBar } from "@int/geotoolkit/controls/shapes/ColorBar.ts";
import { ColorBarLocation } from "@int/geotoolkit/controls/shapes/ColorBarLocation.ts";
import { Rect } from "@int/geotoolkit/util/Rect.ts";
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { Group } from "@int/geotoolkit/scene/Group.ts";
function createScene(canvas) {
const defaultColorProvider = new DefaultColorProvider().setScale(KnownScales.Orange, 0, 1);
const colorBar = new ColorBar({
"location": ColorBarLocation.South,
"componentsizes": {
"colorbox": 30,
"axis": 20,
"title": 20
},
"colorprovider": defaultColorProvider,
"min": 0,
"max": 1,
"titletext": "Orange Color Bar"
}).setBounds(new Rect(40, 20, 300, 70));
return new Plot({
"canvaselement": canvas,
"root": new Group().addChild(colorBar)
});
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));