{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-guides/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":[]},"type":"markdown"},"seo":{"title":"Elements catalog","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":"elements-catalog","__idx":0},"children":["Elements catalog"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This Elements Catalog tutorial displays all the schematic graphical elements conveniently grouped into their functional categories."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The elements' representations could be of two types: pure JavaScript and SVG-files. (INT's collection of schematics SVG-elements is located at ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["GeoToolkit_root/es6/resources/svg"]},")."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Both representations have their pros and cons: JavaScript-based are performance wise while SVG-based could be visually challenging. First type does not require special protocol for loading elements of its type while second one does."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["SVG-files shown in the tutorial are included in the toolkit but not configured by default. Refer to ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/Schematics/SVGComponents/svgComponents"},"children":["SVG Components"]}," tutorial for code examples how to load SVG-files for schematics components visualization."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Users can combine the representations in their application, replace and/or extend existing elements."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Refer to ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/Schematics/SVGComponents/svgComponents"},"children":["SVG Components"]}," tutorial for code examples how to load elements of a type and how to replace some representation with another one."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Following group of tutorials cover examples of custom JavaScript elements implementations:",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/Schematics/CustomComponentNode/customComponentNode"},"children":["Custom Component Node"]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/Schematics/CustomRegularComponentNode/customRegularComponentNode"},"children":["Custom Regular Component Node"]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/Schematics/CustomFlippedComponentNode/customFlippedComponentNode"},"children":["Custom Flipped Component Node"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["SVG-files"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["JavaScript"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"well-completion","__idx":1},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/Schematics/ElementsCatalog/elementsCatalog#wellCompletion"},"children":["#"]}," Well Completion"]},{"$$mdtype":"Tag","name":"iframe","attributes":{"src":"https://dc2-documentation.s3.amazonaws.com/documentation/slb-docs-test/5.0/examples/vue/tutorials/index.html#/Schematics/ElementsCatalog/elementsCatalog?section=wellCompletion&extract=true","width":"100%","height":"2886.5px","style":{"border":"none"}},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"well-architecture","__idx":2},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/Schematics/ElementsCatalog/elementsCatalog#wellArchitecture"},"children":["#"]}," Well Architecture"]},{"$$mdtype":"Tag","name":"iframe","attributes":{"src":"https://dc2-documentation.s3.amazonaws.com/documentation/slb-docs-test/5.0/examples/vue/tutorials/index.html#/Schematics/ElementsCatalog/elementsCatalog?section=wellArchitecture&extract=true","width":"100%","height":"606.5px","style":{"border":"none"}},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"drilling","__idx":3},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/Schematics/ElementsCatalog/elementsCatalog#drilling"},"children":["#"]}," Drilling"]},{"$$mdtype":"Tag","name":"iframe","attributes":{"src":"https://dc2-documentation.s3.amazonaws.com/documentation/slb-docs-test/5.0/examples/vue/tutorials/index.html#/Schematics/ElementsCatalog/elementsCatalog?section=drilling&extract=true","width":"100%","height":"1206.5px","style":{"border":"none"}},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"surface-equipment","__idx":4},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/Schematics/ElementsCatalog/elementsCatalog#surfaceEquipment"},"children":["#"]}," Surface Equipment"]},{"$$mdtype":"Tag","name":"iframe","attributes":{"src":"https://dc2-documentation.s3.amazonaws.com/documentation/slb-docs-test/5.0/examples/vue/tutorials/index.html#/Schematics/ElementsCatalog/elementsCatalog?section=surfaceEquipment&extract=true","width":"100%","height":"606.5px","style":{"border":"none"}},"children":[]}]},"headings":[{"value":"Elements catalog","id":"elements-catalog","depth":1},{"value":"Well Completion","id":"well-completion","depth":3},{"value":"Well Architecture","id":"well-architecture","depth":3},{"value":"Drilling","id":"drilling","depth":3},{"value":"Surface Equipment","id":"surface-equipment","depth":3}],"frontmatter":{"title":"Elements catalog","seo":{"title":"Elements catalog"}},"lastModified":"2026-02-11T19:54:32.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/solutions/geotoolkit/tutorials/schematics/elements-catalog","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}