MapView — Loidolt Theme

import { MapView } from '@loidolt/theme-maps';

Example

Centre 45.5231, -122.6765 · zoom 12.0

Notes

The default basemap is drawn in the loidolt palette from OpenFreeMap’s free, keyless OpenMapTiles tiles; basemap="blank" draws land colour only and makes no network requests. Pass tiles to use another OpenMapTiles-schema provider, or mapStyle for a style of your own.
The canvas is named by label and described by description plus a sentence on the keyboard controls. Arrow keys pan and + and − zoom when it has focus; after a keyboard move, where the map landed is announced.
A theme change repaints the basemap in place — no reload — and data layers with a paint function follow it too.
center and zoom are bindable both ways. MapLibre loads in the browser only; the server renders the frame and description, and a browser without WebGL gets a message instead of a broken canvas.

Props

Generated from the component source, so it cannot drift from the implementation.

MapView props
Prop	Type	Default	Notes
`label` required	`string`	`—`	Names the map for assistive tech — say what it shows, e.g. "Delivery stops".
`announceMoves`	`boolean`	`true`	Announce where the map lands after a keyboard pan or zoom — the non-visual answer to "where am I now?".
`attribution`	`string`	`OPENFREEMAP_ATTRIBUTION`	Attribution for `tiles`. Required by most tile providers — OpenFreeMap's is the default.
`basemap` bindable	`string`	`'default'`	`default` draws the loidolt basemap from OpenMapTiles-schema tiles (OpenFreeMap's unless `tiles` says otherwise); `blank` draws land colour only, with no network requests. Bindable, so a `BasemapSwitcher` can drive it.
`bearing`	`number`	`0`
`bounds`	`LngLatBounds`	`—`	Fit the view to this box on load and whenever it changes. Wins over `center`/`zoom`.
`boundsPadding`	`number`	`32`	Space kept around `bounds`, in pixels.
`center` bindable	`LngLat`	`[0, 20]`	`[longitude, latitude]`. Bindable: follows the map as it moves.
`children`	`Snippet`	`—`	Sources, layers, markers and controls. Rendered once the style has loaded.
`class`	`string`	`—`
`controlPosition`	`Corner`	`'top-right'`	Corner for the built-in controls.
`cooperativeGestures`	`boolean`	`false`	Require two fingers or Ctrl + wheel to move the map, so it cannot trap page scrolling.
`description`	`string`	`—`	What the map shows, read after the label. The keyboard controls are appended, so a screen-reader user knows the map can be moved.
`errorTitle`	`string`	`'Map unavailable'`
`fullscreenControl`	`boolean`	`false`
`geolocateControl`	`boolean`	`false`
`glyphs`	`string`	`OPENFREEMAP_GLYPHS`	Glyph URL template for labels.
`height`	`number \| string`	`400`	Map height: pixels, or any CSS length.
`interactive`	`boolean`	`true`	Pan and zoom by pointer and keyboard.
`map` bindable	`MapLibreMap \| null`	`null`	The live MapLibre map. Bindable; `null` until created.
`mapStyle`	`string \| StyleSpecification`	`—`	A style URL or document of your own. Overrides `basemap`, and is not recoloured.
`maxBounds`	`LngLatBounds`	`—`	Keep the view inside this box.
`maxZoom`	`number`	`—`
`minZoom`	`number`	`—`
`navigationControl`	`boolean`	`true`
`onClick`	`(event: MapClickEvent) => void`	`—`
`onError`	`(error: Error) => void`	`—`
`onLoad`	`(map: MapLibreMap) => void`	`—`
`onMoveEnd`	`(view: MapViewState) => void`	`—`
`pitch`	`number`	`0`
`ref` bindable	`HTMLDivElement \| null`	`null`
`scaleControl`	`boolean`	`false`
`scaleUnit`	`'metric' \| 'imperial'`	`'metric'`
`tiles`	`string`	`OPENFREEMAP_TILES`	OpenMapTiles-schema tiles for the default basemap: a TileJSON URL or `{z}/{x}/{y}` template.
`unavailableText`	`string`	`'The map could not be shown in this browser.'`	Shown when the map cannot be drawn at all (no WebGL, or MapLibre failed to load).
`zoom` bindable	`number`	`1.5`	Bindable: follows the map as it zooms.

Plus the attributes of Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onclick' | 'onerror'>, forwarded to the root element.