{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-guides/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["tabs","tab"]},"type":"markdown"},"seo":{"title":"Lithology","description":"Accelerate E&P application development and protect your innovation by consuming our Data and Domain APIs / Platform APIs.","lang":"en-US","meta":[{"name":"robots","content":"noindex"}],"llmstxt":{"hide":true,"excludeFiles":[]}},"dynamicMarkdocComponents":[],"compilationErrors":[],"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"lithology","__idx":0},"children":["Lithology"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This tutorial shows how to create and display lithologies within a schematics widget. A Lithology is a shape filled with an image pattern which represents a type of rock."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"implementation-for-lithology-using-carnacjs-based-rectangle-shape","__idx":1},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/Schematics/LithologyInSchematics/lithologyInSchematics#implementation"},"children":["#"]}," Implementation for Lithology using CarnacJS-based Rectangle Shape"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["SchematicsJS does ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["not"]}," implement Lithology. Instead, the CarnacJS-based rectangle shape is used to implement a lithology. See the code below in the createLithology method. The order in which the objects are added to the parent Group is important. Note that for the lithology object not to overlap the well bore, it should be added to the parent group BEFORE the well bore object."]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[{"$$mdtype":"Tag","name":"div","attributes":{"label":"main","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"import { Plot } from \"@int/geotoolkit/plot/Plot.ts\";\nimport { WellBoreData } from \"@int/geotoolkit/schematics/data/WellBoreData.ts\";\nimport { CompositeSchematicsWidget } from \"@int/geotoolkit/schematics/widgets/CompositeSchematicsWidget.ts\";\nimport { Transformation } from \"@int/geotoolkit/util/Transformation.ts\";\nimport { Point } from \"@int/geotoolkit/util/Point.ts\";\nimport { loadResources } from \"/src/helpers/resources.ts\";\nimport { PatternFactory } from \"@int/geotoolkit/attributes/PatternFactory.ts\";\nimport { FillStyle } from \"@int/geotoolkit/attributes/FillStyle.ts\";\nimport { Rectangle } from \"@int/geotoolkit/scene/shapes/Rectangle.ts\";\nimport { PieceLinearValueTransformer } from \"@int/geotoolkit/axis/PieceLinearValueTransformer.ts\";\nimport { Group } from \"@int/geotoolkit/scene/Group.ts\";\nimport data from \"/src/assets/data/wellBoreData.json?import\";\nconst lithologiesInfos = [\n  { patternName: \"lime\", backColor: \"navajowhite\", foreColor: \"lightslategray\", bottom: 1700 },\n  { patternName: \"sand\", backColor: \"lightgoldenrodyellow\", foreColor: \"darkgray\", bottom: 4450 },\n  { patternName: \"siltstone\", backColor: \"aliceblue\", foreColor: \"dimgray\", bottom: 6550 },\n  { patternName: \"basement\", backColor: \"blanchedalmond\", foreColor: \"dimgray\", bottom: 8700 },\n  { patternName: \"shale\", backColor: \"navajowhite\", foreColor: \"gray\", bottom: 10200 },\n  { patternName: \"dolomite\", backColor: \"lightsalmon\", foreColor: \"dimgray\", bottom: 13e3 },\n  { patternName: \"chert\", backColor: \"lavenderblush\", foreColor: \"lightslategray\", bottom: 145890 }\n];\nfunction createLithology(left, top, right, bottom, backColor, foreColor, patternName) {\n  const imagePattern = PatternFactory.getInstance().getPattern(patternName);\n  const fillStyle = new FillStyle(backColor, imagePattern, foreColor);\n  return new Rectangle(left, top, right, bottom).setFillStyle(fillStyle).setLineStyle(\"black\");\n}\nfunction createLithologies(widget) {\n  const wellBoreData = widget.getData();\n  const rectData = wellBoreData.getGeometryBounds();\n  const rectWidget = widget.getModel().getModelLimits();\n  const left = rectWidget.getLeft(), right = rectWidget.getRight();\n  const tr = Transformation.getRectToRectInstance(rectData, rectWidget);\n  const modelToBounds = widget.setViewMode(widget.getViewMode());\n  const depthTransformer = new PieceLinearValueTransformer({\n    \"inputvalues\": modelToBounds[\"boundsdepths\"],\n    \"outputvalues\": modelToBounds[\"modellimitsdepths\"]\n  });\n  const src = new Point(), dst = new Point();\n  const lithologyGroup = new Group();\n  let prevBottom = 0;\n  for (let i = 0; i < lithologiesInfos.length; ++i) {\n    const info = lithologiesInfos[i];\n    let from = depthTransformer.transform(prevBottom, true);\n    let to = depthTransformer.transform(info.bottom, true);\n    tr.transformPoint(src.setPoint(0, from), dst);\n    from = dst.getY();\n    tr.transformPoint(src.setPoint(0, to), dst);\n    to = dst.getY();\n    const lithology = createLithology(left, from, right, to, info.backColor, info.foreColor, info.patternName);\n    lithologyGroup.addChild(lithology);\n    prevBottom = info.bottom;\n  }\n  widget.getModel().insertChild(widget.getModel().getChildrenCount() - 2, lithologyGroup);\n}\nfunction createScene(canvas) {\n  loadResources(\"patterns\");\n  const wellBoreData = new WellBoreData(data);\n  const widget = new CompositeSchematicsWidget({\n    \"annotationssizes\": { \"north\": 30 },\n    \"gap\": {\n      \"left\": { \"size\": 20 },\n      \"right\": { \"size\": 20 },\n      \"top\": { \"size\": 20 },\n      \"bottom\": { \"size\": 20 }\n    },\n    \"data\": {\n      \"elements\": wellBoreData\n    }\n  });\n  const plot = new Plot({\n    \"canvaselement\": canvas,\n    \"root\": widget\n  });\n  createLithologies(widget);\n  return plot;\n}\nexport { createScene };\n\ncreateScene(document.querySelector('[ref=\"plot\"]'));\n\n","lang":"ts"},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"label":"css","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"css","header":{"controls":{"copy":{}}},"source":"\n.cg-tooltip-holder {\n  position: relative;\n}\n\n.cg-tooltip {\n  position: absolute;\n  display: block;\n  padding: 2px 12px 3px 7px;\n  overflow: visible !important;\n  font-family: Roboto, Helvetica, Arial, sans-serif;\n  font-size: 13px;\n  background: white !important;\n  opacity: 0.9;\n  color: #333333;\n  border: solid 1px gray;\n  border-radius: 5px;\n  text-align: left;\n  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);\n  border-radius: 5px;\n  margin: 0 !important;\n  z-index: 10000;\n  max-width: 400px;\n  text-wrap: normal !important;\n  white-space: normal !important;\n}\n/* Default setting for tooltip */\n.cg-tooltip-container {\n  position: absolute;\n  display: block;\n  overflow: visible !important;\n  font-family: Roboto, Helvetica, Arial, sans-serif;\n  font-size: 12px;\n  padding: 3px 7px;\n  background: #f7f7f7;\n  color: #333333;\n  border: 1px solid #938e8e;\n  opacity: 0.8;\n  text-align: left;\n  box-shadow: 3px 3px 10px #888;\n  margin: 0 !important;\n  z-index: 10000;\n  max-width: 400px;\n  text-wrap: normal !important;\n  white-space: normal !important;\n  user-select: none;\n}\n@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n  .cg-tooltip-container {\n    border-radius: 0;\n  }\n}\n/* Default left arrow for tooltip */\n.cg-tooltip-arrow-left::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 0;\n  top: 50%;\n  border: 5px solid transparent;\n  border-left: 0;\n  border-right: 5px solid  #938e8e;\n  transform: translate(calc(-100%), -50%);\n}\n.cg-tooltip-arrow-left::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 0;\n  top: 50%;\n  border: 4px solid transparent;\n  border-left: 0;\n  border-right: 4px solid #f7f7f7;\n  transform: translate(calc(-100%), -50%);\n}\n/* Default top arrow for tooltip */\n.cg-tooltip-arrow-top::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  top: 0;\n  border: 5px solid transparent;\n  border-top: 0;\n  border-bottom: 5px solid #938e8e;\n  transform: translate(-50%, -100%);\n}\n.cg-tooltip-arrow-top::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  top: 0;\n  border: 4px solid transparent;\n  border-top: 0;\n  border-bottom: 4px solid #f7f7f7;\n  transform: translate(-50%, -100%);\n}\n/* Default right arrow for tooltip */\n.cg-tooltip-arrow-right::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  right: 0;\n  top: 50%;\n  border: 5px solid transparent;\n  border-right: 0;\n  border-left: 5px solid #938e8e;\n  transform: translate(100%, -50%);\n}\n.cg-tooltip-arrow-right::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  right: 0;\n  top: 50%;\n  border: 4px solid transparent;\n  border-right: 0;\n  border-left: 4px solid #f7f7f7;\n  transform: translate(100%, -50%);\n}\n/* Default bottom arrow for tooltip */\n.cg-tooltip-arrow-bottom::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  bottom: 0px;\n  border: 5px solid transparent;\n  border-bottom: 0;\n  border-top: 5px solid #938e8e;\n  transform: translate(-50%, 100%);\n  z-index: 10000;\n}\n.cg-tooltip-arrow-bottom::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  bottom: 0;\n  border: 4px solid transparent;\n  border-bottom: 0;\n  border-top: 4px solid #f7f7f7;\n  transform: translate(-50%, 100%);\n  z-index: 10000;\n}\n/* Tooltip item name */\n/* Tooltip item value */\n/* .cg-tooltip-item-value */\n/* Tooltip item value */\n.cg-tooltip-item-unit {\n  text-transform: none;\n}\n\n.cg-tooltip-item-name {\n    text-transform: capitalize;\n    white-space: nowrap;\n    vertical-align: middle;\n    font-size: 13px;\n}\n.cg-tooltip-row {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  white-space: pre-wrap;\n  font-size: 12px;\n  line-height: 100%;\n  margin: 1px 0;\n}\n.cg-tooltip-title {\n  font-size: 13px;\n  height: 14px;\n  text-transform: capitalize;\n}\n.cg-tooltip-title .cg-tooltip-symbol {\n  margin-right: 0 !important;\n}\n.cg-tooltip-title-name {\n  vertical-align: middle;\n}\n.cg-tooltip-row + .cg-tooltip-row {\n  margin-top: 4px;\n}\n.cg-tooltip-row.cg-tooltip-title + .cg-tooltip-row {\n  margin-top: 5px;\n}\n.cg-tooltip-item-value + .cg-tooltip-item-unit {\n    margin-left: 1px;\n}\n/* Tooltip symbol */\n.cg-tooltip-symbol-cell {\n  display: inline-flex;\n  min-width: 13px; /* 10px size + 3px margin */\n}\n.cg-tooltip-symbol {\n  margin-right: 3px;\n  background-color: transparent;\n  display: block;\n}\n.cg-tooltip-symbol > img {\n  display: block;\n}\n.cg-tooltip-list-cell {\n  display: inline-flex;\n}\n.cg-tooltip-list-symbol {\n  display: block;\n  margin-right: 3px;\n  width: 6px;\n  height: 6px;\n  vertical-align: middle;\n  border-radius: 50%;\n  border: 1px solid rgba(0,0,0,.4);\n}\n.cg-tooltip-symbol-legacy {\n  border-radius: 4px;\n  margin-right: 5px;\n  height: 8px;\n  width: 8px;\n  display: inline-block;\n}\n.cg-tooltip-title-legacy {\n  font-weight: 900;\n}\n\n/* Tooltip symbol circle */\n.cg-tooltip-symbol.circle {\n  height: 10px;\n  width: 10px;\n  display: inline-block;\n  border-radius: 50%;\n  border: 1px solid rgba(0,0,0,.4);\n}\n/* Tooltip symbol line */\n.cg-tooltip-symbol.line {\n    height: 10px;\n    width: 10px;\n    display: inline-block;\n    transform: scale(1.2, 0.2);\n}\n/* Tooltip symbol diamond */\n.cg-tooltip-symbol.diamond {\n    height: 10px;\n    width: 10px;\n    display: inline-block;\n    transform: rotate(45deg);\n    border-radius: 0px;\n}\n/* Tooltip symbol square */\n.cg-tooltip-symbol.square {\n    height: 10px;\n    width: 10px;\n    display: inline-block;\n    border-radius: 0px;\n    border: 1px solid rgba(0,0,0,.4);\n}\n\n","lang":"css"},"children":[]}]}]},{"$$mdtype":"Tag","name":"iframe","attributes":{"src":"https://dc2-documentation.s3.amazonaws.com/documentation/slb-docs-test/5.0/examples/vue/tutorials/index.html#/Schematics/LithologyInSchematics/lithologyInSchematics?section=implementation&extract=true","width":"100%","height":"788.5px","style":{"border":"none"}},"children":[]}]},"headings":[{"value":"Lithology","id":"lithology","depth":1},{"value":"Implementation for Lithology using CarnacJS-based Rectangle Shape","id":"implementation-for-lithology-using-carnacjs-based-rectangle-shape","depth":3}],"frontmatter":{"title":"Lithology","seo":{"title":"Lithology"}},"lastModified":"2026-02-11T19:54:32.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/solutions/geotoolkit/tutorials/schematics/lithology-in-schematics","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}