Background Vector
UZ
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.

🧩 Group Region - GEO Map Hub Plugin

This guide explains how to group multiple regions on your SVG map. Grouped regions share styling, tooltips, and optional click actions, making it easier to represent larger zones or categories visually.

📘 What is Group Region?

Group Region allows you to apply shared styling, tooltips, and click interactions across multiple regions on your map using a single configuration. Rather than styling each region individually, this feature groups them together as one logical block for unified behavior.

💡 Use Case

✅ Common use cases for Group Region:

  • 🗺️ Grouping U.S. states into zones (e.g., West Coast, Midwest)

  • 📊 Visualizing data clusters such as sales territories or climate zones

  • 🌍 Highlighting regions with shared characteristics (language, policy, etc.)

  • 🧭 Adding click behavior to a set of connected regions

Example: When hovering over any state in the "West Coast Group" (US-WA, US-OR, US-CA), all regions highlight and show a group tooltip. Clicking any of them opens a shared Wikipedia page.

📁 Folder Structure

Make sure the following files are correctly placed: 

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

🔹 group_map_config 

/*
 * Group Map Configuration
 * This section defines the configuration for groups of regions,
 * their colors, tooltips, and other styling properties.
*/
export const group_map_config = [
  {
    "targetClass": "GMC-01", /** Unique identifier for the group map configuration. */

    "tooltip": "Group 01", /** Tooltip text displayed on hover for the group. */

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

    "color": {
      "default": "#f3faff",  /** Default fill color for the group. */
      "on_hover": "#005999",  /** Fill color when the group is hovered over. */
    },

    "stroke": {
      "on_hover": "white",  /** Fill color when the group is hovered over. */
      "color": "#6B8B9E",  /** Border color for the group. */
      "width": "0.8px"     /** Border width for the group. */
    },

    /*
     * A list of region identifiers that belong to this group.
     * These regions will share the same styling.
    */
    "targetClasses": "US-WA, US-MT, US-OR, US-ID, US-NV, US-CA",
  },
]
Key Description
targetClass Unique group identifier, used by the plugin internally.
tooltip Tooltip shown when hovering over any region in the group.
on_click.url URL to open when a group region is clicked.
on_click.target _blank to open in new tab.
on_click.cursor CSS cursor style when hovering (e.g., pointer).
color.default Base fill color for all regions in the group.
color.on_hover Fill color on hover.
stroke.color Border color.
stroke.width Border thickness.
stroke.on_hover hover border color.
targetClasses Comma-separated list of targetClass values of regions to group.

⚙️ Script Setup 

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

  async function initMap() {
    try {
      const {group_map_config, colored_legend, general_config} = await import(`/gmh-plugin/data/${currentCountry}/map-content.js`);
      const {GEOMapHub} = await import('/gmh-plugin/assets/js/script/geomaphub.js');
      const {geoMapHubGroupRegion} = await import('/gmh-plugin/assets/js/script/lib/group-region-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`,
        groupMapConfig: group_map_config,
        generalConfig: general_config,
      });

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

  initMap();
</script>

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 – Group Region</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>

  <!-- Group Region -->
  <script type="module">
    const currentCountry = "us";

    async function initMap() {
      try {
        // Dynamically import map-specific data
        const {group_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 {geoMapHubGroupRegion} = await import('/gmh-plugin/assets/js/script/lib/group-region-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`,
          groupMapConfig: group_map_config,
          generalConfig: general_config,
        });

        map.registerPlugin(geoMapHubGroupRegion);
        map.registerPlugin(geoMapHubInteractiveTooltip);

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

    initMap();
  </script>
  <!-- Group Region -->
</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.

📌 Final Checklist

✅ Each group has a unique targetClass

✅ targetClasses include comma-separated region

✅ geoMapHubGroupRegion plugin is registered

✅ Tooltip and color settings are correctly configured

✅ URL and target behavior defined if needed

🎯 Result

Once set up, all specified regions in a group:

  • 🖱️ Highlight together on hover

  • 💬 Show a unified tooltip

  • 🌐 Redirect or trigger unified action on click

  • 🎨 Share consistent styles (color, stroke)

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.