Show a map with controls props
The generated props of every element on Show a map with controls. The guide is where they are explained; this is the whole surface.
MapView
childrenReactNode
The controls, panels and elements to place on the map, rendered inside its container once the map is ready.
They render under a MountayaElementsProvider that states this map, and this map's client where no enclosing provider states one, so <MapView client={client}><MapControls zoom /></MapView> needs no state and no onReady. Everything else is the enclosing provider's. A control placed outside the map takes the map from onReady through a provider of its own.
A map whose first style never loads renders none of them, so a way out of that failure (a retry, another terrain) sits outside the map and hears of it through onError.
clientMountayaMapOptions["client"]
The client this map fetches its specifications through, and the client the children read where no enclosing provider states one.
A seed, read once as the map is built: the map reads the credential it holds at each request, so a session token that rotates needs nothing here, and a map over another client is remounted with a key.
credentialMountayaMapOptions["credential"]
Overrides the credential MapLibre attaches to its own tile, sprite and glyph requests.
Its session token is followed: the one this prop holds at each request goes out, and a render that omits the prop keeps the last one. The key, the share token and the cookie flag are a seed, read once as the map is built, and a map built with others is remounted with a key.
centerMountayaMapOptions["center"]
Where the camera opens, as [longitude, latitude].
A seed, read once as the map is built, as the whole opening pose is: from there the camera is the reader's, and the map onReady hands you moves it.
zoomMountayaMapOptions["zoom"]
The zoom the camera opens at. A seed, read once as center is.
bearingMountayaMapOptions["bearing"]
The compass bearing the camera opens at, in degrees clockwise from north. A seed, read once as center is.
pitchMountayaMapOptions["pitch"]
The tilt the camera opens at, in degrees off vertical. A seed, read once as center is.
geolocationMountayaMapOptions["geolocation"]
Where a device fix comes from: a native shell's, or inertGeolocation for a product that locates nobody.
A seed, read once as the map is built: a map served by another seam is remounted with a key. A seam written inline is no change.
maplibreMountayaMapOptions["maplibre"]
MapLibre's own options, handed to it as written.
A seed, read once as the map is built: a map built with others is remounted with a key. An object written inline is no change, a callback among its members included.
mapStyleMountayaMapOptions["style"]
A complete map style to start on, instead of a terrain from the layers manifest.
A seed, read once as the map is built: a map that starts on another style is remounted with a key, and setStyle on the map switches it afterwards.
paintMountayaMapOptions["paint"]
Overrides for what the map draws: the itinerary stroke, its casing, the layer ranks.
It cannot be a --mtya-* token: MapLibre evaluates paint expressions inside its own renderer against no DOM element, so a var(--mtya-accent) arrives as a string it cannot read. The tokens theme the chrome around the canvas; this themes what is drawn in it.
Folded per key, so { itinerary: { casingColor: "#f8f9fa" } } changes the halo and leaves every width stop, dash and stacking rank where they were. A seed, read once as the map is built: a map painted otherwise is remounted with a key.
markerIconsIconProvider
The glyph set the markers this map draws take their glyphs from.
A seed, read once as the map is built.
terrainVariantMountayaMapOptions["terrainVariant"]
The rendition of the catalogue terrain the base map draws, as the layers manifest lists it.
The terrain's own light or dark variant, which is the application's choice and is never read off the page's colour scheme or data-mtya-color-scheme: a dark interface over a light base map is a legitimate product. Followed after mount: a new value switches the rendition in place, and a render that omits it changes nothing.
terrainMountayaMapOptions["terrain"]
The slug of the catalogue terrain the base map draws.
Followed after mount: a new slug switches the base map in place, and a render that omits it changes nothing. A slug the manifest does not list reaches onError.
languageMountayaMapOptions["language"]
The language labels are drawn in.
Followed after mount, and a render that omits it changes nothing.
constraintsMountayaMapOptions["constraints"]
The limits the camera may not leave: a zoom floor and ceiling, and a boundary.
Followed after mount, compared by its members so an object written inline changes nothing, and a render that omits it changes nothing. A boundary or a zoom window the map cannot hold throws MountayaElementsError to the nearest error boundary, at mount as after it.
transformRequestMountayaMapOptions["transformRequest"]
Replaces the transform the map derives from its client and its credential, for every request MapLibre makes.
Whether one is supplied at mount decides, for the map's life, whether it replaces the derived transform: a transform first supplied on a later render is ignored, and a map that takes one from then on is remounted with a key. The prop is then read at each request, so a transform rebuilt when a credential rotates reaches the next tile, and a render that omits it keeps the last one supplied.
MapControls
zoomboolean
default: false
Which controls to render. Each defaults to off, so a stack is opt-in per control.
compassboolean
default: false
geolocateboolean
default: false
layersboolean
default: false
preferencesboolean
default: false
poisboolean
default: false
position"top-right" | "top-left" | "bottom-left" | "bottom-right"
default: "top-right"
stringsMapControlsStrings
Overrides the words this element renders, for this element only.
Folded onto whatever the provider resolved, so an override naming one key leaves the rest of the section alone. Scoped to the sections this element reads: a key it never renders is a type error rather than a silent no-op.
disabledboolean
default: false
Renders the whole stack inert.
Read once here and threaded to every control, which is what keeps a control added to this stack from shipping live: it takes the same flag its siblings do. Mountaya's own studio passes its agent-run lock through this, so the entire chrome goes inert together while an agent drives.
layersPanelLayersPanelProps
poiPanelPoiPanelProps
preferencesPanelPreferencesPanelProps
The preferences panel's own props, on the same terms its two siblings take theirs.
Hoisting them here as a preferencesValue and an onPreferencesChange is what would put a UnitFormatOptions under the same word as the preferences BOOLEAN above, the flag deciding whether the control renders at all. Two different things wearing one name, which no amount of documentation fixes. One panel, one prop, and the controlled pair stays inside the type that owns it.
Omitted, the stack holds the preference set itself, so every row of the panel responds to its press: it starts from defaultUnits in the language the provider selected, and a language row still drives the map. The set reaches nothing outside the panel, so an application whose profile, table or own surfaces read units passes the pair and holds the value.
openPanelPanelName | (string & {}) | null
The open panel, when the application owns that state: one of the built-in panels, the kind of a PanelControl composed in children, or null for none.
Unset, the stack owns it, which is what a consumer rendering the built-in panels wants. Set, the stack only reads it: onTogglePanel is how the built-in toggles ask for a change, and onClosePanel is how a press elsewhere in the stack does. An application composing its own PanelControls in children supplies this alone, so the stack still knows a panel is open and can dismiss it.
A press inside the open panel, or on its toggle, is never a dismissal. Neither is a press on another panel's toggle when that toggle writes this state: every toggle of a controlled stack, and the built-in ones otherwise.
childrenReactNode
Controls of the application's own, rendered between the panel cluster and the geolocate/compass pair.
Composition is the full-strength path, not a bolt-on: an application that needs its own handler per control, its own gating, or panels it positions itself leaves every flag off and builds the stack here out of ZoomControl, CompassControl, GeolocateControl and PanelControl. It keeps the positioning, the token block and the dismiss-on-press, which is everything this component is for.
MapControls.Compass
CompassControl resets the bearing to north, and doubles as an orientation readout.
disabledboolean
default: false
stringsCompassControlStrings
Overrides the words this element renders, for this element only.
Folded onto whatever the provider resolved, so an override naming one key leaves the rest of the section alone. Scoped to the sections this element reads: a key it never renders is a type error rather than a silent no-op.
MapControls.Directions
DirectionsControl asks the application to open directions for what the map is showing.
disabledboolean
stringsActionControlStrings
Overrides the words this element renders, for this element only.
Folded onto whatever the provider resolved, so an override naming one key leaves the rest of the section alone. Scoped to the sections this element reads: a key it never renders is a type error rather than a silent no-op.
MapControls.Download
DownloadControl asks the application to export what the map is showing.
disabledboolean
stringsActionControlStrings
Overrides the words this element renders, for this element only.
Folded onto whatever the provider resolved, so an override naming one key leaves the rest of the section alone. Scoped to the sections this element reads: a key it never renders is a type error rather than a silent no-op.
MapControls.Geolocate
GeolocateControl centres the map on the device location.
disabledboolean
default: false
locatingboolean
Reports a fix as in flight, for an application that owns the request through onLocate.
Unset, the control tracks its own request. The pair matters: an onLocate that suppresses the default also suppresses the state the default sets, so without this the button would sit idle and unpainted through every fix the application makes.
stringsGeolocateControlStrings
Overrides the words this element renders, for this element only.
Folded onto whatever the provider resolved, so an override naming one key leaves the rest of the section alone. Scoped to the sections this element reads: a key it never renders is a type error rather than a silent no-op.
tooltipDisabledboolean
default: false
Suppresses the tooltip.
For an application whose onLocate opens a surface of its own (a permission pre-prompt, say), and for the same reason PanelControl suppresses its own: a bubble over the surface a press just revealed reads as a rendering fault.
MapControls.Panel
PanelControl is a button that owns a floating panel.
labelstring
tooltipTitlestring
tooltipDescriptionstring
glyphstring
kindstring
Names the panel in the DOM, on the element that wraps the toggle and the floating panel.
The stack's dismiss-on-press reads it there: a press inside the element of the open panel is never a dismissal, and MapControlsProps.openPanel names the open panel by this value. A panel the stack ships, or a word of the application's own for a panel it composes.
openboolean
disabledboolean
default: false
refRef<HTMLDivElement>
The control's own outermost element, for a caller that has to point at it.
One caller and one reason: a floating panel positioned somewhere ELSE on the page has to exempt its own toggle from its outside-click handler, or a press on the toggle closes the panel and the button's own handler immediately reopens it. Reading the button out of the document by its kind looks equivalent and is not: it finds the FIRST match on the page, so two maps on one page exempt each other's button, and it finds nothing at all across a shadow root.
A panel rendered through children needs none of this: it is inside this element already.
childrenReactNode
The panel itself, rendered beside the button while open.
Omit it when the application positions its own panel: in a drawer, a sidebar, or a layer anchored somewhere other than the button. The control is then the toggle alone, and everything else about it holds: the held paint, the suppressed tooltip, and the kind the stack's dismiss-on-press exempts.
One of React's empty values (null, false, what a failed condition hands) reads as omitted, so a conditional panel draws no empty floating box.
MapControls.Search
SearchControl is a search box over Mountaya's unified search, with the results under it.
disabledboolean
default: false
targetsreadonly SearchTargetName[]
The branches to ask for.
languageDataLanguage
The language the Data API answers in.
limitnumber
Per-target result cap: a whole number from 1 to 50, the range the API takes.
unitsUnitFormatOptions
The units every figure in the list is stated in: an itinerary's length and ascent, and the distance or elevation in the sentence under a place, a way or a point of interest.
A change of its length or its language asks a fresh round, since those sentences are worded as their branch lands.
wordingSearchWording
How a row's title and second line are worded for the reader, as SearchEngine takes it.
resolveLabel answers the word a wire value reads as: a category, a way's tags. units, when stated here, replaces the control's own units for the sentences this wording words, and an application states one or the other.
querystring
The query, when the application owns it. Unset, the control owns its own, whether or not onQueryChange is supplied.
viewportScopeboolean
Whether the search is restricted to the visible area, when the application owns it. Unset, the control owns its own, whether or not onViewportScopeChange is supplied.
resultMarkerOmit<MarkerOptions, "id" | "lngLat">
The pin dropped on a picked result. Its id and position are the control's.
stringsSearchControlStrings
Overrides the words this element renders, for this element only.
Folded onto whatever the provider resolved, so an override naming one key leaves the rest of the section alone. Scoped to the sections this element reads: a key it never renders is a type error rather than a silent no-op.
MapControls.StreetView
StreetViewControl is the handle a user drags onto the map to look around.
disabledboolean
default: false
stringsStreetViewControlStrings
Overrides the words this element renders, for this element only.
Folded onto whatever the provider resolved, so an override naming one key leaves the rest of the section alone. Scoped to the sections this element reads: a key it never renders is a type error rather than a silent no-op.
minZoomnumber
default: 13
The zoom below which the handle is inert.
googleMapsApiKeystring
The Maps JS API key the coverage check is made with.
Never ours: Street View is Google's product billed to whoever asks for it, so the key belongs to the application. Without one, and without an onDrop of your own, the control renders nothing at all, because a handle whose every drop must fail is worse than an absent one.
boundsStreetViewBounds
Bounds the droppable area to an itinerary, and draws that corridor for the length of a drag.
childrenReactNode
Replaces the glyph in the handle and in the ghost.
For an application with artwork of its own, such as a pegman image its users already recognise.
MapControls.Zoom
ZoomControl is the +/- pair, as one flush chip.
disabledboolean
default: false
stringsZoomControlStrings
Overrides the words this element renders, for this element only.
Folded onto whatever the provider resolved, so an override naming one key leaves the rest of the section alone. Scoped to the sections this element reads: a key it never renders is a type error rather than a silent no-op.
ZoomControl
disabledboolean
default: false
stringsZoomControlStrings
Overrides the words this element renders, for this element only.
Folded onto whatever the provider resolved, so an override naming one key leaves the rest of the section alone. Scoped to the sections this element reads: a key it never renders is a type error rather than a silent no-op.
CompassControl
disabledboolean
default: false
stringsCompassControlStrings
Overrides the words this element renders, for this element only.
Folded onto whatever the provider resolved, so an override naming one key leaves the rest of the section alone. Scoped to the sections this element reads: a key it never renders is a type error rather than a silent no-op.
CompassRose
sizenumber
The rose's width and height in CSS pixels: the rose is square, so one dimension sizes it.
GeolocateControl
disabledboolean
default: false
locatingboolean
Reports a fix as in flight, for an application that owns the request through onLocate.
Unset, the control tracks its own request. The pair matters: an onLocate that suppresses the default also suppresses the state the default sets, so without this the button would sit idle and unpainted through every fix the application makes.
stringsGeolocateControlStrings
Overrides the words this element renders, for this element only.
Folded onto whatever the provider resolved, so an override naming one key leaves the rest of the section alone. Scoped to the sections this element reads: a key it never renders is a type error rather than a silent no-op.
tooltipDisabledboolean
default: false
Suppresses the tooltip.
For an application whose onLocate opens a surface of its own (a permission pre-prompt, say), and for the same reason PanelControl suppresses its own: a bubble over the surface a press just revealed reads as a rendering fault.
PanelControl
labelstring
tooltipTitlestring
tooltipDescriptionstring
glyphstring
kindstring
Names the panel in the DOM, on the element that wraps the toggle and the floating panel.
The stack's dismiss-on-press reads it there: a press inside the element of the open panel is never a dismissal, and MapControlsProps.openPanel names the open panel by this value. A panel the stack ships, or a word of the application's own for a panel it composes.
openboolean
disabledboolean
default: false
refRef<HTMLDivElement>
The control's own outermost element, for a caller that has to point at it.
One caller and one reason: a floating panel positioned somewhere ELSE on the page has to exempt its own toggle from its outside-click handler, or a press on the toggle closes the panel and the button's own handler immediately reopens it. Reading the button out of the document by its kind looks equivalent and is not: it finds the FIRST match on the page, so two maps on one page exempt each other's button, and it finds nothing at all across a shadow root.
A panel rendered through children needs none of this: it is inside this element already.
childrenReactNode
The panel itself, rendered beside the button while open.
Omit it when the application positions its own panel: in a drawer, a sidebar, or a layer anchored somewhere other than the button. The control is then the toggle alone, and everything else about it holds: the held paint, the suppressed tooltip, and the kind the stack's dismiss-on-press exempts.
One of React's empty values (null, false, what a failed condition hands) reads as omitted, so a conditional panel draws no empty floating box.
DirectionsControl
disabledboolean
stringsActionControlStrings
Overrides the words this element renders, for this element only.
Folded onto whatever the provider resolved, so an override naming one key leaves the rest of the section alone. Scoped to the sections this element reads: a key it never renders is a type error rather than a silent no-op.
DownloadControl
disabledboolean
stringsActionControlStrings
Overrides the words this element renders, for this element only.
Folded onto whatever the provider resolved, so an override naming one key leaves the rest of the section alone. Scoped to the sections this element reads: a key it never renders is a type error rather than a silent no-op.
SearchControl
disabledboolean
default: false
targetsreadonly SearchTargetName[]
The branches to ask for.
languageDataLanguage
The language the Data API answers in.
limitnumber
Per-target result cap: a whole number from 1 to 50, the range the API takes.
unitsUnitFormatOptions
The units every figure in the list is stated in: an itinerary's length and ascent, and the distance or elevation in the sentence under a place, a way or a point of interest.
A change of its length or its language asks a fresh round, since those sentences are worded as their branch lands.
wordingSearchWording
How a row's title and second line are worded for the reader, as SearchEngine takes it.
resolveLabel answers the word a wire value reads as: a category, a way's tags. units, when stated here, replaces the control's own units for the sentences this wording words, and an application states one or the other.
querystring
The query, when the application owns it. Unset, the control owns its own, whether or not onQueryChange is supplied.
viewportScopeboolean
Whether the search is restricted to the visible area, when the application owns it. Unset, the control owns its own, whether or not onViewportScopeChange is supplied.
resultMarkerOmit<MarkerOptions, "id" | "lngLat">
The pin dropped on a picked result. Its id and position are the control's.
stringsSearchControlStrings
Overrides the words this element renders, for this element only.
Folded onto whatever the provider resolved, so an override naming one key leaves the rest of the section alone. Scoped to the sections this element reads: a key it never renders is a type error rather than a silent no-op.
StreetViewControl
disabledboolean
default: false
stringsStreetViewControlStrings
Overrides the words this element renders, for this element only.
Folded onto whatever the provider resolved, so an override naming one key leaves the rest of the section alone. Scoped to the sections this element reads: a key it never renders is a type error rather than a silent no-op.
minZoomnumber
default: 13
The zoom below which the handle is inert.
googleMapsApiKeystring
The Maps JS API key the coverage check is made with.
Never ours: Street View is Google's product billed to whoever asks for it, so the key belongs to the application. Without one, and without an onDrop of your own, the control renders nothing at all, because a handle whose every drop must fail is worse than an absent one.
boundsStreetViewBounds
Bounds the droppable area to an itinerary, and draws that corridor for the length of a drag.
childrenReactNode
Replaces the glyph in the handle and in the ghost.
For an application with artwork of its own, such as a pegman image its users already recognise.
LayersPanel
stringsLayersPanelStrings
Overrides the words this element renders, for this element only.
Folded onto whatever the provider resolved, so an override naming one key leaves the rest of the section alone. Scoped to the sections this element reads: a key it never renders is a type error rather than a silent no-op.
isLocked(slug: string) => boolean
Reports an entry the viewer's agreement does not include, so it renders locked.
What an agreement includes is the API's to enforce: the Tile API answers 403 whatever a picker shows. This exists so an application that already knows what the agreement includes can say so before the request, rather than letting a press fail silently.
PoiPanel
stringsPoiPanelStrings
Overrides the words this element renders, for this element only.
Folded onto whatever the provider resolved, so an override naming one key leaves the rest of the section alone. Scoped to the sections this element reads: a key it never renders is a type error rather than a silent no-op.
labelsReadonly<Record<string, string>>
A label per manifest key. A key with no entry is shown as the key itself.
The keys come from the layers manifest at runtime, so they cannot live in the static strings contract the way the rest of this package's copy does. "parking" is legible where a blank row is not, which is why the fallback is the key rather than an empty string: the same call localizedName in @mountaya/elements/i18n makes for a slug.
keysreadonly string[]
Restricts the panel to these keys, in this order.
For a consumer offering a curated subset (the assembled studio groups a few concepts out of a longer manifest) rather than whatever the manifest happens to carry today.
groupsreadonly PoiPanelGroup[]
Curated groups, one row each. Supersedes {@link keys}.
The unit a user reasons about is rarely the manifest's: "water" is a spring, a drinking tap and a fountain, and offering the three separately asks them to know which of the three the map drew. A group collapses that into one row whose toggle drives every key it names.
activeGroupsreadonly string[]
The groups currently on, when the application owns that state.
Unset, the panel reads the map. Set, it only renders what it is told: the pair onToggleGroup completes, for a surface whose group state lives somewhere the map cannot answer for.
showAllToggleboolean
default: false
Adds the master row above the categories, which turns the whole overlay on and off.
Off by default: a panel offering one concept has nothing to master, and the row would read as a duplicate of the only toggle under it.
minZoomnumber
The zoom below which the overlay draws nothing, so the panel can say so.
Points of interest are tiled at street zooms, so a user who switched them on at country scale sees an empty map and a panel full of lit toggles. The note names the reason; it does not disable anything, because the toggles are still what the map will honour once the camera arrives.
disabledboolean
default: false
PreferencesPanel
preferencesUnitFormatOptions
The preference set the panel edits: the length system, the form a travel rate takes, the slope notation, the temperature scale and the language.
The value every formatter and every element's units takes, so the value an application stores is the value it hands on. Seed it from defaultUnits of @mountaya/elements/profile: every member is required, and a partial value round-tripped through storage is how a reader's units silently revert.
stringsPreferencesPanelStrings
Overrides the words this element renders, for this element only.
Folded onto whatever the provider resolved, so an override naming one key leaves the rest of the section alone. Scoped to the sections this element reads: a key it never renders is a type error rather than a silent no-op.
ControlButton
labelstring
The accessible name. Required: a control stack of unlabelled squares is unusable.
aria-describedbystring
The ids of what describes the button beyond its label. <ControlTooltip> writes its open bubble's id here.
glyphstring
A glyph role from UI_GLYPHS. Omit when passing children instead.
disabledboolean
default: false
pressedboolean
Renders the button as a toggle that is on, through aria-pressed.
Painted as the same calm grey as hover rather than as a filled accent, as expanded and busy are. Omitted, the button is no toggle and states no pressed state at all.
expandedboolean
Whether the surface this button discloses is shown, through aria-expanded: a panel toggle states it, and names the surface with controls.
Painted as pressed is while it is true.
controlsstring
The id of the surface expanded speaks of, written as aria-controls.
busyboolean
Whether the action the button started is still under way, through aria-busy: the geolocate button states it while a fix is out.
Painted as pressed is while it is true.
refRef<HTMLButtonElement>
The <button> element, for a caller that hands focus back to it.
kindstring
Marks the button in the DOM, so the stack's dismiss-on-press can exempt it.
childrenReactNode
Replaces the glyph, for a control drawing something of its own (the compass rose).
ControlGroup
orientation"vertical" | "horizontal"
default: "vertical"
vertical stacks the buttons into one flush chip, which is the stack's own idiom.
disabledboolean
default: false
Whether every control in the group is disabled, which flattens the raised surface.
A property of the GROUP, not an instruction to its children: each control keeps its own disabled, because a group regularly holds one live control beside a gated one. Set this only when all of them are off, or the chip stops looking raised while something inside it is still pressable.
childrenReactNode
ControlTooltip
titlestring
descriptionstring
disabledboolean
default: false
Suppresses the bubble entirely.
Used while the control's own panel or modal is open, so a tooltip never covers the surface its own button just revealed.
side"left" | "right" | "top" | "bottom"
Which side of the control the bubble opens on, for a caller that knows where its control sits.
childrenReactElement<{ "aria-describedby"?: string | undefined }>
The control the bubble describes: one element that takes aria-describedby.
While the bubble is open the control is handed its id there, after any description the control already names, so a keyboard reader hears the second line with the control's name.
Glyph
namestring
A role from UI_GLYPHS: zoom-in, layers, geolocate.
labelstring
An accessible name, for the rare glyph that IS the control rather than decoration.
Absent by default, and the default is the common case: a glyph beside a label repeats it, so announcing both makes a screen reader say everything twice. Passing one flips the element from aria-hidden to role="img": a glyph cannot be half-announced, and leaving aria-hidden on an element that carries the only name renders it unreachable rather than merely unlabelled.
sizenumber
default: 16
iconsIconProvider
The set to draw from, when it is not the control set.
For a surface that binds a set of its own and draws every glyph from it: a studio's wrapper over its interface set, a waypoint layer over a set of places. The glyph reads the set's paint mode, stroke width and view box with its shapes, so one name drawn from two sets is two different drawings.
fallbackReactNode
default: null
What to draw when the provider has no shape under this name.
null by default, and the default is right for a control: a zoom button whose glyph is missing should not grow a word where an icon belongs. It is wrong for anything drawing a DATUM (a place's services, say), because a host that has not registered the amenity-* family then gets an empty cell over data the itinerary genuinely carries, and nothing anywhere says so. Those call sites pass the name as text.
Also accepts every standard <svg> attribute — a ref, event handlers, data-* and ARIA — which are forwarded to the rendered element.
OptionRow
kind"radio" | "checkbox"
radio for a choice that replaces the last one, checkbox for one that stacks.
This is not decoration. It is the same distinction the layers manifest draws between a classic overlay and an enrichment, surfaced to assistive technology: a screen-reader user hearing "radio button" learns that selecting this will deselect the other, which is the rule the whole picker rests on.
namestring
Groups the radios that replace one another. Ignored for a checkbox.
labelstring
checkedboolean
disabledboolean
childrenReactNode
Rendered after the label: a badge, a lock.
Handlers
An on* handler suppresses the element's own default. Left unset, the element acts; set, it becomes presentational and your handler decides. The two never both fire.
MapView
onReady(map: MountayaMap) => void
Called once the map is constructed and its style has loaded.
onDestroy(map: MountayaMap) => void
Called just before a map that reached onReady is destroyed, to release anything attached to it.
Paired with onReady: a map torn down before its style loaded was handed to nobody, so it is destroyed without this being called. React StrictMode builds and tears down such a map on every development mount, and an application hears of the one it keeps.
onError(error: Error) => void
Called with each failure the map reports that no call of yours could reject: an error MapLibre raised, the base map not arriving because the layers manifest could not be read or lists no such terrain, and a switch of terrain or terrainVariant after mount that the map refuses.
Attached as the map is built, before it makes its first request, so a failure that lands before onReady is heard. It reports and replaces nothing. A refusal of access goes to onAccessRequired instead, and a map that cannot be built at all (no WebGL context) throws to the nearest error boundary, which is React's own contract for a failure while mounting.
onAccessRequired(refusal: MountayaMapEvents["accessrequired"]) => void
Called when the API refuses one of the map's own requests with a 401, a 402 or a 403: a tile, a sprite, a glyph, a style, or the layers manifest.
The refusal carries the status and the address refused, so an application tells a sign-in apart from access its agreement does not include (a 402: talk to us at https://mountaya.com/en/contact/). Attached as the map is built, like onError, since the manifest is read before the style loads and an expired session token is refused there first.
MapControls
onTogglePanel(panel: PanelName) => void
Called with the built-in panel whose toggle was pressed, in a controlled stack. A composed PanelControl reports through its own onToggle.
onClosePanel() => void
Called when a press elsewhere in a controlled stack asks for the open panel to close.
ZoomControl
onZoomIn() => void
Overrides what a press does.
Left unset, the control drives the map directly, which is what a consumer wants. Set, the control becomes presentational and the handler decides, which is how Mountaya's own studio routes every action through its tool bus while sharing this exact component.
Supplying one also makes that half of the pair live with no map in context, because a handler that suppresses the default has nothing left to wait for. The two halves are gated separately: a stack that overrides only zoom-in must not carry a live zoom-out whose default it never wired.
onZoomOut() => void
CompassControl
onResetNorth() => void
Overrides the reset. Unset, the control resets the map's bearing and pitch itself.
Supplying one also makes the control live with no map in context: the default is what needed one, and a handler that replaces it does not. The rose then reads the identity bearing, because there is no camera to track.
GeolocateControl
onLocate() => void
Overrides the request. Unset, the control asks the browser and eases the map itself.
Supplying one also makes the control live with no map in context: what needed a map was the easing, and an application that owns the request owns where the fix lands.
onError(error: Error) => void
Called when the browser refuses or the fix fails, for an application's own recovery UI.
Always an Error, as every element's onError is: the MountayaElementsError the map rejects with, whose message states the reason. A geolocation seam of the host's own that rejects with a value that is no Error is reported as a MountayaElementsRejectionError holding that value as its cause. Never called for a fix the application makes itself through onLocate, nor after the control has unmounted.
PanelControl
onToggle(open: boolean) => void
Called with the state the press is asking for, not with the state it left.
The control is controlled (open is the caller's), so a bare notification would leave every caller re-deriving !open from the value it just rendered, and the two disagree for exactly as long as a press and a re-render are apart.
DirectionsControl
onClick() => void
What a press does. Required, unlike the on* on every other control here.
The rest of this package's controls default to driving the map, and their handler is an override. These two have nothing to drive: exporting a route and routing between points both end in a surface (a dialog, a panel, a download) that belongs to the application and cannot be guessed. A control that rendered without one would be a button that looks live and does nothing, which is worse than not offering it.
DownloadControl
onClick() => void
What a press does. Required, unlike the on* on every other control here.
The rest of this package's controls default to driving the map, and their handler is an override. These two have nothing to drive: exporting a route and routing between points both end in a surface (a dialog, a panel, a download) that belongs to the application and cannot be guessed. A control that rendered without one would be a button that looks live and does nothing, which is worse than not offering it.
SearchControl
onQueryChange(query: string) => void
Called with the query each keystroke and each clear asks for. With query supplied it is how the application is asked to change the value. With none it observes: the control has already written its own.
onViewportScopeChange(scoped: boolean) => void
Called with the scope a press on the checkbox asks for. With viewportScope supplied it is how the application is asked to change the value. With none it observes.
onSelect(row: SearchRow) => void
Overrides what picking a result does.
Unset, the control moves the camera onto the result and drops a pin. Set, it does neither and the handler decides: the assembled studio routes a pick through its own mutation surface this way while rendering this exact list.
onSearchSearchFetch
Overrides how a round reaches the API. Unset, it routes the map's own search.
onError(error: Error) => void
Called once for each branch whose request failed, with the failure.
Always an Error, as every element's onError is: an onSearch that rejects with any other value is reported as a MountayaElementsRejectionError holding that value as its cause. It reports and replaces nothing: the list still shows the branch's error line and its retry.
StreetViewControl
onDragStart() => void
Overrides what a grab does. Unset, the map shows Street View coverage and the corridor.
Paired with onDragEnd, which is called on EVERY path that ends a drag: a release, a pointer cancel, a capture the browser took back, a zoom falling below the threshold with the handle still held, and the control leaving the page mid-drag. An override that shows something has to be told to take it down again by every one of them.
This is also the pair that makes the handle live with no map in context, where every other control here is made live by whichever single handler replaces its default. The asymmetry is the drop: unprojecting a screen point into a coordinate is the map's own measurement, so a mapless handle can be dragged and can tell an application about the drag, but the drop itself resolves to nothing. Presentational Street View is therefore the drag overrides, and onDrop/onOpen never fire without a canvas to aim at.
onDragEnd() => void
Overrides what the end of a drag does, on the terms {@link onDragStart} states.
onUnavailable(reason: StreetViewMiss) => void
Called when a drop is refused, for an application raising its own message. Only the latest drop is answered: a check a later drop replaced reports nothing, and neither does one that answers after the control was disabled or unmounted.
onError(error: Error) => void
Called when a drop's coverage check failed rather than found no imagery: the optional peer @googlemaps/js-api-loader is not installed, Google's own library failed to load, or Google failed the request (a key it does not accept, a quota spent, the network). The drop is refused as unavailable all the same, since nothing can be opened.
A reader cannot tell this from a place with no imagery, so it is the developer's signal. Without it, a missing peer is written once to the console of a development build, and a failed load or a failed request is reported nowhere.
onDrop(lngLat: [number, number]) => boolean
onOpenundefined
LayersPanel
onLockedClick(slug: string) => void
Called when a locked entry is pressed, for an application's own notice.
PoiPanel
onToggleGroup(id: string, visible: boolean) => void
Overrides what a group's toggle does, on the terms {@link onToggle} states.
onToggleAll(visible: boolean) => void
Overrides what the master row does, on the terms {@link onToggle} states.
onToggle(key: string, visible: boolean) => void
Overrides what a toggle does.
Left unset, the panel drives the map. Set, it becomes presentational and the handler decides: the same seam every control here offers.
A write the handler makes to the map shows as the map reports it, whether the handler makes it before it returns or after.
PreferencesPanel
onPreferencesChange(next: UnitFormatOptions) => void
Called with the whole preference set the press is asking for, not with the one field.
The same name MapControls takes, because it is the same value travelling one level further: a panel that spelled it onChange would leave the two surfaces reporting the same thing under two words.
ControlButton
onClick() => void
OptionRow
onSelect() => void