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.

🏛️ Counties Map - GEO Map Hub Plugin

The Counties Map feature allows users to display and interact with county-level geographic data. This functionality is ideal for visualizing regional trends, demographics, and other location-specific insights.

Note: To add a different feature to the Counties Map (e.g. US Counties), you need to import the county map-content.js with corresponding feature in your HTML file.

📁 Folder Structure

Ensure your project follows this structure:

your-project/
├── gmh-plugin/
│    ├── assets/
│    │    ├── css/
│    │    │    └── style.css
│    │    ├── js/
│    │    │    └── script/
│    │    │    │    ├── geomaphub.js
│    │    │    │    └── lib/
│    │    │    │    │   └── feature-gmh.js // add feature plugin files
│    ├── data/
│    │    ├── us-ca/                          ← For California
│    │    │    ├── map-content.js
│    │    │    └── us.svg
│ index.html

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 – Counties Map</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>

  <!-- Counties Map -->
  <script type="module">
    const currentCounty = "us-ca"; // For California County

    async function initMap() {
      try {
        // Dynamically import map-specific data
        const {map_config, general_config} = await import(`/gmh-plugin/data/${currentCounty}/map-content.js`);
        const {GEOMapHub} = await import('/gmh-plugin/assets/js/script/geomaphub.js');

        // import feature plugins to use

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

        // Register Plugins

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

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

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.