{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-guides/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["tabs","tab"]},"type":"markdown"},"seo":{"title":"Legend/Text on Grid planes","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":"legendtext-on-grid-planes","__idx":0},"children":["Legend/Text on Grid planes"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This tutorial demonstrates how to add a text/legend on a 3D ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/Carnac3D/Basics/GridIntroduction/gridIntroduction"},"children":["Grid"]}," or ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/Carnac3D/Well/ProjectionWidget/projectionWidget"},"children":["Projection Widget"]}," .",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"Each plane of the legend can be customized separately if needed."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To use this feature, you simply need to create a ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/doc/classes/geotoolkit3d.scene.grid.legend.gridlegend.gridlegend.html"},"children":["GridLegend"]}," with the desired legend settings,",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"and add it to a ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/doc/classes/geotoolkit3d.scene.grid.grid.grid.html"},"children":["Grid"]}," or a ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/doc/classes/geotoolkit3d.widgets.projectionwidget.projectionwidget.html"},"children":["ProjectionWidget"]}," through the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".addLegend()"]}," method."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"add-a-legend-on-a-3d-grid","__idx":1},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/Carnac3D/AdditionalFunctionality/Legend3D/legend3d#legend3dGrid"},"children":["#"]}," Add a legend on a 3D Grid"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["In this example you can see how to add the legend to a 3D ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Grid"]},"."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["With the interface below, you can dynamically change some of the legend options.",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"For more options please refer to the ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/doc/classes/geotoolkit3d.scene.grid.legend.gridlegend.gridlegend.html"},"children":["GridLegend"]}," documentation."]},{"$$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 { DefaultColorProvider } from \"@int/geotoolkit/util/DefaultColorProvider.ts\";\nimport { Plot } from \"@int/geotoolkit3d/Plot.ts\";\nimport { Vector2, Vector3 } from \"/node_modules/.vite/deps/three.js?v=2235af65\";\nimport { Grid } from \"@int/geotoolkit3d/scene/grid/Grid.ts\";\nimport { CompassAxis } from \"@int/geotoolkit3d/scene/compass/CompassAxis.ts\";\nimport { GridLegend } from \"@int/geotoolkit3d/scene/grid/legend/GridLegend.ts\";\nimport { PointSet } from \"@int/geotoolkit3d/scene/pointset/PointSet.ts\";\nimport { MathUtil } from \"@int/geotoolkit/util/MathUtil.ts\";\nimport { AlignmentStyle, TextStyle } from \"@int/geotoolkit/attributes/TextStyle.ts\";\nlet __legendHandle;\nconst __legendDynamicOptions = {\n  \"sizeindevice\": true,\n  \"nearside\": false,\n  \"hideiftoolarge\": true,\n  \"textscale\": 1\n};\nfunction createScene(divElement) {\n  const plot = createPlot(divElement);\n  const pointSet = createPointSet();\n  const grid = new Grid({ start: new Vector3(0, 0, 0), end: new Vector3(20, 20, 20) });\n  plot.getRoot().add(grid);\n  plot.getRoot().add(pointSet);\n  const legend = createLegend();\n  grid.addLegend(legend);\n  __legendHandle = legend;\n  return plot;\n}\nfunction createLegend() {\n  const legendStyle = new TextStyle({\n    \"font\": \"15px Arial\",\n    \"color\": \"white\",\n    \"alignment\": AlignmentStyle.Left\n  });\n  const titleStyle = new TextStyle({\n    \"font\": \"22px Arial\",\n    \"color\": \"white\",\n    \"alignment\": AlignmentStyle.Center\n  }).setFontWeight(\"bold\");\n  const blackOutline = {\n    \"enable\": true,\n    \"innercolor\": \"white\",\n    \"outlinecolor\": \"black\",\n    \"thickness\": 3\n  };\n  const gridTextOpts = {\n    \"planes\": {\n      \"left\": {\n        \"text\": \"SAMPLE LEGEND\\n\\nItem 1 - Item description\\nItem 2 - Item description\\nItem 3 - Item description\\nItem 4 - Item description\\n\",\n        \"style\": legendStyle,\n        \"outline\": blackOutline,\n        \"textoffset\": new Vector2(0.25, 0.66)\n      },\n      \"back\": {\n        \"text\": \"SAMPLE TITLE\",\n        \"style\": titleStyle,\n        \"outline\": blackOutline,\n        \"textoffset\": new Vector2(0.5, 0.875)\n      },\n      \"front\": { \"text\": \"Sample text\", \"style\": titleStyle },\n      \"right\": { \"text\": \"Sample text\", \"style\": titleStyle }\n    }\n  };\n  return new GridLegend(gridTextOpts);\n}\nfunction createPlot(divElement) {\n  const lookAt = new Vector3(10, 10, 10);\n  const position = new Vector3().copy(lookAt.clone()).sub(new Vector3(-20, 20, -5));\n  const perspectivePlot = new Plot({\n    \"container\": divElement,\n    \"camera\": {\n      \"position\": position,\n      \"lookat\": lookAt\n    }\n  });\n  perspectivePlot.getCompass().setCompassObject(new CompassAxis());\n  return perspectivePlot;\n}\nfunction createPointSet() {\n  const points = generatePoints();\n  return new PointSet({\n    \"data\": {\n      \"x\": points[\"x\"],\n      \"y\": points[\"y\"],\n      \"z\": points[\"z\"],\n      \"sizes\": points[\"sizes\"],\n      \"values\": points[\"values\"]\n    },\n    \"symbolminsize\": 0.15,\n    \"symbolmaxsize\": 0.3,\n    \"colorprovider\": new DefaultColorProvider({\n      \"values\": [points[\"valmin\"], 0.5 * points[\"valmin\"] + points[\"valmax\"], points[\"valmax\"]],\n      \"colors\": [\"white\", \"orange\", \"red\"]\n    })\n  });\n}\nfunction generatePoints() {\n  const result = {\n    \"x\": [],\n    \"y\": [],\n    \"z\": [],\n    \"sizes\": [],\n    \"values\": [],\n    \"valmin\": Number.POSITIVE_INFINITY,\n    \"valmax\": Number.NEGATIVE_INFINITY\n  };\n  for (let y = 0; y < 20; y++) {\n    const yHeight = Math.cos(Math.PI * 2 * y / 20) + 5;\n    for (let x = 0; x < 20; x++) {\n      const xHeight = Math.sin(Math.PI * 2 * x / 20) - 4 + (x + y) / 3;\n      result[\"x\"].push(x);\n      result[\"y\"].push(y);\n      const z = xHeight + yHeight;\n      result[\"z\"].push(z);\n      const size = z / 10;\n      result[\"sizes\"].push(size);\n      const value = z * (MathUtil.getSeededRandom(0, 1, 1) + size / 10);\n      result[\"values\"].push(value);\n      result[\"valmin\"] = Math.min(value, result[\"valmin\"]);\n      result[\"valmax\"] = Math.max(value, result[\"valmax\"]);\n    }\n  }\n  return result;\n}\nfunction setLegendOptions(legend, options) {\n  legend.setOptions({\n    \"planes\": {\n      \"front\": options,\n      \"left\": options,\n      \"back\": options,\n      \"right\": options\n    }\n  });\n}\nfunction toggleSizeInDeviceButtonUI(isEnabled) {\n  __legendDynamicOptions[\"sizeindevice\"] = isEnabled;\n  setLegendOptions(__legendHandle, __legendDynamicOptions);\n}\nfunction updateTextScale(value) {\n  __legendDynamicOptions[\"textscale\"] = value;\n  setLegendOptions(__legendHandle, __legendDynamicOptions);\n}\nfunction toggleNearSideButtonUI(isEnabled) {\n  __legendDynamicOptions[\"nearside\"] = isEnabled;\n  setLegendOptions(__legendHandle, __legendDynamicOptions);\n}\nfunction toggleHideIfTooLargeButtonUI(isEnabled) {\n  __legendDynamicOptions[\"hideiftoolarge\"] = isEnabled;\n  setLegendOptions(__legendHandle, __legendDynamicOptions);\n}\nexport { createScene, toggleHideIfTooLargeButtonUI, toggleNearSideButtonUI, toggleSizeInDeviceButtonUI, updateTextScale };\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#/Carnac3D/AdditionalFunctionality/Legend3D/legend3d?section=legend3dGrid&extract=true","width":"100%","height":"928.796875px","style":{"border":"none"}},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"add-a-legend-on-a-projection-widget","__idx":2},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/Carnac3D/AdditionalFunctionality/Legend3D/legend3d#legend3dProjection"},"children":["#"]}," Add a legend on a Projection Widget"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["In this example you can see how to add the legend to a 3D ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Projection Widget"]},"."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["With the interface below, you can dynamically change some of the legend options.",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"For more options, please refer to the ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/doc/classes/geotoolkit3d.scene.grid.legend.gridlegend.gridlegend.html"},"children":["GridLegend"]}," documentation."]},{"$$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 { DefaultColorProvider } from \"@int/geotoolkit/util/DefaultColorProvider.ts\";\nimport { Plot } from \"@int/geotoolkit3d/Plot.ts\";\nimport { Vector2, Vector3 } from \"/node_modules/.vite/deps/three.js?v=2235af65\";\nimport { GridLegend } from \"@int/geotoolkit3d/scene/grid/legend/GridLegend.ts\";\nimport { AlignmentStyle, TextStyle } from \"@int/geotoolkit/attributes/TextStyle.ts\";\nimport { ProjectionWidget } from \"@int/geotoolkit3d/widgets/ProjectionWidget.ts\";\nimport { Pipe } from \"@int/geotoolkit3d/scene/well/Pipe.ts\";\nimport { Wells } from \"/src/code/Carnac3D/helpers/wells.ts\";\nconst X_SCALE = 1;\nconst Y_SCALE = 1;\nconst Z_SCALE = 2;\nconst CAMERA_DISTANCE = -4500;\nconst DEFAULT_COLORPROVIDER = new DefaultColorProvider({\n  \"values\": [0, 1, 2],\n  \"colors\": [\"green\", \"yellow\", \"red\"]\n});\nconst __legendDynamicOptions = {\n  \"sizeindevice\": true,\n  \"nearside\": false,\n  \"hideiftoolarge\": true,\n  \"textscale\": 1\n};\nlet legend;\nfunction createScene(divElement) {\n  const plot = createPlot(divElement);\n  const pipe = createPipe();\n  plot.getRoot().add(pipe);\n  const projectionWidget = new ProjectionWidget();\n  projectionWidget.addMesh(pipe);\n  plot.getRoot().add(projectionWidget);\n  legend = createLegend();\n  projectionWidget.addLegend(legend);\n  return plot;\n}\nfunction createLegend() {\n  const legendStyle = new TextStyle({\n    \"font\": \"13px Arial\",\n    \"color\": \"white\",\n    \"alignment\": AlignmentStyle.Left\n  });\n  const titleStyle = new TextStyle({\n    \"font\": \"20px Arial\",\n    \"color\": \"white\",\n    \"alignment\": AlignmentStyle.Center\n  }).setFontWeight(\"bold\");\n  const blackOutline = {\n    \"enable\": true,\n    \"innercolor\": \"white\",\n    \"outlinecolor\": \"black\",\n    \"thickness\": 3\n  };\n  const gridTextOpts = {\n    \"planes\": {\n      \"right\": {\n        \"text\": \"SAMPLE LEGEND\\n\\nItem 1 - Item description\\nItem 2 - Item description\\nItem 3 - Item description\\nItem 4 - Item description\\n\",\n        \"style\": legendStyle,\n        \"outline\": blackOutline,\n        \"textoffset\": new Vector2(0.5, 0.66)\n      },\n      \"back\": {\n        \"text\": \"SAMPLE TITLE\",\n        \"style\": titleStyle,\n        \"outline\": blackOutline,\n        \"textoffset\": new Vector2(0.5, 0.875)\n      },\n      \"front\": { \"text\": \"Sample text\", \"style\": titleStyle, \"outline\": blackOutline },\n      \"left\": { \"text\": \"Sample text\", \"style\": titleStyle, \"outline\": blackOutline }\n    }\n  };\n  return new GridLegend(gridTextOpts);\n}\nfunction createPipe() {\n  const data = Wells.getWell_pipe();\n  const pipe = new Pipe({\n    data,\n    tubeprecision: 8,\n    colorprovider: DEFAULT_COLORPROVIDER\n  });\n  pipe.position.set(456396.784, 678286319e-2, 0);\n  return pipe;\n}\nfunction createPlot(divElement) {\n  const center = new Vector3(457101.805, 6782420821e-3, -1466.69);\n  return new Plot({\n    \"container\": divElement,\n    \"camera\": {\n      \"position\": center.clone().add(new Vector3(CAMERA_DISTANCE, CAMERA_DISTANCE, 1e3)),\n      \"lookat\": center.clone().add(new Vector3(0, 0, 180))\n    },\n    \"scale\": new Vector3(X_SCALE, Y_SCALE, Z_SCALE)\n  });\n}\nfunction setLegendOptions(legend2, options) {\n  legend2.setOptions({\n    \"planes\": {\n      \"front\": options,\n      \"left\": options,\n      \"back\": options,\n      \"right\": options\n    }\n  });\n}\nfunction toggleSizeInDeviceButtonUI(isEnabled) {\n  __legendDynamicOptions[\"sizeindevice\"] = isEnabled;\n  setLegendOptions(legend, __legendDynamicOptions);\n}\nfunction updateTextScale(value) {\n  __legendDynamicOptions[\"textscale\"] = value;\n  setLegendOptions(legend, __legendDynamicOptions);\n}\nfunction toggleNearSideButtonUI(isEnabled) {\n  __legendDynamicOptions[\"nearside\"] = isEnabled;\n  setLegendOptions(legend, __legendDynamicOptions);\n}\nfunction toggleHideIfTooLargeButtonUI(isEnabled) {\n  __legendDynamicOptions[\"hideiftoolarge\"] = isEnabled;\n  setLegendOptions(legend, __legendDynamicOptions);\n}\nexport { createScene, toggleHideIfTooLargeButtonUI, toggleNearSideButtonUI, toggleSizeInDeviceButtonUI, updateTextScale };\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#/Carnac3D/AdditionalFunctionality/Legend3D/legend3d?section=legend3dProjection&extract=true","width":"100%","height":"928.796875px","style":{"border":"none"}},"children":[]}]},"headings":[{"value":"Legend/Text on Grid planes","id":"legendtext-on-grid-planes","depth":1},{"value":"Add a legend on a 3D Grid","id":"add-a-legend-on-a-3d-grid","depth":3},{"value":"Add a legend on a Projection Widget","id":"add-a-legend-on-a-projection-widget","depth":3}],"frontmatter":{"title":"Legend/Text on Grid planes","seo":{"title":"Legend/Text on Grid planes"}},"lastModified":"2026-02-11T19:54:32.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/solutions/geotoolkit/tutorials/carnac-3-d/additional-functionality/legend-3-d","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}