Skip to content

Re:Earth products

Other

Re:Earth Docs

Product

EN
日本語 English

Add a layer

Last updated

By the end of this guide, you will be able to add a layer to the map from your Plugin—for example, a marker at a specific coordinate. This guide assumes you are familiar with the basic Plugin structure of reearth.yml and an extension file.

You add a layer by calling reearth.layers.add with a layer object that describes the layer’s data and how it must appear. The method returns the new layer’s ID, which you can keep to modify or remove the layer later.

Sample code

Section titled “Sample code”

This example adds a single red marker at a coordinate in Tokyo.

reearth.yml

id: add-layer-plugin
name: Add Layer Plugin
version: 1.0.0
extensions:
  - id: add-layer
    type: widget
    name: Add Layer

add-layer.js

const layerId = reearth.layers.add({
  type: "simple",
  data: {
    type: "geojson",
    value: {
      type: "FeatureCollection",
      features: [
        {
          type: "Feature",
          properties: {},
          geometry: {
            type: "Point",
            coordinates: [139.97422779688281, 35.74642872517698],
          },
        },
      ],
    },
  },
  marker: {
    style: "point",
    pointColor: "#ff0000",
    pointSize: 12,
  },
});


if (layerId) {
  console.log("Layer added with ID:", layerId);
} else {
  console.log("Failed to add the layer.");
}


reearth.camera.flyTo(
  {
    lat: 35.74642872517698,
    lng: 139.97422779688281,
    height: 200000,
  },
  { duration: 2 }
);

Result

Section titled “Result”

When the widget loads, the camera moves to Tokyo and a red marker appears on the map at the specified coordinate.

A red marker added to a Re Visualizer map near Tokyo

Map data from OpenStreetMap.

How it works

Section titled “How it works”

You pass a single layer object to reearth.layers.add. The object has three important parts:

  • type: The layer type. Use "simple" for layers whose data you provide directly, which covers most cases.
  • data: Describes the layer’s source data:
    • type: The data format. This example uses "geojson". Other supported formats include "czml", "csv", "3dtiles", "kml", and several more.
    • value: The data itself, provided inline. Alternatively, you can provide a url instead of value to load data from an external source.
  • An appearance key: Tells Re:Earth Visualizer how to render the data. This example uses marker with style: "point", pointColor, and pointSize. Other appearance keys include polyline, polygon, and model.

reearth.layers.add returns the new layer’s ID as a string, or undefined if the layer could not be added. Keep this ID if you plan to modify the layer with reearth.layers.override or remove it with reearth.layers.delete later.

What’s next

Section titled “What’s next”