Get started

Show a map with controls styling

How the elements on Show a map with controls are painted. Every element takes className and style on the same terms, alongside the icons and strings that customizing the elements explains in full.

MapView

className

string

A class for the container element.

A container given a class is sized by that class: the fill described under style is left out, since an inline declaration outranks every rule a class carries. A string that names no class, empty or blank, is read as none, and the fill stays.

style

ElementStyle

CSS for the container element.

style is the DOM's word here, not MapLibre's: the map style goes in mapStyle. The two share a name in their own worlds and cannot share one here, and React's meaning wins because this is a React component.

MapControls

className

string

style

ElementStyle

MapControls.Compass

className

string

style

ElementStyle

MapControls.Directions

className

string

style

ElementStyle

MapControls.Download

className

string

style

ElementStyle

MapControls.Geolocate

className

string

style

ElementStyle

MapControls.Panel

className

string

style

ElementStyle

className

string

style

ElementStyle

MapControls.StreetView

className

string

style

ElementStyle

MapControls.Zoom

className

string

style

ElementStyle

ZoomControl

className

string

style

ElementStyle

CompassControl

className

string

style

ElementStyle

CompassRose

className

string

style

ElementStyle

GeolocateControl

className

string

style

ElementStyle

PanelControl

className

string

style

ElementStyle

DirectionsControl

className

string

style

ElementStyle

DownloadControl

className

string

style

ElementStyle

SearchControl

className

string

style

ElementStyle

StreetViewControl

className

string

style

ElementStyle

LayersPanel

className

string

style

ElementStyle

PoiPanel

className

string

style

ElementStyle

PreferencesPanel

className

string

style

ElementStyle

ControlButton

className

string

style

ElementStyle

ControlGroup

className

string

style

ElementStyle

ControlTooltip

className

string

style

ElementStyle

Glyph

className

string

Restated rather than inherited, and style below with it.

Both arrive through the <svg> props this extends, so neither line changes the type. They are written out because these two are the placement contract every published element owes a host (apiShape.test.tsx holds every one of them to it), and a reader should not have to resolve an Omit to find out whether a glyph can be positioned.

style

ElementStyle

Widened past CSSProperties deliberately: ElementStyle admits the --mtya-* custom properties that ARE the theming seam, and the DOM typing does not.

Also accepts every standard <svg> attribute — a ref, event handlers, data-* and ARIA — which are forwarded to the rendered element.

OptionRow

className

string

style

ElementStyle