Documentation

Content - MiniGlobe is a Joomla content plugin that embeds interactive 3D globes into your articles using a simple {miniglobe} tag. Powered by Three.js, it renders lightweight, customizable globes with a canvas element inside a <div> with the plg_content_miniglobe class. Perfect for adding visually striking, data-driven infographics, MiniGlobe supports custom textures, dynamic markers, and responsive sizing to fit any container.

Installation

1. Download Content - MiniGlobe from the repository linked here Content - MiniGlobe

2. Install via Joomla’s Extension Manager (Extensions > Manage > Install).

3. Enable the plugin in the Plugin Manager (Extensions > Plugins, search for “Content - MiniGlobe”).

4. Configure default settings in the plugin options (optional, see Configuration below).

Usage

Add the {miniglobe} tag to any Joomla article to embed a 3D globe. The simplest form is:

{miniglobe}

This renders a globe using all default settings from the plugin configuration (texture, clouds, bump map, etc.). The globe automatically scales to fit the width of its container, making it responsive to your site’s layout. Despite the name “MiniGlobe,” the “mini” refers to its lightweight data size (max 1.3MB with all features enabled, smaller without clouds or bump map), not its display size.

Tag Attributes

You can override default settings by adding attributes to the {miniglobe} tag. All attributes are optional, and unspecified attributes fall back to plugin defaults.

Example Tags

Basic globe with default settings:

{miniglobe}

Globe with a green marker in New York City, brighter lighting, and clouds:

{miniglobe brightness="1.5" markers='[[40.7128,-74.0060,0.5,"#00ff00"]]' clouds="1"}

Globe with dynamic markers updated every 10 seconds via AJAX:

{miniglobe markersAJAX="/path/to/markers.json" markersAJAXInterval="10"}

Marker Format

The markers attribute uses a 2D JSON array where each marker is an array of 2–4 values:

[[lat,lon,size,color],...]

• lat (required): Latitude as a float (e.g., 40.7128 for New York City).

• lon (required): Longitude as a float (e.g., -74.0060 for New York City).

• size (optional): Float, fraction of globe radius (defaults to markerSize).

• color (optional): Hex color with hash (e.g., #00ff00, defaults to markerColor).

Example for two markers (New York City and London):

[[40.7128,-74.0060,0.5,"#00ff00"],[51.5074,-0.1278,0.3,"#ff0000"]]

For markersAJAX, the JSON file must return an array of objects:

[{"lat":40.7128,"lon":-74.0060,"size":0.5,"color":"#00ff00"},{"lat":51.5074,"lon":-0.1278,"size":0.3,"color":"#ff0000"}]

JavaScript Marker Control

MiniGlobe supports dynamic marker updates via JavaScript. Each globe is accessible via its container <div> (with plg_content_miniglobe class and a unique ID like miniglobe_0). Use the following methods on the MiniGlobe property:

var container = document.getElementById('miniglobe_0');

// Add a single marker
container.MiniGlobe.addMarker(40.7128, -74.0060, 0.5, '#00ff00');

// Remove a specific marker by index
container.MiniGlobe.removeMarker(0);

// Remove multiple markers by index array or all markers
container.MiniGlobe.removeMarkers([0, 1]); // Specific markers
container.MiniGlobe.removeMarkers(); // All markers

// Process an array of marker objects
container.MiniGlobe.processMarkersArray([
    {"lat":40.7128,"lon":-74.0060,"size":0.5,"color":"#00ff00"},
    {"lat":51.5074,"lon":-0.1278,"size":0.3,"color":"#ff0000"}
]);

Configuration

In the Joomla Plugin Manager, configure default settings for MiniGlobe:

• Bump Map: Enable/disable default bump map (0 or 1).

• Clouds: Enable/disable default cloud layer (0 or 1).

• Texture Image: Default equirectangular globe texture path.

• Bump Map Image: Default equirectangular bump map texture path.

• Clouds Image: Default equirectangular cloud texture path.

• Brightness: Default ambient light intensity (e.g., 1.0).

• Speed: Default rotation speed in degrees per frame (e.g., 0.005).

• Marker Color: Default hex color (e.g., #ff0000).

• Marker Size: Default size as a fraction of globe radius (e.g., 1.0).

Tag attributes override these defaults.

Texture Requirements

All textures (globe, bump map, clouds) must be in equirectangular projection. Suitable images are available from sources like:

• NASA Visible Earth

• Natural Earth

• Shaded Relief

Try out the Equirectangular Globe Texture Editor, allowing you to select feature colors and export equirectangular textures using an SVG manipulation process (similar to my previous demos).

Notes

• MiniGlobe requires WebGL support in the browser.

• The plugin is lightweight, maxing out at 1.3MB with all features enabled (globe texture, clouds, bump map). Skipping clouds or bump maps reduces the footprint.

• The globe scales to the full width of its container, making it responsive to your site’s layout.

• Ensure markersAJAX URLs return valid JSON in the correct format.

• Use WebP or JPEG for textures to optimize performance.

• The plugin includes Three.js (three.min.js) in the media folder.