🌍 Color Countries - GEO Map Hub Plugin

The Color Countries feature visually distinguish specific countries on the map by customizing their fill colors, hover states, borders, and tooltips. By defining a color_country object for each entry in the map_config array, you can assign a unique default color, hover color, and stroke styling to each country. This is particularly useful for highlighting regions, indicating statuses, or creating thematic visualizations like heat maps-without modifying the SVG directly.

📘 What is Color Countries?

The Color Countries Plugin lets you visually style individual countries on a world map by assigning custom colors, hover states, borders, and tooltips. It's useful for data visualizations such as:

• Highlighting countries with different statuses.

• Differentiating territories based on regions or activity.

• Creating interactive choropleth-style maps.

💡 Use Case

• Show countries where your product is available.

• Indicate active vs inactive markets.

• Visualize geopolitical, economic, or travel data by country.

📁 Folder Structure

Make sure the following files are correctly placed:

your-project/
├── gmh-plugin/
│    ├── assets/
│    │    ├── css/
│    │    │    └── style.css
│    │    ├── js/
│    │    │    └── script/
│    │    │    │    ├── geomaphub.js
│    │    │    │    └── lib/
│    │    │    │    │   ├── color-countries-gmh.js        ← Required
│    │    │    │    │   └── interactive-tooltip-gmh.js    ← Required for interactive (tooltips and links.)
│    ├── data/
│    │    ├── us/
│    │    │    ├── map-content.js
│    │    │    └── us.svg
│ index.html

✅ Configuration Breakdown

🔹 map_config

export const map_config = [
  {
    "targetClass": "AF-GMH",  // Unique identifier for region.
    "name": "Afghanistan",  // Display name for the region.

    "color_country": {
      "tooltip": "Afghanistan",  // Tooltip text displayed on hover.

      /*
       * Color settings for the region.
       * Defines the default color and the color when hovered over.
      */
      "color": {
        "default": "#eda82e",
        "on_hover": "#005999"
      },

      /*
       * Stroke (border) settings for the region.
       * Defines the border color and width of the region.
      */
      "stroke": {
        "color": "white",
        "width": "0.1px"
      }
    },
  },
  {
    "targetClass": "AS-GMH",  // Unique identifier for region.
    "name": "American Samoa",  // Display name for the region.

    "color_country": {
      "tooltip": "American Samoa",  // Tooltip text displayed on hover.

      /*
       * Color settings for the region.
       * Defines the default color and the color when hovered over.
      */
      "color": {
        "default": "#006",
        "on_hover": "#3Bf46B"
      },

      /*
       * Stroke (border) settings for the region.
       * Defines the border color and width of the region.
      */
      "stroke": {
        "color": "white",
        "width": "0.1px"
      }
    }
  },
  {
    "targetClass": "AR-GMH",  // Unique identifier for region.
    "name": "Argentina",  // Display name for the region.

    "color_country": {
      "tooltip": "Argentina",  // Tooltip text displayed on hover.

      /*
       * Color settings for the region.
       * Defines the default color and the color when hovered over.
      */
      "color": {
        "default": "#85674F",
        "on_hover": "#005999"
      },

      /*
       * Stroke (border) settings for the region.
       * Defines the border color and width of the region.
      */
      "stroke": {
        "color": "white",
        "width": "0.1px"
      }
    },
  }
]

⚙️ Script Setup

<!-- Color Countries -->
<script type="module">
  const currentCountry = "world-map";

  async function initMap() {
    try {
      // Dynamically import map-specific data
      const {map_config, general_config} = await import(`/gmh-plugin/data/${currentCountry}/map-content.js`);
      const {GEOMapHub} = await import('/gmh-plugin/assets/js/script/geomaphub.js');
      const {geoMapHubColorCountries} = await import('/gmh-plugin/assets/js/script/lib/color-countries-gmh.js');
      const {geoMapHubInteractiveTooltip} = await import('/gmh-plugin/assets/js/script/lib/interactive-tooltip-gmh.js');

      const map = new GEOMapHub("#svg-wrapper-gmh", {
        svgUrl: `/gmh-plugin/data/${currentCountry}/${currentCountry}.svg`,
        mapConfig: map_config,
        generalConfig: general_config,
      });

      map.registerPlugin(geoMapHubColorCountries);
      map.registerPlugin(geoMapHubInteractiveTooltip);

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

  initMap();
</script>
<!-- Color Countries -->

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 – Color Countries</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 class="svg-container-gmh">
    <div id="svg-wrapper-gmh"></div>
  </div>

  <!-- Color Countries -->
  <script type="module">
    const currentCountry = "world-map";

    async function initMap() {
      try {
        // Dynamically import map-specific data
        const {map_config, general_config} = await import(`/gmh-plugin/data/${currentCountry}/map-content.js`);
        const {GEOMapHub} = await import('/gmh-plugin/assets/js/script/geomaphub.js');
        const {geoMapHubColorCountries} = await import('/gmh-plugin/assets/js/script/lib/color-countries-gmh.js');
        const {geoMapHubInteractiveTooltip} = await import('/gmh-plugin/assets/js/script/lib/interactive-tooltip-gmh.js');

        const map = new GEOMapHub("#svg-wrapper-gmh", {
          svgUrl: `/gmh-plugin/data/${currentCountry}/${currentCountry}.svg`,
          mapConfig: map_config,
          generalConfig: general_config,
        });

        map.registerPlugin(geoMapHubColorCountries);
        map.registerPlugin(geoMapHubInteractiveTooltip);

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

    initMap();
  </script>
  <!-- Color Countries -->
</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

🧠 The plugin applies CSS-based changes directly to the SVG paths/groups based on the targetClass. Hover effects and tooltips are managed through additional plugins like geoMapHubInteractiveTooltip.