The Seismic module includes a set of built-in colormaps. This tutorial demonstrates how to use them, and how to register custom color map.
# Register Color Map
Here is an example how to register custom colormap
import { SeismicColors } from "@int/geotoolkit/seismic/util/SeismicColors.ts";
function registerCustomColorMap() {
const colorProvider = SeismicColors.getDefault();
colorProvider.register("Custom: Red Yellow Blue", (colorMap) => {
colorMap.setColors(["red", "yellow", "blue"]);
});
}
export { registerCustomColorMap };
# All Color Maps
The default implementation can be used or users can create a custom color map by specifying colors and ramp size. For more details refer to the seismic API.
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { Group } from "@int/geotoolkit/scene/Group.ts";
import { ColorBar } from "@int/geotoolkit/controls/shapes/ColorBar.ts";
import { Text } from "@int/geotoolkit/scene/shapes/Text.ts";
import { SeismicColors } from "@int/geotoolkit/seismic/util/SeismicColors.ts";
import { Rect } from "@int/geotoolkit/util/Rect.ts";
import { AnchorType } from "@int/geotoolkit/util/AnchorType.ts";
import { ColorBarLocation } from "@int/geotoolkit/controls/shapes/ColorBarLocation.ts";
import { AlignmentStyle, TextStyle } from "@int/geotoolkit/attributes/TextStyle.ts";
const BAR_WIDTH = 200;
const BAR_HEIGHT = 18;
const GAP_X = 5;
const GAP_Y = 5;
const GAP_COLUMN = 25;
const TEXT_WIDTH = 150;
function createColorMapPlot(canvas) {
const colorProvider = SeismicColors.getDefault();
const colorMaps = colorProvider.listNameColorMaps();
const bounds = canvas.getBoundingClientRect();
let x = GAP_X;
let y = GAP_Y;
const group = new Group();
const textStyle = new TextStyle({
"color": "grey",
"alignment": AlignmentStyle.Center,
"font": "12px Arial"
});
const colorMapLength = colorMaps.length;
for (let i = 0; i < colorMapLength; i++) {
if (y >= bounds.height - BAR_HEIGHT - GAP_Y) {
y = GAP_Y;
x += BAR_WIDTH + GAP_X + TEXT_WIDTH + GAP_COLUMN;
}
const colorMap = colorProvider.createNamedColorMap(colorMaps[i], 256);
const colorbar = new ColorBar({
"colorprovider": colorMap,
"location": ColorBarLocation.North,
"colorbox": {
"size": "100%"
},
"title": {
"visible": false
},
"axis": {
"visible": false
},
"linestyle": "1px solid gray"
}).setBounds(new Rect(x + TEXT_WIDTH + GAP_X, y, x + BAR_WIDTH + TEXT_WIDTH + GAP_X, y + BAR_HEIGHT));
const text = new Text({
"text": colorMap.getName(),
"ax": x,
"ay": y + BAR_HEIGHT / 2,
"textstyle": textStyle,
"alignment": AnchorType.LeftCenter
});
y += BAR_HEIGHT + GAP_Y;
group.addChild([text, colorbar]);
}
return new Plot({
"canvaselement": canvas,
"root": group
});
}
export { createColorMapPlot };
createScene();
# Apply Color Map
In following tutorial you can chose from custom or default color maps and apply it to seismic plot
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { SeismicColors } from "@int/geotoolkit/seismic/util/SeismicColors.ts";
import { SeismicWidget } from "@int/geotoolkit/seismic/widgets/SeismicWidget.ts";
import { NormalizationType } from "@int/geotoolkit/seismic/pipeline/NormalizationType.ts";
import { SeismicPipeline } from "@int/geotoolkit/seismic/pipeline/SeismicPipeline.ts";
import { RemoteSeismicDataSource } from "@int/geotoolkit/seismic/data/RemoteSeismicDataSource.ts";
function createSectionQuery(position, key, oppositeKey) {
const selectKeys = [];
selectKeys[0] = {
"name": key["key"],
"min": position,
"max": position,
"step": key["increment"],
"order": "asc"
};
selectKeys[1] = {
"name": oppositeKey["key"],
"min": oppositeKey["min"],
"max": oppositeKey["max"],
"step": oppositeKey["increment"],
"order": "asc"
};
return {
"keys": selectKeys,
"options": null,
"emptyTracesKey": {
"name": oppositeKey["key"],
"min": oppositeKey["min"],
"max": oppositeKey["max"]
}
};
}
const createReader = function(options, onready, onfailure) {
const data = new RemoteSeismicDataSource({
"host": options["host"],
"file": options["source"],
"version": 2
});
data.open(
() => {
const keys = data.getKeys();
const key = keys[0];
const oppositeKey = keys[1];
const query = createSectionQuery(options["inline"], key, oppositeKey);
data.select(query, onready, onfailure);
},
onfailure
);
};
const createPipeline = function(reader) {
return new SeismicPipeline({
"name": "Seismic",
"reader": reader,
"statistics": reader.getStatistics()
}).setOptions({
"normalization": {
"type": NormalizationType.RMS,
"scale": 0.4
},
"plot": {
"type": {
"wiggle": false,
"interpolateddensity": true
},
"decimationspacing": 5
},
"colors": {
"colormap": SeismicColors.getDefault().createNamedColorMap("Saddleback", 32)
}
});
};
function createSeismicPlot(canvas) {
const MAJOR_INLINE = 1;
const DATA_HOST = "https://demo.int.com/INTGeoServer/json";
const DATA_SOURCE = "data/seismic/Gullfaks_Amplitude.xgy";
const promise = new Promise((resolve, reject) => {
createReader({
"host": DATA_HOST,
"source": DATA_SOURCE,
"inline": MAJOR_INLINE
}, (reader) => {
const pipeline = createPipeline(reader);
const widget = new SeismicWidget({
"pipeline": pipeline,
"colorbar": {
"axis": {
"tickgenerator": {
"edge": {
"tickvisible": false,
"labelvisible": false
}
}
}
},
"layouttype": "inside",
"statusbar": {
"visible": false
}
}).setScaleOptions({
"tracescale": 20,
"samplescale": 200,
"deviceunit": "in",
"sampleunit": "ft"
});
const plot = new Plot({
"canvaselement": canvas,
"root": widget
});
widget.scale(0.25, 0.25);
resolve(
plot
);
}, (error) => {
reject(error);
});
});
return promise;
}
export { createSeismicPlot };