HelixOverviewDocsComponentsSandboxTheme builderCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
MapView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorA frame around somebody else's map.StableSince 0.100.0MediaUsageimport'@fusion.dev/helix/map'import'@fusion.dev/helix-headless/map'Preview
API ReferenceRoothelix-mapA frame around somebody else's map.
PropTypeDefaultDescriptioncontrolsstringWhich of the controls this frame draws, as a list of what to keep.controlsPlacement"top-start"|"top-end"|"bottom-start"|"bottom-end"Which corner the controls sit in.fullscreenLabelstring"Fill the screen"What the control that fills the screen is called.idleDelaynumber0How long the reader may be still before the chrome hides, in milliseconds.labelstring""Accessible name for the map, which is the one thing a consumer must write.panLabelstring"Pan {way}"What the controls are called, for a page not in English.panStepnumber0.25How far one press moves the map, as a fraction of what is on screen.zoomInLabelstring"Zoom in"What the zoom controls are called.zoomOutLabelstring"Zoom out"What the zoom control that goes the other way is called.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The map, which is the consumer's own.attributionWhoever the tiles belong to, which most licenses require you to say.footerChrome below the map, such as a legend or a scale.headerChrome above the map, such as a title or a search field.
EventTypeDescriptionhelix-map-panHelixMapPanEventThe reader asked the map to move. Answer it against your own map.helix-map-zoomHelixMapZoomEventThe reader asked the map to zoom, by a direction rather than to a level.
MethodTypeDescriptionpan(to: Way) => voidAsks for the map to move, which the consumer answers.toggleFullscreen() => voidFills the screen with the frame, or comes back.zoom(by: number) => voidAsks for the map to zoom, `1` in and `-1` out.
PartDescriptioncontrolsThe group the pan and zoom buttons sit in.fullscreenThe button that fills the screen.pan-downThe button that moves the map down.pan-endThe button that moves the map the way the text ends, which is right on an English page.pan-startThe button that moves the map the way the text starts, which is left on an English page.pan-upThe button that moves the map up.regionThe named region the map is slotted into.viewportThe box the map is drawn in.zoom-inThe button that zooms in.zoom-outThe button that zooms out.
CSS PropertyDescription--map-background-colorThe well behind the map, seen while tiles are on their way.--map-block-sizeHow tall the frame is. A length, since the map fills it.--map-border-colorColor of the frame's edge.--map-control-background-colorThe ground under the pan and zoom buttons.
Custom stateDescriptionfullscreenWhile the frame fills the screen.idleWhile the reader has been still long enough to hide the chrome.settledSet a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
Roothelix-headless-mapA frame around somebody else's map.
PropTypeDefaultDescriptioncontrolsstringWhich of the controls this frame draws, as a list of what to keep.controlsPlacement"top-start"|"top-end"|"bottom-start"|"bottom-end"Which corner the controls sit in.fullscreenLabelstring"Fill the screen"What the control that fills the screen is called.idleDelaynumber0How long the reader may be still before the chrome hides, in milliseconds.labelstring""Accessible name for the map, which is the one thing a consumer must write.panLabelstring"Pan {way}"What the controls are called, for a page not in English.panStepnumber0.25How far one press moves the map, as a fraction of what is on screen.zoomInLabelstring"Zoom in"What the zoom controls are called.zoomOutLabelstring"Zoom out"What the zoom control that goes the other way is called.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The map, which is the consumer's own.attributionWhoever the tiles belong to, which most licenses require you to say.footerChrome below the map, such as a legend or a scale.headerChrome above the map, such as a title or a search field.
EventTypeDescriptionhelix-map-panHelixMapPanEventThe reader asked the map to move. Answer it against your own map.helix-map-zoomHelixMapZoomEventThe reader asked the map to zoom, by a direction rather than to a level.
MethodTypeDescriptionpan(to: Way) => voidAsks for the map to move, which the consumer answers.toggleFullscreen() => voidFills the screen with the frame, or comes back.zoom(by: number) => voidAsks for the map to zoom, `1` in and `-1` out.
PartDescriptioncontrolsThe group the pan and zoom buttons sit in.fullscreenThe button that fills the screen.pan-downThe button that moves the map down.pan-endThe button that moves the map the way the text ends, which is right on an English page.pan-startThe button that moves the map the way the text starts, which is left on an English page.pan-upThe button that moves the map up.regionThe named region the map is slotted into.viewportThe box the map is drawn in.zoom-inThe button that zooms in.zoom-outThe button that zooms out.
Custom stateDescriptionfullscreenWhile the frame fills the screen.idleWhile the reader has been still long enough to hide the chrome.settledSet a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
ExamplesNameDescriptionFramedA map the consumer brings, keeping the pan pad their own library does not draw and dropping the zoom it does.