Component
LayerManager
A map control listing its layers, to show, fade and reorder them.
import { LayerManager } from '@loidolt/theme-maps';
Example
Focus the map to move it: arrow keys pan, plus and minus zoom, Shift with the arrows rotates and tilts.
Notes
- Lists every layer placed with a layer component, topmost first, named by each layer’s
label. Passlayersto offer only some. - Reorder with the arrow buttons, or Alt + ↑ and ↓ anywhere in a row. Each move is announced ("Stops moved to position 1 of 4") and focus stays with the moved layer.
- Opacity sets every opacity property the layer type has — both text and icon for a symbol layer.
Props
Generated from the component source, so it cannot drift from the implementation.
| Prop | Type | Default | Notes |
|---|---|---|---|
allowReorder | boolean | true | Offer moving layers up and down (Alt + ↑ and ↓ on a row, too). |
class | string | — | |
layers | string[] | — | The layers to offer, by id. Defaults to every layer placed with a layer component. |
movedMessage | (label: string, position: number, total: number) => string | (label, place, total) => `${label} moved to position ${place} of ${total}.` | |
moveDownLabel | (label: string) => string | (label) => `Move ${label} down` | |
moveUpLabel | (label: string) => string | (label) => `Move ${label} up` | |
onChange | (layers: LayerState[]) => void | — | Every change: visibility, opacity or order. Top of the list first. |
opacityLabel | (label: string) => string | (label) => `${label} opacity` | |
open bindable | boolean | true | Show the list. Bindable, and toggled by the heading. |
position | Corner | 'top-right' | |
showOpacity | boolean | true | Offer an opacity slider per layer. |
title | string | 'Layers' |