Widgets¶
Widgets are the interactive pieces of the app — the layer list, legend, search box, draw tools, and so on. Each is a self-contained folder under app/widgets/, discovered automatically by the shell. You decide which to include and where they live by placing them in app/settings.ts.
Placing a widget¶
Each widget declares which surfaces it supports. You place it by referencing its id in the matching array in settings.ts:
topBarWidgets: [{ widgetName: 'measure' }, { widgetName: 'draw' }],
leftPanelWidgets: [{ widgetName: 'layer-list' }, { widgetName: 'legend' }, { widgetName: 'basemap' }],
floatingWidgets: [
{ slot: 'top-left', widgets: [{ widgetName: 'search', order: -1, stayOnMobile: true }] },
{ slot: 'top-right', widgets: [{ widgetName: 'coordinates' }] },
],
mobileWidgets: ['layer-list', 'legend', 'basemap', 'bookmarks', 'measure', 'draw'],
| Surface | Where it appears | Placement array |
|---|---|---|
top-bar |
An icon button in the top bar; UI opens in a side panel | topBarWidgets |
left-panel |
An icon in the left rail; UI slides out beside the map | leftPanelWidgets |
floating |
A control floating over a map corner | floatingWidgets |
A widget can support more than one surface, so the same widget can appear in several places. The placement-object fields (panelWidth, header, order, stayOnMobile) are covered in Building a Custom Widget.
mobileWidgets is an ordered list of widget names shown in the mobile top-bar carousel — the only launcher on mobile. Each name must already be placed on a desktop surface.
The built-in widgets¶
| Widget | id | Surfaces | What it does |
|---|---|---|---|
| Layer List | layer-list |
left-panel | Toggle layer visibility + opacity, grouped |
| Legend | legend |
left-panel | Symbology swatches for visible layers |
| Basemap | basemap |
top-bar, left-panel | Switch the active basemap |
| Search | search |
floating | Place search + in-layer feature search |
| Measure | measure |
top-bar | Measure distances and areas |
| Draw | draw |
top-bar | Draw points, lines, polygons, text |
| Bookmarks | bookmarks |
left-panel, top-bar | Save + restore map views |
| Coordinates | coordinates |
floating | Live cursor/view coordinates |
Several widgets have a config block in settings.ts (search, measure, draw, bookmarks) — those are documented on each widget's page and cross-linked from Configuration.
Want to build your own? See Your First Widget.