Plugins can get the image of the canvas with this CaptureScreen API. The CaptureScreen API is a powerful tool that can be used by plugins to get the image of the canvas. This can be used to create screenshots or to generate images that can be used in other contexts.

❗Note The output image comes from the canvas so anything implemented out of canvas (eg. infobox) can not be included.

Here is an example of how to use the CaptureScreen API

Note that: This code enables you to capture the current view of the map and download it as an image when you click on the "Capture" button.

reearth.ui.show(`
  <style>
    html,body {
      margin: 0;
      width: 350px;
    }
    button {
      margin: 0;
    }
    #wrapper {
      height: 100%;
      box-sizing: border-box;
      border-radius:12px;
      padding: 12px;
      background: white;
    }
  </style>

  <div id="wrapper">
    <button id="button">Capture</button>
    <p>Click this button will capture the map</p>
  </div>

  <script>
    document.getElementById("button").addEventListener("click", (e) => {
      parent.postMessage({ type: "captureScreen" }, "*");
    });
    addEventListener("message", e => {
      if (e.source !== parent) return;
      if (e.data.type && e.data.type === 'getCaptureScreen') {
        const fileName = "capture.png";
        const link = document.createElement("a");
        link.download = fileName;
        link.href = e.data.payload;
        link.click();
        link.remove();
      }
    })
  </script>
`);

reearth.on("message", msg => {
  if (msg.type === "captureScreen") {
    reearth.ui.postMessage({
      type: "getCaptureScreen",
      payload: reearth.scene.captureScreen(),
    });
  }
});

Code Break Down

1. It defines a UI interface that includes a button labeled "Capture" and a message indicating that clicking this button will capture the map.
2. When the "Capture" button is clicked (document.getElementById("button").addEventListener("click", ...)), it sends a message to the parent window (potentially the hosting environment of your Re-Earth application) with the type "capture screen".
3. It listens for messages (addEventListener("message", ...) and checks if the source of the message is the parent window (if (e.source !== parent)). If it receives a message of type "getCaptureScreen", it creates a download link for the captured screen image and triggers a download with the filename "capture.png". The link element is then removed.
4. Finally, it listens for messages from Re-Earth (reearth.on("message", ...) and if it receives a message of type "captureScreen", it responds by sending a message to the UI interface requesting the capture of the screen using reearth.scene.captureScreen().

How to support print with CaptureScreen API

By using capture Screen API, we can also support the print feature.

reearth.ui.show(`
  <style>
    html,body {
      margin: 0;
      width: 350px;
    }
    button {
      margin: 0;
    }
    #wrapper {
      height: 100%;
      box-sizing: border-box;
      border-radius:12px;
      padding: 12px;
      background: white;
    }
  </style>

  <div id="wrapper">
    <button id="button">Print this map</button>
    <p>Click this button we can print!</p>
  </div>

  <script>
    document.getElementById("button").addEventListener("click", (e) => {
      parent.postMessage({ type: "captureScreen" }, "*");
    });
    
    addEventListener("message", e => {
      if (e.source !== parent) return;
      if (e.data.type && e.data.type === 'getCaptureScreen') {
        const iframe = document.createElement("iframe");
        iframe.style.cssText = "display:none";
        iframe.onload = function(){
          const img = iframe.contentWindow.document.createElement("img");
          img.style.cssText = "width: 100%";
          img.src = e.data.payload;
          img.onload = function(){
            iframe.contentWindow.print();
            document.body.removeChild(iframe);
          }
          iframe.contentWindow.document.body.appendChild(img);
        }
        document.body.appendChild(iframe);
      }
    })
  </script>
`);

reearth.on("message", msg => {
  if (msg.type === "captureScreen") {
    reearth.ui.postMessage({
      type: "getCaptureScreen",
      payload: reearth.scene.captureScreen(),
    });
  }
});

This code implements a "Print this map" feature using Re-Earth's captureScreen API. It allows you to click a button to capture the current map view and then print it. Here's a breakdown of the code:

1. User Interface (UI):
   • Generates a simple UI with a "Print this map" button inside a container.
2. Button Click Event:
   • When the "Print this map" button is clicked:
     • Sends a message to the parent window (likely Re-Earth) with the type "capture Screen" to trigger map capture.
3. Message Event Listener:
   • Listens for messages from the parent window.
   • When a message with the type "getCaptureScreen" is received:
     • Creates an invisible iframe element in the document.
4. iframe Load Event:
   • When the iframe's content loads:
     • Creates an image (img) element within the iframe.
     • Sets the image source to display the captured map image received in the message.
     • Adds an onload event handler to ensure the image is fully loaded.
5. Printing:
   • After the image is loaded, initiates printing of the iframe's content.
   • Removes the iframe from the document after printing is complete.