This plugin manifest defines a plugin named "test" with an extension of type "block" named "Map". The extension has a single field named "location" of type "latlng", which is intended to store latitude and longitude values. This manifest provides the structure and configuration for the plugin to be integrated into the Re-Earth platform.

reearth.yml

id: test
name: test
version: 1.0.0
extensions:
  - id: map
    type: block
    name: Map
    schema:
      groups:
        - id: default
          fields:
            - id: location
              type: latlng
              title: Location

The reearth.yml file is a powerful tool that can be used to customize the Re-Earth viewer. It can be used to add new features, change the appearance of the viewer, and more.

map.js

const html = `
  <link rel="stylesheet" href="<https://unpkg.com/[email protected]/dist/leaflet.css>" />
  <script id="l" src="<https://unpkg.com/[email protected]/dist/leaflet.js>"></script>
  <div id="map" style="width: 100%; height: 300px;"></div>
  <script>
    const block = {};

    document.getElementById("l").addEventListener("load", () => {
      const map = L.map("map").setView([0, 0], 13);
      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);

      const marker = L.marker();

      const cb = (block) => {
        if (block && block.property && block.property.default && block.property.default.location) {
          const latlng = [
            block.property.default.location.lat,
            block.property.default.location.lng
          ];
          if (!isValidLatLng(latlng)) {
            return;
          }

          map.setView(latlng);
          marker.setLatLng(latlng).addTo(map);
        } else {
          marker.remove();
        }
      };

      addEventListener("message", e => {
        if (e.source !== parent || !e.data.block) return;
        cb(e.data);
      });

      cb(block);
    });

    function isValidLatLng(latlng) {
      // Check if the latitude and longitude are within the valid range.
      return latlng[0] >= -90 && latlng[0] <= 90 && latlng[1] >= -180 && latlng[1] <= 180;
    }
  </script>
`;

reearth.ui.show(html);

reearth.on("update", () => {
  reearth.ui.postMessage({
    block: block,
    namespace: "my-namespace"
  });
});

This code creates a map that shows a location on OpenStreetMap. It uses a library called Leaflet to make the map. There's a form with fields for latitude, longitude, height, heading, pitch, roll, range, and duration. You can enter numbers in these fields.

When you press the "Fly to" button, the code checks the values you entered and moves the map's view to that location. It also adds a marker to show the spot.

The code also checks if the entered latitude and longitude are valid numbers, meaning they're within the correct range. If they're not valid, the map won't move.

When you press the "Look at" button, it also checks the values and changes the view to look at the specified location.

Overall, this code helps you visualize different locations on a map and adjust how you're looking at them. It's designed to be more reliable and handle errors better.

Then install this plugin, add a map widget, and select it. You'll see the properties of the map block on the left panel.

Type the location, and then a marker will be put on the leaflet map.

For details on the plugin manifest, refer to the Manifest reference.