{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-guides/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["tabs","tab"]},"type":"markdown"},"seo":{"title":"Zones","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":"zones","__idx":0},"children":["Zones"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This tutorial describes how to display zones using MultiWellWidget."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"add-zones","__idx":1},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/WellLog/MultiWell/Zones/zones#addZones"},"children":["#"]}," Add Zones"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["A zone is an instance of ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["geotoolkit/welllog/LogLithology"]}," to be added to the zone layer of the well or LogTrack or StackedTrack. See ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/WellLog/Visuals/Lithology/lithology"},"children":["WellLog–Lithology"]}," ."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"group-tracks","__idx":2},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/WellLog/MultiWell/Zones/zones#groupTracks"},"children":["#"]}," Group Tracks"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["If Zone should be displayed for some tracks only, these tracks can be grouped by StackedTrack. It can be seen in the second well."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"add-zone-correlation","__idx":3},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/WellLog/MultiWell/Zones/zones#addZoneCorrelation"},"children":["#"]}," Add Zone Correlation"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This example shows how to use automatic zone correlation that connects lithology ranges. with the same names. It also allows you to filter only the desired zones. For example, a lithology track is not have associated ranges."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"result","__idx":4},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/WellLog/MultiWell/Zones/zones#fullExample"},"children":["#"]}," Result"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This WellLog–Multi Well Correlation widget builds upon information found in the ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/pages/firstSteps"},"children":["Getting Started"]}," documentation. This tutorial illustrates how to create a basic Zone Correlation in Multi Well Correlation widget (shown below) with three well tracks. The correlation panels are added in between the well tracks."]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"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":"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 { MultiWellWidget } from \"@int/geotoolkit/welllog/multiwell/MultiWellWidget.ts\";\nimport { Range } from \"@int/geotoolkit/util/Range.ts\";\nimport { LogTrack } from \"@int/geotoolkit/welllog/LogTrack.ts\";\nimport { TrackType as MultiWellTrackType } from \"@int/geotoolkit/welllog/multiwell/TrackType.ts\";\nimport { TrackType as WellLogTrackType } from \"@int/geotoolkit/welllog/TrackType.ts\";\nimport { KnownColors } from \"@int/geotoolkit/util/ColorUtil.ts\";\nimport { MathUtil } from \"@int/geotoolkit/util/MathUtil.ts\";\nimport { LogCurve } from \"@int/geotoolkit/welllog/LogCurve.ts\";\nimport { LogLithology } from \"@int/geotoolkit/welllog/LogLithology.ts\";\nimport { ZoneCorrelation } from \"@int/geotoolkit/welllog/multiwell/correlation/ZoneCorrelation.ts\";\nimport { TrackFactory } from \"@int/geotoolkit/welllog/TrackFactory.ts\";\nimport { LogData } from \"@int/geotoolkit/welllog/data/LogData.ts\";\nimport curvesData from \"/src/code/WellLog/MultiWell/data/data.json?import\";\nimport { from } from \"@int/geotoolkit/selection/from.ts\";\nconst shaleColor = \"rgba(150, 222, 209, 0.5)\";\nconst siltColor = \"rgba( 255, 224, 178, 0.5)\";\nfunction getOrCreateLayer(container, name) {\n  let layer = from(container).where((item) => item.getName() === name).selectFirst();\n  if (!layer) {\n    layer = LogTrack.createLogOverlay(\"zones\");\n    container.addChild(layer);\n  }\n  return layer;\n}\nfunction addZones(layer, names, ranges, colors) {\n  addLithology(layer, \"zone\", [\"\"], names, toLithologyRanges(ranges), colors);\n}\nfunction addLithology(container, name, names, titles, ranges, fillstyles) {\n  const zone = new LogLithology({\n    name,\n    depths: ranges,\n    names,\n    titles,\n    linestyle: {\n      \"color\": KnownColors.Grey\n    },\n    fillstyles\n  });\n  container.addChild(zone);\n}\nfunction toLithologyRanges(ranges) {\n  const lithologyArray = [];\n  let lastItem;\n  for (let i = 0; i < ranges.length; i++) {\n    const range = ranges[i];\n    if (lastItem !== range.getLow()) {\n      lithologyArray.push(range.getLow());\n    }\n    lithologyArray.push(range.getHigh());\n    lastItem = range.getHigh();\n  }\n  return lithologyArray;\n}\nfunction addWellData(well, startDepth, names, ranges, colors, useStackedTrack) {\n  let linearTrack, lithologyTrack;\n  let zoneLayer;\n  if (useStackedTrack) {\n    const stackedTrack = well.addTrack(WellLogTrackType.StackedTrack);\n    lithologyTrack = TrackFactory.getInstance().createTrack(WellLogTrackType.AnnotationTrack, {\n      \"width\": 50\n    });\n    stackedTrack.addTrack(lithologyTrack);\n    linearTrack = TrackFactory.getInstance().createTrack(WellLogTrackType.LinearTrack, {\n      \"width\": 200\n    });\n    stackedTrack.addTrack(linearTrack);\n    stackedTrack.setLayoutStyle({\n      \"width\": 250\n    }, true);\n    zoneLayer = getOrCreateLayer(stackedTrack, \"zones\");\n  } else {\n    zoneLayer = well.getZoneLayer();\n    lithologyTrack = well.addTrack({\n      \"type\": WellLogTrackType.AnnotationTrack,\n      \"width\": 50\n    });\n    linearTrack = well.addTrack(WellLogTrackType.LinearTrack);\n  }\n  addLithology(lithologyTrack, \"lithology\", names, names, toLithologyRanges(ranges), colors);\n  linearTrack.addChild([\n    createCurve(createTestData(startDepth, 10, \"GR\")).setLineStyle(KnownColors.Green),\n    createCurve(createTestData(startDepth, 10, \"CALI\")).setLineStyle(KnownColors.Orange)\n  ]);\n  return zoneLayer;\n}\nfunction addZonesCorrelation(track) {\n  track.addChild(new ZoneCorrelation({\n    \"filter\": (item) => item.getName() === \"zone\"\n  }));\n}\nfunction createWidget() {\n  const widget = new MultiWellWidget({\n    \"tools\": {\n      \"cursortracking\": {\n        \"tooltip\": {\n          \"enabled\": true\n        }\n      }\n    }\n  });\n  const well1 = widget.addTrack(MultiWellTrackType.WellTrack, {\n    \"range\": new Range(0, 500),\n    \"welllog\": {\n      \"range\": new Range(4500, 5e3)\n    },\n    \"name\": \"Well #1\",\n    \"title\": '${name}<br/><span style=\"background-color: #DCDCDC\">1 ${deviceUnit} : ${scaleValue} ${scaleUnit}</span>'\n  });\n  const correlationTrack1 = widget.addTrack(MultiWellTrackType.CorrelationTrack, {\n    \"width\": 50\n  });\n  const well2 = widget.addTrack(MultiWellTrackType.WellTrack, {\n    \"range\": new Range(50, 600),\n    \"welllog\": {\n      \"range\": new Range(2500, 5e3)\n    },\n    \"name\": \"Well #2\",\n    \"title\": '${name}<br/><span style=\"background-color: #DCDCDC\">1 ${deviceUnit} : ${scaleValue} ${scaleUnit}</span>'\n  });\n  const correlationTrack2 = widget.addTrack(MultiWellTrackType.CorrelationTrack, {\n    \"width\": 50\n  });\n  const well3 = widget.addTrack(MultiWellTrackType.WellTrack, {\n    \"range\": new Range(25, 600),\n    \"welllog\": {\n      \"range\": new Range(4700, 5e3)\n    },\n    \"name\": \"Well #3\",\n    \"title\": '${name}<br/><span style=\"background-color: #DCDCDC\">1 ${deviceUnit} : ${scaleValue} ${scaleUnit}</span>'\n  });\n  const zoneWell1 = [new Range(4750, 4850), new Range(4850, 4950)];\n  const zoneWell2 = [new Range(3e3, 3300), new Range(3300, 3600)];\n  const zoneWell3 = [new Range(4800, 4900), new Range(4900, 4950)];\n  const zoneColors = [{ color: KnownColors.LightBlue }, { color: KnownColors.DarkYellow }];\n  const zoneWellColors = [{ color: shaleColor }, { color: siltColor }];\n  const zoneNames = [\"shale\", \"silt\"];\n  const zoneLayer1 = addWellData(well1, 4500, zoneNames, zoneWell1, zoneColors);\n  const zoneLayer2 = addWellData(well2, 2500, zoneNames, zoneWell2, zoneColors, true);\n  const zoneLayer3 = addWellData(well3, 4700, zoneNames, zoneWell3, zoneColors);\n  addZones(zoneLayer1, zoneNames, zoneWell1, zoneWellColors);\n  addZones(zoneLayer2, zoneNames, zoneWell2, zoneWellColors);\n  addZones(zoneLayer3, zoneNames, zoneWell3, zoneWellColors);\n  addZonesCorrelation(correlationTrack1);\n  addZonesCorrelation(correlationTrack2);\n  return widget;\n}\nfunction createCurve(dataSource) {\n  const limits = MathUtil.calculateNeatLimits(dataSource.getMinValue(), dataSource.getMaxValue(), false, false);\n  return new LogCurve(dataSource).setLineStyle({\n    color: KnownColors.Blue,\n    width: 2\n  }).setNormalizationLimits(limits.getLow(), limits.getHigh());\n}\nfunction createScene(canvas) {\n  const widget = createWidget();\n  const plot = new Plot({\n    \"canvaselement\": canvas,\n    \"root\": widget\n  });\n  widget.setHeaderHeight(\"auto\");\n  return plot;\n}\nfunction getCurveData(curveMnemonic) {\n  const curveNames = curvesData.curveNames;\n  const curveData = curvesData.curveData;\n  for (let i = 0; i < curveNames.length; i++) {\n    if (curveNames[i] === curveMnemonic)\n      return curveData[i];\n  }\n  return null;\n}\nfunction createTestData(from2, step, curveMnemonic) {\n  const data = new LogData(curveMnemonic);\n  const depths = [];\n  const values = [];\n  const curveData = getCurveData(curveMnemonic);\n  const amountOfPoints = curveData.length;\n  for (let i = 0; i < amountOfPoints; i++) {\n    depths.push(i * step + from2);\n    values.push(curveData[i]);\n  }\n  data.setValues(depths, values);\n  return data;\n}\nexport { createScene };\n\ncreateScene(document.querySelector('[ref=\"plot\"]'));\n\n","lang":"ts"},"children":[]}]}]},{"$$mdtype":"Tag","name":"iframe","attributes":{"src":"https://dc2-documentation.s3.amazonaws.com/documentation/slb-docs-test/5.0/examples/vue/tutorials/index.html#/WellLog/MultiWell/Zones/zones?section=fullExample&extract=true","width":"100%","height":"700.5px","style":{"border":"none"}},"children":[]}]},"headings":[{"value":"Zones","id":"zones","depth":1},{"value":"Add Zones","id":"add-zones","depth":3},{"value":"Group Tracks","id":"group-tracks","depth":3},{"value":"Add Zone Correlation","id":"add-zone-correlation","depth":3},{"value":"Result","id":"result","depth":3}],"frontmatter":{"title":"Zones","seo":{"title":"Zones"}},"lastModified":"2026-02-11T19:54:32.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/solutions/geotoolkit/tutorials/well-log/multi-well/zones","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}