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.

🗺️ Specify Regions to Display - GEO Map Hub Plugin

The Specify Regions to Display feature allows developers to control the visibility of individual regions on the map using the display property (block to show, hide to hide). This enables dynamic map customization-such as focusing on specific states or hiding irrelevant areas-by simply toggling region visibility through the configuration, without altering the SVG file directly.

📘 What is Specify Regions to Display?

The Specify Regions to Display feature allows you to dynamically control the visibility of individual regions on your map using simple flags like "block" or "hide". This is useful when you want to:

  • Focus only on specific states/regions.

  • Hide irrelevant areas based on filters or data availability.

  • Control region rendering without modifying the SVG manually.

💡 Use Case

  • Show only featured or active regions.

  • Temporarily hide inactive states from a map dashboard.

  • Display limited geographic areas based on user roles or permissions.

📁 Folder Structure

Make sure the following files are correctly placed: 

your-project/
├── gmh-plugin/
│    ├── assets/
│    │    ├── css/
│    │    │    └── style.css
│    │    ├── js/
│    │    │    └── script/
│    │    │    │    ├── geomaphub.js
│    │    │    │    └── lib/
│    │    │    │    │   ├── specify-regions-to-display-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": "US-WA",  // Unique identifier for region.
    "name": "Washington",  // Display name for the region.

    "display": "hide", // Specify Region To Display (e.g. hide, block)
  },
  {
    "targetClass": "US-AL",  // Unique identifier for region.
    "name": "Alabama",  // Display name for the region.

    "display": "hide", // Specify Region To Display (e.g. hide, block)
  },
  {
    "targetClass": "US-CA",  // Unique identifier for region.
    "name": "California",  // Display name for the region.

    "display": "block", // Specify Region To Display (e.g. hide, block)
  },
];
Key Description
targetClass Unique identifier for the region (must match SVG element's class).
name Display name shown in the tooltip or UI.
display Controls visibility of the region. Use "block" to show, "hide" to hide.
⚙️ Script Setup
<!-- Specify Regions to Display -->
<script type="module">
  const currentCountry = "us";

  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 {geoMapHubSpecifyRegionToDisplay} = await import('/gmh-plugin/assets/js/script/lib/specify-regions-to-display-gmh.js');

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

      map.registerPlugin(geoMapHubSpecifyRegionToDisplay);

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

  initMap();
</script>
<!-- Specify Regions to Display -->

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 – Specify Regions to Display</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>

  <!-- Specify Regions to Display -->
  <script type="module">
    const currentCountry = "us";

    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 {geoMapHubSpecifyRegionToDisplay} = await import('/gmh-plugin/assets/js/script/lib/specify-regions-to-display-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(geoMapHubSpecifyRegionToDisplay);
        map.registerPlugin(geoMapHubInteractiveTooltip);

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

    initMap();
  </script>
  <!-- Specify Regions to Display -->
</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
Region Value of display Rendered on Map?
Washington "hide" ❌ No
California "block" ✅ Yes
Alabama "hide" ❌ No

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.