# Map-Container

Component of the SBB design system Lyne.

- Package: `@sbb-esta/lyne-elements` (Angular: `@sbb-esta/lyne-angular`)
- Structure: one element
- Categories: Container
- Status: Design guidelines complete

## Links

- Page on digital.sbb.ch: https://digital.sbb.ch/en/design-system/lyne/components/map-container/
- Storybook: https://lyne-elements.app.sbb.ch/?path=/docs/elements-map-container--docs
- Angular (`@sbb-esta/lyne-angular`): https://lyne-angular.app.sbb.ch/angular/components/map-container/overview (API: https://lyne-angular.app.sbb.ch/angular/components/map-container/api)
- Figma: https://www.figma.com/design/mWknI2rC5DJmOgRO61WKai/Lyne-Components?node-id=21638-15401
- GitHub: https://github.com/sbb-design-systems/lyne-components/tree/v5.12.0/src/elements/map-container

## Elements

- `sbb-map-container`: It can be used as a container for maps.

## Overview

### 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.

### Rules.
* The map container fills the page below the [header](https://digital.sbb.ch/en/design-system/lyne/components/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.

## Implementation (web components)

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.

```html
<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.

## API (web components)

Full API tables (attributes, events, slots, CSS properties): https://digital.sbb.ch/en/design-system/lyne/components/map-container/api.md