Background Vector
US
Home Maps Features Pricing Contact Add-On
Background Vector

Note: For production, use the blank-map-content.js file instead of map-content.js (this file is for demo purpose). To find the map ID, search by the state name in blank-map-content.js.

🌍 Globe Projection - GEO Map Hub Plugin

Globe Projection renders a 3D globe using D3 and TopoJSON. It reads country data from JSON files, applies global water color, country fill, stroke, and hover styles. Map elements are injected into the container (canvas-container-gmh) and styled via general_config.

📘 What is Globe Projection?

The Globe Projection Plugin displays a 3D globe-style projection of countries using D3.js and TopoJSON. It allows you to render the earth on a canvas element with interactive hover effects, strokes, and custom coloring for land and water.

💡 Use Case

  • Render an interactive world globe.

  • Visualize country boundaries on a spherical projection.

  • Apply hover and click effects to countries.

  • Customize globe styling using canvas and JSON-based map data.

📁 Folder Structure

Ensure your project follows this structure:

your-project/
├── gmh-plugin/
│    ├── assets/
│    │    ├── css/
│    │    │    └── style.css
│    │    ├── js/
│    │    │    └── lib/
│    │    │    │    ├── d3.min.js
│    │    │    │    └── topojson.js
│    │    │    └── script/
│    │    │    │    ├── geomaphub.js
│    │    │    │    └── lib/
│    │    │    │    │   └── globe-projection-gmh.js  ← Required
│    ├── data/
│    │    ├── globe/
│    │    │    ├── countries-50m.json
│    │    │    ├── countries.json
│    │    │    └── map-content.js
│ index.html
📄 Configuration Breakdown

🔹 general_config

export const general_config = {
  "html_element": {
    "tooltip_id": "tooltip-gmh",                // ID for displaying tooltips
    "canva_container_id": "canvas-container-gmh" // Container for rendering the globe
  },

  "globle": {
    "water_color": "#00000073", // Color of the ocean/water on the globe
  },

  "country": {
    "background_color": "#ebdebb", // Default fill color of countries
    "hover_color": "#FF5733",      // Color when hovering over a country
    "stroke_color": "#ffa635",     // Country border color
    "stroke_width": 0.5            // Border thickness
  },

  "data": {
    "world_country": "/gmh-plugin/data/globe/countries-50m.json", // TopoJSON for country outlines (simplified)
    "globe_world": "/gmh-plugin/data/globe/countries.json"        // Possibly detailed country features (GeoJSON or TopoJSON)
  }
};
Key Sub-Key Description
html_element.tooltip_id tooltip-gmh HTML ID for tooltip display.
html_element.canva_container_id canvas-container-gmh ID of the canvas container to render the globe.
globle.water_color #00000073 RGBA color for water/background.
country.background_color #ebdebb Default fill color for countries.
country.hover_color #FF5733 Fill color on hover.
country.stroke_color #ffa635 Border color around countries.
country.stroke_width 0.5 Width of the stroke line.
data.world_country countries-50m.json TopoJSON data for detailed borders.
data.globe_world countries.json Simpler country definitions if needed.
⚙️ Script Setup
<!-- Globe Projection -->
<script src="/gmh-plugin/assets/js/lib/d3.min.js"></script>
<script src="/gmh-plugin/assets/js/lib/topojson.js"></script>

<!-- Globe Projection -->
<script type="module">
  async function initMap() {
    try {
      // Dynamically import map-specific data
      const {general_config} = await import(`/gmh-plugin/data/globe/map-content.js`);
      const {GEOMapHub} = await import('/gmh-plugin/assets/js/script/geomaphub.js');
      const {geoMapHubGlobeProjection} = await import('/gmh-plugin/assets/js/script/lib/globe-projection-gmh.js');

      const map = new GEOMapHub("#canvas-container-gmh", {generalConfig: general_config});

      map.registerPlugin(geoMapHubGlobeProjection);

      map.init();
    } catch (error) {
      console.error("Error initializing map:", error);
    }
  }

  initMap();
</script>
<!-- Globe Projection -->

Here's a working example to display the map

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>GEO Map Hub – Globe Projection</title>
  <link rel="stylesheet" href="/gmh-plugin/assets/css/style.css" />
</head>

<body>
  <div id="tooltip-gmh"></div>
  <div id="custom-tooltip-gmh"></div>

  <div id="canvas-container-gmh"></div>

  <!-- Globe Projection -->
  <script src="/gmh-plugin/assets/js/lib/d3.min.js"></script>
  <script src="/gmh-plugin/assets/js/lib/topojson.js"></script>

  <!-- Globe Projection -->
  <script type="module">
    async function initMap() {
      try {
        // Dynamically import map-specific data
        const {general_config} = await import(`/gmh-plugin/data/globe/map-content.js`);
        const {GEOMapHub} = await import('/gmh-plugin/assets/js/script/geomaphub.js');
        const {geoMapHubGlobeProjection} = await import('/gmh-plugin/assets/js/script/lib/globe-projection-gmh.js');

        const map = new GEOMapHub("#canvas-container-gmh", {generalConfig: general_config});

        map.registerPlugin(geoMapHubGlobeProjection);

        map.init();
      } catch (error) {
        console.error("Error initializing map:", error);
      }
    }

    initMap();
  </script>
  <!-- Globe Projection -->
</body>

</html>
⚠️ Local CORS Warning

If you're testing with a .html file locally and see this error:

Access to script at 'file:///...' from origin 'null' has been blocked by CORS policy...

It means you're loading the file using the file:// protocol.

✅ How to Fix

Option 1: Use a Local Server (Recommended for HTML)

  • Live Server (VS Code Extension)

    Install Live Server, right-click your HTML, and choose “Open with Live Server”.

  • Or use any other local server:

    # Python 3
python -m http.server

# Node.js
npx http-server

# PHP
php -S localhost:8080

  • Or use a local web server (e.g., XAMPP or Laragon)

Option 2: Deploy to a Real Server

You can upload your files to:

  • Your cPanel or shared hosting

  • A staging VPS or domain

Once the files are accessible via http:// or https://, the plugin works without issues.

📤 Output Behavior
Behavior Result
🧭 Globe Rendering Displays an interactive rotating 3D globe using the canvas.
🟠 Hover Effect Country fills with hover_color (#FF5733) when hovered.
🌊 Water Background Water areas are styled with water_color (#00000073>).
🗺️ Country Borders Country borders styled with stroke_color and stroke_width.
🧩 Data Source TopoJSON files (countries-50m.json) drive map data resolution.

GEO Map Hub uses cookies to ensure proper functionality and provide an enhanced user experience. By continuing, you consent to the use of all cookies. To learn more, read our Cookie Statement.