Skip to content
v1.0
Blocks

Layers panel

The layer control and the legend as one object: each row pairs a switch with the exact swatch drawn on the map, grouped by what the layer is.

What it is made of

  • GdCard elevation="overlay" — the floating panel, bottom-left of the map
  • GdEyebrow — one per group: Hazards, Title, Services
  • GdSwitch — one per row, the layer's on/off
  • A 12px swatch per row, painted with the map's own colour
  • GdButton variant="ghost" size="sm" — Reset, in the panel head

The block

Layers
Hazards
Title
Code 
<GdCard elevation="overlay" class="layers">
  <div class="layers__head">
    <span class="layers__title">Layers</span>
    <GdButton size="sm" variant="ghost">Reset</GdButton>
  </div>

  <!-- one group per kind of layer: Hazards, Title, Services -->
  <GdEyebrow>Hazards</GdEyebrow>

  <label v-for="l in hazards" :key="l.id" class="lrow">
    <GdSwitch v-model="l.on" />
    <!-- the swatch is bound to the map's OWN paint value: data, not a token -->
    <span class="sw" :style="{ background: l.paint }" />
    <span class="lrow__label">{{ l.label }}</span>
  </label>
</GdCard>

Rules

  • Pair every switch with the swatch the map actually draws. The panel is the legend; there is no second one.
  • Take the swatch colour from the map, not from a token. Map paint is data — mark the literal gd-colour-ok rather than tokenising it.
  • Group by what the layer IS — hazards, title, services — never alphabetically.
  • Keep attribution and data currency visible at all times. Never behind a disclosure.
  • Lift the camera to a zoom floor when a layer is switched on, if it is not visible yet. A floor, never a jump — see Camera & movement.
  • Become the bottom sheet below --gd-bp-compact. A floating panel on a phone is the map with a lid on it.

Behavior & Anatomy

The control and the legend are the same object

Two lists of the same layers is two lists to keep in agreement, and the one that goes stale is always the legend — because turning a layer on is a feature and describing it is documentation. Fusing them means a row cannot exist without its swatch, and the swatch cannot be wrong without the control being wrong too.

Why the swatch literals are not tokens

The swatch takes the map's ACTUAL colour. That value is DATA — it is what the canvas painted, and if the canvas changes the swatch must change with it, which a token indirection would quietly prevent. This is why those literals are marked gd-colour-ok in the source rather than tokenised. What each opacity means, and why an easement's edge is dashed, is on Paint & selection.

Attribution is not fine print here

For GRIDD the map is a legal-adjacent claim: a parcel drawn in tier 3 is telling someone what they will have to lodge. Attribution and data currency stay visible at all times because the answer's worth depends on when the register was read, and a panel that hides the date is asserting more confidence than the data supports.

The floating chrome beside this panel — the tool buttons, the scale bar, the search — is Map tools & search.

Navigate

Esc