Map
Diese Seite zeigt nur das grundlegende Layout des Kartenmoduls. Die eigentliche Kartendarstellung und das Behaviour wird hier aufgrund von unterschiedlichsten Einbindungsmöglichkeiten nicht dargestellt und obliegt der jeweiligen Anwendung.
Im Rahmen der Barrierefreiheit wird eine alternative Liste mit den angezeigten Adressen unter der Karte empfohlen. Ein Link zum Überspringen der Karte für Tastaturbenutzer wird erst bei Tabfocus sichtbar.
This page only shows the basic layout of the map module. The map itself and its behaviour is not shown here because of a wide variety of possible ways of including a map and behooves to the respective application.
For accessibility reasons it is recommended to display an alternative list of addresses below the map. A link to skip the map gets visible only on tabfocus for keyboard user.
.modul-geomap
<div class="modul-geomap" id="map_geomapId__8118">
<h2 class="title">Karte ohne Adressenliste</h2>
<div class="geomap-main">
<p class="skipmap">
<span class="aural">Es folgt eine Kartendarstellung.</span>
<a href="#geomapId__8118_skipmap">Karte überspringen</a>
</p>
<div id="geomapId__8118_container" class="geomap-container">
<div class="geomap-map interactive-map" style="height:400px;" id="geomapId__8118" data-map-zoom="14" data-marker-long="13.42193" data-marker-lat="52.52627" data-allow-fullscreen="true">
<!-- Map container with dummy image for layout demonstration only -->
<img alt="" src="../../dummy/map/dummy_map1.jpg" style="width: auto;min-height: 100%;min-width: 100%;height: auto;max-width: none;max-height: none;">
</div>
<!-- PLACE MAP MARKER HERE -->
<!-- Example:
<div class="geomap-marker" id="geomapId__8118_1" data-marker-long="13.40401" data-marker-lat="52.50772" data-marker-color="#253276" style="display:none;">
</div>
-->
<a href="#" target="_blank" class="extern" title="Link öffnet in neuem Fenster">Zum Stadtplan von Berlin.de</a>
</div>
</div>
<div id="geomapId__8118_skipmap">
<!-- Optionale Adressenliste nicht vorhanden -->
<p class="aural" >Ende der Karte.</p>
</div>
</div>
<div class="modul-geomap" id="map_geomapId__2803">
<h2 class="title">Karte mit Adressenliste</h2>
<div class="geomap-main">
<p class="skipmap">
<span class="aural">Es folgt eine Kartendarstellung.</span>
<a href="#geomapId__2803_skipmap">Zur Liste mit den enthaltenen Adressen unter der Karte springen</a>
</p>
<div id="geomapId__2803_container" class="geomap-container">
<div class="geomap-map interactive-map" style="height:400px;" id="geomapId__2803" data-map-zoom="14" data-marker-long="13.42193" data-marker-lat="52.52627" data-allow-fullscreen="true">
<!-- Map container with dummy image for layout demonstration only -->
<img alt="" src="../../dummy/map/dummy_map1.jpg" style="width: auto;min-height: 100%;min-width: 100%;height: auto;max-width: none;max-height: none;">
</div>
<!-- PLACE MAP MARKER HERE -->
<!-- Example:
<div class="geomap-marker" id="geomapId__2803_1" data-marker-long="13.40401" data-marker-lat="52.50772" data-marker-color="#253276" style="display:none;">
</div>
-->
<a href="#" target="_blank" class="extern" title="Link öffnet in neuem Fenster">Zum Stadtplan von Berlin.de</a>
</div>
</div>
<div class="mapmarker" id="geomapId__2803_skipmap">
<!-- Optionale Adressenliste -->
<h3 class="title">Orte in dieser Karte</h3>
<ul class="list--ruler">
<li>
<a href="#">Beispielort eins</a>
<div class="geomap__addressblock">
<p class="address">Musterstraße 1, 12345 Berlin</p>
<a class="showonmap link--mapmarker" href="#geomapId__2803">In Karte anzeigen</a>
</div>
</li>
<li>
<a href="#">Beispielort zwei</a>
<div class="geomap__addressblock">
<p class="address">Musterstraße 1, 12345 Berlin</p>
<a class="showonmap link--mapmarker" href="#geomapId__2803">In Karte anzeigen</a>
</div>
</li>
</ul>
</div>
</div>
Karte mit Adressenliste als Accordion
<div class="modul-geomap" id="map_geomapId__3313">
<h2 class="title">Karte mit Adressenliste als Accordion</h2>
<div class="geomap-main">
<p class="skipmap">
<span class="aural">Es folgt eine Kartendarstellung.</span>
<a href="#geomapId__3313_skipmap">Zur Liste mit den enthaltenen Adressen unter der Karte springen</a>
</p>
<div id="geomapId__3313_container" class="geomap-container">
<div class="geomap-map interactive-map" style="height:400px;" id="geomapId__3313" data-map-zoom="14" data-marker-long="13.42193" data-marker-lat="52.52627" data-allow-fullscreen="true">
<!-- Map container with dummy image for layout demonstration only -->
<img alt="" src="../../dummy/map/dummy_map1.jpg" style="width: auto;min-height: 100%;min-width: 100%;height: auto;max-width: none;max-height: none;">
</div>
<!-- PLACE MAP MARKER HERE -->
<!-- Example:
<div class="geomap-marker" id="geomapId__3313_1" data-marker-long="13.40401" data-marker-lat="52.50772" data-marker-color="#253276" style="display:none;">
</div>
-->
<a href="#" target="_blank" class="extern" title="Link öffnet in neuem Fenster">Zum Stadtplan von Berlin.de</a>
</div>
</div>
<div class="mapmarker" id="geomapId__3313_skipmap">
<!-- Optionale Adressenliste im Accordion -->
<div class="js-accordion" id="geomapId__3313_accordion_1">
<h3 class="js-accordion__heading">
<strong class="js-accordion__trigger">Orte in dieser Karte</strong>
</h3>
<div class="js-accordion__panel">
<ul class="list--ruler">
<li>
<a href="#">Beispielort eins</a>
<div class="geomap__addressblock">
<p class="address">Musterstraße 1, 12345 Berlin</p>
<a class="showonmap link--mapmarker" href="#geomapId__3313">In Karte anzeigen</a>
</div>
</li>
<li>
<a href="#" class=" extern" target="_blank" title="Link öffnet in neuem Fenster">Beispielort zwei</a>
<div class="geomap__addressblock">
<p class="address">Musterstraße 1, 12345 Berlin</p>
<a class="showonmap link--mapmarker" href="#geomapId__3313">In Karte anzeigen</a>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
Karte mit Adressenliste als Teaser
Orte in dieser Karte
-
Teaser
Philosophy is considered a Link science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. This is a question that turns into a burning problem among the scientists and linguists all over the world. Can philosophy be a science? What does philosophy operate with? It operates with categories, which can be as wide and as interchangeable as one can only imagine. Ordinary science operates with definitions, which are quite limited in their field of research.
Mehr
-
Teaser
Philosophy is considered a Link science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. This is a question that turns into a burning problem among the scientists and linguists all over the world. Can philosophy be a science? What does philosophy operate with? It operates with categories, which can be as wide and as interchangeable as one can only imagine. Ordinary science operates with definitions, which are quite limited in their field of research.
Mehr
<div class="modul-geomap" id="map_geomapId__8824">
<h2 class="title">Karte mit Adressenliste als Teaser</h2>
<div class="geomap-main">
<p class="skipmap">
<span class="aural">Es folgt eine Kartendarstellung.</span>
<a href="#geomapId__8824_skipmap">Zur Liste mit den enthaltenen Adressen unter der Karte springen</a>
</p>
<div id="geomapId__8824_container" class="geomap-container">
<div class="geomap-map interactive-map" style="height:400px;" id="geomapId__8824" data-map-zoom="14" data-marker-long="13.42193" data-marker-lat="52.52627" data-allow-fullscreen="true">
<!-- Map container with dummy image for layout demonstration only -->
<img alt="" src="../../dummy/map/dummy_map1.jpg" style="width: auto;min-height: 100%;min-width: 100%;height: auto;max-width: none;max-height: none;">
</div>
<!-- PLACE MAP MARKER HERE -->
<!-- Example:
<div class="geomap-marker" id="geomapId__8824_1" data-marker-long="13.40401" data-marker-lat="52.50772" data-marker-color="#253276" style="display:none;">
</div>
-->
<a href="#" target="_blank" class="extern" title="Link öffnet in neuem Fenster">Zum Stadtplan von Berlin.de</a>
</div>
</div>
<div class="mapmarker" id="geomapId__8824_skipmap">
<!-- Optionale Adressenliste mit Teasern -->
<h2 class="title">Orte in dieser Karte</h2>
<ul class="list--ruler geomap-marker-teaser" id="geomapId__8824_markerteaser">
<li>
<div class="geomap__addressblock">
<p class="address">Musterstraße 1, 12345 Berlin</p>
<a class="showonmap link--mapmarker" href="#geomapId__8824">In Karte anzeigen</a>
</div>
<article class="modul-teaser" data-add-clickable-area="smart">
<div class="image">
<div class="image__image">
<img src="../../dummy/placeholder_4x3.jpg" alt="Alternative Bildbeschreibung" >
</div>
<p class="image__copyright">
@copyright
</p>
</div>
<h3 class="title">Teaser</h3>
<div class="inner">
<p class="text">
Philosophy is considered a <a href="#">Link</a> science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. This is a question that turns into a burning problem among the scientists and linguists all over the world. Can philosophy be a science? What does philosophy operate with? It operates with categories, which can be as wide and as interchangeable as one can only imagine. Ordinary science operates with definitions, which are quite limited in their field of research.
<a href="#random5720" class="more" data-mainlink="true" aria-label="Teaser" title="Teaser">Mehr</a>
</p>
</div>
</article>
</li>
<li>
<div class="geomap__addressblock">
<p class="address">Musterstraße 1, 12345 Berlin</p>
<a class="showonmap link--mapmarker" href="#geomapId__8824">In Karte anzeigen</a>
</div>
<article class="modul-teaser" data-add-clickable-area="smart">
<div class="image">
<div class="image__image">
<img src="../../dummy/placeholder_4x3.jpg" alt="Alternative Bildbeschreibung" >
</div>
<p class="image__copyright">
@copyright
</p>
</div>
<h3 class="title">Teaser</h3>
<div class="inner">
<p class="text">
Philosophy is considered a <a href="#">Link</a> science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. This is a question that turns into a burning problem among the scientists and linguists all over the world. Can philosophy be a science? What does philosophy operate with? It operates with categories, which can be as wide and as interchangeable as one can only imagine. Ordinary science operates with definitions, which are quite limited in their field of research.
<a href="#random2478" class="more" data-mainlink="true" aria-label="Teaser" title="Teaser">Mehr</a>
</p>
</div>
</article>
</li>
</ul>
</div>
</div>
Layermenu Example
Das Menü zum ein- und ausblenden von Kartenebenen kann auf der Karte als Overlay angezeigt werden. Das Behavior und der Inhalt kommen von der jeweiligen Kartenapplikation. Im folgenden wird das grundsätzliche Layout in zwei Zuständen dargestellt. Für die Barrierefreiheit müssen alle Aria- und Titelattribute je nach Zustand angepasst werden.
Layermenu Visible
.layer-menu-control
<div class="layer-menu-control" aria-label="Für dieses Gebiet verfügbare Kartenschichten" role="region">
<button aria-expanded="true" aria-controls="layermenu1" class="layer-menu-control_toggle justify--right" aria-label="Schichtenauswahl ausblenden" title="Schichtenauswahl ausblenden">
<span class="icon" aria-hidden="true">❯</true>
</button>
<div class="layer-menu-inner" id="layermenu1">
<ul class="list--clean list--ruler" aria-label="Liste der Kartenschichten">
<li>
<button class="layer-menu-control_item layer-menu-control_item--active" title="ausblenden" aria-label="Diese Schicht in der Karte ausblenden">
<span class="text">Layer 1 aktiv</span>
<span class="item" aria-hidden="true" style="background:#2020ff"></span>
</button>
</li>
<li>
<button class="layer-menu-control_item layer-menu-control_item--active" title="ausblenden" aria-label="Diese Schicht in der Karte ausblenden">
<span class="text">Layer 2 aktiv</span>
<span class="item" aria-hidden="true" style="background:#2f4f4f"></span>
</button>
</li>
<li>
<button class="layer-menu-control_item" title="einblenden" aria-label="Diese Schicht in der Karte einblenden">
<span class="text">Layer 3 inaktiv</span>
<span class="item" aria-hidden="true" style="background:#106410;"></span>
</button>
</li>
<li>
<button class="layer-menu-control_item layer-menu-control_item--active" title="ausblenden" aria-label="Diese Schicht in der Karte ausblenden">
<span class="text">Layer 4 aktiv</span>
<span class="item" aria-hidden="true" style="background:#8b4513"></span>
</button>
</li>
<li>
<button class="layer-menu-control_item" title="einblenden" aria-label="Diese Schicht in der Karte einblenden">
<span class="text">Layer 5 ohne Farbe inaktiv</span>
</button>
</li>
<li>
<button class="layer-menu-control_item layer-menu-control_item--active" title="ausblenden" aria-label="Diese Schicht in der Karte ausblenden">
<span class="text">Layer 6 ohne Farbe aktiv</span>
</button>
</li>
</ul>
</div>
</div>
Layermenu Collapsed
.layer-menu-control.layer-menu-control--collapsed
<div class="layer-menu-control layer-menu-control--collapsed" aria-label="Für dieses Gebiet verfügbare Kartenschichten" role="region">
<button aria-expanded="false" aria-controls="layermenu1" class="layer-menu-control_toggle justify--right" aria-label="Schichtenauswahl einblenden" title="Schichtenauswahl einblenden">
<span class="icon" aria-hidden="true">❮</true>
</button>
<div class="layer-menu-inner" id="layermenu1">
<ul class="list--clean list--ruler" aria-label="Liste der Kartenschichten">
<li>
<button class="layer-menu-control_item layer-menu-control_item--active" title="ausblenden" aria-label="Diese Schicht in der Karte ausblenden">
<span class="text">Layer 1 aktiv</span>
<span class="item" aria-hidden="true" style="background:#2020ff"></span>
</button>
</li>
<li>
<button class="layer-menu-control_item layer-menu-control_item--active" title="ausblenden" aria-label="Diese Schicht in der Karte ausblenden">
<span class="text">Layer 2 aktiv</span>
<span class="item" aria-hidden="true" style="background:#2f4f4f"></span>
</button>
</li>
<li>
<button class="layer-menu-control_item" title="einblenden" aria-label="Diese Schicht in der Karte einblenden">
<span class="text">Layer 3 inaktiv</span>
<span class="item" aria-hidden="true" style="background:#106410;"></span>
</button>
</li>
<li>
<button class="layer-menu-control_item layer-menu-control_item--active" title="ausblenden" aria-label="Diese Schicht in der Karte ausblenden">
<span class="text">Layer 4 aktiv</span>
<span class="item" aria-hidden="true" style="background:#8b4513"></span>
</button>
</li>
<li>
<button class="layer-menu-control_item" title="einblenden" aria-label="Diese Schicht in der Karte einblenden">
<span class="text">Layer 5 ohne Farbe inaktiv</span>
</button>
</li>
<li>
<button class="layer-menu-control_item layer-menu-control_item--active" title="ausblenden" aria-label="Diese Schicht in der Karte ausblenden">
<span class="text">Layer 6 ohne Farbe aktiv</span>
</button>
</li>
</ul>
</div>
</div>
Fullscreen Map Example
Desktop view
Phone view
