Global Presence Orbit Map
Interactive world map with selectable locations, curved routes, a detail panel, and coordinated motion in Flat and Globe views.
Quick Start
- Add Global Presence Orbit Map to your Framer page. Start with a frame around 1200 × 680 px and a flexible width. For mobile, allow about 640–720 px of height for the map, location rail, and panel.
- Open Locations. Replace the sample cities, give each location a unique ID, and enter its Latitude and Longitude.
- Open Routes. Connect two locations by entering their exact IDs in Source ID and Target ID.
- Set Initial Location to the ID that should be selected first. The insertion default is
tokyo. - Choose Map → Projection, Style → Preset, and Panel → Position.
- Open Framer Preview to check selection, route motion, keyboard navigation, and a narrow layout. Canvas shows a static editing view.
A new instance includes eight sample locations and ten routes. The default is Flat, Midnight, and Bottom Left, with Tokyo selected and autoplay off. Replace the sample business metrics with your own content.
Locations and Routes
Location fields
| Control | Default for a new item | Purpose |
|---|---|---|
| ID | location | Unique identifier used by routes and Initial Location. |
| City / Country | New location / empty | Name and country displayed in the panel. |
| Latitude / Longitude | 0 / 0 | Position when Position Mode is Coordinates. |
| X / Y | 0.5 / 0.5 | Position from 0 to 1 when Position Mode is Normalized. |
| Value | Empty | Custom text metric, such as 12 Active projects. |
| Description | Empty | Supporting text for the selected location. |
| Icon | None | None, Office, Project, Team, or Delivery. |
| Link | Empty | Optional URL, Framer page, or anchor for the CTA. |
| CTA Label | Empty | Overrides the panel's CTA Label for this location. |
| New Tab | Off | Opens the location link in a new tab when enabled. |
Coordinates uses latitude from −90 to 90 and longitude from −180 to 180. Normalized uses X from left to right and Y from top to bottom. In Globe, normalized positions are interpreted as equivalent geographic coordinates. Changing the positioning mode affects every location.
Connecting locations
| Control | Default | Purpose |
|---|---|---|
| Source ID / Target ID | Empty | Exact IDs of the two connected locations. |
| Color | Preset | Optional route colour, used with Color Mode set to Per Route. |
| Strength | 1 | Relative line weight, from 0.25 to 2. |
For example, a route from tokyo to singapore requires locations with those two IDs. Renaming City does not rename ID. Update routes if you change an ID. Invalid references and connections from a location to itself are omitted.
Map
| Control | Options or range | Default | Effect |
|---|---|---|---|
| Projection | Flat, Globe | Flat | World map or orthographic globe. |
| Position Mode | Coordinates, Normalized | Coordinates | How location positions are interpreted. |
| Show Land | On, Off | On | Displays the coastlines and land fill. |
| Show Borders | On, Off | Off | Adds decorative interior divisions. |
| Map Detail | Minimal, Standard | Standard | Changes coastline detail. Mobile uses reduced detail. |
| Graticule | On, Off | On | Displays subtle latitude and longitude guides. |
| Enable Zoom | On, Off | Off | Enables desktop zoom buttons. |
| Initial Zoom / Min Zoom | 1–6 | 1 / 1 | Initial scale and lower zoom limit. |
| Max Zoom | 1–6 | 2.5 | Upper zoom limit. |
| Drag to Pan | On, Off | On | Allows mouse dragging when desktop zoom is enabled. |
Flat routes crossing the date line continue at the opposite edge. Globe shows the front hemisphere and recentres with a brief fade when a location is selected. Use panel navigation to reach locations on the other side. The globe does not rotate continuously or provide free rotation by dragging.
The coastlines are embedded in the component; no map API key, tile service, image upload, or external geographic download is required.
Routes Style and Pins
| Control | Default | Effect |
|---|---|---|
| Show Routes | On | Shows the connections. |
| Route Width | 1.4 | Base line width, from 0.4 to 6. |
| Route Opacity | 0.38 | Secondary-network visibility; selected routes remain prominent. |
| Route Arc | 0.35 | Flat-map curve amount, from 0 to 1. Globe routes follow the sphere. |
| Route Style | Solid | Solid or Dashed. |
| Color Mode | Alternating | Single Color, Alternating, or Per Route. |
| Route Pulse | On | Occasional moving dots with short directional trails. |
| Pulse Speed | 3 s | Travel duration, followed by a quiet interval. A higher value is slower. |
| Pin Size | 5 | Pin size, from 2 to 16. |
| Halo / Halo Size | On / 28 | Soft expanding pin halo and its size, from 12 to 60. |
| Show Tooltip | On | Location details on desktop hover or keyboard focus. |
Selected routes use strong opacity; unrelated routes use approximately 40% of Route Opacity. At most two routes carry pulses on desktop, and one on mobile. Selecting a location updates its pin, connected routes, panel, and rail together.
Panel
Show Panel is on by default. Position offers Bottom Left, Bottom Right, Top Left, Top Right, Left, and Right. The default is Bottom Left. Width starts at 280 px and accepts 160–500 px, constrained by the available space.
Show Country, Show Value, Description, Show CTA, and Navigation are on by default. Empty optional content stays hidden. A CTA needs a location Link even when Show CTA is on. The shared CTA Label starts as View location; a location-specific label overrides it.
Navigation visits locations in their array order. Changing a selection gently replaces the panel content. Long panel content scrolls within the available area in short frames.
Animation
| Control | Default | Effect |
|---|---|---|
| Reveal | On | One entrance sequence when the component first enters view: map reveal, staggered pins, and route drawing. |
| Animation Speed | 1 | Overall motion speed, from 0.4 to 2.5. Higher values speed up the coordinated motion. |
| Autoplay | Off | Advances the selected location automatically. |
| Interval | 5 s | Time between automatic selections, from 2 to 12 seconds. |
| Reduce Motion | Off | Manually enables the reduced-motion presentation. The system preference is also respected. |
The entrance does not restart when selecting a location. Autoplay pauses when focus is inside the component, the component is outside the viewport, or the browser tab is hidden. Manual interaction restarts its interval. Panel controls let visitors pause and resume it.
Reduced motion disables reveal, pulses, halos, and autoplay while keeping selection and navigation available. Canvas renders the complete static map without autoplay or moving effects.
Style and Labels
Preset offers Midnight and Editorial; Midnight is the default. Radius starts at 12 px. Optional colour overrides are Background, Water, Land, Route Primary, Route Secondary, Pin, Text, Muted Text, Border, and Accent. Clear an override to use the preset colour again.
Title Font and Body Font provide Framer font controls. Labels contains editable heading, eyebrow, map accessibility label, location label, previous/next, pause/play, and rail labels. Their defaults are English; write them in the language of your page. Some footer text and zoom button labels are fixed English strings.
Responsive Behavior
Below 600 px of component width, the panel moves below the map and a horizontal location rail appears. Left and Right panel layouts become separate columns from 700 px; below that width they adapt to overlays until the mobile layout takes over.
| Mobile control | Default | Effect |
|---|---|---|
| Location Rail | On | Enables the scrollable mobile location selector. |
| Route Density | 0.45 | Reduces unrelated connections; routes connected to the selected location remain visible. |
| Map Height | 280 px | Preferred mobile map height, from 120 to 600 px, capped by the available component height. |
Zoom and mouse panning are disabled on mobile. Leave enough frame height for the map and panel; increasing Map Height cannot make a short parent frame grow.
Accessibility
Pins are keyboard-operable buttons with location labels and visible focus. Tab reaches pins, arrow keys and Home/End move between them, and Enter or Space selects. The rail supports arrow-key navigation. Selection updates are announced without moving keyboard focus to the panel.
Keep Navigation available when visitors need to reach the rear hemisphere in Globe. Use readable colour overrides and meaningful location text. Reduced motion is detected automatically as well as through the manual control.
Troubleshooting
A route is missing
Check Show Routes and both endpoint IDs. IDs must match exactly and refer to different locations. On mobile, increase Route Density for unrelated routes. In Globe, paths behind the sphere are clipped.
A location appears in the wrong place
Check Position Mode. Coordinates reads Latitude and Longitude; Normalized reads X and Y. Keep latitude and longitude in the correct fields and check their signs. Longitude wraps around the world and latitude is clamped to its valid range.
The CTA is missing
Enable Show Panel and Show CTA, then add a Link to the selected location. A label alone does not create a link.
The animation or autoplay is not running
Use Framer Preview rather than Canvas. Check Reduce Motion and the system preference. For autoplay, enable Autoplay and resume it if paused. Move focus outside the component and keep it visible in an active browser tab.
The panel feels cramped on mobile
Increase the component's height, shorten Description, or reduce Map Height. The height of the parent frame limits the available space.
FAQ
Can I show offices, customers, or projects?
Yes. City, Country, Value, Description, Icon, and Link are editable. The metrics are text you supply; they are not connected to live business data.
Can I hide routes and keep only the locations?
Yes. Turn off Show Routes. Location selection and the panel remain available.
Does it need an external map service?
No. The SVG geography is included in the code file. No additional package installation or API key is required in Framer.
Can I use more than one instance on a page?
Yes. Each instance maintains its own selection, SVG identifiers, and motion state.
Limitations
- The map is a presentation graphic, not street-level mapping, geocoding, or turn-by-turn navigation.
- Coastlines are simplified Natural Earth geometry. Antarctica and some small islands are omitted. Show Borders is decorative and does not provide complete national boundaries.
- Locations are limited to 100 entries and routes to 200. Keep the network readable; dense configurations can overlap.
- Globe hides rear-facing pins and clips routes at its edge. Use navigation to change the visible hemisphere.
- An empty Locations array shows an editing hint only in Canvas; it does not restore the sample cities.
- No live data connection or user-uploaded geography is built in.
Need help? Visit support.
Changelog
v1.0
Initial release.
- Flat and Globe maps with editable locations, routes and a synchronized detail panel.
- Midnight and Editorial presets, responsive location rail, keyboard navigation and reduced motion.
- Staggered entrance, directional route pulses and optional autoplay.
- English and Spanish documentation.
arforgelabs.support@proton.me