Builder Guide

The Builder is your configuration workspace. Access it at globepoint.web-runner.net/builder. The left sidebar contains all editing tools organized in tabs, while the right side shows a live preview of your globe.

Locations Tab

The Locations tab is your primary workspace. Here you configure your company identity and manage all points of interest.

Company Name & Logo

At the top of the Locations tab, set your Company Name (displayed in the stats panel) and your Logo URL (a publicly accessible image). The logo preview appears below the input as you type.

Adding a Location

Click + Add to open the location form. Fill in the following fields:

Field	Description
Name	Display name for this location
Category	Office, Warehouse, Data Center, Partner, Other, or select "+ Custom Category..." to create your own
Country Search	Type a country name to auto-fill coordinates with the country's center point
Latitude / Longitude	Coordinates (auto-filled from country search, manually entered, or use "Place on Globe")
Description	Text shown in the detail panel when clicked
URL	Optional link shown as a "Visit" button
Color	Marker color on the globe
Status	Online or Offline
Offline Reason	Only shown when status is Offline (e.g. "Maintenance until next year")

Country Search

The fastest way to set coordinates is using the Country Search field. Start typing a country name (e.g., "Germany", "Japan", "Brazil") and select from the dropdown. The latitude and longitude fields will auto-fill with the country's center coordinates. You can then fine-tune the position if needed.

Custom Categories

Beyond the preset categories (Office, Warehouse, Data Center, Partner, Other), you can create your own. Select "+ Custom Category..." from the dropdown, type your category name (max 20 characters), and click OK. Custom categories work just like preset ones — they appear in the legend and can be filtered.

Place on Globe

For precise placement, click Place on Globe then click anywhere on the 3D globe. The latitude and longitude fields will auto-fill with the exact coordinates of where you clicked. The hover coordinate display in the bottom-right shows real-time lat/lon as you move your cursor.

Connections Tab

The Connections tab (labeled "Arcs") lets you draw animated arc lines between any two locations.

Adding a Connection

1. Select a From location from the dropdown
2. Select a To location (the "From" location is automatically excluded)
3. Optionally pick a Color for the arc
4. Click Add Arc

The arc appears immediately on the globe as an animated dashed line following the great circle between the two points. Arcs are elevated above the globe surface so they never clip through it.

To remove a connection, hover over it in the list and click the X button.

Theme Tab

The Theme tab controls colors and card styling used throughout the entire widget.

Theme Colors

• Accent Color (Primary) — Controls POI markers, connection arcs, panel borders, atmosphere glow, and UI highlights
• Secondary Color — Controls builder UI elements, orbit line tinting, and text accents

Card Styling

Customize the appearance of the Company Presence card and POI detail panel:

• Background Mode — Choose between Solid (custom color), Transparent (see-through), or Blur (frosted glass effect)
• Card Background Color — When using Solid mode, set the exact background color
• Card Text Color — Adjust text color for readability on your chosen background

Changes are applied in real-time across the entire interface including the 3D atmosphere shader.

Settings Tab

Fine-tune the globe's visual behavior and UI visibility:

Globe Visuals

Orbit Lines

Toggle the decorative orbit rings on or off. When enabled, use the opacity slider to control their visibility from subtle (10%) to prominent (100%).

City Lights

Toggle night-side city illumination. When enabled, the dark hemisphere of the globe shows glowing city lights from a NASA texture map. When disabled, the dark side is simply dimmed.

Note: This setting is marked "(Viewer only)" — it takes effect in the exported viewer and preview, not in the builder interface.

Stars Background

Show or hide the animated starfield behind the globe. Useful if you want the globe against a clean background or plan to use transparent/blur background mode.

Globe Brightness

Control how visible the dark side of the globe is. Options range from Dim (dark side barely visible) to Very Bright (dark side almost as visible as day side). Useful for ensuring all your locations are visible regardless of globe rotation.

Note: This setting is marked "(Viewer only)" — it takes effect in the exported viewer and preview.

Rotation Speed

Control the idle auto-rotation speed with a slider:

Label	Behavior
Off	Globe stays static until user interacts
Slow	Gentle rotation, barely noticeable
Medium	Default — smooth ambient rotation
Fast	Noticeable continuous spin
Very Fast	Rapid rotation

Rotation pauses when the user interacts (drag/scroll) and resumes after 2 seconds of inactivity.

Camera Start Position

Set the latitude and longitude where the camera faces when the globe first loads. Use the Use First Location button to automatically set this to your first POI's coordinates.

Political Map

Enable a political map overlay showing country borders on the globe.

Country Borders

Toggle country border outlines on or off. When enabled, borders from all 258 countries are drawn on the globe surface. A loading spinner appears while the border data loads.

Border Color & Opacity

When borders are enabled, customize their appearance with a color picker and opacity slider (10% to 100%).

Subdivisions

When country borders are enabled, you can also enable subdivisions to show state and province borders for major countries including the United States, Canada, Australia, Brazil, China, India, and more. Subdivision borders are rendered at 50% of the main border opacity for visual hierarchy.

Hide Textures

When country borders are enabled, you can also hide all globe textures to show a clean white/light gray globe with only the country outlines. This creates a minimalist political map look.

Note: This setting is marked "(Viewer only)" — it takes effect in the exported viewer and preview.

Globe Style (B&W Modes)

When country borders are enabled, choose between three globe rendering styles:

• Default — Normal earth textures with all color maps
• B&W — Black continents on a white ocean. Uses the specular map to distinguish land from water, creating a stark monochrome look
• B&W Inverted — White continents on a black ocean. The inverted version for dark backgrounds or a different aesthetic

These modes work alongside country borders to create clean, minimalist globe presentations. They can be combined with custom border colors for striking visual effects.

Note: This setting is marked "(Viewer only)" — it takes effect in the exported viewer and preview.

2D Map Settings

When in 2D mode (toggled via the 3D/2D switch in the header), the Settings tab shows 2D-specific options instead of 3D globe visuals.

Land & Borders

The 2D map always shows country borders — there's no toggle to hide them. Instead, you have full control over styling:

• Land Color — Set the fill color for continents (default: dark purple #0d0a1a)
• Border Color — Set the stroke color for country outlines
• Border Opacity — Control border visibility from 10% to 100%

Subdivisions (2D)

Enable subdivisions to show state and province borders on the 2D map. Just like in 3D mode, this displays internal administrative boundaries for major countries. Subdivision borders are rendered thinner (0.3px vs 1px) and at 50% of the main border opacity.

Settings Not Available in 2D

Some settings only apply to the 3D globe and are hidden in 2D mode:

• Orbit Lines — No orbital rings in 2D
• City Lights — No day/night cycle in 2D
• Stars Background — No starfield behind the map
• Globe Brightness — No lighting model in 2D
• Rotation Speed — Map doesn't auto-rotate
• Camera Start Position — 2D map has fixed bounded view
• Hide Textures / Globe Style — These are 3D texture controls

Background

Control what appears behind the globe (or map in 2D mode):

• Solid — A solid background color (customizable)
• Transparent — Fully transparent, allowing your website's background to show through
• Blur — Transparent with a frosted glass blur effect

UI Elements

Company Presence Card

Show or hide the stats panel that displays your company name, logo, and location breakdown. When visible, you can position it in any of the four corners using the position buttons.

Legend Bar

Show or hide the category filter bar at the bottom of the screen. When visible, users can click categories to filter which locations are shown.

Instructions

Show or hide the "DRAG ROTATE · SCROLL ZOOM · CLICK SELECT" hint text in the bottom corner.

Export Tab

The Export tab provides everything needed to use your configured globe:

Copy JSON Config

Copies the full configuration as formatted JSON. Use this to save your work or import it later to make changes.

Copy Embed Snippet

Copies a ready-to-paste HTML snippet that contains your entire configuration encoded in the HTML. This is what you paste into your website. See the Embedding section for full details.

Import JSON Config

Paste a previously exported JSON config to restore a saved configuration. This overwrites the current state entirely.

Open Viewer Preview

Opens the Viewer mode in a new tab with your current configuration. This shows exactly what your visitors will see — no sidebar, no editing tools, just the globe with HUD panels. Use this to verify settings marked "(Viewer only)" are working as expected.

Embedding GlobePoint

GlobePoint is designed as an embeddable widget. Once you've configured your globe in the Builder, you can embed it on any website using a simple HTML snippet.

How It Works

The embed system uses a two-part approach:

1. A <div> element with your configuration encoded as a base64 data-config attribute
2. A <script> tag that loads embed.js from the GlobePoint server

When the page loads, embed.js reads the config and creates an <iframe> pointing to the GlobePoint Viewer with the config as a query parameter. No server-side processing or database is involved.

The Embed Snippet

Click Copy Embed Snippet in the Builder's Export tab. You'll get something like this:

<!-- GlobePoint Widget -->
<div id="presence-globe-widget"
     data-config="eyJwcm9qZWN0SWQiOiJkZ..."
     style="width:100%;height:600px;">
</div>
<script src="https://globepoint.web-runner.net/embed.js"></script>

Paste this anywhere in your HTML — a WordPress page, Elementor widget, Webflow embed block, or any custom HTML page.

Customizing the Embed

Dimensions

Control the widget size via the style attribute on the container div:

<!-- Full width, 600px tall (default) -->
style="width:100%; height:600px;"

<!-- Fixed size -->
style="width:800px; height:500px;"

<!-- Full viewport height -->
style="width:100%; height:100vh;"

Updating the Configuration

To update the globe on your website:

1. Open the Builder at globepoint.web-runner.net/builder
2. Import your existing JSON config (paste it via "Import JSON Config")
3. Make your changes
4. Click Copy Embed Snippet
5. Replace the old snippet on your website with the new one

Platform-Specific Instructions

WordPress (Classic Editor)

1. Edit the page/post where you want the globe
2. Switch to the Text tab (not Visual)
3. Paste the embed snippet
4. Save/publish

WordPress (Elementor)

1. Drag an HTML widget onto your page
2. Paste the embed snippet into the HTML content area
3. Publish

WordPress (Gutenberg)

1. Add a Custom HTML block
2. Paste the embed snippet
3. Publish

Webflow

1. Add an Embed element to your page
2. Paste the embed snippet
3. Publish

Wix

1. Add an Embed Code element (under "Add" > "Embed Code")
2. Choose "Embed a Widget"
3. Paste the embed snippet
4. Publish

Squarespace

1. Add a Code Block to your page
2. Paste the embed snippet
3. Save

Custom HTML / Static Sites

Paste the snippet directly into your HTML file wherever you want the globe to appear. No build tools or frameworks required.

Direct Viewer URL

You can also link directly to the Viewer without using the embed script:

https://globepoint.web-runner.net/viewer?config=BASE64_ENCODED_CONFIG

This opens the full-page Viewer with your configuration. Useful for sharing a direct link or creating a dedicated page for your globe.

Troubleshooting

Globe Not Appearing

• Ensure the embed snippet is pasted in an HTML context (not a visual/WYSIWYG editor that might strip the code)
• Check that your page uses HTTPS — some browsers block mixed HTTP/HTTPS content
• Verify the container div has a height set (the default is 600px)

Transparent Background Not Working

If you've set the background to "Transparent" or "Blur" but it's showing as black:

• The iframe needs to support transparency — this is handled automatically by the embed script
• Some website builders may override iframe styles; try wrapping the embed in a container with background: transparent

Need Help?

If you encounter issues, contact us at web-runner.net/contact with details about your website platform and the issue you're experiencing.