🔍 Advanced Zoom - GEO Map Hub Plugin

This section explains how to enable interactive zoom controls on your SVG maps using the Advanced Zoom GEO Map Hub plugin. This includes buttons for zooming in, zooming out, resetting zoom, and toggling fullscreen.

🔧 What Is Advanced Zoom?

The Advanced Zoom plugin allows users to interact with your SVG map in a more dynamic way. Users can:

• Zoom in/out using buttons

• Reset zoom to original view

• Enter fullscreen mode

• Use mouse wheel or drag to zoom

• Enable pinch-to-zoom on touch devices

Perfect for detailed data maps or dashboards with multiple zoomable layers.

📁 Folder Structure

Make sure the following files are correctly placed:

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

🧩 Step-by-Step Integration

1. Add Zoom Buttons to Your HTML

Below your SVG container, place these controls:

<div class="zoom-controls">
  <button id="ADVANCED-ZOOM-RESET-GMH">Reset</button>
  <button id="ADVANCED-ZOOM-IN-GMH">+</button>
  <button id="ADVANCED-ZOOM-OUT-GMH">−</button>
  <button id="ADVANCED-ZOOM-TOGGLE-FULLSCREEN-GMH">Fullscreen</button>
</div>

Wrap your map with a fullscreen container:

<div class="svg-container-gmh">
  <div id="svg-wrapper-gmh"></div>
</div>

📌 Note: The class svg-container-gmh is used to toggle fullscreen mode.

2. Configure general_config

Inside map-content.js:

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

  /*
   * Advanced Zoom Configuration
   * This section defines the advanced zoom controls for interacting with the map.
   * It includes buttons for resetting zoom, zooming in and out, and toggling fullscreen mode.
  */
  "advanced_zoom": {
    /*
     * Control IDs for Zoom Options
     * These are the identifiers for the zoom buttons to trigger actions like resetting zoom,
     * zooming in and out, and toggling fullscreen mode.
    */
    "control_id": {
      "reset_zoom": "ADVANCED-ZOOM-RESET-GMH",        /** Button ID for resetting zoom. */
      "zoom_in": "ADVANCED-ZOOM-IN-GMH",              /** Button ID for zooming in. */
      "zoom_out": "ADVANCED-ZOOM-OUT-GMH",            /** Button ID for zooming out. */
      "toggle_fullscreen": "ADVANCED-ZOOM-TOGGLE-FULLSCREEN-GMH",  /** Button ID for toggling fullscreen. */
      "fullscreen_container_class": "svg-container-gmh"          /** Class for the fullscreen container. */
    },
  },
}

3. Initialize the Map in HTML

Use the following script block:

<!-- Advanced Zoom -->
<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 {geoMapHubAdvancedZoom} = await import('/gmh-plugin/assets/js/script/lib/advanced-zoom-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,
          zoomOptions: {
            zoomControls: true,
            zoomToLocation: {
              onClick: true,
              animation: true,
            },
            handleDrag: true,
            wheelZoom: true,
            fingerPinch: true,
            toggleFullScreen: true
          },
          generalConfig: general_config,
        });

      map.registerPlugin(geoMapHubAdvancedZoom);
      map.registerPlugin(geoMapHubInteractiveTooltip);

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

  initMap();
</script>
<!-- Advanced Zoom -->

🧰 Zoom Control Reference

🧪 Zoom Options (JS Config)

zoomOptions: {
  zoomControls: true,          // Enable zoom via buttons
  zoomToLocation: {
    onClick: true,             // Enable click-to-zoom
    animation: true            // Enable smooth zoom animation
  },
  handleDrag: true,            // Enable drag-to-pan
  wheelZoom: true,             // Enable scroll-to-zoom
  fingerPinch: true,           // Enable mobile pinch zoom
  toggleFullScreen: true       // Enable fullscreen toggle
}

Your final html file should look like this:

<!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 – Text Labels</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="html-content-gmh">
      <button class="home-gmh" id="ADVANCED-ZOOM-RESET-GMH">Reset</button>
      <button class="plus-gmh" id="ADVANCED-ZOOM-IN-GMH">+</button>
      <button class="minus-gmh" id="ADVANCED-ZOOM-OUT-GMH">-</button>
      <button class="fullscreen-gmh" id="ADVANCED-ZOOM-TOGGLE-FULLSCREEN-GMH">Fullscreen</button>
    </div>

    <div id="svg-wrapper-gmh"></div>
  </div>

  <!-- Advanced Zoom -->
  <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 { geoMapHubAdvancedZoom } = await import('/gmh-plugin/assets/js/script/lib/advanced-zoom-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,
          zoomOptions: {
            zoomControls: true,
            zoomToLocation: {
              onClick: true,
              animation: true,
            },
            handleDrag: true,
            wheelZoom: true,
            fingerPinch: true,
            toggleFullScreen: true
          },
          generalConfig: general_config,
        });

        map.registerPlugin(geoMapHubAdvancedZoom);
        map.registerPlugin(geoMapHubInteractiveTooltip);

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

    initMap();
  </script>
  <!-- Advanced Zoom -->
</body>
</html>

⚠️ Testing Tips

If your buttons are not working:

• Ensure button IDs match exactly with general_config.advanced_zoom.control_id

• Make sure the geoMapHubAdvancedZoom plugin is registered

• Confirm you're using type="module" for the script

⚠️ 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

Make sure:

• Your HTML contains zoom buttons with matching IDs.

• The map is wrapped inside .svg-container-gmh for fullscreen to work.

• advanced-zoom-gmh.js plugin is correctly registered.

• You're using type="module" script tag for ES6 module support.

• Your map-content.js file correctly references the button IDs.

• You're serving your files over http:// or https:// (not directly from file:// due to CORS issues).

🎯 Result

Once implemented correctly:

✅ You'll be able to:

• Click zoom in/out buttons to scale the map

• Click Reset to return to original scale

• Click Fullscreen to expand the map view

• Drag, scroll, or pinch to zoom as needed

• Combine with tooltips, colored regions, or markers