This Code demonstrates how to find a specific layer in a Re-Earth project and temporarily update one of its properties.

const markerThatTitleIsReearth = reearth.layers.find(
    layer => layer.type === "marker" && layer.title === "Re:Earth"
);

if (markerThatTitleIsReearth) {
    // temporally update marker location
    reearth.layers.overrideProperty(markerThatTitleIsReearth.id, {
        default: {
            location: { lat: 100, lng: 0, height: 0 }
    }
    });
}

Using this code users can programmatically manipulate the properties of specific layers in the Re-Earth application.

Breakdown of the provided code:

1. Finding a Layer:
   • reearth.layers.find(...) is used to search for a specific layer within the Re-Earth project.
   • The layer parameter within the find function represents each layer in the project one by one.
   • layer.type === "marker" && layer.title === "Re:Earth" is a condition that filters layers based on their type and title. In this case, it looks for a layer with the type "marker" and the title "Re:Earth."
2. Checking if the Layer is Found:
   • if (markerThatTitleIsReearth) checks whether the markerThatTitleIsReearth variable contains a layer. If a layer with the specified type and title is found, it will be stored in this variable.
3. Updating the Layer's Property:
   • If the layer is found (markerThatTitleIsReearth is truthy), the code proceeds to update the layer's property temporarily. In this example, the property being updated is the "location" property of the marker.
4. Temporary Update:
   • The reearth.layers.overrideProperty() function is used to temporarily modify the properties of the found layer.
   • It takes two arguments:
     • The first argument is the ID of the layer (markerThatTitleIsReearth.id), which specifies the layer to be updated.
     • The second argument is an object that defines the new property values. In this case, the "location" property is set to { lat: 100, lng: 0, height: 0 }.
5. Persistence of Changes:
   • It's important to note that the changes made using reearth.layers.overrideProperty are temporary and will not be persisted. If you close or reload the page, these changes will be undone, and the layer will revert to its original state.
6. Property Object Details:
   • The code mentions that the details of the property object are not documented yet. However, you can inspect the current layer's properties by running reearth.layers.layers in the developer tools console. This will allow you to see the structure of the layer's properties and determine which properties can be overridden.

Overall, this code snippet demonstrates a way to interact with and modify specific layers within a Re-Earth project dynamically. It provides a means to update a layer's properties temporarily based on certain conditions or user interactions.

Note that:

The result of reearth.layers.overrideProperty will not be saved permanently. This means that if you close or reload the page, the changes will be undone, and the properties of the layer will revert to the original values.

The details of the property object are not yet documented. To find out what properties can be overridden, you can inspect the current layer object by running reearth.layers.layers in the console of the developer tools. This will provide you with an object representing the current state of the layer, and you can explore its properties to determine which ones can be overridden.

const html = `
  <style>
    html, body {
      margin: 0;
      width: 350px;
      background: white;
    }
    #wrapper {
      height: 100%;
      padding: 12px;
      box-sizing: border-box;
    }
    input {
      width: 60px;
    }
  </style>

  <div id="wrapper">
    <p>Longitude: <input type="number" id="lng" value="139.78" />°</p>
    <p>Latitude: <input type="number" id="lat" value="35.68" />°</p>
    <p>Height: <input type="number" id="height" value="10000" /> m</p>
    <p>Heading: <input type="number" id="heading" value="0" step="0.1" /></p>
    <p>Pitch: <input type="number" id="pitch" value="-1.5" step="0.1" /></p>
    <p>Roll (for fly to): <input type="number" id="roll" value="0" step="0.1" /></p>
    <p>Range (for look at): <input type="number" id="range" value="10000" /> m</p>
    <p>Duration: <input type="number" id="duration" value="2" /> s</p>
    <p>
      <button id="fly">Fly to</button>
      <button id="look">Look at</button>
    </p>
  </div>

  <script>
    // Function to get input values
    const getValues = () => ({
      lng: parseFloat(document.getElementById("lng").value || 0),
      lat: parseFloat(document.getElementById("lat").value || 0),
      height: parseFloat(document.getElementById("height").value || 0),
      heading: parseFloat(document.getElementById("heading").value || 0),
      pitch: parseFloat(document.getElementById("pitch").value || 0),
      roll: parseFloat(document.getElementById("roll").value || 0),
      range: parseFloat(document.getElementById("range").value || 0),
      duration: parseFloat(document.getElementById("duration").value || 0),
    });

    // Event listener for "Fly to" button
    document.getElementById("fly").addEventListener("click", () => {
      parent.postMessage({ fly: getValues() }, "*");
    });

    // Event listener for "Look at" button
    document.getElementById("look").addEventListener("click", () => {
      parent.postMessage({ look: getValues() }, "*");
    });

    // Listen for messages from Re:Earth
    reearth.on("message", msg => {
      if (msg.fly) {
        // Perform camera flyTo
        reearth.camera.flyTo(
          {
            lat: msg.fly.lat,      
            lng: msg.fly.lng,      
            height: msg.fly.height,  
            heading: msg.fly.heading,
            pitch: msg.fly.pitch,    
            roll: msg.fly.roll,      
          },
          {
            duration: msg.fly.duration, 
          }
        );
      } else if (msg.look) {
        // Perform camera lookAt
        reearth.camera.lookAt(
          {
            lat: msg.look.lat,        
            lng: msg.look.lng,        
            height: msg.look.height,  
            heading: msg.look.heading,
            pitch: msg.look.pitch,    
            range: msg.look.range,    
          },
          {
            duration: msg.look.duration,
          }
        );
      }
    });
  </script>
`;

// Display the UI
reearth.ui.show(html);

The breakdown of the provided code

• The code creates a UI with input fields for setting camera parameters such as Longitude, Latitude, Height, Heading, Pitch, Roll (for "Fly to"), Range (for "Look at"), and Duration.
• Users can input values into these fields.
• Two buttons, "Fly to" and "Look at," are provided to trigger camera actions.