Pro integraci mobilitní mapy na váš web bez nutnosti vytvářet celé rozhraní použijte iframe ROOTE. Embed může přijmout vyhledávání města a filtry přizpůsobené stránce: kola pro cyklistického průvodce, toalety pro průvodce WC, autobusy a tramvaje pro dopravu.
Příklady v této příručce využívají embed.roote.ai, doménu integrovanou v příručkách ROOTE. Obecná dokumentace popisuje také integraci map.roote.ai a rozlišuje parametry kamery od parametrů kompletního vyhledávání.
Přidání responzivního iframe
Tento blok otevírá vyhledávání kol v Bordeaux se zoomem 15. URL je sestavena v kódu; název iframe popisuje jeho obsah pro čtečky obrazovky. Přizpůsobte tento název jazyku vaší stránky.
<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>V HTML atributu se oddělovače & píší jako &. Šířka 100 % odpovídá kontejneru. Zachovejte výšku použitelnou na mobilu a vyhněte se umístění nezbytných ovládacích prvků mimo viditelnou oblast.
Výběr režimů odpovídajících stránce
| Potřeba | Parametr embed |
|---|---|
| Kola | modes=bicycle |
| Toalety | modes=toilets |
| Autobus | modes=bus |
| Tramvaj | modes=tram |
| Autobus a tramvaj | modes=bus,tram |
| Kola a toalety | modes=bicycle,toilets |
Tyto hodnoty odpovídají průběhu embed ROOTE napojenému na rodiny mobilita, služby a tranzit. Nezastupují parametry REST: Services používá types, Transit používá modes. Mapa zaměřená na město nezaručuje, že každá rodina zde má výsledky.
Rozlišení kamery a zdroje vyhledávání
lat a lon umisťují kameru. Nestačí však v dokumentované dohodě mapy k vytvoření blízkého vyhledávání. Pro obnovení známého vyhledávání použijte search_lat, search_lon a search_label spolu s modes a zoomem.
https://embed.roote.ai/?search_lat=44.8416106&search_lon=-0.5810938&search_label=Bordeaux&zoom=15&modes=bus,tramVýše uvedené souřadnice jsou referenčním bodem v Bordeaux, nikoli polohou uživatele. Pokud přidáte také parametry kamery, můžete zobrazit jinou oblast a přitom zachovat bod používaný pro vzdálenosti. Udělejte to jen pokud je toto rozdělení zamýšlené.
Dokumentace parametrů mapy ROOTE
Sestavení URL bez ztráty speciálních znaků
Použijte URL a URLSearchParams namísto manuálního zřetězení. To zakóduje mezery, znaky s diakritikou a oddělovače. Tento kód je určen pro prohlížeč a vytváří adresu iframe z uživatelského místa.
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();Zachování kontextu při přechodu na kompletní mapu
Odkaz na map.roote.ai by měl zachovat aktuální stav vyhledávání, pokud ho znáte. Vytvoření URL bez parametrů ztratí město, režimy nebo zoom. Uchovejte společný URL objekt při aktualizacích prováděných vaší stránkou.
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';Tento kód uchovává parametry známé rodičovské stránce. Pokud uživatel změní vyhledávání uvnitř iframe, rodič si nemůže přímo přečíst její URL z jiné domény. K získání tohoto stavu je nutný explicitně implementovaný a zdokumentovaný mechanismus, například výměna postMessage s ověřením původu. Nevymýšlejte si názvy událostí nepodporovaných embedem.
Správa lokalizace a mobilních interakcí
allow="geolocation" povoluje iframe požadovat lokaci, pod podmínkou souhlasu a zásad povolení na webu. Odmítnutí by mělo nechat funkční vyhledávání města. Nevyžadujte polohu ihned při vstupu na stránku bez výslovného záměru uživatele.
Na článku může aktivace mapy uživatelem zabránit tomu, aby její posun nebo zoom zachytávaly gesta během čtení. Ovládání by mělo být klávesnicí přístupné a jasně označené. Zkontrolujte změny orientace a úzké obrazovky, nejen verzi na desktopu.
Ověření výsledku a stavů selhání
Testujte každý filtr, známé město, oblast s malým množstvím dat, neplatné vyhledávání a nedostupnou rodinu. Mapa bez značky sama neukáže, zda je vyhledávání prázdné nebo jestli selhala. Zachovejte zprávy z embed a možný přístup k plné mapě.
Rozlišení absence výsledku a chyby API
Příklad příručky k nalezení toalet
Často kladené otázky
Je třeba vložit API klíč do iframe?
Ve veřejných URL uvedených zde není. Nikdy neskladujte tajný klíč v URL embed nebo v klientském kódu.
Zvyšuje zoom=15 rozsah vyhledávání?
Zoom nastavuje pohled. Nepovažujte ho za poloměr API požadavku; ověřte parametry vyhledávání použitého rozhraní.
Zná rodič změny provedené v iframe?
Zná parametry, které předává. Interní změny vyžadují zdokumentovaný mechanismus výměny mezi oběma doménami.