Hur integrerar man en mobilitetskarta på sin webbplats?

För att integrera en mobilitetskarta på din webbplats utan att bygga hela gränssnittet, använd en ROOTE-iframe. Embed-koden kan ta emot en stadssökning och lämpliga filter för sidan: cyklar för en cykelguide, toaletter för en toalettguide, buss och spårvagn för kollektivtrafik.

Exemplen i denna guide använder embed.roote.ai, domänen som ingår i ROOTE-guiderna. Den allmänna dokumentationen beskriver även integration av map.roote.ai och särskiljer kameraparametrar från fullständiga sökparametrar.

Lägga till en responsiv iframe

Detta block öppnar en cykelsökning i Bordeaux med zoom 15. URL:en byggs i koden; iframe-titeln beskriver innehållet för skärmläsare. Anpassa denna titel efter sidans 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 ett HTML-attribut skrivs &-tecken som &. Bredden på 100 % följer behållarens bredd. Behåll en användbar höjd på mobila enheter och undvik att placera viktiga kontroller utanför det synliga området.

Välj lägen som motsvarar sidan

Dessa värden är de som används i ROOTE-embed kopplat till familjerna mobilitet, tjänster och transit. De ersätter inte REST-parametrar: Services använder types medan Transit använder modes. En karta centrerad på en stad garanterar inte att varje familj har resultat där.

Säkra skillnad mellan kamera och sökets ursprung

lat och lon anger kamerans position. De räcker inte, enligt kartans dokumenterade avtal, för att skapa en närhetssökning. För att återställa en känd sökning använd search_lat, search_lon och search_label, tillsammans med modes och zoom.

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

Koordinaterna ovan är en referenspunkt i Bordeaux, inte användarens position. Om du även lägger till kameraparametrar kan du visa ett annat område men behålla punkten som används för avstånd. Gör detta endast om en sådan separation önskas.

Dokumentation av ROOTE-kartans parametrar

Bygga en URL utan att förlora specialtecken

Använd URL och URLSearchParams istället för manuell sammanfogning. Det kodar mellanslag, accenter och skiljetecken. Den här koden är avsedd för webbläsare och skapar iframe-adressen utifrån en inskriven plats.

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();

Bevara kontexten till den fullständiga kartan

En länk till map.roote.ai bör återge det aktuella sökningstillståndet om du känner till det. Att återskapa en URL utan parametrar förlorar stad, lägen eller zoom. Behåll ett gemensamt URL-objekt vid uppdateringar från din sida.

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

Denna kod behåller de parametrar som är kända av föräldrasidan. Om användaren ändrar sökningen i iframen kan föräldern inte direkt läsa dess URL från en annan domän. För att hämta detta tillstånd krävs en uttryckligen implementerad och dokumenterad mekanism, till exempel ett postMessage-utbyte med validering av källa. Uppfinna inte händelsenamn som embed inte tillhandahåller.

Hantera positionering och mobila interaktioner

allow="geolocation" tillåter iframen att begära geolocation, med användarens samtycke och webbplatsens behörighetspolicy. Ett nekande ska lämna stadssökningen användbar. Begär inte position direkt vid sidans ankomst om läsaren inte valt detta.

På en artikel kan en frivillig aktivering av kartan förhindra att dess scrollning eller zoom fångar gester under läsning. Kontroll ska förbli tillgänglig via tangentbord och tydligt namngiven. Kontrollera orienteringsändringar och en smal skärm, inte bara datorversion.

Verifiera resultat och felstatusar

Testa varje filter, en känd stad, ett område med lite data, en ogiltig sökning och en otillgänglig familj. En karta utan markör säger inte själv om sökningen är tom eller om ett fel förekommer. Behåll meddelanden från embed och tillgång till fullständig karta.

Skillja mellan avsaknad av resultat och API-fel

Välj mellan embed, API och MCP

Exempelguide för att hitta toaletter

Vanliga frågor

Behöver man ange en API-nyckel i iframen?

Offentliga URL:er som visas här innehåller ingen sådan. Placera inte en hemlighet i embed-URL eller klientkod.

Ökar zoom=15 sökradien?

Zoom styr vyn. Förväxla inte med radien för en API-förfrågan; kontrollera sökparametrar för gränssnittet du använder.

Vet föräldern om förändringar i iframen?

Den känner till parametrar den skickar. Interna ändringar kräver en dokumenterad utbytesmekanism mellan domänerna.