{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-guides/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["tabs","tab"]},"type":"markdown"},"seo":{"title":"Seismic Layers","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":"seismic-layers","__idx":0},"children":["Seismic Layers"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This tutorial provides a way to compare two different seismic layers on the same plot using the Comparator tool ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["geotoolkit/seismic/widgets/tools/Comparator"]},"."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"creating-layers","__idx":1},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/Seismic/ImagesAndLayers/SeismicLayers/seismicLayers#TransparentLayer"},"children":["#"]}," Creating Layers"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This tutorial shows how to create different layers within a plot. The following example uses ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["geotoolkit/scene/Group"]}," to group layers as necessary. The position of the images can be changed with ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["changeChildOrder()"]}," which organizes all the indexes of a group."]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[]},{"$$mdtype":"Tag","name":"iframe","attributes":{"src":"https://dc2-documentation.s3.amazonaws.com/documentation/slb-docs-test/5.0/examples/vue/tutorials/index.html#/Seismic/ImagesAndLayers/SeismicLayers/seismicLayers?section=TransparentLayer&extract=true","width":"100%","height":"548.5px","style":{"border":"none"}},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"comparing-seismic-plots-using-layers","__idx":2},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/Seismic/ImagesAndLayers/SeismicLayers/seismicLayers#VerticalComparison"},"children":["#"]}," Comparing Seismic Plots using Layers"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The following example uses ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["RemoteSeismicReader"]}," to read data from the server. It retrieves a slice of one inline data set from the server and displays it with ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["SeismicWidget"]},". To display a second seismic plot in the widget, create an additional pipeline by using the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["clone()"]}," method. The Comparator tool is then initialized for the widget."]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[]},{"$$mdtype":"Tag","name":"iframe","attributes":{"src":"https://dc2-documentation.s3.amazonaws.com/documentation/slb-docs-test/5.0/examples/vue/tutorials/index.html#/Seismic/ImagesAndLayers/SeismicLayers/seismicLayers?section=VerticalComparison&extract=true","width":"100%","height":"488.5px","style":{"border":"none"}},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"layer-orientation","__idx":3},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/Seismic/ImagesAndLayers/SeismicLayers/seismicLayers#HorizontalComparison"},"children":["#"]}," Layer Orientation"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The layer orientation can be specified using the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["setOrientation"]}," method."]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[]},{"$$mdtype":"Tag","name":"iframe","attributes":{"src":"https://dc2-documentation.s3.amazonaws.com/documentation/slb-docs-test/5.0/examples/vue/tutorials/index.html#/Seismic/ImagesAndLayers/SeismicLayers/seismicLayers?section=HorizontalComparison&extract=true","width":"100%","height":"488.5px","style":{"border":"none"}},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"layer-transparency","__idx":4},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/Seismic/ImagesAndLayers/SeismicLayers/seismicLayers#TransparentComparison"},"children":["#"]}," Layer Transparency"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The layer transparency can be specified using the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["setOptions"]}," method on the pipeline."]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[]},{"$$mdtype":"Tag","name":"iframe","attributes":{"src":"https://dc2-documentation.s3.amazonaws.com/documentation/slb-docs-test/5.0/examples/vue/tutorials/index.html#/Seismic/ImagesAndLayers/SeismicLayers/seismicLayers?section=TransparentComparison&extract=true","width":"100%","height":"488.5px","style":{"border":"none"}},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"source-code","__idx":5},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/Seismic/ImagesAndLayers/SeismicLayers/seismicLayers#Source"},"children":["#"]}," Source code"]},{"$$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 { Orientation } from \"@int/geotoolkit/util/Orientation.ts\";\nimport { NodeOrder } from \"@int/geotoolkit/scene/CompositeNode.ts\";\nimport { SeismicImage } from \"@int/geotoolkit/seismic/image/SeismicImage.ts\";\nimport { Plot } from \"@int/geotoolkit/plot/Plot.ts\";\nimport { SeismicWidget } from \"@int/geotoolkit/seismic/widgets/SeismicWidget.ts\";\nimport { SeismicColors } from \"@int/geotoolkit/seismic/util/SeismicColors.ts\";\nimport { NormalizationType } from \"@int/geotoolkit/seismic/pipeline/NormalizationType.ts\";\nimport { SeismicPipeline } from \"@int/geotoolkit/seismic/pipeline/SeismicPipeline.ts\";\nimport { RemoteSeismicDataSource } from \"@int/geotoolkit/seismic/data/RemoteSeismicDataSource.ts\";\nconst plots = [];\nfunction createSectionQuery(position, key, oppositeKey) {\n  const selectKeys = [];\n  selectKeys[0] = {\n    \"name\": key[\"key\"],\n    \"min\": position,\n    \"max\": position,\n    \"step\": key[\"increment\"],\n    \"order\": \"asc\"\n  };\n  selectKeys[1] = {\n    \"name\": oppositeKey[\"key\"],\n    \"min\": oppositeKey[\"min\"],\n    \"max\": oppositeKey[\"max\"],\n    \"step\": oppositeKey[\"increment\"],\n    \"order\": \"asc\"\n  };\n  return {\n    \"keys\": selectKeys,\n    \"options\": null,\n    \"emptyTracesKey\": {\n      \"name\": oppositeKey[\"key\"],\n      \"min\": oppositeKey[\"min\"],\n      \"max\": oppositeKey[\"max\"]\n    }\n  };\n}\nconst createReader = function(options, onready, onfailure) {\n  const data = new RemoteSeismicDataSource({\n    \"host\": options[\"host\"],\n    \"file\": options[\"source\"],\n    \"version\": 2\n  });\n  data.open(\n    () => {\n      const keys = data.getKeys();\n      const key = keys[0];\n      const oppositeKey = keys[1];\n      const query = createSectionQuery(options[\"inline\"], key, oppositeKey);\n      data.select(query, onready, onfailure);\n    },\n    onfailure\n  );\n};\nconst createPipeline = function(reader) {\n  return new SeismicPipeline({\n    \"name\": \"Seismic\",\n    \"reader\": reader,\n    \"statistics\": reader.getStatistics()\n  }).setOptions({\n    \"normalization\": {\n      \"type\": NormalizationType.RMS,\n      \"scale\": 0.4\n    },\n    \"plot\": {\n      \"type\": {\n        \"wiggle\": false,\n        \"interpolateddensity\": true\n      },\n      \"decimationspacing\": 5\n    },\n    \"colors\": {\n      \"colormap\": SeismicColors.getDefault().createNamedColorMap(\"WhiteBlack\", 32)\n    }\n  });\n};\nfunction initializeLayerTool(widget, pipeline) {\n  pipeline = pipeline.clone().setOptions({\n    \"normalization\": {\n      \"type\": NormalizationType.RMS,\n      \"scale\": 0.4\n    },\n    \"plot\": {\n      \"type\": {\n        \"wiggle\": false,\n        \"interpolateddensity\": true\n      },\n      \"decimationspacing\": 5\n    },\n    \"colors\": {\n      \"colormap\": SeismicColors.getDefault().createNamedColorMap(\"BlackRedYellowWhite\", 32),\n      \"opacity\": 1\n    }\n  });\n  return widget.getToolByName(\"comparator\").setEnabled(true).setPipeline(pipeline);\n}\nfunction createWidget(canvas, pipeline, secondPipeline) {\n  const widget = new SeismicWidget({\n    \"pipeline\": pipeline,\n    \"colorbar\": {\n      \"axis\": {\n        \"tickgenerator\": {\n          \"edge\": {\n            \"tickvisible\": false,\n            \"labelvisible\": false\n          }\n        }\n      }\n    },\n    \"layouttype\": \"inside\",\n    \"statusbar\": {\n      \"visible\": false\n    }\n  }).setScaleOptions({\n    \"tracescale\": 20,\n    \"samplescale\": 200,\n    \"deviceunit\": \"in\",\n    \"sampleunit\": \"ft\"\n  });\n  const headerFields = pipeline.getReader().getTraceHeaderFields();\n  let header, headerInfo;\n  for (let i = 0; i < headerFields.length; i++) {\n    header = headerFields[i];\n    if (header.getName() === \"XLINE\") {\n      widget.setTraceHeaderVisible(header, true);\n    } else if (header.getName() === \"TraceNumber\") {\n      widget.setTraceHeaderVisible(header, false);\n    }\n    headerInfo = widget.getTraceHeaderAxis(header);\n    if (headerInfo) {\n      headerInfo[\"label\"].getTextStyle().setColor(\"#6b6b6b\");\n    }\n  }\n  if (secondPipeline) {\n    initializeLayerTool(widget, secondPipeline);\n  }\n  plots.push(new Plot({\n    \"canvaselement\": canvas,\n    \"root\": widget\n  }));\n  return widget;\n}\nlet firstSeismicImage, secondSeismicImage, layeredWidget;\nfunction createSeismicLayers(reader, canvas) {\n  const pipeline = createPipeline(reader);\n  pipeline.setOptions({ \"colors\": {\n    \"colormap\": SeismicColors.getDefault().createNamedColorMap(\"BlackRedYellowWhite\", 32)\n  } });\n  const secondPipeline = createPipeline(reader);\n  secondPipeline.setOptions({ \"plot\": {\n    \"type\": {\n      \"wiggle\": true,\n      \"interpolateddensity\": false,\n      \"simpledensity\": false\n    },\n    \"decimationspacing\": 5\n  } });\n  const modelLimits = secondPipeline.getModelLimits();\n  layeredWidget = createWidget(canvas, pipeline);\n  layeredWidget.setOptions({\n    \"autoseismiclimits\": false\n  });\n  layeredWidget.setSeismicModelLimits(modelLimits);\n  firstSeismicImage = layeredWidget.getSeismicImage();\n  firstSeismicImage.setBounds(modelLimits);\n  const parentSeismicGroup = layeredWidget.getSeismicModel();\n  secondSeismicImage = new SeismicImage(secondPipeline);\n  secondSeismicImage.setBounds(modelLimits);\n  parentSeismicGroup.addChild(secondSeismicImage);\n}\nfunction toggleOrder() {\n  if (firstSeismicImage && secondSeismicImage) {\n    const parentSeismicGroup = layeredWidget.getSeismicModel();\n    parentSeismicGroup.changeChildOrder(\n      firstSeismicImage,\n      parentSeismicGroup.indexOfChild(secondSeismicImage) > parentSeismicGroup.indexOfChild(firstSeismicImage) ? NodeOrder.Forward : NodeOrder.Backward\n    );\n  }\n}\nfunction initialize(transparentLayer, verticalComparison, horizontalComparison, transparentComparison) {\n  const MAJOR_INLINE = 1;\n  const MINOR_INLINE = 25;\n  const DATA_HOST = \"https://demo.int.com/INTGeoServer/json\";\n  const DATA_SOURCE = \"data/seismic/Gullfaks_Amplitude.xgy\";\n  createReader({\n    \"host\": DATA_HOST,\n    \"source\": DATA_SOURCE,\n    \"inline\": MAJOR_INLINE\n  }, (reader) => {\n    createReader({\n      \"host\": DATA_HOST,\n      \"source\": DATA_SOURCE,\n      \"inline\": MINOR_INLINE\n    }, (secondReader) => {\n      let pipeline = createPipeline(reader);\n      const secondPipeline = createPipeline(secondReader);\n      createSeismicLayers(reader, transparentLayer);\n      createWidget(verticalComparison, pipeline, secondPipeline);\n      createWidget(horizontalComparison, pipeline, secondPipeline).getToolByName(\"comparator\").setOrientation(Orientation.Horizontal);\n      const widget = createWidget(transparentComparison, pipeline, secondPipeline);\n      pipeline = widget.getPipeline().clone().setOptions({\n        \"colors\": {\n          \"colormap\": SeismicColors.getDefault().createNamedColorMap(\"RedWhiteBlack\", 32)\n        }\n      });\n      widget.setPipeline(pipeline);\n      const comparator = widget.getToolByName(\"comparator\").setSplit(false).setContinuous(true);\n      comparator.getPipeline().setOptions({\n        \"plot\": {\n          \"type\": {\n            \"wiggle\": true,\n            \"interpolateddensity\": false\n          }\n        },\n        \"colors\": {\n          \"colormap\": SeismicColors.getDefault().createNamedColorMap(\"BlackRedYellowWhite\", 32),\n          \"opacity\": 0.5\n        }\n      });\n    }, (error) => {\n      alert(error);\n    });\n  }, (error) => {\n    alert(error);\n  });\n}\nfunction dispose() {\n  plots.forEach((plot) => plot.dispose());\n}\nexport { dispose, initialize, toggleOrder };\n\ncreateScene();\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":[]}]}]}]},"headings":[{"value":"Seismic Layers","id":"seismic-layers","depth":1},{"value":"Creating Layers","id":"creating-layers","depth":3},{"value":"Comparing Seismic Plots using Layers","id":"comparing-seismic-plots-using-layers","depth":3},{"value":"Layer Orientation","id":"layer-orientation","depth":3},{"value":"Layer Transparency","id":"layer-transparency","depth":3},{"value":"Source code","id":"source-code","depth":3}],"frontmatter":{"title":"Seismic Layers","seo":{"title":"Seismic Layers"}},"lastModified":"2026-02-11T19:54:32.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/solutions/geotoolkit/tutorials/seismic/images-and-layers/seismic-layers","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}