Map explorer

A React block (a whole screen) in Beamline's Hotel & restaurant app.

A map with one operational layer over real ground (an optional map base: relief, lakes, streams, woods, roads), explored without losing your place; its key counts each kind of feature. A feature's details by the feature or docked at the side (fields in the layer's order, a value never recorded said, never 0; loading, a failure with Retry, and a feature removed since the map loaded each said; several features at one spot offered as a list first), the same feature ringed on the map and its row lit in a table of the layer or the selection, sortable, with arrow keys moving the selection. A filter edited in query-builder is a draft previewed by dimming what it leaves out (how many match, nothing matching and a number field given text said), then applied here or applied and saved to the map; Cancel restores the filter in use and the map's look together; a refused save keeps it applied here. The basemap changes only the ground: layers, filter and selection stay; tiles that fail keep the one shown and say so; an unavailable basemap says why; the opening basemap can be gone back to.

Use it for

Inspecting and filtering features on a map layer (sites, assets, stations, summits) beside their table.
Trying a filter on a map before saving it, with a clear way back.

Not for

Values by country on a world map (geo-map).
Desks on an office plan (desk-booking).

Anatomy

map: the ground in the chosen basemap (with a map base: real relief, lakes, streams, woods and roads, painted by the basemap), trails, features (summits and huts) with names (a hut's beside it), the selected ring, dimmed features, the attribution with the base's credit, Show or Hide table, the details anchored by the feature
table: Rows (all in layer or selected), sortable columns, rows with the selected one lit and dimmed ones faded
panel: Details (docked; anchored, the key: each kind of feature with its count, and the trails), Filter (query-builder, preview, Cancel, Apply, Apply and save) or Basemap (cards with swatches, Back to the opening one)

States

details: loading, anchored, docked, several at one spot, removed since loading, failed with Retry, no selection
table: layer, selection, sorted
filter: none, draft, previewing, matching with the rest dimmed, no matches, invalid value, cancelled, applied here, saved, save refused
basemap: the opening one, switching, another chosen, tiles failed, unavailable, back to the opening one
narrow room: the map above the table, the panel below

Keyboard

Tab reaches each feature on the map (Enter selects) and each table row (arrow keys move the selection); the panel's controls follow

Motion

The details fade in by the feature; features dim and the ground changes colour with a short ease. Nothing runs at rest.

Props

Prop	Type	Default	Description
`layer` (required)	`FeatureLayer`	—
`lines`	`MapLine[]`	—
`basemaps` (required)	`Basemap[]`	—
`defaultBasemap` (required)	`string`	—	The basemap the map opens with (Back to it is offered after a change).
`defaultFilter`	`QueryGroup`	—	The filter saved with the map.
`onLoadFeature` (required)	`(layerId: string, featureId: string) => Promise<Record<string, string \| number \| null> …`	—	Loads a feature's details; resolve null when it's gone, reject when they can't load.
`onLoadBasemap`	`((id: string) => Promise<unknown>)`	—	Loads a basemap's tiles; reject to keep the one shown.
`onSaveFilter`	`((q: QueryGroup) => Promise<unknown>)`	—	Saves the filter with the map; reject to keep it applied here only.
`defaultSelected`	`string \| null`	—
`defaultDocked`	`boolean`	—
`defaultPanel`	`MapExplorerPanel`	—
`defaultTable`	`boolean`	—
`defaultDraftFilter`	`QueryGroup`	—
`locale`	`string`	—
`className`	`string`	—	Classes on the documented visual root; no override by default.
`style`	`CSSProperties`	—	Inline styles on the documented visual root; no overrides by default.
`ref`	`Ref<HTMLDivElement>`	—	Receives the documented native target or imperative handle; omitted by default.
`map`	`MapBase`	—	Real ground under the layer (a MapBase: relief, lakes, streams, woods, roads); features and lines are then placed in the base's units. Without it a plain drawn ground stands in.

Built from

Dependencies

lucide-react

Import

import { MapExplorer } from "@beamline/map-explorer";

Get it

Map explorer is part of Beamline UI. Install the parts you need in your React app as compiled packages or editable source. Get Beamline · Connect your agent

Map explorerComplete system · $49

A map with one operational layer over real ground (an optional map base.

Cairn Ridge National Park

The details, the table row and the ring on the map are one feature; the filter dims what it leaves out until applied or cancelled.

0 × 0full

States