Om een mobiliteitskaart in uw site te integreren zonder de hele interface te bouwen, gebruikt u een ROOTE-iframe. De embed kan een stad zoeken en filters ontvangen die passen bij de pagina: fietsen voor een fietsengids, toiletten voor een wc-gids, bus en tram voor het openbaar vervoer.
De voorbeelden in deze gids gebruiken embed.roote.ai, het domein geïntegreerd in de ROOTE-gidsen. De algemene documentatie beschrijft ook de integratie van map.roote.ai en maakt onderscheid tussen cameragegevens en die van een volledige zoekopdracht.
Responsive iframe toevoegen
Dit blok opent een fietszoekopdracht in Bordeaux met zoom 15. De URL wordt in de code opgebouwd; de titel van de iframe beschrijft de inhoud voor schermlezers. Pas deze titel aan aan de taal van uw pagina.
<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>In een HTML-attribuut worden scheidingstekens & als & geschreven. De breedte van 100% volgt die van de container. Houd een bruikbare hoogte voor mobiel aan en vermijd het plaatsen van essentiële bedieningselementen buiten het zichtbare gebied.
De modi kiezen die bij de pagina passen
| Behoefte | Parameter voor de embed |
|---|---|
| Fietsen | modes=bicycle |
| Toiletten | modes=toilets |
| Bus | modes=bus |
| Tram | modes=tram |
| Bus en tram | modes=bus,tram |
| Fietsen en toiletten | modes=bicycle,toilets |
Deze waarden zijn die van het ROOTE embed-traject gekoppeld aan de mobiliteits-, service- en transitgroepen. Ze vervangen de REST-parameters niet: Services gebruikt types, terwijl Transit modes gebruikt. Een kaart gecentreerd op een stad garandeert niet dat elke groep daar resultaten heeft.
Het verschil tussen camera en zoekbron maken
lat en lon plaatsen de camera. Ze zijn niet voldoende, binnen het gedocumenteerde contract van de kaart, om een nabijheidszoekopdracht te maken. Gebruik voor het herstellen van een bekende zoekopdracht search_lat, search_lon en search_label, samen met de modi en zoom.
https://embed.roote.ai/?search_lat=44.8416106&search_lon=-0.5810938&search_label=Bordeaux&zoom=15&modes=bus,tramDe hierboven genoemde coördinaten zijn een referentiepunt in Bordeaux, niet de positie van de gebruiker. Als u ook cameragegevens toevoegt, kunt u een ander gebied weergeven terwijl het punt voor de afstanden behouden blijft. Doe dit alleen als deze scheiding gewenst is.
Documentatie van de ROOTE kaartparameters
Een URL bouwen zonder speciale tekens te verliezen
Gebruik URL en URLSearchParams in plaats van handmatige samenvoeging. Dit codeert spaties, accenten en scheidingstekens. Deze code is bedoeld voor de browser en creëert het iframe-adres vanuit een ingevoerde locatie.
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();De context behouden richting de volledige kaart
Een link naar map.roote.ai moet de huidige zoekstatus overnemen als u die kent. Een URL zonder parameters recreëren verliest stad, modi of zoom. Houd een gemeenschappelijk URL-object bij voor updates gedaan door uw pagina.
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';Deze code behoudt de parameters die door de bovenliggende pagina bekend zijn. Als de gebruiker de zoekopdracht binnen de iframe verandert, kan het ouderframe de URL niet direct lezen op een ander domein. Hiervoor is een expliciet geïmplementeerd en gedocumenteerd mechanisme nodig, zoals een postMessage-uitwisseling met validatie van de oorsprong. Verzin geen evenementnamen die niet door de embed worden geleverd.
Locatie en mobiele interacties beheren
allow="geolocation" geeft de iframe toestemming om locatie op te vragen, onder voorbehoud van toestemming en het toestemmingsbeleid van de site. Weigering moet de functionaliteit van het zoeken naar stad niet belemmeren. Vraag de positie niet direct op bij het betreden van een pagina als de gebruiker dit niet zelf heeft gekozen.
In een artikel kan een bewuste activatie van de kaart voorkomen dat scrollen of zoomen de leesbewegingen stoort. De bediening moet toegankelijk blijven met het toetsenbord en duidelijk benoemd zijn. Controleer op oriëntatieveranderingen en een smal scherm, niet alleen de desktopversie.
Het resultaat en storingsstatussen controleren
Test elke filter, een bekende stad, een gebied met weinig data, een ongeldige zoekopdracht en een niet-beschikbare groep. Een kaart zonder marker zegt op zichzelf niet of de zoekopdracht leeg of een storing is. Behoud de meldingen van de embed en een bruikbare toegang tot de volledige kaart.
Verschil tekenen tussen geen resultaat en API-fout
Kiezen tussen embed, API en MCP
Voorbeeldgids voor het vinden van toiletten
Veelgestelde vragen
Moet ik een API-sleutel in de iframe zetten?
De hier getoonde openbare URL's bevatten die niet. Plaats geen geheim in een embed-URL of clientcode.
Vergroot zoom=15 de zoekstraal?
De zoom bepaalt het beeld. Zie het niet als de straal van een API-verzoek; controleer de zoekparameters van de gebruikte interface.
Kent de ouder de wijzigingen binnen de iframe?
Hij kent de parameters die hij doorstuurt. Interne wijzigingen vereisen een gedocumenteerd uitwisselingsmechanisme tussen de twee domeinen.