A log marker is a horizontal line at a specific depth in a log track. A marker can be any GeoToolkit shape or image and can be added to one track or can span the track container.
A marker can have a line style, fill style, text style and depth value. A marker also has a name label and an optional depth label. Additional styles information is covered in the Carnac Attributes tutorials Line Styles and Fill Styles .
Multiple markers sharing similar depth ranges often overlap, decreasing the legibility of individual markers. Additional information about using multiple and overlapping markers is covered in the Carnac Advanced WellLog tutorials, Composite Markers and Marker Set .
# Create Marker
Create a new LogMarker object, set its depth values and styles and add it to the track as shown below.
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { LineDecoration } from "@int/geotoolkit/attributes/LineDecoration.ts";
import { Patterns } from "@int/geotoolkit/attributes/LineStyle.ts";
import { TrackType } from "@int/geotoolkit/welllog/TrackType.ts";
import { HeaderType } from "@int/geotoolkit/welllog/header/LogAxisVisualHeader.ts";
import { createCurve, createLogMarker } from "/src/code/WellLog/Visuals/Markers/util.ts";
import { createWellLogWidget } from "/src/code/WellLog/utils/common.ts";
function createScene(canvas) {
const widget = createWellLogWidget().setAxisHeaderType(HeaderType.Scale).setDepthLimits(100, 400);
widget.addTrack(TrackType.IndexTrack);
widget.addTrack(TrackType.LinearTrack).addChild([
createCurve("#7cb342"),
createLogMarker(191.1, "#e64a19", "#e64a19"),
createLogMarker(365.258, "#2196f3", "#2196f3").setLineDecoration(LineDecoration.Wavy).setLineStyle({ "pattern": Patterns.Dash }, true)
]);
widget.addTrack(TrackType.IndexTrack);
return new Plot({
"canvaselement": canvas,
"root": widget
});
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));
# Marker Styles
The line, fill, text styles of the LogMarker object can be modified as shown below.
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { LineDecoration } from "@int/geotoolkit/attributes/LineDecoration.ts";
import { AnchorType } from "@int/geotoolkit/util/AnchorType.ts";
import { TrackType } from "@int/geotoolkit/welllog/TrackType.ts";
import { HeaderType } from "@int/geotoolkit/welllog/header/LogAxisVisualHeader.ts";
import { createCurve, createLogMarker } from "/src/code/WellLog/Visuals/Markers/util.ts";
import { createWellLogWidget } from "/src/code/WellLog/utils/common.ts";
function createScene(canvas) {
const widget = createWellLogWidget().setAxisHeaderType(HeaderType.Scale).setDepthLimits(100, 400);
widget.addTrack(TrackType.IndexTrack);
const marker1 = createLogMarker(137.2456, "#e64a19", "#ffffff").setVerticalTextOffset(-5).setHorizontalTextOffset(5).setNameLabelPosition(AnchorType.LeftTop).setNameLabel("Marker Name").setDepthLabelPosition(AnchorType.RightBottom).setFillStyleDepth("#fbc02d").setFillDepthLabel(true).setFillStyleName("#ef6c00").setFillNameLabel(true);
const marker2 = createLogMarker(333.5, "#2196f3", "#2196f3").setLineDecoration(LineDecoration.Double).setNameLabelPosition(AnchorType.Center).setVisibleNameBorder(true).setVisibleDepthLabel(false);
widget.addTrack(TrackType.LinearTrack).addChild([
createCurve("#7cb342"),
marker1,
marker2
]);
widget.addTrack(TrackType.IndexTrack);
return new Plot({
"canvaselement": canvas,
"root": widget
});
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));
# Multi-Track Markers
Markers can also span the entire track container rather than just one track.
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { LineDecoration } from "@int/geotoolkit/attributes/LineDecoration.ts";
import { AnchorType } from "@int/geotoolkit/util/AnchorType.ts";
import { TrackType } from "@int/geotoolkit/welllog/TrackType.ts";
import { HeaderType } from "@int/geotoolkit/welllog/header/LogAxisVisualHeader.ts";
import { createCurve, createLogMarker } from "/src/code/WellLog/Visuals/Markers/util.ts";
import { createWellLogWidget } from "/src/code/WellLog/utils/common.ts";
function createScene(canvas) {
const widget = createWellLogWidget().setAxisHeaderType(HeaderType.Scale).setDepthLimits(100, 400);
widget.addTrack(TrackType.IndexTrack);
widget.addTrack(TrackType.LinearTrack).addChild([
createCurve("#7cb342")
]);
widget.addTrack(TrackType.LinearTrack).addChild([
createCurve("#e64a19")
]);
widget.addTrack(TrackType.IndexTrack);
const marker = createLogMarker(240.1543, "#e64a19", "#ffffff").setLineDecoration(LineDecoration.DoubleWavy).setNameLabelPosition(AnchorType.LeftTop).setDepthLabelPosition(AnchorType.RightBottom).setNameLabel("Marker Name").setFillStyleDepth("#fbc02d").setFillDepthLabel(true).setFillStyleName("#ef6c00").setFillNameLabel(true);
widget.getTrackContainer().addChild(marker);
return new Plot({
"canvaselement": canvas,
"root": widget
});
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));
# Shape, Symbol and Image Markers
Any GeoToolkit shape, symbol or image can be added to track as shown below.
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { Image } from "@int/geotoolkit/scene/shapes/Image.ts";
import { Unknown as MarkerPainter } from "@int/geotoolkit/scene/shapes/painters/oilandgas/Unknown.ts";
import { SymbolShape } from "@int/geotoolkit/scene/shapes/SymbolShape.ts";
import { Rectangle } from "@int/geotoolkit/scene/shapes/Rectangle.ts";
import { AnchorType } from "@int/geotoolkit/util/AnchorType.ts";
import { TrackType } from "@int/geotoolkit/welllog/TrackType.ts";
import { HeaderType } from "@int/geotoolkit/welllog/header/LogAxisVisualHeader.ts";
import { createCurve } from "/src/code/WellLog/Visuals/Markers/util.ts";
import { createWellLogWidget } from "/src/code/WellLog/utils/common.ts";
function createShapeMarker(depth) {
const width = 0.4, height = 15;
return new Rectangle({
"left": 0.95 - width,
"top": depth - height / 2,
"right": 0.95,
"bottom": depth + height / 2,
"linestyle": {
"color": "#212121",
"pixelsnapmode": true,
"width": 2
},
"fillstyle": "#e64a19"
});
}
function createSymbolMarker(depth) {
return new SymbolShape({
"ax": 1.2,
"ay": depth,
"alignment": AnchorType.RightCenter,
"width": 40,
"height": 40,
"sizeisindevicespace": true,
"painter": MarkerPainter,
"linestyle": {
"color": "#ef6c00",
"width": 2
},
"fillstyle": "#fdd835"
}).setRotationAngle(Math.PI / 8);
}
function createImageMarker(depth) {
return new Image({
"x": 0.95,
"y": depth,
"width": 0.5,
"height": 40,
"sizeisindevicespace": false,
"alignment": AnchorType.RightCenter,
"url": "src/assets/images/welllog-marker.png"
});
}
function createScene(canvas) {
const widget = createWellLogWidget().setAxisHeaderType(HeaderType.Scale).setDepthLimits(100, 400);
widget.addTrack(TrackType.IndexTrack).addChild([
createShapeMarker(175),
createSymbolMarker(250),
createImageMarker(355)
]);
widget.addTrack(TrackType.LinearTrack).addChild([
createCurve("#7cb342")
]);
widget.addTrack(TrackType.IndexTrack);
return new Plot({
"canvaselement": canvas,
"root": widget
});
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));