Wie integriert man eine Mobilitätskarte in seine Website?

Um eine Mobilitätskarte in Ihre Website zu integrieren, ohne die gesamte Oberfläche zu erstellen, verwenden Sie ein ROOTE-iframe. Das Embed kann eine Stadtsuche und passende Filter für die Seite erhalten: Fahrräder für einen Fahrradführer, Toiletten für einen WC-Leitfaden, Bus und Straßenbahn für den Nahverkehr.

Die Beispiele in diesem Leitfaden verwenden embed.roote.ai, die im ROOTE-Leitfaden integrierte Domain. Die allgemeine Dokumentation beschreibt auch die Integration von map.roote.ai und unterscheidet Kamera-Parameter von einer vollständigen Suche.

Ein responsives iframe hinzufügen

Dieser Block öffnet eine Fahrradsuche in Bordeaux mit Zoom 15. Die URL wird im Code gebaut; der iframe-Titel beschreibt den Inhalt für Screenreader. Passen Sie den Titel an die Sprache Ihrer Seite an.

<iframe
  title="Carte ROOTE — vélos à Bordeaux"
  src="https://embed.roote.ai/?q=Bordeaux&amp;modes=bicycle&amp;zoom=15"
  width="100%"
  height="480"
  loading="lazy"
  allow="geolocation"
  style="display:block; width:100%; min-height:360px; border:0; border-radius:16px;"
></iframe>

In einem HTML-Attribut werden &-Trennzeichen als & geschrieben. Die Breite von 100 % folgt der des Containers. Behalten Sie eine mobil nutzbare Höhe bei und vermeiden Sie, wichtige Bedienelemente außerhalb des sichtbaren Bereichs zu platzieren.

Die für die Seite passenden Modi auswählen

Diese Werte sind die des ROOTE-Embed-Parcours, der an die Familien Mobilität, Services und Transit angeschlossen ist. Sie ersetzen nicht die REST-Parameter: Services verwendet types, während Transit modes nutzt. Eine auf eine Stadt zentrierte Karte garantiert nicht, dass jede Familie dort Ergebnisse enthält.

Kamera und Suchursprung unterscheiden

lat und lon positionieren die Kamera. Sie reichen im dokumentierten Kartenvertrag nicht aus, um eine Nähe-Suche zu erstellen. Für die Wiederherstellung einer bekannten Suche verwenden Sie search_lat, search_lon und search_label zusammen mit Modi und Zoom.

https://embed.roote.ai/?search_lat=44.8416106&search_lon=-0.5810938&search_label=Bordeaux&zoom=15&modes=bus,tram

Die obigen Koordinaten sind ein Bezugspunkt in Bordeaux, nicht die Nutzerposition. Wenn Sie auch Kameraparameter hinzufügen, können Sie ein anderes Gebiet anzeigen und trotzdem den Punkt für Entfernungen beibehalten. Tun Sie dies nur, wenn diese Trennung gewünscht ist.

Dokumentation der ROOTE-Kartenparameter

URL ohne Verlust von Sonderzeichen erstellen

Verwenden Sie URL und URLSearchParams statt manueller Verkettung. Dies kodiert Leerzeichen, Akzente und Trennzeichen. Dieser Code ist fürs Browserumfeld und erstellt die iframe-Adresse aus einem eingegebenen Ort.

const embedUrl = new URL('https://embed.roote.ai/');
embedUrl.searchParams.set('q', 'Place des Quinconces, Bordeaux');
embedUrl.searchParams.set('modes', 'bicycle,toilets');
embedUrl.searchParams.set('zoom', '15');
document.querySelector('iframe').src = embedUrl.toString();

Kontext beim Wechsel zur Vollkarte bewahren

Ein Link zu map.roote.ai muss den aktuellen Suchzustand enthalten, wenn er bekannt ist. Das Neuerstellen einer URL ohne Parameter verliert Stadt, Modi oder Zoom. Behalten Sie ein gemeinsames URL-Objekt bei Seitenaktualisierungen Ihrer Seite.

const fullMapUrl = new URL('https://map.roote.ai/');
fullMapUrl.search = embedUrl.search;
const link = document.querySelector('[data-open-map]');
link.href = fullMapUrl.toString();
link.target = '_blank';
link.rel = 'noopener noreferrer';

Dieser Code bewahrt Parameter, die der Elternseite bekannt sind. Ändert der Nutzer die Suche im iframe, kann der Parent dessen URL auf einer anderen Domain nicht direkt lesen. Zur Zustandsrückgewinnung ist ein explizit implementierter und dokumentierter Mechanismus nötig, z. B. ein postMessage-Austausch mit Ursprungsvalidierung. Erfinden Sie keine Events, die das Embed nicht bietet.

Standort und mobile Interaktionen verwalten

allow="geolocation" erlaubt dem iframe, den Standort abzufragen, sofern Nutzerzustimmung und Berechtigungspolitik der Seite dies erlauben. Verweigert der Nutzer, soll die Stadtsuche weiterhin nutzbar bleiben. Fragen Sie die Position nicht sofort beim Seitenaufruf ab, wenn der Nutzer diese Aktion nicht gewählt hat.

In einem Artikel kann eine freiwillige Kartenaktivierung verhindern, dass Scrollen oder Zoomen der Karte die Gestenerkennung beim Lesen stört. Die Steuerung muss weiterhin per Tastatur zugänglich und klar benannt sein. Prüfen Sie auch Richtungsänderungen und schmale Bildschirme, nicht nur Desktop-Versionen.

Ergebnis und Fehlerzustände prüfen

Testen Sie jeden Filter, eine bekannte Stadt, eine Zone mit wenigen Daten, eine ungültige Suche und eine nicht verfügbare Familie. Eine Karte ohne Marker zeigt allein nicht, ob die Suche leer oder die API ausgefallen ist. Bewahren Sie die Embed-Meldungen und einen nutzbaren Zugang zur Vollkarte.

Ergebnislosigkeit und API-Fehler unterscheiden

Zwischen Embed, API und MCP wählen

Beispiel-Leitfaden zur Toilettensuche

Häufige Fragen

Muss eine API-Schlüssel ins iframe?

Die hier gezeigten öffentlichen URLs enthalten keinen. Platzieren Sie kein Geheimnis in einer Embed-URL oder im Client-Code.

Erhöht zoom=15 den Suchradius?

Zoom bestimmt die Ansicht. Gleichsetzen mit dem Radius einer API-Anfrage ist falsch; prüfen Sie die Suchparameter der verwendeten Oberfläche.

Kennt der Parent Änderungen im iframe?

Er kennt die übermittelten Parameter. Interne Änderungen brauchen einen dokumentierten Austauschmechanismus zwischen den beiden Domains.