Blocks
Interactive Globe

Interactive Globe (alonepro/interactive-globe)

The Interactive Globe block provides a real-time, 3D canvas-rendered globe powered by WebGL (via cobe (opens in a new tab)). It allows charities, relief foundations, and international NGOs to visualize their worldwide footprint, active project chapters, and relief sites.

Key Features

  • Smooth 3D Rotation: Auto-spins smoothly with user drag-and-drop interactivity.
  • Location Pins (Markers): Pinpoint latitude and longitude coordinates with illuminated beacon dots.
  • High-DPI Canvas Rendering: Crisp presentation across Retina and high-density mobile screens.
  • Low Performance Overhead: Lightweight WebGL shader implementation designed to minimize CPU and battery impact.

Adding Location Markers

  1. In the block inspector, locate the Markers panel.
  2. Click Add Marker.
  3. Provide the location parameters:
    • Latitude (lat): Float coordinate between -90 and 90 (e.g. 40.7128).
    • Longitude (lng): Float coordinate between -180 and 180 (e.g. -74.0060).
    • Label: Location or project name (e.g. Nairobi Community Health Center).
  4. Markers render as glowing pinpoint nodes orbiting with the globe geometry.

Block Inspector Settings

SettingTypeDefaultDescription
autoRotateToggletrueAutomatically spin the globe when idle.
rotateSpeedNumber0.003Angular velocity coefficient for auto-rotation.
enableDragToggletrueAllow visitors to click/touch and drag to rotate the view.
mapBrightnessNumber6Surface landmass luminesce and dot intensity.
markersArray[]List of geographic coordinate pins.

Technical & Hosting Notes

  • WebGL Compatibility: Requires browser WebGL support (standard in all modern browsers).
  • Content Security Policy (CSP): If your hosting provider or security plugin enforces strict CSP headers, ensure canvas rendering and WebGL shaders are not blocked.
  • Static Fallback: For environments without WebGL or low-power devices, consider wrapping the block inside a parent container with an evocative background fallback image.
Floating HighlightsList Circle