Knowledge Base
Recent Changes

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

— dev:viewer:sdk:examples_js:gisconsult_example1 [2024/03/08 13:21] (current)
pieter created
Line 1: Line 1:
 +====== Example: Adding overlay objects ======
  
 +This example demonstrates adding ''Overlay Objects'' to the viewer.
 +
 +The viewer version is 23.10.0.
 +
 +<html>
 +<script>
 +    let exampleUrl = "https://cdn.3dmapping.cloud/examples_stable/example40.html";
 +</script>
 +
 +<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.2.1/styles/default.min.css"
 +    integrity="sha512-kZqGbhf9JTB4bVJ0G8HCkqmaPcRgo88F0dneK30yku5Y/dep7CZfCnNml2Je/sY4lBoqoksXz4PtVXS4GHSUzQ=="
 +    crossorigin="anonymous" />
 +
 +<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.2.1/highlight.min.js"
 +    integrity="sha512-Ypjm0o7jOxAd4hpdoppSEN0TQOC19UtPAqD+4s5AlXmUvbmmS/YMxYqAqarQYyxTnB6/rqip9qcxlNB/3U9Wdg=="
 +    crossorigin="anonymous"></script>
 +
 +<span id="example"></span>
 +<br />
 +<br />
 +<input type="button" value="Show Source" onclick="toggleShowSource()"></input>
 +<span id="showsource"></span>
 +
 +<script>
 +
 +    let toggleShowSource = () => {
 +        let element = document.getElementById("showsource");
 +        element.style.display = element.style.display == 'none' ? 'block' : 'none';
 +    }
 +
 +    fetch(exampleUrl)
 +        .then(response => response.text())
 +        .then(text => {
 +
 +            try {
 +                // add example in iframe
 +                let frame = document.createElement("iframe");
 +                frame.style.border = 'none';
 +                frame.style.overflow = 'auto';
 +                frame.width = 950;
 +                frame.height = 420;
 +                frame.srcdoc = text;
 +                document.getElementById("example").appendChild(frame);
 +
 +                // add 'showsource' section
 +                let pre = document.createElement("pre");
 +                pre.classList.add("code");
 +                pre.classList.add("html4strict");
 +                pre.textContent = text;
 +                document.getElementById("showsource").style.display = 'none';
 +                document.getElementById("showsource").style.fontSize = '12px';
 +                document.getElementById("showsource").appendChild(pre);
 +
 +                // highlight
 +                hljs.highlightBlock(pre);
 +
 +            } catch (error) { console.error(error); }
 +
 +        });
 +
 +</script>
 +
 +</html>
 
Last modified:: 2024/03/08 13:21