Hvordan integrere et mobilitetskart på nettsiden din?

For å integrere et mobilitetskart på nettsiden din uten å bygge hele grensesnittet, bruk en ROOTE-iframe. Embed kan motta bysøking og filtre tilpasset siden: sykler for sykkelguide, toaletter for WC-guide, buss og trikk for transport.

Eksemplene i denne veiledningen bruker embed.roote.ai, domenet som brukes i ROOTE-veiledningene. Den generelle dokumentasjonen beskriver også integrasjon av map.roote.ai og skiller parametrene for kamera fra en komplett søkefunksjon.

Legge til en responsiv iframe

Denne blokken åpner et sykkelsøk i Bordeaux med zoom 15. URL-en bygges i koden; iframe-tittelen beskriver innholdet for skjermlesere. Tilpass denne tittelen til sidens språk.

<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>

I et HTML-attributt skrives separasjonstegn & som &. Bredde 100 % følger beholderens bredde. Hold en høyde som fungerer på mobil og unngå å plassere viktige kontroller utenfor synlig område.

Velg moduser som passer til siden

Disse verdiene kommer fra ROOTE embed-ruten som er tilknyttet kategoriene mobilitet, tjenester og transitt. De erstatter ikke REST-parametere: Tjenester bruker types, mens Transitt bruker modes. Et kart sentrert på en by garanterer ikke at hver kategori har resultater der.

Skille på kamera og søkekilde

lat og lon setter kameraets posisjon. De er ikke tilstrekkelige i kartets dokumenterte kontrakt for å lage et nærhetssøk. For å gjenopprette et kjent søk, bruk 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,tram

Koordinatene ovenfor er et referansepunkt i Bordeaux, ikke brukerens posisjon. Hvis du også legger inn kameraparamer, kan du vise et annet område samtidig som du beholder punktet brukt for avstander. Gjør dette bare om denne separasjonen er ønsket.

Dokumentasjon for ROOTE-kartparametre

Bygge en URL uten å miste spesialtegn

Bruk URL og URLSearchParams i stedet for manuell sammenkjedning. Dette koder inn mellomrom, aksenter og skilletegn. Denne koden er for nettleseren og lager iframe-adressen fra et angitt 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();

Beholde kontekst mot det komplette kartet

En lenke til map.roote.ai må ta med søkestatusen hvis du kjenner den. Å lage en URL på nytt uten parametere mister by, moduser eller zoom. Hold et felles URL-objekt ved oppdateringer fra siden din.

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 koden bevarer parametere kjent av foreldresiden. Hvis bruker endrer søket inne i iframe, kan ikke forelderen lese URL-en direkte på et annet domene. For å hente denne statusen trengs en eksplisitt implementert og dokumentert metode, f.eks. postMessage-utveksling med opprinnelseskontroll. Ikke finn på eget hendelsesnavn som ikke leveres av embed.

Håndtere posisjonering og mobil interaksjon

allow="geolocation" tillater iframe å be om posisjon, med brukerens samtykke og nettstedets tillatelsespolicy. Avslag må ikke hindre bysøking. Spør ikke om posisjon umiddelbart ved sideåpning om leser ikke har valgt det.

I en artikkel kan aktivert kart forhindre at rulling eller zoom fanger opp gester under lesing. Kontroll må være tilgjengelig via tastatur og tydelig merket. Sjekk skjermorientering og smal skjerm, ikke bare desktop-versjon.

Sjekke resultat og feilsituasjoner

Test hvert filter, en kjent by, et område med få data, ugyldig søk og utilgjengelig kategori. Et kart uten markør sier ikke alene om søket er tomt eller om det er feil. Behold meldinger fra embed og tilgjengelighet til fullversjon av kartet.

Skille mellom tomt resultat og API-feil

Velge mellom embed, API og MCP

Eksempelguide for å finne toaletter

Ofte stilte spørsmål

Trenger iframe en API-nøkkel?

De offentlige URL-ene vist her inneholder ikke det. Ikke legg hemmeligheter i embed-URL eller klientkode.

Øker zoom=15 søkeradius?

Zoom styrer visning. Ikke likestill det med radius i en API-forespørsel; sjekk søkeparametre i det brukte grensesnittet.

Vet foreldresiden om endringer i iframe?

Den kjenner til parametrene den sender. Interne endringer krever en dokumentert utvekslingsmetode mellom de to domenene.