{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-guides/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["tabs","tab"]},"type":"markdown"},"seo":{"title":"Map in 3D","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":"map-in-3d","__idx":0},"children":["Map in 3D"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This tutorial shows how to use and modify a 2D ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/doc/classes/geotoolkit3d.scene.map.tiledmap.tiledmap.html"},"children":["TiledMap"]}," plane in a 3D Plot."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["A Map plane is a 2D surface that displays images from a ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"https://en.wikipedia.org/wiki/Web_Map_Tile_Service"},"children":["WMTS"]}," service.",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"Depending on the distance between the camera and the surface, the Map will load high/low resolution tiles.",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"Note that because of the possible inclination angle between the camera and the surface, not all tiles will be at the same resolution.",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"This shape is in the coordinate system of EPSG:3857."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"world-map","__idx":1},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/Carnac3D/AdditionalFunctionality/MapIn3D/mapIn3D#worldMap"},"children":["#"]}," World Map"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This tutorial demonstrates how to display a world map in 3D."]},{"$$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/geotoolkit3d/Plot.ts\";\nimport { Box2, Vector2, Vector3 } from \"/node_modules/.vite/deps/three.js?v=2235af65\";\nimport { CompassAxis } from \"@int/geotoolkit3d/scene/compass/CompassAxis.ts\";\nimport { TiledMap } from \"@int/geotoolkit3d/scene/map/TiledMap.ts\";\nfunction createPlot(mapextent, divElement, distance) {\n  const center = new Vector2();\n  mapextent.getCenter(center);\n  const plot = new Plot({\n    \"container\": divElement,\n    \"camera\": {\n      \"position\": new Vector3(center.x, center.y, distance),\n      \"lookat\": new Vector3(center.x, center.y, 0),\n      \"minnear\": 10\n    }\n  });\n  plot.getCompass().setCompassObject(new CompassAxis());\n  return plot;\n}\nfunction createScene(divElement) {\n  const fullExtent = new Box2(new Vector2(-200375083428e-4, -200375083428e-4), new Vector2(200375083428e-4, 200375083428e-4));\n  const plot = createPlot(fullExtent, divElement, 5e7);\n  plot.getRoot().add(new TiledMap({\n    \"server\": [\"https://demo.int.com/osm_tiles/\"],\n    \"formatterfunction\": function(z, x, y) {\n      return z + \"/\" + y + \"/\" + x + \".png\";\n    }\n  }));\n  return plot;\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#/Carnac3D/AdditionalFunctionality/MapIn3D/mapIn3D?section=worldMap&extract=true","width":"100%","height":"717.5px","style":{"border":"none"}},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"map-options","__idx":2},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/Carnac3D/AdditionalFunctionality/MapIn3D/mapIn3D#mapOptions"},"children":["#"]}," Map Options"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This tutorial demonstrates how to reduce the extent of the map plane.",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"It also shows how to add additional models and objects to the map.",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"For example, this map contains several underground wells (in blue) with tops (red).",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"Rotate the camera to look under the map to find the wells."]},{"$$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/geotoolkit3d/Plot.ts\";\nimport { Box2, Vector2, Vector3 } from \"/node_modules/.vite/deps/three.js?v=2235af65\";\nimport { CompassAxis } from \"@int/geotoolkit3d/scene/compass/CompassAxis.ts\";\nimport { TiledMap } from \"@int/geotoolkit3d/scene/map/TiledMap.ts\";\nimport { PointSet } from \"@int/geotoolkit3d/scene/pointset/PointSet.ts\";\nimport { TrajectoryLine } from \"@int/geotoolkit3d/scene/well/TrajectoryLine.ts\";\nimport { Wells } from \"/src/code/Carnac3D/helpers/wells.ts\";\nfunction createPlot(mapextent, divElement, distance) {\n  const center = new Vector2();\n  mapextent.getCenter(center);\n  const plot = new Plot({\n    \"container\": divElement,\n    \"camera\": {\n      \"position\": new Vector3(center.x, center.y, distance),\n      \"lookat\": new Vector3(center.x, center.y, 0),\n      \"minnear\": 10\n    }\n  });\n  plot.getCompass().setCompassObject(new CompassAxis());\n  return plot;\n}\nfunction createScene(divElement) {\n  const mapsize = 5e4;\n  const newExtent = new Box2(\n    new Vector2(-10970653039878588e-9 - mapsize, 4630768545770666e-9 - mapsize),\n    new Vector2(-10970653039878588e-9 + mapsize, 4630768545770666e-9 + mapsize)\n  );\n  const plot = createPlot(newExtent, divElement, 15e4);\n  const root = plot.getRoot();\n  plot.setOptions({\n    \"scale\": new Vector3(1, 1, 5)\n  });\n  root.add(new TiledMap({\n    \"server\": [\"https://demo.int.com/osm_tiles/\"],\n    \"formatterfunction\": function(z, x, y) {\n      return z + \"/\" + y + \"/\" + x + \".png\";\n    },\n    \"extent\": newExtent,\n    \"maplimits\": newExtent,\n    \"maxlod\": 16\n  }));\n  createWells(root);\n  return plot;\n}\nfunction createWells(root) {\n  const reference = new Vector3(-10970653039878588e-9, 4630768545770666e-9, 0);\n  const axis = new Vector3(0, 0, 1);\n  const wellheads = {\n    x: [],\n    y: [],\n    z: []\n  };\n  const well3410A44 = Wells.getWell_34_10_A_44();\n  let i = 0;\n  const xMap = function(e) {\n    return e * (1 + i / 20);\n  };\n  const yMap = function(e) {\n    return e * (1 + i / 22);\n  };\n  const zMap = function(e, j) {\n    return Math.min(e - Math.cos(i) * 400, 0);\n  };\n  for (; i < 50; i++) {\n    const trajectoryPath = new TrajectoryLine({\n      data: [{\n        x: well3410A44.xDeviation.map(xMap),\n        y: well3410A44.yDeviation.map(yMap),\n        z: well3410A44.elevation.map(zMap)\n      }],\n      color: \"blue\"\n    });\n    trajectoryPath.rotateOnAxis(axis, i * 10 * Math.PI / 3);\n    trajectoryPath.position.copy(reference);\n    const xLocation = Math.cos(i * 20) * 25e3;\n    const yLocation = Math.sin(i * 3) * 35500;\n    trajectoryPath.position.x += xLocation;\n    trajectoryPath.position.y += yLocation;\n    wellheads.x.push(xLocation);\n    wellheads.y.push(yLocation);\n    wellheads.z.push(0);\n    root.add(trajectoryPath);\n  }\n  const pointSet = new PointSet({\n    \"data\": wellheads,\n    \"symbolsizeisindevice\": true,\n    \"symbolminsize\": 3,\n    \"symbolmaxsize\": 3,\n    \"colorprovider\": \"red\"\n  });\n  pointSet.position.copy(reference);\n  root.add(pointSet);\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#/Carnac3D/AdditionalFunctionality/MapIn3D/mapIn3D?section=mapOptions&extract=true","width":"100%","height":"717.5px","style":{"border":"none"}},"children":[]}]},"headings":[{"value":"Map in 3D","id":"map-in-3d","depth":1},{"value":"World Map","id":"world-map","depth":3},{"value":"Map Options","id":"map-options","depth":3}],"frontmatter":{"title":"Map in 3D","seo":{"title":"Map in 3D"}},"lastModified":"2026-02-11T19:54:32.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/solutions/geotoolkit/tutorials/carnac-3-d/additional-functionality/map-in-3-d","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}