Showing Normal HTML: This code snippet demonstrates how to create a simple user interface using HTML and CSS within a Re-Earth plugin. The interface displays the title "Welcome to Re-Earth" and the Re-Earth logo. The HTML structure is enclosed within a div element with the wrapper id, which provides a container for styling. CSS is used to style the layout, making the UI look clean and centered. The logo is displayed using an img element with the logo class, and its source points to the Re-Earth logo image.

javascriptCopy code
const html = `
<style>
  /* CSS styles to control the appearance of the UI */
  /* ... */
</style>

<div id="wrapper">
  <div class="titleWrapper">
    <h1>Welcome to Re:Earth</h1>
  </div>
  <div class="imageWrapper">
    <img class="logo" src="<https://reearth.io/img/logo.svg>" alt="reearth-logo" width="80px">
  </div>
</div>
`;

// Display the HTML UI with a specified width and height
reearth.ui.show(html, { width: 400, height: 200 });

Practical example:

const html = `
<style>
  html, body {
    margin: 0;
    width: 100%;
    height: 100%;
  }
  h1 {
    margin: 0;
  }
  #wrapper {
    height: 100%;
    border-radius: 12px;
    background: white;
  }
  .titleWrapper {
    padding: 12px;
    text-align: center;
  }
  .imageWrapper {
    padding: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>

<div id="wrapper">
  <div class="titleWrapper">
    <h1>Welcome to Re:Earth</h1>
  </div>
  <div class="imageWrapper">
    <img class="logo" src="<https://reearth.io/img/logo.svg>" alt="reearth-logo" width="80px">
  </div>
</div>
`;

// Show UI and handle close event
const showUI = (html, options) => {
  const ui = reearth.ui.show(html, options);

  ui.on('close', () => {
    console.log('The UI has been closed');
  });

  return ui;
};

// Display UI with specified options
const ui = showUI(html, {
  width: 400,
  height: 200,
  title: 'My Re:Earth UI',
});

console.log('The UI has been shown');

Displaying Leaflet Map

Showing Leaflet Map: This code snippet demonstrates how to embed a Leaflet map into a Re:Earth plugin's user interface. The provided HTML contains the necessary CSS and JavaScript links for Leaflet. The map is displayed within a div element with the map id. JavaScript initializes the Leaflet map, sets its view to a specific location, and adds an OpenStreetMap tile layer to the map.

javascriptCopy code
const html = `
<link rel="stylesheet" href="<https://unpkg.com/[email protected]/dist/leaflet.css>" />
<script src="<https://unpkg.com/[email protected]/dist/leaflet.js>"></script>
<style>
  /* CSS styles for the UI */
  /* ... */
</style>

<div id="wrapper">
  <div id="map"></div>
</div>

<script>
  // Initialize Leaflet map and add OpenStreetMap tile layer
  const map = L.map("map").setView([35.68, 139.78], 10);
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="<https://www.openstreetmap.org/copyright>">OpenStreetMap</a> contributors'
  }).addTo(map);
</script>
`;

// Display the HTML UI with the embedded Leaflet map
reearth.ui.show(html);

Practical Example:

const html = `
<link rel="stylesheet" href="<https://unpkg.com/[email protected]/dist/leaflet.css>" />
<script src="<https://unpkg.com/[email protected]/dist/leaflet.js>"></script>
<style>
  html,body {
    margin: 0;
    width: 400px;
    height: 200px;
    background: white;
  }
  #wrapper {
    height: 100%;
  }
  #map {
    height: 100%;
    width: 100%;
  }
</style>

<div id="wrapper">
  <div id="map"></div>
</div>

<script>
  const map = L.map("map").setView([35.68, 139.78], 10);
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="<https://www.openstreetmap.org/copyright>">OpenStreetMap</a> contributors'
  }).addTo(map);
</script>
`;

reearth.ui.show(html);

3. Using HTML Without Showing: In some cases, you might want to utilize HTML for communication or other background tasks without actually displaying it to the user. By setting the visible property to false, you can make the HTML content invisible while still allowing it to perform tasks or interact with the server.

javascriptCopy code
// Display the HTML UI without making it visible
reearth.ui.show(html, { visible: false });

In this scenario, the HTML content will be present in the background and can be used for various purposes such as communicating with APIs, processing data, or managing plugin behavior without any visible impact on the user interface.