# Map-Marker

This page is not available in the requested language. Available languages: [Deutsch](https://digital.sbb.ch/de/design-system/maps/components/map-marker) 

# Map-Marker.

## Übersicht

### Verwendung

Mittels Map Marker werden Points of Interest auf der Karte markiert. Durch Klick auf den Map Marker können zusätzliche Informationen aufgerufen werden - falls vorhanden. Mehrere Marker können mittels Cluster zusammengefasst werden, welche sich durch Klick oder Zoom schrittweise auflösen.

### Regeln

- Map Marker können überlappend dargestellt werden, müssen jedoch anwählbar sein bei grossen Zoomstufen. Alternativ können mehrere Map Marker zu Clustern zusammengefasst werden.
- Wird auf einen Map Marker geklickt, zentriert sich der Kartenausschnitt auf den Map Marker.

## Varianten

### Zustände

Die Komponente hat folgende Zustände:

- Default
- Hover
- Active
- Cummulated

#### Varianten

##### Neutral

![Darstellung des Primary Button](https://digital.sbb.ch/assets/images/maps/maps-map-marker-neutral-default-light.webp "Darstellung des Primary Button")

![Darstellung des Primary Button](https://digital.sbb.ch/assets/images/maps/maps-map-marker-neutral-default-dark.webp "Darstellung des Primary Button")

##### Icon

###### Color default

![Darstellung des Primary Button](https://digital.sbb.ch/assets/images/maps/maps-map-marker-icon-default-light.webp "Darstellung des Primary Button")

![Darstellung des Primary Button](https://digital.sbb.ch/assets/images/maps/maps-map-marker-icon-default-dark.webp "Darstellung des Primary Button")

###### Color blue

![Darstellung des Primary Button](https://digital.sbb.ch/assets/images/maps/maps-map-marker-icon-blue-light.webp "Darstellung des Primary Button")

![Darstellung des Primary Button](https://digital.sbb.ch/assets/images/maps/maps-map-marker-icon-blue-dark.webp "Darstellung des Primary Button")

##### Picto

###### Color default

![Darstellung des Primary Button](https://digital.sbb.ch/assets/images/maps/maps-map-marker-picto-default-light.webp "Darstellung des Primary Button")

![Darstellung des Primary Button](https://digital.sbb.ch/assets/images/maps/maps-map-marker-picto-default-dark.webp "Darstellung des Primary Button")

###### Color blue

![Darstellung des Primary Button](https://digital.sbb.ch/assets/images/maps/maps-map-marker-picto-blue-light.webp "Darstellung des Primary Button")

![Darstellung des Primary Button](https://digital.sbb.ch/assets/images/maps/maps-map-marker-picto-blue-dark.webp "Darstellung des Primary Button")

##### Alert

![Darstellung des Primary Button](https://digital.sbb.ch/assets/images/maps/maps-map-marker-alert-light.webp "Darstellung des Primary Button")

![Darstellung des Primary Button](https://digital.sbb.ch/assets/images/maps/maps-map-marker-alert-dark.webp "Darstellung des Primary Button")

##### POI

![Darstellung des Primary Button](https://digital.sbb.ch/assets/images/maps/maps-map-marker-poi-light.webp "Darstellung des Primary Button")

![Darstellung des Primary Button](https://digital.sbb.ch/assets/images/maps/maps-map-marker-poi-dark.webp "Darstellung des Primary Button")

---

Source: https://digital.sbb.ch/en/design-system/maps/components/map-marker/