🗺️ Regions In Different Colors - GEO Map Hub Plugin

This guide walks you through configuring specific regions on your SVG map with custom colors, hover effects, tooltips, and clickable actions using the GEO Map Hub plugin.

🎨 What is color_region?

The color_region option allows you to visually differentiate specific regions (e.g., states or provinces) by applying:

• A custom default fill color

• A custom hover fill color

• A unique border color and width

• Tooltips on hover

• Optional URL redirection on click

This is ideal for dashboards or interactive visualizations where different regions need to stand out.

📁 Folder & File Requirements

Ensure your project follows this structure:

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

✏️ Step-by-Step Setup

1. Update Your Configuration

In /gmh-plugin/data/us/map-content.js, add a color_region block to each region you want to highlight.

export const map_config = [
  {
    "targetClass": "US-WA",  // Unique identifier for region.
    "name": "Washington",  // Display name for the region.

    /*
      * Regions With Different Colors configuration
      * This section defines the properties for visualizing specific regions
      * with different colors and border settings on the map.
    */
    "color_region": {
      "tooltip": "Washington",  // Tooltip text displayed on hover.

      "on_click": {
        "url": "https://en.wikipedia.org/wiki/Washington",
        "target": "_blank",
        "cursor": "pointer"
      },

      /*
        * Color settings for the region.
        * Defines the default color and the color when hovered over.
      */
      "color": {
        "default": "#01467f",  // Default fill color of the region.
        "on_hover": "#005999"  // Fill color when the region is hovered over.
      },

      /*
        * Stroke (border) settings for the region.
        * Defines the border color and width of the region.
      */
      "stroke": {
        "color": "#0095c3",  // Border color of the region.
        "width": "1px"       // Border width of the region.
      },
    },
  },
  {
    "targetClass": "US-AL",  // Unique identifier for region.
    "name": "Alabama",  // Display name for the region.

    /*
      * Regions With Different Colors configuration
      * This section defines the properties for visualizing specific regions
      * with different colors and border settings on the map.
    */
    "color_region": {
      "tooltip": "Alabama",  // Tooltip text displayed on hover.

      /*
        * Color settings for the region.
        * Defines the default color and the color when hovered over.
      */
      "color": {
        "default": "#006ea8",  // Default fill color of the region.
        "on_hover": "#005999"  // Fill color when the region is hovered over.
      },

      /*
        * Stroke (border) settings for the region.
        * Defines the border color and width of the region.
      */
      "stroke": {
        "color": "#0095c3",  // Border color of the region.
        "width": "1px"       // Border width of the region.
      },
    },
  }
]

2. Add General Config

Also in the same file:

/*
 * General Configuration
 * This section contains global settings for the map, including
 * IDs for various elements like markers, lines, and tooltips.
 */
export const general_config = {
  "id": {
    /*
      * SVG and Element IDs
      * These IDs are used to reference specific SVG elements or HTML
      * elements in your configuration. If you want to change any of
      * these IDs, ensure you update them in the corresponding `svg.js` file.
    */

    "svg_id": "US-MAP-GMH",  /** ID for the main SVG map element. */
    "tooltip_id": "tooltip-gmh",  /** ID for the tooltip element. */
    "custom_tooltip_id": "custom-tooltip-gmh",  /** ID for the tooltip element. */
  },
}

3. Create HTML and Script to Load Map

Here's a working example to display the map with the regions with different colors:

<!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 – Regions With Different Colors</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>

  <script type="module">
    const currentCountry = "us";

  async function initMap() {
    try {
      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 { geoMapHubRegionWithDifferentColor } = await import('/gmh-plugin/assets/js/script/lib/regions-with-different-colors-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(geoMapHubRegionWithDifferentColor);
      map.registerPlugin(geoMapHubInteractiveTooltip);

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

  initMap();
  </script>
</body>
</html>

🧩 Region Color Config Reference

⚙️ General Configuration Options general_config

The general_config object defines global map behavior and styling, including SVG IDs, default colors, and stroke settings used across all regions and markers.

🔑 id Section

💡 These IDs must match what's defined inside your actual .svg file.
If you rename id="US-MAP-GMH" in the SVG, you must update svg_id accordingly.

⚠️ Local Dev (CORS Note)

If loading via file://, you'll hit this error:

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

✅ 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”.
• 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.

🧪 Testing Checklist

✅ Result

When configured properly, each defined region will:

• Show its own color and border

• Animate on hover

• Show a tooltip

• Redirect (if on_click.url is set)