Karte in eigene Seiten einbinden

Diese Anleitung richtet sich an Gemeinden, Kundinnen und Kunden sowie an alle, die eine karte.bayern-Karte in die eigene Website, ein Intranet oder ein Portal einbauen möchten. Der einfachste Weg ist ein iFrame mit dem von karte.bayern erzeugten Link.

Karte erstellen Editor öffnen

So funktioniert es

Öffne den Kartengenerator und erstelle deine Karte mit Markern, Routen oder anderen Inhalten.
Kopiere im Editor den erzeugten Teil-Link oder den iFrame-Code.
Füge den iFrame in deine eigene Seite ein. Die Karte läuft dann direkt in deinem Layout.

Empfohlener iFrame

<iframe
  src="https://karte.bayern/embed/?center=48.137154,11.576124&zoom=13&title=München"
  width="100%"
  height="550"
  style="display:block;width:100%;border:0;border-radius:12px;"
  loading="lazy"
  allow="geolocation; fullscreen; clipboard-write"
  allowfullscreen
  referrerpolicy="no-referrer"
  sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"
  title="Karte von München"></iframe>

Der Editor unter /teilen/?edit erzeugt den passenden iFrame-Code automatisch. Für öffentliche Seiten sollte der reine Anzeige-Link genutzt werden, nicht der Editor-Link.

Vorlagen für verschiedene Einsatzzwecke

Der Generator passt Kategorien, Farben, Markersymbole, Linienarten, Grundkarte und Bedienelemente an den gewählten Einsatzzweck an. Alle Einstellungen bleiben anschließend individuell änderbar.

Standard: Orte, Hinweise, allgemeine Marker und Routen. Standardkarte erstellen
Unternehmensstandorte: Zentrale, Filialen, Service, Abholung, Eingänge, Besucherparkplätze und Zufahrten. Standortkarte erstellen
Veranstaltung und Verkehr: Parkplätze, Eingänge, Information, ÖPNV, Sperrungen, Umleitungen und Besucherwege – jeweils mit optionalem Zeitfenster. Veranstaltungskarte erstellen
Feuerwehr – Vorbereitung: Bereitstellungsräume, Sammelpunkte, Einsatzleitung, Wasserentnahme, Feuerwehrzufahrten und vorbereitete Wege auf Luftbildbasis. Vorbereitenden Plan erstellen

Feuerwehrkarten in dieser öffentlichen Embed-Funktion sind ausschließlich für vorbereitende, freigabefähige Informationen gedacht. Keine Live-Lage, Personendaten, Zugangscodes oder vertraulichen taktischen Angaben veröffentlichen.

Einfache Karte per URL konfigurieren

Für eine Karte ohne Editor reichen lesbare Parameter:

https://karte.bayern/embed/
  ?center=48.137154,11.576124
  &zoom=13
  &title=München
  &basemap=karte

Ein einzelner markierter Ort:

https://karte.bayern/embed/
  ?marker=48.137154,11.576124
  &marker_title=Marienplatz
  &zoom=15

Bedienelemente lassen sich mit header, layers, share, navigation, list, locate, zoom_controls, scale und scroll_zoom jeweils über 0 oder 1 steuern. Mit preset=standard|company|event|fire-preplan wird eine der Vorlagen aktiviert. Die Datenquellen-Attribution bleibt immer sichtbar.

Eigene Marker und GeoJSON-Daten

Mehrere Marker und Routen lassen sich ohne Programmierung im Karteneditor anlegen. Für größere oder regelmäßig aktualisierte Daten kann die Einbettung eine GeoJSON-Datei laden:

https://karte.bayern/embed/?overlay=https%3A%2F%2Fexample.org%2Fstandorte.geojson

Externe Dateien müssen über HTTPS erreichbar sein und den Browserzugriff per CORS erlauben. Unterstützt werden Punkte, Linien und Flächen. Titel, Beschreibung, Kategorie, Hex-Farbe, Link und optionale Sichtbarkeitszeiträume können als GeoJSON-Properties mitgegeben werden.

Datenschutz, Sicherheit und Barrierefreiheit

Verwende ausschließlich die schlanke Laufzeit unter /embed/ im iFrame.
Setze immer einen verständlichen title am iFrame.
Standortzugriff ist standardmäßig aus und braucht eine ausdrückliche Browserfreigabe.
Das empfohlene sandbox-Attribut begrenzt die Fähigkeiten der Einbettung.
referrerpolicy="no-referrer" verhindert die Übermittlung der einbettenden Seitenadresse.
Mausrad-Zoom ist standardmäßig aus, damit die umgebende Seite normal scrollbar bleibt.

Kartentitel, Marker und GeoJSON-Inhalte einer öffentlichen Einbettung sind öffentlich abrufbar. Dort gehören keine Zugangsdaten oder vertraulichen Standortdaten hinein.

Praxisempfehlungen für Gemeinden und Kunden

Nutze für normale Einbindungen eine Höhe zwischen 450 und 700 Pixeln.
Setze den iFrame auf 100 Prozent Breite, damit er auf Mobilgeräten sauber mitwächst.
Gib dem iFrame einen sinnvollen title-Text für Barrierefreiheit und SEO.
Nutze loading="lazy", wenn die Karte nicht direkt am Seitenanfang steht.
Wenn du die Karte in ein Portal mit vielen Seiten einbindest, verwende den Share-Link statt einer Screenshot-Lösung.
Für kommunale oder kundenspezifische Projekte ist es sinnvoll, die gewünschte Zielseite und den Verwendungszweck früh abzustimmen.

Hinweis zur Verfügbarkeit

Die Einbindung ist aktuell frei möglich. Es kann sein, dass neue Einbindungen oder erweiterte Funktionen später eine Registrierung oder Freigabe erfordern. Wenn sich daran etwas ändert, wird das hier transparent dokumentiert.

Für Gemeinden, die mehrere Einbindungen, eigene Daten oder einen abgestimmten Rollout planen, empfehlen wir eine kurze Abstimmung vor dem Livegang.

Kurz gefragt

Kann ich die Karte ohne Login einbetten?: Ja, aktuell ist das möglich.
Woher bekomme ich den Code?: Im Editor unter /teilen/?edit wird der Code automatisch erzeugt.
Warum zeigt mein externes GeoJSON keine Daten?: Prüfe HTTPS, CORS, gültiges GeoJSON und die Browser-Konsole. Externe HTTP-Quellen werden abgelehnt.
Wie viele Daten kann ich direkt in den Link legen?: Die Embed-Query ist auf 96 KiB begrenzt. Für größere Karten sollte eine GeoJSON-URL verwendet werden.
Was ist, wenn ich mehrere Karten brauche?: Dann lohnt sich eine gemeinsame Abstimmung, damit Struktur, Höhe und Zielseiten sauber geplant werden.

Die vollständige technische Referenz mit Konfigurationsschema, GeoJSON-Properties, Grenzwerten und Testhinweisen liegt in docs/EMBEDDING.md.