Global Presence Orbit Map
Mapa mundial interactivo con ubicaciones seleccionables, rutas curvas, un panel de información y animaciones coordinadas en las vistas Flat y Globe.
Primeros pasos
- Agrega Global Presence Orbit Map a tu página de Framer. Empieza con un frame de aproximadamente 1200 × 680 px y ancho flexible. En móvil, reserva unos 640–720 px de altura para el mapa, el selector de ubicaciones y el panel.
- Abre Locations. Reemplaza las ciudades de muestra, asigna un ID único a cada ubicación e introduce su Latitude y Longitude.
- Abre Routes. Conecta dos ubicaciones escribiendo sus IDs exactos en Source ID y Target ID.
- Define Initial Location con el ID que debe seleccionarse al inicio. El valor predeterminado es
tokyo. - Elige Map → Projection, Style → Preset y Panel → Position.
- Abre Framer Preview para revisar la selección, las animaciones, la navegación por teclado y un diseño estrecho. Canvas muestra una vista estática para editar.
Una instancia nueva incluye ocho ubicaciones de muestra y diez rutas. La configuración predeterminada es Flat, Midnight y Bottom Left, con Tokyo seleccionado y autoplay desactivado. Reemplaza las métricas de muestra con tu propio contenido.
Ubicaciones y rutas
Campos de ubicación
| Control | Predeterminado para un elemento nuevo | Función |
|---|---|---|
| ID | location | Identificador único para las rutas y Initial Location. |
| City / Country | New location / vacío | Nombre y país que aparecen en el panel. |
| Latitude / Longitude | 0 / 0 | Posición cuando Position Mode es Coordinates. |
| X / Y | 0.5 / 0.5 | Posición de 0 a 1 cuando Position Mode es Normalized. |
| Value | Vacío | Métrica de texto libre, como 12 Active projects. |
| Description | Vacío | Texto de apoyo de la ubicación seleccionada. |
| Icon | None | None, Office, Project, Team o Delivery. |
| Link | Vacío | URL, página de Framer o ancla opcional para el CTA. |
| CTA Label | Vacío | Reemplaza CTA Label del panel para esta ubicación. |
| New Tab | Off | Abre el enlace de la ubicación en otra pestaña al activarlo. |
Coordinates usa latitud de −90 a 90 y longitud de −180 a 180. Normalized usa X de izquierda a derecha y Y de arriba abajo. En Globe, las posiciones normalizadas se interpretan como coordenadas geográficas equivalentes. Cambiar el modo de posición afecta a todas las ubicaciones.
Conectar ubicaciones
| Control | Predeterminado | Función |
|---|---|---|
| Source ID / Target ID | Vacío | IDs exactos de las dos ubicaciones conectadas. |
| Color | Del preset | Color opcional de la ruta, con Color Mode en Per Route. |
| Strength | 1 | Grosor relativo de la línea, de 0.25 a 2. |
Por ejemplo, una ruta de tokyo a singapore requiere ubicaciones con esos dos IDs. Cambiar City no cambia ID. Actualiza las rutas si cambias un ID. Se omiten las referencias inválidas y las conexiones de una ubicación consigo misma.
Mapa
| Control | Opciones o rango | Predeterminado | Efecto |
|---|---|---|---|
| Projection | Flat, Globe | Flat | Mapa mundial o globo ortográfico. |
| Position Mode | Coordinates, Normalized | Coordinates | Cómo se interpretan las posiciones. |
| Show Land | On, Off | On | Muestra las costas y el relleno terrestre. |
| Show Borders | On, Off | Off | Agrega divisiones interiores decorativas. |
| Map Detail | Minimal, Standard | Standard | Cambia el detalle de las costas. En móvil se reduce el detalle. |
| Graticule | On, Off | On | Muestra guías sutiles de latitud y longitud. |
| Enable Zoom | On, Off | Off | Activa los botones de zoom en escritorio. |
| Initial Zoom / Min Zoom | 1–6 | 1 / 1 | Escala inicial y límite inferior del zoom. |
| Max Zoom | 1–6 | 2.5 | Límite superior del zoom. |
| Drag to Pan | On, Off | On | Permite arrastrar con el mouse cuando el zoom de escritorio está activo. |
En Flat, las rutas que cruzan la línea de cambio de fecha continúan en el borde opuesto. Globe muestra el hemisferio frontal y gira suavemente hacia la ubicación seleccionada, manteniendo sincronizados tierra, pins y rutas. La longitud sigue el arco más corto; si seleccionas otra ubicación durante el giro, continúa desde la orientación actual. Animation Speed controla la velocidad de transición. Reduced Motion y Canvas cambian directamente al destino. Usa la navegación del panel para llegar a ubicaciones del otro lado. El globo no gira mientras está inactivo ni permite rotación libre al arrastrar.
Las costas están integradas en el componente; no necesitas una API key de mapas, un servicio de teselas, subir imágenes ni descargar geografía externa.
Routes Style y Pins
| Control | Predeterminado | Efecto |
|---|---|---|
| Show Routes | On | Muestra las conexiones. |
| Route Width | 1.4 | Grosor base de las líneas, de 0.4 a 6. |
| Route Opacity | 0.38 | Visibilidad de la red secundaria; las rutas seleccionadas se mantienen destacadas. |
| Route Arc | 0.35 | Curvatura del mapa Flat, de 0 a 1. En Globe las rutas siguen la esfera. |
| Route Style | Solid | Solid o Dashed. |
| Color Mode | Alternating | Single Color, Alternating o Per Route. |
| Route Pulse | On | Puntos móviles ocasionales con estelas direccionales breves. |
| Pulse Speed | 3 s | Duración del recorrido, seguida de una pausa. Un valor mayor es más lento. |
| Pin Size | 5 | Tamaño del pin, de 2 a 16. |
| Halo / Halo Size | On / 28 | Halo suave que se expande y su tamaño, de 12 a 60. |
| Show Tooltip | On | Información de la ubicación al pasar el mouse o enfocar con teclado en escritorio. |
Las rutas seleccionadas usan una opacidad alta; las demás usan aproximadamente el 40% de Route Opacity. Como máximo hay pulsos en dos rutas en escritorio y en una en móvil. La selección actualiza juntos el pin, las rutas conectadas, el panel y el selector.
Panel
Show Panel está activo de forma predeterminada. Position ofrece Bottom Left, Bottom Right, Top Left, Top Right, Left y Right. El valor inicial es Bottom Left. Width empieza en 280 px y admite 160–500 px, limitado por el espacio disponible.
Show Country, Show Value, Description, Show CTA y Navigation están activos de forma predeterminada. El contenido opcional vacío permanece oculto. El CTA necesita un Link en la ubicación aunque Show CTA esté activo. CTA Label empieza como View location; la etiqueta individual de una ubicación lo reemplaza.
La navegación recorre las ubicaciones en el orden de la lista. Al cambiar la selección, el contenido del panel se reemplaza con una transición suave. En frames bajos, el contenido largo tiene desplazamiento dentro del área disponible.
Animación
| Control | Predeterminado | Efecto |
|---|---|---|
| Reveal | On | Una secuencia al entrar por primera vez en pantalla: aparición del mapa, pins escalonados y trazado de rutas. |
| Animation Speed | 1 | Velocidad general, de 0.4 a 2.5. Los valores mayores aceleran el movimiento coordinado. |
| Autoplay | Off | Avanza automáticamente la ubicación seleccionada. |
| Interval | 5 s | Tiempo entre selecciones automáticas, de 2 a 12 segundos. |
| Reduce Motion | Off | Activa manualmente el movimiento reducido. También se respeta la preferencia del sistema. |
La entrada no se reinicia al seleccionar una ubicación. Autoplay se pausa cuando el foco está dentro del componente, el componente queda fuera de pantalla o la pestaña está oculta. La interacción manual reinicia su intervalo. Los controles del panel permiten pausarlo y reanudarlo.
El movimiento reducido desactiva reveal, pulsos, halos y autoplay, pero conserva la selección y la navegación. Canvas muestra el mapa completo y estático, sin autoplay ni efectos móviles.
Estilo y etiquetas
Preset ofrece Midnight y Editorial; Midnight es el predeterminado. Radius empieza en 12 px. Los colores opcionales son Background, Water, Land, Route Primary, Route Secondary, Pin, Text, Muted Text, Border y Accent. Borra un color personalizado para volver al del preset.
Title Font y Body Font ofrecen controles tipográficos de Framer. Labels incluye el título, antetítulo, etiqueta accesible del mapa, etiqueta de ubicación, anterior/siguiente, pausa/reproducción y etiqueta del selector. Sus valores iniciales están en inglés; escríbelos en el idioma de tu página. Algunos textos del pie y etiquetas de los botones de zoom están fijos en inglés.
Comportamiento responsive
Por debajo de 600 px de ancho del componente, el panel pasa debajo del mapa y aparece un selector horizontal de ubicaciones. Los diseños Left y Right forman columnas separadas a partir de 700 px; por debajo se adaptan a paneles superpuestos hasta entrar en el diseño móvil.
| Control de Mobile | Predeterminado | Efecto |
|---|---|---|
| Location Rail | On | Activa el selector horizontal móvil. |
| Route Density | 0.45 | Reduce las conexiones secundarias; las rutas de la ubicación seleccionada permanecen visibles. |
| Map Height | 280 px | Altura móvil preferida del mapa, de 120 a 600 px, limitada por la altura del componente. |
El zoom y el desplazamiento con mouse se desactivan en móvil. Reserva suficiente altura para el mapa y el panel; aumentar Map Height no hace crecer un frame contenedor bajo.
Accesibilidad
Los pins son botones operables con teclado, con etiquetas de ubicación y foco visible. Tab llega a los pins, las flechas y Home/End mueven el foco entre ellos, y Enter o Space seleccionan. El selector admite navegación con flechas. Los cambios de selección se anuncian sin mover el foco al panel.
Mantén Navigation disponible cuando sea necesario acceder al hemisferio posterior en Globe. Usa colores legibles y textos descriptivos. El movimiento reducido se detecta automáticamente y también puede activarse mediante el control manual.
Solución de problemas
Falta una ruta
Revisa Show Routes y los IDs de ambos extremos. Deben coincidir exactamente y apuntar a ubicaciones diferentes. En móvil, aumenta Route Density para las rutas secundarias. En Globe, se recortan los tramos detrás de la esfera.
Una ubicación aparece en un lugar incorrecto
Revisa Position Mode. Coordinates lee Latitude y Longitude; Normalized lee X e Y. Comprueba que latitud y longitud estén en sus campos correctos y revisa sus signos. La longitud se envuelve alrededor del mundo y la latitud se limita a su rango válido.
No aparece el CTA
Activa Show Panel y Show CTA, y agrega un Link a la ubicación seleccionada. Una etiqueta por sí sola no crea un enlace.
No se ejecutan las animaciones o autoplay
Usa Framer Preview en lugar de Canvas. Revisa Reduce Motion y la preferencia del sistema. Para autoplay, activa Autoplay y reanúdalo si está pausado. Mueve el foco fuera del componente y mantenlo visible en una pestaña activa.
El panel se ve apretado en móvil
Aumenta la altura del componente, acorta Description o reduce Map Height. La altura del frame contenedor limita el espacio disponible.
Preguntas frecuentes
¿Puedo mostrar oficinas, clientes o proyectos?
Sí. City, Country, Value, Description, Icon y Link son editables. Las métricas son texto que tú proporcionas; no están conectadas a datos empresariales en vivo.
¿Puedo ocultar las rutas y conservar las ubicaciones?
Sí. Desactiva Show Routes. La selección y el panel siguen disponibles.
¿Necesita un servicio externo de mapas?
No. La geografía SVG está incluida en el archivo de código. No requiere instalar paquetes adicionales ni una API key en Framer.
¿Puedo usar varias instancias en una página?
Sí. Cada instancia mantiene su propia selección, identificadores SVG y estado de animación.
Limitaciones
- Es un mapa de presentación, no un servicio de mapas a nivel de calle, geocodificación o navegación paso a paso.
- Las costas usan geometría simplificada de Natural Earth. Se omiten la Antártida y algunas islas pequeñas. Show Borders es decorativo y no ofrece fronteras nacionales completas.
- Locations admite hasta 100 entradas y Routes hasta 200. Mantén la red legible; las configuraciones densas pueden superponerse.
- Globe oculta los pins posteriores y recorta las rutas en su borde. Usa la navegación para cambiar de hemisferio visible.
- Una lista Locations vacía muestra una indicación de edición solo en Canvas; no restaura las ciudades de muestra.
- No incluye conexión a datos en vivo ni carga de geografía personalizada.
¿Necesitas ayuda? Visita soporte.
Registro de cambios
v1.0
Primera versión.
- Mapas Flat y Globe con ubicaciones, rutas y panel sincronizado editables.
- Presets Midnight y Editorial, selector responsive, navegación por teclado y movimiento reducido.
- Entrada escalonada, pulsos direccionales y autoplay opcional.
- Globe gira suavemente hacia cada ubicación seleccionada, con geografía y rutas sincronizadas, transiciones interrumpibles y cambios directos con Reduced Motion.
- Documentación en inglés y español.
arforgelabs.support@proton.me