Map-Container. Overview

Preview.

Inhalt
Karte

What does the component do?

The map container is a layout for pages with a map. It divides the page into a sidebar for content and an area for the map. On large screens both are shown side by side. On small screens the map stays at the top and the content scrolls over it.

When should the component be used?

  • For pages that show a map together with content or navigation, e.g. a disruption map.
 Usage

Rules.

  • The map container fills the page below the header. Use only one map container per page.
  • The sidebar contains the content that belongs to the map, e.g. lists, filters or details about a location.
  • Content and map should relate to each other: what is selected in the sidebar should be recognisable on the map.

Specification.

Open in Figma
Examples Map Container.
Try it out on Storybook Show HTML
Copy HTML to clipboard. Implementation

Web Components.

The web component is in the package @sbb-esta/lyne-elements.

Storybook with live examples Source code on GitHub

Documentation.

This component is the layout container for the disruption map, the level 3 navigation and the future ATLAS.

Slots.

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.

Angular.

This component is also available for Angular in the package @sbb-esta/lyne-angular.

Angular overview Angular API Angular examples API

class: SbbMapContainerElement, sbb-map-container.

Properties.

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.

CSS Properties.

Name Default Description
--sbb-map-container-margin-start var(--sbb-header-vertical-spacing) 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-vertical-spacing).
--sbb-map-container-sidebar-width zero-large:400px;ultra:480px Can be used to modify the width of the left sidebar.

Slots.

Name Description
Use the unnamed slot to add content to the sidebar.
map Used for slotting the map.