Map

Varianten

Map

Vorschau

Das Wiener Rathaus am Rathausplatz im 1. Wiener Gemeindebezirk, Innere Stadt, bis 1960 zur Unterscheidung vom Alten Rathaus Neues Rathaus genannt, wurde von 1872 bis 1883 nach Entwürfen des Architekten Friedrich von Schmidt im Stil der Neogotik errichtet.

Das Café Jelinek liegt im 6. Wiener Gemeindebezirk Mariahilf in der Otto-Bauer-Gasse und ist seit 2013 Teil des immateriellen UNESCO Kulturerbes "Wiener Kaffeehaus".

Code

<wm-map-alt
  id="mapview"
  data-demo-pattern="wm-map-preview">
  <wm-mapmarker lat="48.2110270434633" lng="16.35649860253831" label="Rathaus">
    <wm-stack vertical gap="s">
      <p>Das Wiener Rathaus am Rathausplatz im 1. Wiener Gemeindebezirk, Innere Stadt, bis 1960 zur Unterscheidung vom Alten Rathaus Neues Rathaus genannt, wurde von 1872 bis 1883 nach Entwürfen des Architekten Friedrich von Schmidt im Stil der Neogotik errichtet.</p>
      <wm-button><button>Details</button></wm-button>
    </wm-stack>
  </wm-mapmarker>
  <wm-mapmarker lat="48.1951517" lng="16.3494413" label="Café Jelinek" pin="essentrinken">
    <p>Das Café Jelinek liegt im 6. Wiener Gemeindebezirk Mariahilf in der Otto-Bauer-Gasse und ist seit 2013 Teil des
      immateriellen UNESCO Kulturerbes "Wiener Kaffeehaus".</p>
  </wm-mapmarker>
</wm-map-alt>

API

Abhängigkeiten

HTML

<script src="https://assets.wien.gv.at/theme/latest/js/components/Map/Map.js" type="module"></script>
<script src="https://assets.wien.gv.at/theme/latest/js/components/Button/Button.js" type="module"></script>
<script src="https://assets.wien.gv.at/theme/latest/js/components/Input/Input.js" type="module"></script>
<script src="https://assets.wien.gv.at/theme/latest/js/components/Icon/Icon.js" type="module"></script>

JavaScript

import { Map } from './wienermelange/assets/js/components/Map/Map.js';
    import { Button } from './wienermelange/assets/js/components/Button/Button.js';
    import { Input } from './wienermelange/assets/js/components/Input/Input.js';
    import { Icon } from './wienermelange/assets/js/components/Icon/Icon.js';

Eigenschaften

Eigenschaften
Eigenschaft	Beschreibung	Werte	Default
`center`	Mittelpunkt der Karte	`String`	`"16.35649860253831, 48.2110270434633"`
`id`	Einzigartige ID	`String`	`""`
`controls`	Steuerelemente einfügen	`Boolean`	`false`
`cluster`	Marker clustern	`Boolean`	`false`
`zoom`	Zoomlevel der Karte	`Number`	`16`

Slots

Name	Beschreibung
`default`	Mapmarker

Methoden

Eigenschaft	Optionen	Argumente
`resetBounds`	Kartenausschnitt aktualisieren	/
`setCenter`	Karte zentrieren	Longitude (`String`) Latitude (`String`)
`deleteAll`	Alle Marker löschen	/
`addMarker`	Marker hinzufügen	Einzigartige id (`String`) Objekt, dass alle Daten enthält (text, lng, lat, address, value) (`Object`) Kurzes Label für den Marker (`String`) Kann der Pin bewegt werden? (`Boolean`) HTML-Content (`String`) Update options for draggable pins (`Boolean`) URL to custom pin (`Boolean`)
`reRender`	Mapinhalte und Abgrenzungen neu berechnen	/

Events

Event	Beschreibung	Rückgabewert
`wm-map-ready`	Map ist bereit
`wm-map-marker-removed`	Marker wurde entfernt
`wm-map-marker-submit`	“Übernehmen"-Button in marker wurde geklickt
`wm-map-marker-added`	Marker wurde hinzugefügt

CSS API

Property	Beschreibung
`--map-height`	Höhe
`--map-ratio`	Seitenverhältnis
`--map-defaultPinAlt`	Pin

Kontakt

Haben Sie noch Fragen, Feedback oder brauchen Sie ein Element, das die Pattern Library noch nicht bietet?

handbuch@ma53.wien.gv.at