Widget Size Specification in Re-Earth Plugins

When developing plugins for Re-Earth, it's essential to specify the size of your plugin's widget, which is the user interface component that appears within the Re-Earth application. Properly sizing your widget ensures that it integrates seamlessly with the rest of the application and provides a consistent user experience.

The two methods to specify the widget size are as follows:

1. Using CSS

In this method, developers can use CSS to style your widget's dimensions and appearance. They can set the width, height, and background color of the widget using CSS rules. The example provided uses the reearth.ui.show() function to insert the CSS, HTML content, and JavaScript code directly into the Re-Earth application. By adjusting the values in the CSS, they can customize the widget's width, height, and appearance.

The following code demonstrates how to do this:

javascriptCopy code
reearth.ui.show(`
  <style>
    html,body {
      margin: 0;
      width: 400px; /* Change here for your specific plugin's width */
      height: 200px; /* Change here for your specific plugin's height */
      background: white; /* Change here for your specific plugin's background */
    }
    #wrapper {
      height: 100%; /* This is useful if your contents naturally don't fill up the whole height */
    }
  </style>

  <div id="wrapper">
    <!-- contents of plugin go here -->
  </div>

  <script>
    // Any JavaScript goes here, including any communication needed to be sent to the Re-Earth API
  </script>
`);

2. Control Iframe’s Size

This method involves controlling the size of the widget using the width and height options provided within the reearth.ui.show() function. Instead of directly specifying the dimensions in the CSS, you pass the width and height values as options to the function. This method provides more control over the widget's size programmatically.

The code example below demonstrates this approach:

javascriptCopy code
reearth.ui.show(`
  <style>
    html,body {
      margin: 0;
      width: 100%;
      height: 100%;
      background: white; /* Change here for your specific plugin's background */
    }
    #wrapper {
      height: 100%; /* This is useful if your contents naturally don't fill up the whole height */
    }
  </style>

  <div id="wrapper">
    <!-- contents of plugin go here -->
  </div>

  <script>
    // Any JavaScript goes here, including any communication needed to be sent to the Re-Earth API
  </script>
`,
{ width: 400, height: 200 });
// You can set width/height by number or string (e.g., "400px")

Resize Widget Size

Basic Resize: HTML

This example showcases how to perform basic resizing using HTML classes:

javascriptCopy code
reearth.ui.show(`
  <style>
    html, body {
      margin: 0;
      width: 300px; /* Change here for your specific plugin's height */
      height: 300px; /* Change here for your specific plugin's width */
      background: white; /* Change here for your specific plugin's background */
    }
    .extendedh { width: 500px; }
    .extendedv { height: 400px; }
    #wrapper { box-sizing: border-box; }
    .extendedh body, .extendedh #wrapper { width: 100%; }
    .extendedv body, .extendedv #wrapper { height: 100%; }
  </style>

  <div id="wrapper">
    <div style="padding: 10px;">
      <button id="resize">Resize</button>
    </div>
  </div>

  <script>
    let expanded = false;
    document.getElementById("resize").addEventListener("click", (e) => {
      if (!expanded){
        document.documentElement.classList.add("extendedh", "extendedv");
      } else {
        document.documentElement.classList.remove("extendedh", "extendedv");
      }
      expanded = !expanded;
    });
  </script>
`);

Basic Resize: IFrame

Here's how to perform basic resizing using an IFrame approach:

javascriptCopy code
reearth.ui.show(`
  <style>
    html,body {
      margin: 0;
      width: 100%;
      height: 100%;
      background: white; /* Change here for your specific plugin's background */
    }
    #wrapper {
      height: 100%; /* This is useful if your contents naturally don't fill up the whole height */
    }
  </style>

  <div id="wrapper">
    <div style="padding: 10px;">
      <button id="resize">Resize</button>
    </div>
  </div>

  <script>
    let expanded = false;
    document.getElementById("resize").addEventListener("click", (e) => {
      expanded = !expanded
      parent.postMessage({ type: "resize", expanded }, "*");
    });
  </script>
`,
{ width: 200, height: 100 });

reearth.on("message", msg => {
  if (msg.type === "resize") {
    reearth.ui.resize?.(msg.expanded ? 400 : 200, msg.expanded ? 200 : 100, msg.expanded ? undefined : true);
  }
});

These examples provide detailed code and explanations for specifying and resizing widget sizes within Re-Earth plugins. Developers can tailor these techniques to their specific needs, ensuring that their plugins offer an optimal user experience within the Re-Earth platform.