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.

🖼️ Display Content Outside the Map - GEO Map Hub Plugin

This guide explains how to use the Display Content Outside the Map feature to show additional details about a region when users interact with the map. It includes the required configuration in map_config and general_config, along with an example script to initialize the functionality.

🧐 What is Display Content Outside the Map?

Display Content Outside the Map is a feature in GEO Map Hub that allows you to attach dynamic content to specific regions, and show this content outside the SVG map container - usually in a side panel, card, or separate div - when a user clicks or hovers on the corresponding map region.

🎯 Purpose

  • Provide detailed contextual information (e.g., images, text, links) about regions.

  • Create an interactive storytelling experience.

  • Improve user engagement without cluttering the map itself.

  • Keep design responsive by separating rich content from the SVG.

💡 Real-World Use Cases
Use Case Description
🗺️ Tourism Sites Clicking on a region shows highlights, photos, and tourist info.
📊 Data Dashboards Hovering over a region shows its stats in a panel.
📚 Educational Provide definitions, history, or resources based on region clicked.
🛒 eCommerce Maps Clicking shows product availability or offers per region.
📁 Folder & File Requirements

Ensure your project follows this structure:

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

1. HTML: Create Display Container

<div class="row row-gap-2">
  <div class="col-lg-8 col-12">
    <div class="svg-container-gmh">
      <div class="mt-2" id="svg-wrapper-gmh"></div>
    </div>
  </div>

  <div class="col-lg-4 col-12">
    <div id="content-gmh" class="content"></div>
  </div>
</div>

2. JavaScript: Initialize Map

<!-- Display Content Outside The Map -->
<script type="module">
  const currentCountry = "<?= strtolower($country) ?>";

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

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

      map.registerPlugin(geoMaphubDisplayContentOutside);
      map.registerPlugin(geoMapHubInteractiveTooltip);

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

    initMap();
  </script>
<!-- Display Content Outside The Map -->

3. Create HTML and Script to Load Map

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 – Display Content Outside the 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="row row-gap-2">
    <div class="col-lg-8 col-12">
      <div class="svg-container-gmh">
        <div id="svg-wrapper-gmh"></div>
      </div>
    </div>

    <div class="col-lg-4 col-12">
      <div id="content-gmh" class="content"></div>
    </div>
  </div>

  <!-- Display Content Outside the Map -->
  <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 {geoMaphubDisplayContentOutside} = await import('/gmh-plugin/assets/js/script/lib/display-content-outside-map-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(geoMaphubDisplayContentOutside);
        map.registerPlugin(geoMapHubInteractiveTooltip);

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

    initMap();
  </script>
  <!-- Display Content Outside the Map -->
</body>
</html>
⚙️ Configuration Breakdown

✅ Region-Level (map_config)

/**
 * Map Configuration File
 *
 * This file contains data used to render a map. Each object in the `map_config` array
 * represents a region on the map, defined by a unique identifier (`id`) and other
 * metadata (e.g., name, population, color).
 *
 * Structure:
 * - id: Unique identifier for the region (e.g., "US-WA").
 * - name: Display name for the region (e.g., "Washington").
 * - Additional fields can be added as required to provide more details for each region.
*/
export const map_config = [
  {
    "targetClass": "US-CA",  // Unique identifier for region.
    "name": "California",  // Display name for the region.

    /*
      Configuration for Display Content Outside The Map.

      Keys:
        - tooltip (string): Tooltip text displayed when interacting with the defined area.
        - type (string): Defines the interaction type. Options:
          - "onClick": Content is displayed when the user clicks the area.
          - "onHover": Content is displayed when the user hovers over the area.
        - color (object): Styling options for the background color of the interactive area:
          - default (string): Default background color.
          - on_hover (string): Background color when hovered.
          - active (string): Background color when active.
        - stroke (object): Border styling for the interactive area:
          - color (string): Color of the border.
          - width (string): Width of the border (e.g., "1px").
        - content (object): Content to be displayed outside the map area:
          - html (string): HTML content for rich formatting.
    */
    "display_content_outside_the_map": {
      "tooltip": "Click here to see details",  // Tooltip text displayed when hovering over the interactive area.

      // Type of interaction for displaying content outside the map.
      "type": "onClick", // Options: 'onHover' or 'onClick'.

      // Color settings for the interactive area.
      "color": {
        "default": "#afcde3", // Default background color.
        "on_hover": "#005999", // Background color when hovered.
        "active": "#005999" // Background color when active.
      },

      // Stroke (border) settings for the interactive area.
      "stroke": {
        "color": "white", // Border color.
        "width": "1px" // Border width.
      },

      // Content to be displayed outside the map.
      "content": {
        "text": `<div style="width: 100%;">
                    <img src="/gmh-plugin/assets/images/flags/us/us-ca.svg" style="width: 100%; border: 1px solid;" />

                    <p class="m-0 mt-2 subtext">Some text</p>
                </div>`
      }
    },
  }
];
Key Description
tooltip Hover tooltip text.
type "onClick" or "onHover" to trigger content display.
color Background styling in normal, hover, and active states
stroke Border styling.
content.text HTML content shown in the external panel.

🌐 General Configuration (general_config)

/*
 * 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. */
  },

  /*
   * Display Content Outside the Map Configuration
   * This section defines the content that is displayed outside the map and its related style.
  */
  "display_content_outside_the_map": {
    /*
     * Content ID for External Content
     * This is the identifier for the content that will be displayed outside the map.
    */
    "content_id": "content-gmh",

    /*
     * Color Settings for Displayed Content
     * Defines the color properties for the content displayed outside the map, such as the default color,
     * hover color, and active color.
    */
    "color": {
      "default": "#f3faff",     /** Default color for the external content. */
      "on_hover": "#005999",    /** Color when hovering over the external content. */
      "active": "#005999"       /** Color when the external content is active. */
    },

    /*
     * Stroke Settings for Displayed Content
     * Defines the border color and width for the external content.
     */
    "stroke": {
      "color": "#6B8B9E",  /** Border color for the external content. */
      "width": "0.8px"     /** Border width for the external content. */
    }
  },
}
Key Description
content_id ID of the HTML element to show external content.
color, stroke Default styling of the display panel.
⚠️ 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
Task Done?
display_content_outside_the_map is defined in each region. ✅
A valid <div> with matching content_id exists in your HTML. ✅
The plugin display-content-outside-map-gmh.js is correctly imported ✅
The interaction type is set to "onClick" or "onHover". ✅
Map runs on a server (http:// or https://) to avoid CORS. ✅
🎯 Final Result

When the user interacts with a map region:

  • It highlights with the configured color and border.

  • The panel (e.g., #content-gmh) displays HTML content dynamically.

  • Fully customizable per region with images, links, and formatted text.

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.