How to integrate a mobility map into your website?

To embed a mobility map in your website without building the entire interface, use a ROOTE iframe. The embed can accept a city search and filters tailored to the page: bikes for a bike guide, toilets for a restroom guide, buses and trams for transit.

The examples in this guide use embed.roote.ai, the domain integrated in ROOTE guides. The general documentation also describes embedding map.roote.ai and distinguishes camera parameters from those of a full search.

Add a responsive iframe

This block opens a bike search in Bordeaux with zoom 15. The URL is constructed in the code; the iframe's title describes its content for screen readers. Adapt this title to your page's language.

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

In an HTML attribute, the & separators are written as &. The width of 100% follows the container's width. Maintain a height usable on mobile and avoid placing essential controls outside the visible area.

Choose the modes matching the page

These values belong to the ROOTE embed's paths linked to the mobility, services, and transit families. They do not replace REST parameters: Services uses types, while Transit uses modes. A city-centered map does not guarantee each family has results there.

Distinguish the camera from the search origin

lat and lon position the camera. They are not enough, within the documented map contract, to create a proximity search. To restore a known search, use search_lat, search_lon, and search_label, along with modes and zoom.

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

The coordinates above are a reference point in Bordeaux, not the user's position. If you also add camera parameters, you can show a different area while preserving the point used for distances. Do so only if this separation is intended.

ROOTE map parameter documentation

Build a URL without losing special characters

Use URL and URLSearchParams rather than manual concatenation. This encodes spaces, accents, and separators. This code is for the browser and creates the iframe address from a entered location.

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

Preserve context when linking to the full map

A link to map.roote.ai should preserve the current search state if you know it. Recreating a URL without its parameters loses the city, modes, or zoom. Keep a common URL object during updates your page makes.

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

This code retains parameters known by the parent page. If the user changes the search inside the iframe, the parent cannot read its URL directly on another domain. To retrieve this state, an explicitly implemented and documented mechanism is required, such as postMessage exchange with origin validation. Do not invent event names not provided by the embed.

Handle geolocation and mobile interactions

allow="geolocation" lets the iframe request location, subject to the site's consent and permission policy. A denial should leave the city search usable. Do not request position upon page load if the user hasn't chosen this action.

On an article, a deliberate activation of the map can prevent its scrolling or zoom from capturing gestures during reading. The control must remain keyboard accessible and clearly labeled. Check orientation changes and narrow screens, not just desktop versions.

Verify results and failure states

Test each filter, a known city, an area with sparse data, an invalid search, and an unavailable family. A map without markers alone does not indicate if the search is empty or failed. Preserve embed messages and accessible access to the full map.

Distinguish no-results from API errors

Choosing between embed, API, and MCP

Sample guide to find toilets

Frequently asked questions

Should I put an API key in the iframe?

The public URLs shown here do not contain one. Do not put a secret in an embed URL or client code.

Does zoom=15 increase the search radius?

Zoom sets the view. Do not equate it with the radius of an API query; check the search parameters of the interface used.

Does the parent know changes made inside the iframe?

It knows the parameters it passes. Internal modifications require a documented exchange mechanism between the two domains.