# Map-Container

Komponente des SBB Design Systems Lyne.

- Paket: `@sbb-esta/lyne-elements` (Angular: `@sbb-esta/lyne-angular`)
- Aufbau: ein Element
- Kategorien: Container
- Status: Gestaltungsrichtlinien vollständig

## Links

- Seite auf digital.sbb.ch: https://digital.sbb.ch/de/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

## Elemente

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

## Übersicht

### Was macht die Komponente?
Der Map-Container ist ein Layout für Seiten mit einer Karte. Er teilt die Seite in eine Seitenleiste für Inhalte und eine Fläche für die Karte. Auf grossen Bildschirmen stehen beide nebeneinander. Auf kleinen Bildschirmen bleibt die Karte oben stehen und die Inhalte scrollen darüber.

### Wann soll die Komponente eingesetzt werden?
* Für Seiten, auf denen eine Karte zusammen mit Inhalten oder einer Navigation gezeigt wird, z.B. eine Störungskarte.

### Regeln.
* Der Map-Container füllt die Seite unterhalb des [Header](https://digital.sbb.ch/de/design-system/lyne/components/header/)s aus. Pro Seite wird nur ein Map-Container eingesetzt.
* In der Seitenleiste stehen die Inhalte, die zur Karte gehören, z.B. Listen, Filter oder Details zu einem Ort.
* Inhalte und Karte sollen sich aufeinander beziehen: Was in der Seitenleiste ausgewählt wird, soll auf der Karte erkennbar sein.

## Implementation (Web Components, Englisch)

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, Englisch)

Vollständige API-Tabellen (Attribute, Events, Slots, CSS-Eigenschaften): https://digital.sbb.ch/de/design-system/lyne/components/map-container/api.md