This component is the layout container for the disruption map, the level 3 navigation and the future ATLAS.
It provides two slots: one unnamed slot for the sidebar content, and one named map for the map.
<sbb-map-container>
<div>Content</div>
<div slot="map">Here comes the map.</div>
</sbb-map-container>
On mobile, the map is sticky above the sidebar, and the sidebar content is scrolling over the map.
On desktop, the sidebar and the map are shown in a two column layout side by side.
| Name | Attribute | Privacy | Type | Default | Description |
|---|---|---|---|---|---|
hideScrollUpButton | hide-scroll-up-button | public | boolean | false | Flag to show/hide the scroll up button inside the sidebar on mobile. |
| Name | Default | Description |
|---|---|---|
--sbb-map-container-margin-start | var(--sbb-header-height) | The component comes along with a height calculation that subtracts the height of the header. For specific use cases, this variable can be used to modify the preset height. |
--sbb-map-container-mobile-sticky-block-start | 0 | If e.g. a header with a fixed height is placed before the map-container, the map should be sticky respecting this offset from the document's top. Only applied on mobile views. Most commonly it can be set to var(--sbb-header-height). |
--sbb-map-container-sidebar-width | zero-large:400px;ultra:480px | Can be used to modify the width of the left sidebar. |
| Name | Description |
|---|---|
| Use the unnamed slot to add content to the sidebar. | |
map | Used for slotting the map. |