For at integrere et mobilitetskort på dit site uden at bygge hele interface, brug en ROOTE iframe. Embed kan modtage by-søgning og filtre tilpasset siden: cykler til cykelguide, toiletter til toiletguide, bus og sporvogn til kollektiv trafik.
Eksempler i denne guide bruger embed.roote.ai, domænet integreret i ROOTE-guides. Den generelle dokumentation beskriver også integration af map.roote.ai og adskiller kamera-parametre fra fuldstændige søgeparametre.
Tilføj en responsiv iframe
Denne blok åbner en cykelsøgning i Bordeaux med zoom 15. URL’en er konstrueret i koden; iframe-ens titel beskriver indholdet for skærmlæsere. Tilpas denne titel til sidens sprog.
<iframe
title="Carte ROOTE — vélos à Bordeaux"
src="https://embed.roote.ai/?q=Bordeaux&modes=bicycle&zoom=15"
width="100%"
height="480"
loading="lazy"
allow="geolocation"
style="display:block; width:100%; min-height:360px; border:0; border-radius:16px;"
></iframe>I et HTML-attribut skrives separatorer & som &. Bredden på 100 % følger containeren. Bevar en brugbar højde på mobil og undgå at placere vigtige kontroller uden for den synlige zone.
Vælg transportformer, der passer til siden
| Behov | Embed parameter |
|---|---|
| Cykler | modes=bicycle |
| Toiletter | modes=toilets |
| Bus | modes=bus |
| Sporvogn | modes=tram |
| Bus og sporvogn | modes=bus,tram |
| Cykler og toiletter | modes=bicycle,toilets |
Disse værdier kommer fra embed ROOTE’s familier mobilitet, service og transit. De erstatter ikke REST-parametre: Services bruger types, mens Transit bruger modes. Et by-centreret kort garanterer ikke resultater for hver familie.
Skil kamera og søgeoprindelse ad
lat og lon placerer kameraet. De er ikke nok i kortets dokumenterede kontrakt til at skabe en nærhedssøgning. For at genskabe en kendt søgning, brug search_lat, search_lon og search_label sammen med modes og zoom.
https://embed.roote.ai/?search_lat=44.8416106&search_lon=-0.5810938&search_label=Bordeaux&zoom=15&modes=bus,tramKoordinaterne ovenfor er et referencepunkt i Bordeaux, ikke brugerens position. Hvis du tilføjer kamera-parametre, kan du vise et andet område samtidig med at bevare punktet til afstandsberegning. Gør det kun hvis denne opdeling ønskes.
Dokumentation af ROOTE kortparametre
Byg en URL uden at miste specialtegn
Brug URL og URLSearchParams i stedet for manuel sammenkædning. Det koder mellemrum, accenter og separatorer. Koden er til browseren og skaber iframe adresse ud fra et indtastet sted.
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();Bevar kontekst mod fuldt kort
Et link til map.roote.ai skal bevare den aktuelle søgetilstand hvis kendt. At genskabe en URL uden dens parametre mister by, modes eller zoom. Behold et fælles URL-objekt ved opdateringer fra din side.
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';Denne kode bevarer kendte parametre fra parentsiden. Hvis bruger ændrer søgning i iframe, kan parent ikke direkte læse dens URL på en anden domæne. For at hente denne tilstand kræves en eksplicit implementeret og dokumenteret mekanisme, fx postMessage med oprindelsesvalidering. Opfind ikke begivenhedsnavne der ikke leveres af embed.
Håndter lokation og mobil interaktion
allow="geolocation" tillader iframe at anmode om lokation, afhængigt af samtykke og sitets tilladelsespolitik. Afslag skal stadig lade by-søgning være brugbar. Bed ikke om position straks ved sideindlæsning uden brugerinitiativ.
På en artikel kan frivillig aktivering af kort undgå at kortets scroll eller zoom fanger bevægelser under læsning. Kontrollen skal være tastaturtilgængelig og klart navngivet. Test orientationsændringer og smalle skærme, ikke kun desktop-version.
Kontrollér resultat og fejlsituationer
Test hvert filter, en kendt by, et område med få data, en ugyldig søgning og en utilgængelig familie. Et kort uden markør alene viser ikke om søgning er tom eller i fejltilstand. Behold beskeder fra embed og adgang til fuldt kort.
Skil fravær af resultater og API-fejl ad
Guide-eksempel til at finde toiletter
Ofte stillede spørgsmål
Skal man sætte en API-nøgle i iframe?
De offentlige URL’er her indeholder ingen. Placer ikke hemmeligheder i en embed-URL eller klientkode.
Øger zoom=15 søgeradius?
Zoom styrer viewet. Sammenlign ikke med radius for API-forespørgsel; tjek søgeparametre for benyttet interface.
Kender parent ændringer foretaget i iframe?
Det kender de parametre, det sender. Interne ændringer kræver en dokumenteret kommunikationsmekanisme mellem de to domæner.