⚙️ Trigger Custom JavaScript & Select - GEO Map Hub Plugin

The Trigger Custom JavaScript feature allows developers to execute custom scripts when users interact with specific regions on the map. This enables dynamic content rendering, workflow automation, and interactive UI responses. Each region can define tooltip text, interaction content, and state-based colors. Configuration is managed via map_config and general_config, and executed through the geoMapHubTriggerCustomJS plugin.

📘 What is Trigger Custom JavaScript?

This plugin lets you run custom JavaScript actions when clicking on a region. The interaction can show descriptive content, update the UI, or trigger lightboxes, modals, etc.

💡 Use Case

• Displaying historical or informational text on click

• Opening a lightbox or modal

• Triggering page navigation or API requests

• Interactive educational maps

📁 Folder Structure

Make sure the following files are correctly placed:

your-project/
├── gmh-plugin/
│    ├── assets/
│    │    ├── css/
│    │    │    └── style.css
│    │    ├── js/
│    │    │    └── script/
│    │    │    │    ├── geomaphub.js
│    │    │    │    └── lib/
│    │    │    │    │   ├── trigger-custom-js-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.

    /*
     * Trigger Custom JavaScript Configuration
     * Defines a region on the map that triggers custom JavaScript actions on interaction.
    */
    "trigger_custom_js": {
      "tooltip": "Washington", // Tooltip text displayed when hovering over the region

      /*
       * Content to Display on Click
       * This is descriptive text or information related to the region.
      */
      "content": `Washington most commonly refers to, George Washington (1732–1799), the first
                  president of the United States. Washington (state), a state in the Pacific Northwest of the
                  United States. Washington, D.C., the capital of the United States. A metonym for the
                  federal government of the United States. Washington metropolitan area, the metropolitan
                  area centered on Washington, D.C.`, // Content displayed on click interaction

      /*
       * Color Configuration
       * Defines the appearance of the region in different states.
      */
      "color": {
        "default": "#afcde3",   // Default background color
        "on_hover": "#005999", // Background color when hovered
        "active": "#005999"    // Background color when active (clicked)
      }
    },
  },
]

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

  /*
   * Trigger Custom JavaScript Configuration
   * This section defines the configuration for custom JavaScript triggers,
   * including color and stroke settings for the interactive elements.
  */
  "trigger_custom_js": {
    /*
     * Color Settings
     * These define the default and hover colors for the interactive trigger element
     * that can be controlled via custom JavaScript.
    */
    "color": {
      "default": "#f3faff",  /** Default color for the trigger element. */
      "on_hover": "#005999"   /** Color when the trigger element is hovered over. */
    },

    /*
     * Stroke Settings
     * These define the border (stroke) properties for the trigger element,
     * including the color and width of the border.
    */
    "stroke": {
      "color": "#6B8B9E",  /** Border color for the trigger element. */
      "width": "0.8px"     /** Border width for the trigger element. */
    },
  },
}

🆔 general_config → id

⚙️ general_config → trigger_custom_js

⚙️ Script Setup

<!-- Trigger Custom JS -->
<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 {geoMapHubTriggerCustomJS} = await import('/gmh-plugin/assets/js/script/lib/trigger-custom-js-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(geoMapHubTriggerCustomJS);
      map.registerPlugin(geoMapHubInteractiveTooltip);

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

  initMap();
</script>
<!-- Trigger Custom JS -->

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 – Trigger Custom JS</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>

  <!-- Trigger Custom JS -->
  <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 {geoMapHubTriggerCustomJS} = await import('/gmh-plugin/assets/js/script/lib/trigger-custom-js-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(geoMapHubTriggerCustomJS);
        map.registerPlugin(geoMapHubInteractiveTooltip);

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

    initMap();
  </script>
  <!-- Trigger Custom JS -->
</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