Comment intégrer une carte de mobilité dans son site ?

Pour intégrer une carte de mobilité dans votre site sans construire toute l’interface, utilisez une iframe ROOTE. L’embed peut recevoir une recherche de ville et des filtres adaptés à la page : vélos pour un guide vélo, toilettes pour un guide WC, bus et tram pour les transports.

Les exemples de ce guide utilisent embed.roote.ai, le domaine intégré dans les guides ROOTE. La documentation générale décrit aussi l’intégration de map.roote.ai et distingue les paramètres de caméra de ceux d’une recherche complète.

Ajouter une iframe responsive

Ce bloc ouvre une recherche vélo à Bordeaux avec le zoom 15. L’URL est construite dans le code ; le titre de l’iframe décrit son contenu pour les lecteurs d’écran. Adaptez ce titre à la langue de votre page.

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

Dans un attribut HTML, les séparateurs & s’écrivent &. La largeur de 100 % suit celle du conteneur. Gardez une hauteur utilisable sur mobile et évitez de placer des contrôles indispensables hors de la zone visible.

Choisir les modes correspondant à la page

Ces valeurs sont celles du parcours embed ROOTE raccordé aux familles mobilité, services et transit. Elles ne remplacent pas les paramètres REST : Services utilise types, tandis que Transit utilise modes. Une carte centrée sur une ville ne garantit pas que chaque famille y possède des résultats.

Distinguer la caméra et l’origine de recherche

lat et lon positionnent la caméra. Ils ne suffisent pas, dans le contrat documenté de la carte, à créer une recherche de proximité. Pour restaurer une recherche connue, utilisez search_lat, search_lon et search_label, avec les modes et le zoom.

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

Les coordonnées ci-dessus sont un point de référence à Bordeaux, pas la position de l’utilisateur. Si vous ajoutez aussi des paramètres de caméra, vous pouvez afficher une autre zone tout en conservant le point utilisé pour les distances. Faites-le seulement si cette séparation est voulue.

Documentation des paramètres de la carte ROOTE

Construire une URL sans perdre les caractères spéciaux

Utilisez URL et URLSearchParams plutôt qu’une concaténation manuelle. Cela encode les espaces, accents et séparateurs. Ce code est destiné au navigateur et crée l’adresse de l’iframe à partir d’un lieu saisi.

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

Conserver le contexte vers la carte complète

Un lien vers map.roote.ai doit reprendre l’état courant de la recherche si vous le connaissez. Recréer une URL sans ses paramètres perd la ville, les modes ou le zoom. Gardez un objet URL commun lors des mises à jour effectuées par votre page.

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

Ce code conserve les paramètres connus par la page parente. Si l’utilisateur modifie la recherche à l’intérieur de l’iframe, le parent ne peut pas lire directement son URL sur un autre domaine. Pour récupérer cet état, il faut un mécanisme explicitement implémenté et documenté, par exemple un échange postMessage avec validation de l’origine. N’inventez pas de nom d’événement non fourni par l’embed.

Gérer la localisation et les interactions mobiles

allow="geolocation" autorise l’iframe à demander la localisation, sous réserve du consentement et de la politique de permissions du site. Un refus doit laisser la recherche de ville utilisable. Ne demandez pas la position dès l’arrivée sur une page si le lecteur n’a pas choisi cette action.

Sur un article, une activation volontaire de la carte peut éviter que son défilement ou son zoom capte les gestes pendant la lecture. Le contrôle doit rester accessible au clavier et clairement nommé. Vérifiez les changements d’orientation et un écran étroit, pas seulement la version ordinateur.

Vérifier le résultat et les états de panne

Testez chaque filtre, une ville connue, une zone avec peu de données, une recherche invalide et une famille indisponible. Une carte sans marqueur ne dit pas, seule, si la recherche est vide ou en panne. Conservez les messages de l’embed et un accès utilisable à la carte complète.

Distinguer absence de résultat et erreur API

Choisir entre embed, API et MCP

Exemple de guide pour trouver des toilettes

Questions fréquentes

Faut-il mettre une clé API dans l’iframe ?

Les URL publiques montrées ici n’en contiennent pas. Ne placez pas un secret dans une URL d’embed ou le code client.

zoom=15 augmente-t-il le rayon de recherche ?

Le zoom règle la vue. Ne l’assimilez pas au rayon d’une requête API ; vérifiez les paramètres de recherche de l’interface utilisée.

Le parent connaît-il les changements faits dans l’iframe ?

Il connaît les paramètres qu’il transmet. Les modifications internes exigent un mécanisme d’échange documenté entre les deux domaines.