Para integrar un mapa de movilidad en tu sitio sin construir toda la interfaz, usa un iframe ROOTE. El embed puede recibir una búsqueda de ciudad y filtros adaptados a la página: bicicletas para una guía ciclista, baños para una guía de baños, bus y tranvía para transporte.
Los ejemplos de esta guía usan embed.roote.ai, el dominio integrado en las guías ROOTE. La documentación general también describe la integración de map.roote.ai y distingue los parámetros de cámara de los de una búsqueda completa.
Agregar un iframe responsive
Este bloque abre una búsqueda de bicicletas en Burdeos con zoom 15. La URL se construye en el código; el título del iframe describe su contenido para lectores de pantalla. Adapta este título al idioma de tu página.
<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>En un atributo HTML, los separadores & se escriben &. El ancho de 100 % sigue al del contenedor. Mantén una altura usable en móvil y evita poner controles indispensables fuera de la zona visible.
Elegir los modos que correspondan a la página
| Necesidad | Parámetro del embed |
|---|---|
| Bicicletas | modes=bicycle |
| Baños | modes=toilets |
| Bus | modes=bus |
| Tranvía | modes=tram |
| Bus y tranvía | modes=bus,tram |
| Bicicletas y baños | modes=bicycle,toilets |
Estos valores son los del recorrido embed ROOTE asociados a las familias movilidad, servicios y tránsito. No reemplazan los parámetros REST: Servicios usa types, mientras Tránsito usa modes. Un mapa centrado en una ciudad no garantiza que cada familia tenga resultados allí.
Distinguir la cámara y el origen de la búsqueda
lat y lon posicionan la cámara. No son suficientes, en el contrato documentado del mapa, para crear una búsqueda de proximidad. Para restaurar una búsqueda conocida, usa search_lat, search_lon y search_label, junto con los modos y el zoom.
https://embed.roote.ai/?search_lat=44.8416106&search_lon=-0.5810938&search_label=Bordeaux&zoom=15&modes=bus,tramLas coordenadas arriba son un punto de referencia en Burdeos, no la posición del usuario. Si añades también parámetros de cámara, puedes mostrar otra zona conservando el punto usado para las distancias. Hazlo solo si esta separación es deseada.
Documentación de los parámetros del mapa ROOTE
Construir una URL sin perder caracteres especiales
Usa URL y URLSearchParams en vez de concatenación manual. Esto codifica espacios, acentos y separadores. Este código va para el navegador y crea la dirección del iframe a partir de un lugar ingresado.
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();Conservar el contexto hacia el mapa completo
Un enlace a map.roote.ai debe retomar el estado actual de la búsqueda si lo conoces. Recrear una URL sin sus parámetros pierde la ciudad, los modos o el zoom. Mantén un objeto URL común durante las actualizaciones de tu página.
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';Este código conserva los parámetros conocidos por la página padre. Si el usuario modifica la búsqueda dentro del iframe, el padre no puede leer directamente su URL en otro dominio. Para recuperar ese estado se requiere un mecanismo explícitamente implementado y documentado, como un intercambio postMessage con validación del origen. No inventes nombres de evento no proporcionados por el embed.
Gestionar la localización e interacciones móviles
allow="geolocation" autoriza al iframe a solicitar la ubicación, sujeto al consentimiento y políticas del sitio. Una negativa debe dejar la búsqueda de ciudad operativa. No solicites la posición al llegar a una página si el lector no ha elegido esa acción.
En un artículo, una activación voluntaria del mapa puede evitar que su desplazamiento o zoom capten gestos durante la lectura. El control debe seguir accesible por teclado y claramente nombrado. Verifica cambios de orientación y pantalla estrecha, no solo la versión de escritorio.
Verificar el resultado y estados de fallo
Prueba cada filtro, una ciudad conocida, una zona con pocos datos, una búsqueda inválida y una familia no disponible. Un mapa sin marcador no indica por sí solo si la búsqueda está vacía o hay un fallo. Conserva los mensajes del embed y acceso usable al mapa completo.
Distinguir falta de resultado y error de API
Ejemplo de guía para encontrar baños
Preguntas frecuentes
¿Hay que poner una clave API en el iframe?
Las URLs públicas mostradas aquí no la incluyen. No pongas un secreto en una URL de embed ni en el código cliente.
¿zoom=15 aumenta el radio de búsqueda?
El zoom ajusta la vista. No lo asocies al radio de una consulta API; verifica los parámetros de búsqueda de la interfaz usada.
¿El padre conoce los cambios hechos en el iframe?
Conoce los parámetros que transmite. Cambios internos exigen un mecanismo documentado de intercambio entre ambos dominios.