Do it on the live map → This chapter is part of the interactive tutorial: one live map, your own code, each step checked as you go.
In this step you learn
  • The two kinds of group: top-menu entries (title) and panel headings (viewTitle).
  • How elements nests layers and groups.
  • How defaultProperties saves repeating the same property on every layer.

A real map has dozens of layers. Groups organise them, at two levels:

  • A top-level group with title and elements is an entry of the top menu - like Maps, the entry the platform makes for layers outside any group. Opening it lists all its layers, each with a switch.
  • A group with viewTitle and elements is a heading in the layer panel, above those of its layers that are on.

They nest: elements holds layers, or further groups.

Click the picture to run it live - nothing is saved.
Edit it in the playground
The query 28 lines · runs as is
// Groups: a group with a title becomes an entry of the top menu, where the reader finds its layers, and a viewTitle group becomes a heading in the layer panel.
// elements holds what is inside a group (layers or more groups); defaultProperties is shared by
// every layer inside, and a layer that sets a property itself keeps its own value. The panel
// lists the layers that are on; the top menu lists them all, to turn on.
[
  {
    title: "Relief", // an entry of the top menu
    color: "#8d4925",
    elements: [
      {
        viewTitle: "Terrain", // a heading in the layer panel
        openGroup: true,
        defaultProperties: { visibility: false, opacity: 0.7 },
        elements: [
          { title: "Elevation", name: "CSR:altimetria", visibility: true },
          { title: "Slope (Cerrado)", name: "CSR:bioma_cerrado_declividade" },
        ],
      },
    ],
  },
  {
    title: "Boundaries",
    color: "#2c3e50",
    elements: [
      { title: "States", name: "CSR:estados", visibility: true, opacity: 0.5 },
    ],
  },
];

Sharing properties

defaultProperties is applied to every layer inside the group that does not set the property itself. Above, both terrain layers get opacity: 0.7 and start off - except Elevation, which sets visibility: true itself. Use it for what a whole theme shares: a source, an opacity, a set of buttons.

openGroup: true starts a viewTitle heading expanded. The color of a top-level group colours its menu entry and the rows of all its layers; a nested group’s color colours its heading.

A reserved group

group: "background" on a layer (not a group of elements) makes it a basemap: it goes under everything and into the map’s background picker instead of the layer list - see the background selector.

Read more