Map

Über das Pattern

JavaScript

Anwendung

<div id="bezirksamt" class="wm-map">
	<p class="wm-u-dn wm-u-db--no-js wm-u-db--legacyjs">
		Dieses Pattern wird von diesem Browser nicht mehr unterstützt. Bitte folgen Sie diesem Link zum <a href="https://m.wien.gv.at/stadtplan/#base=karte">Wiener Stadtplan</a>.
	</p>
</div>

import { wmMap } from '/assets/dev/js/components/map.js';
wmMap('bezirksamt', [48.209395, 16.32736], 16, true, false);

/* Beispiel für eine Map mit einem Pin + Popup */
wmMap('bezirksamt', [48.209395, 16.32736], 16, true, false).then(function(map) {
	var pin = L.icon({
		iconUrl: '/marker.svg',
		iconSize: [25, 41]
	});
	L.marker([48.209395, 16.32736],{icon: pin}).addTo(map).bindPopup('Bezirksamt 16. Bezirk');
});

'bezirksamt':: id des Map-HTML-Containers
[48.209395, 16.32736]:: Koordinaten des Mittelpunkts der Karte
16:: Zoomstufe
true:: Ist dragging in der Karte erlaubt
false:: Ist tapping in der Karte erlaubt

Dependencies

vendor/leaflet.js

Parameter und Anwendung in Nunjucks

# Parameter map(settings)
settings: "object"
  description: "string" # Beschreibung in Marker Pop-Up
  id:  "string" # ID der Map
  zoom:  "int" # Zoomstufe
  dragging: "boolean" # Ob Karte mittels mouse/touch verschiebbar ist
  tap: "boolean" # Enables mobile hacks for supporting instant taps (fixing 200ms click delay on iOS/Android) and touch holds (fired as contextmenu events).
  center: "object" # Mittelpunkt der Map
    latitude: "int"# Breitengrad
    longitude: "int" # Längengrad
  icon: "object"
    url: "string" # Pfad des verwendeten Icons (vorläufig: "/assets_handbuch/icons/temp_map_icon.png")
    size: "object" #
      width: "int" # Breite des Icons
      height: "int" # Höhe des Icons

# Anwendung
## Die Javascript-Datei "map.js" muss eingebunden sein
## Die CSS-Datei "leaflet.css" muss eingebunden sein

{% from "components/map/map.njk" import map with context %}

{{ map(settings) }}

Changelog

Neu in Wiener Melange v1.2.0: Es werden automatisch Inline-Skip Links in Map-Containern erzeugt.

Variationen

Direkte Vorschau nicht verfügbar.
„Map“ in eigenem Tab öffnen.

HTML

Laden…

Nunjucks

Laden…

Map auf Bezirksvorstehungs-Seiten

Direkte Vorschau nicht verfügbar.
„Map auf Bezirksvorstehungs-Seiten“ in eigenem Tab öffnen.

HTML

Laden…

Nunjucks

Laden…