Configure an Infobox for a layer

By the end of this guide, you will be able to attach an infobox to a layer so that when a user clicks a feature on that layer, a panel opens showing the feature’s information. This guide assumes you are familiar with adding a layer (see Add a layer).

An infobox is configured as part of the layer itself, using the layer’s infobox property. You add one or more blocks to the infobox, and Re:Earth Visualizer displays them whenever a user selects a feature of that layer.

Sample code

This example adds a single marker with a few properties and attaches an infobox that automatically displays all of the feature’s properties when it is selected.

reearth.yml

id: infobox-demo-plugin
name: Infobox Demo Plugin
version: 1.0.0
extensions:
  - id: infobox-demo
    type: widget
    name: Infobox Demo

infobox-demo.js

reearth.layers.add({
  type: "simple",
  data: {
    type: "geojson",
    value: {
      type: "FeatureCollection",
      features: [
        {
          type: "Feature",
          properties: {
            name: "Tokyo Tower",
            height: "333 m",
            category: "Landmark",
          },
          geometry: {
            type: "Point",
            coordinates: [139.7454, 35.6586],
          },
        },
      ],
    },
  },
  infobox: {
    blocks: [
      {
        pluginId: "reearth",
        extensionId: "propertyInfoboxBetaBlock",
      },
    ],
  },
  marker: {
    style: "point",
    pointColor: "#ff0000",
    pointSize: 12,
  },
});

reearth.camera.setView({
  lat: 35.6586,
  lng: 139.7454,
  height: 80000,
  heading: 0,
  pitch: -1.5708,
  roll: 0,
});

Result

A marker appears on the map at Tokyo Tower. Clicking it opens an infobox listing the feature’s properties—its name, height, and category.

Map data from OpenStreetMap.

How it works

The infobox is configured on the layer itself, through the infobox property passed to reearth.layers.add:

infobox: {
  blocks: [
    { pluginId: "reearth", extensionId: "propertyInfoboxBetaBlock" }
  ]
}

• blocks: The list of blocks shown in the infobox, in order.
  • pluginId and extensionId: Identify which block to display. Here, reearth / propertyInfoboxBetaBlock is a built-in block that automatically lists every property of the selected feature—so you get a full property display without writing any block code yourself.

The properties shown in the infobox come from the feature’s own properties object in the GeoJSON—here, name, height, and category. Add more properties there and they appear in the infobox too.

Because the infobox belongs to the layer, it appears only when a user selects a feature of that layer. Nothing shows until a feature is clicked.

What’s next

• Add a layer: the layer basics this guide builds on
• reearth.layers API reference: the full layer object, including infobox and block options
• Differences between extension types: how the InfoboxBlock extension type relates to what you built here