Overview
The interactive 3D globe is the centerpiece of the 200 Mates project, displaying mate submissions from around the world. The globe features auto-rotation, zoom controls, country highlighting, and interactive mate markers.The globe uses WebGL technology and requires a modern browser with hardware acceleration enabled for optimal performance.
Globe Controls
The globe supports multiple interaction methods for navigation and exploration.Rotation
Auto-Rotation
The globe automatically rotates at a gentle speed (0.4) when not being interacted with, allowing you to see all regions.
Manual Rotation
Click and drag anywhere on the globe to rotate it manually. Auto-rotation pauses during interaction.
Auto-Rotation Behavior
The auto-rotation feature intelligently responds to your interactions:On Mouse/Touch End
After releasing, auto-rotation resumes after 2 seconds of inactivity (when not zoomed in).
Zoom Controls
Zoom In
Zoom In
- Mouse Wheel: Scroll up to zoom in
- Trackpad: Pinch to zoom gesture
- Touch Devices: Pinch with two fingers to zoom
Zoom Out
Zoom Out
- Mouse Wheel: Scroll down to zoom out
- Trackpad: Reverse pinch gesture
- Touch Devices: Spread two fingers apart
Globe Features
Visual Appearance
The globe renders with carefully chosen visual settings:Earth Texture
Dark earth texture provides contrast for mate markers and highlighted countries.
Background
Pure black background (#000000) creates an immersive space atmosphere.
Initial View
Globe starts at coordinates (20°N, 20°W) with altitude 2.5 for optimal overview.
Polar Constraints
View angle constrained between 36° and 144° to prevent disorienting perspectives.
Responsive Sizing
The globe automatically adjusts to your screen size:- Initial Load: Globe sizes to fit its container
- Window Resize: Globe dimensions update in real-time
- Mobile/Desktop: Optimized for all screen sizes
Country Polygons
Countries are represented as 3D polygons with interactive highlighting.Polygon Colors
Selected Country
Color: Gold (#c8a46e)Altitude: 0.02 (raised)When you click a country or it’s selected in the form, it highlights in gold.
Countries with Mates
Color: Green (#6A8F60)Altitude: 0.012 (slightly raised)Countries where at least one mate has been submitted appear in green.
Polygon Interaction
Click to Select
Click any country polygon to:
- Highlight it in gold
- Auto-fill the country field in the submission form
- Pause globe rotation for easier viewing
Polygon styling:
- Stroke color: Dark gray (#2a2e24) for borders
- Side color: Transparent black (rgba(0,0,0,.2)) for depth
- Hover cursor: Changes to pointer over countries
Mate Markers
Each approved mate submission appears as an interactive marker on the globe.Marker Appearance
Emoji Icon
Mates are represented by the 🧉 emoji (mate cup icon) with a drop shadow for visibility.
Hover Effect
The emoji scales to 135% size when you hover over it, indicating it’s clickable.
Marker Jitter System
To prevent markers from overlapping when multiple mates are submitted from similar locations, the globe implements an intelligent “jitter” algorithm:How Jitter Works
How Jitter Works
- Grouping: Markers within 0.1° of each other are grouped together
- Distribution: Grouped markers are arranged in a circle pattern
- Spacing: Each marker is offset 1.2° from the center in a unique direction
- Angle Calculation: Markers are evenly distributed around 360° based on group size
Marker Hover Cards
When you hover over a mate marker, a detailed information card appears:Info Card Contents
Photo: Thumbnail of the mate photo (160px wide, max 120px height)Name: Submitter’s name (or “Anónimo” if none provided)Country: Country name with 🌍 globe emojiYerba Brand: Brand name with 🌿 herb emojiMate ID: Unique identifier with # symbol for reference
Card Positioning
The hover card intelligently positions itself:Above or Below
- If space available: Card appears above the marker (bottom: 36px)
- If insufficient space: Card appears below the marker (top: 36px)
Auto-rotation pauses when hovering over markers to allow comfortable viewing of the card.
Click to View Details
Lightbox View
Click any mate marker to open the full lightbox view with complete details, larger photo, and copy-to-clipboard functionality for the mate ID.
Animated Arcs
The globe displays animated connection arcs between consecutive mate submissions.Arc Animation
Connection Pattern
Arcs connect mates in chronological order, showing how the tradition spreads across the globe.
Visual Style
Dual-color gradient: Green (rgba(106,143,96,.6)) to Gold (rgba(200,164,110,.6))
Arc Properties
Technical Details
Technical Details
- Altitude Scale: 0.4 (moderate curve height)
- Stroke Width: 0.5
- Dash Length: 0.4
- Dash Gap: 0.2
- Animation Duration: 2.5 seconds per arc
- Cycle Rate: New arc every 2.5 seconds
Arcs only display when there are at least 2 approved mates on the map.
Programmatic Camera Movements
The globe performs automatic camera movements during certain actions.After Submitting a Mate
When you submit a mate with GPS coordinates:Return to Overview
Camera returns to overview position (lat: 20, lng: -20, altitude: 2.5) over 1.5 seconds
Performance Considerations
Polygon Rendering
60ms debounce prevents excessive re-renders when countries are selected
Marker Updates
Markers only re-render when the list of mate IDs changes
Responsive Updates
Globe dimensions update on window resize events
Animation Cleanup
Timers are properly cleared to prevent memory leaks
Tips for Best Experience
Smooth Rotation
Smooth Rotation
Let the globe auto-rotate for a few seconds to get a sense of the global distribution before interacting.
Finding Dense Areas
Finding Dense Areas
Look for green-highlighted countries to find regions with active mate communities.
Viewing Marker Details
Viewing Marker Details
Hover over markers to see quick info without clicking, or click for full lightbox view.
Country Selection
Country Selection
Click countries directly on the globe to quickly fill the form when submitting your own mate.
Related Pages
Submitting Your Mate
Learn how to submit your own mate to appear on the globe
Gallery Features
Explore the gallery and lightbox features for viewing mates