🔍 Open Content In A Lightbox - GEO Map Hub Plugin

Use this feature to display rich HTML content in a modal (lightbox) when a user clicks on a map region. Each region can show custom tooltips, colors, and interactive popups containing descriptions, images, or embedded content-all styled and configured directly from your map data.

📖 What is it?

The Open Content in a Lightbox plugin allows you to open a custom modal with dynamic HTML content when a region is clicked. It supports embedded videos, text, images, or interactive UI elements without leaving the page.

💡 Use Case

• Show more details (e.g., population, description, historical info).

• Embed a video, image carousel, or a product showcase.

• Provide links and forms inside a region modal (e.g., newsletter, booking).

🗺️ Example: Clicking Washington opens a modal with tourist info.

📁 Folder Structure

Make sure the following files are correctly placed:

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

🛠️ Configuration Breakdown

🧩 In map_config

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

    /*
     * Open Content in Lightbox Configuration
     * This object defines the behavior and styling for a region on the map
     * that opens content in a lightbox on interaction.
    */
    "open_content_in_lightbox": {
      "tooltip": "Washington", // Tooltip text displayed when hovering over the region

      /*
       * Color Configuration
       * Defines the region's background color in various states.
      */
      "color": {
        "default": "#afcde3",   // Default background color
        "on_hover": "#005999"  // Background color when hovered
      },

      /*
       * Lightbox Content
       * The content to be displayed inside the lightbox when the region is interacted with.
       * This can be dynamically populated with HTML or text content as needed.
      */
      "content": `<p>Some text</p>`
    },
  },
];

🧩 Region-Level Settings map_config[].open_content_in_lightbox

🛠️ Global Modal Settings general_config.open_content_in_lightbox

🧩 In general_config

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. */
    "marker_id": "US-MARKER-GMH",  /** ID for the marker element. */
  },

  /*
   * Open Content in Lightbox Configuration
   * This section defines the configuration for displaying content in a lightbox modal.
   * It includes the modal HTML structure, modal ID, color, and stroke properties.
  */
  "open_content_in_lightbox": {
    /*
     * Modal HTML Structure
     * This defines the HTML structure for the lightbox modal that will open
     * when the content is selected. The modal contains a header, body, and
     * a close button for dismissing the modal.
    */
    "modal_html": `
      <div class="modal" id="MODAL-GMH" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title"></h5>

              <button type="button" class="close close-gmh" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>

            <div class="modal-body"></div>
          </div>
        </div>
      </div>
    `,

    /*
     * Modal ID
     * The ID used to reference the lightbox modal element. This should be unique
     * to avoid conflicts with other modals on the page.
    */
    "modal_id": "MODAL-GMH", /** ID for the modal element. */

    /*
     * Color Settings
     * Defines the default color for the lightbox modal background or other elements.
    */
    "color": {
      "default": "#f3faff",  /** Default background color for the modal. */
    },

    /*
     * Stroke Settings
     * These define the border (stroke) properties for the lightbox modal.
    */
    "stroke": {
      "color": "#6B8B9E",  /** Border color for the modal. */
      "width": "0.8px"     /** Border width for the modal. */
    },
  },
}

🧩 Initialization Script

<!-- Open Content In A Lightbox -->
<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 {geoMapHubLightBoxContent} = await import('/gmh-plugin/assets/js/script/lib/open-content-in-a-lightbox-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(geoMapHubLightBoxContent);
      map.registerPlugin(geoMapHubInteractiveTooltip);

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

  initMap();
</script>
<!-- Open Content In A Lightbox -->

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 – Open Content In A Lightbox</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-12 col-12">
      <div class="svg-container-gmh">
        <div id="svg-wrapper-gmh"></div>
      </div>
    </div>
  </div>

  <!-- Open Content In A Lightbox -->
  <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 {geoMapHubLightBoxContent} = await import('/gmh-plugin/assets/js/script/lib/open-content-in-a-lightbox-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(geoMapHubLightBoxContent);
        map.registerPlugin(geoMapHubInteractiveTooltip);

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

    initMap();
  </script>
  <!-- Open Content In A Lightbox -->
</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 shows tooltip and changes to on_hover color

Opens modal (MODAL-GMH) with content from open_content_in_lightbox

Uses HTML from modal_html styled with color and stroke

Click × button or outside modal to close