Skip to main content

aura-map-layout

Add one map page to a Flows app. Ask which layout the user wants, then run that layout's install command and render the component it adds. Use when the user wants a map, a spatial view, layer controls, or a preview next to a map.

Source facts

Repository
cognitedata/flows-community-components
Last source activity
October 12, 2026 at 13:08
Detected SKILL.md language
English
Stars
5
Forks
0

Install options

The review-first prompt is selected by default. You can switch to a direct command or download a local copy.

Review the source files

Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.

File Explorer
15 files

Showing SKILL.md

SKILL.md
Source instructions · Read-only preview
name
aura-map-layout
description
Add one map page to a Flows app. Ask which layout the user wants, then run that layout's install command and render the component it adds. Use when the user wants a map, a spatial view, layer controls, or a preview next to a map.
# Map layout template Four map page layouts for industrial apps. Choose the layout by asking the questions below in order. ## Match the request Ask these in order and stop at the first match. 1. **Does the person control what is drawn on the map?** Layers, scenes, models, visibility toggles. → Use **left panel + map + right panel**. A tree with checkboxes is the clearest way to manage visibility, and it needs persistent space next to the map. 2. **Do they need to scan, sort, filter or compare many records as rows?** If no → use **map + right panel**. The map is the primary view, so give it the most room and keep only a preview panel. 3. **Do they need to look at one selected record in detail without leaving the page?** If yes → use **horizontal split: map + data grid + right panel**. If no → use **horizontal split: map + data grid**. If two layouts both seem to fit, prefer the one with fewer regions. Every extra region takes map space and adds cognitive load. ## Region roles - **Left panel** — controls what the map shows: search, filter, hierarchy, visibility toggles. It should not hold record detail. - **Right panel** — detail for one selected item: header (avatar, title, type), description area, and a footer with secondary + primary action. It answers "what is this thing?" and offers a way to the full page. - **Data grid** — many items at once. Supports selection, sorting, and row actions. - **Page header** — names the page and holds page-level actions. Every map layout includes one. ## Why the data grid sits under the map The horizontal split keeps map and grid at the same width, so columns align with the full page and the map keeps a wide, landscape view. A side-by-side split would squeeze the grid into too few columns and the map into a narrow strip. The trade is vertical space: the map gets roughly 40–45% of content height, suiting maps used for orientation and selection more than detailed panning. ## Do not - Use layout 3 or 4 when there are only a handful of records — a grid for five items is overhead; layout 2 works fine. - Put record detail in the left panel — left is for map contents, right is for the selected record. - Use layout 4 and then add a preview — if people keep opening each row, move to layout 3. - Add a right panel to layout 4 "just in case" — if row actions and a details page are enough, the panel adds noise.
View on GitHub