Simple Zoom - HTML - GEO Map Hub

Welcome

Get Started

Installation

Folder Structure

Add Colored Marker

Regions In Different Colors

Text Labels

Simple Zoom

Export Map in Image or PDF Format

Display Content Outside The Map

Colored Legend

Custom Image Markers

External Listing

External Search and Select

Group Regions

Heat Map

Label Markers

Lines Connecting Markers

Live Filter

Open Content In A Lightbox

Trigger Custom JavaScript

Vector Icon Markers

Advanced Zoom

HTML Tooltips

Specify Regions to Display

Color Countries

Initial Zoom and Center

Counties Map

Different Projections

Drill-Down Map

Globe Projection

Support

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.

🕹️ Simple Zoom - GEO Map Hub Plugin

The Simple Zoom feature enables intuitive zoom controls on the map using dedicated buttons for zooming in, zooming out, and resetting the view. By assigning custom button IDs, you can easily integrate these controls into your interface, offering users a smooth way to explore map details without relying on mouse gestures.

🌐 What is Simple Zoom?

The Simple Zoom Plugin provides basic zoom controls-zoom in, zoom out, and reset zoom-for your SVG map. It enhances the user experience by making the map interactive and easier to navigate.

💡 Use Case

Enable users to explore map regions more closely.
Reset the map to its original scale after zooming.
Simplify zooming behavior without requiring complex gestures.

📁 Folder Structure

Make sure the following files are correctly placed:

your-project/
├── gmh-plugin/
│    ├── assets/
│    │    ├── css/
│    │    │    └── style.css
│    │    ├── js/
│    │    │    └── script/
│    │    │    │    ├── geomaphub.js
│    │    │    │    └── lib/
│    │    │    │    │   ├── simple-zoom-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 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. */
  },

  /*
   * Simple Zoom Configuration
   * This section defines the simple zoom controls for zooming in and out of the map.
  */
  "simple_zoom": {
    /*
     * Control IDs for Simple Zoom Options
     * These are the identifiers for the zoom buttons to trigger actions like zooming in and out.
    */
    "control_id": {
      "zoom_in": "SIMPLE-ZOOM-IN-GMH",      /** Button ID for zooming in. */
      "zoom_out": "SIMPLE-ZOOM-OUT-GMH",    /** Button ID for zooming out. */
      "reset_zoom": "SIMPLE-ZOOM-RESET-GMH" /** Button ID for resetting zoom. */
    },
  },
}

Property	Description
`svg_id`	The `id` of the main `<svg>` tag inside your SVG file. This allows GEO Map Hub to hook into the map DOM element.
`tooltip_id`	ID of the default tooltip element (used by `interactive-tooltip-gmh.js`).
`custom_tooltip_id`	ID for custom or extended tooltip blocks (e.g., HTML-based tooltips).
`control_id.zoom_in`	HTML ID of the Zoom In button.
`control_id.zoom_out`	HTML ID of the Zoom Out button.
`control_id.reset_zoom`	HTML ID of the Reset Zoom button.

⚙️ Initialization Script

<!-- Simple 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 {geoMapHubSimpleZoom} = await import('/gmh-plugin/assets/js/script/lib/simple-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,
        generalConfig: general_config,
      });

      map.registerPlugin(geoMapHubSimpleZoom);
      map.registerPlugin(geoMapHubInteractiveTooltip);

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

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

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 – Simple Zoom</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="html-content-gmh">
          <button class="home-gmh" id="SIMPLE-ZOOM-RESET-GMH">Reset</button>
          <button class="plus-gmh" id="SIMPLE-ZOOM-IN-GMH">-</button>
          <button class="minus-gmh" id="SIMPLE-ZOOM-OUT-GMH">+</button>
        </div>

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

  <!-- Simple 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 {geoMapHubSimpleZoom} = await import('/gmh-plugin/assets/js/script/lib/simple-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,
          generalConfig: general_config,
        });

        map.registerPlugin(geoMapHubSimpleZoom);
        map.registerPlugin(geoMapHubInteractiveTooltip);

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

    initMap();
  </script>
  <!-- Simple Zoom -->
</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

Map scale increases centered on view
Map scale decreases
Zoom resets to the default 1x scale