Installation - 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

📍 Installation Guide - GEO Map Hub Plugin

Now it's time to bring your ideas to life! Follow the implementation guide to integrate GEO Map Hub seamlessly into your application. Customize your maps with region coloring, markers, tooltips, click actions, and many more features. In just a few simple steps, you'll unlock the full potential of interactive mapping for your users.

📁 Folder Structure

Before you begin, make sure your project files are organized like this:

your-project/
├── gmh-plugin/
│   ├── assets/
│   │   ├── css/
│   │   │   └── style.css
│   │   ├── js/
│   │   │    ├── script/
│   │   │    │    ├── geomaphub.js
│   │   │    │    ├── lib/
│   │   │    │    │    ├── interactive-tooltip-gmh.js   ← Required for tooltip
│   │   │    │    │    ├── colored-marker-gmh.js
│   │   │    │    │    ├── simple-zoom-gmh.js
│   │   │    │    │    └── ...
│   ├── data/
│   │   ├── us/
│   │   │   ├── map-content.js
│   │   │   ├── map-content-drilldown.js
│   │   │   ├── us.svg
│   │   │   └── us-drill-down.svg
│   │   ├── de/
│   │   │   └── ...
├── index.html (e.g. Display Feature Advanced Zoom, Color Marker..)

📌 Use blank-map-content.js in production (instead of demo versions) for clean and scalable data config.

🧱 Step-by-Step Setup

1. Include the CSS

Inside your <head> tag:

<link rel="stylesheet" href="/gmh-plugin/assets/css/style.css">

This CSS makes the SVG map responsive and styled correctly.

2. Add Tooltip elements

Add these two elements after body tag.

<div id="tooltip-gmh"></div>
<div id="custom-tooltip-gmh"></div>

3. Add the Map Container

Wherever you want to render the map in your HTML:

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

This is the element where the map will load.

4. Load and Initialize the Map (Using ES Modules)

Paste this at the end of the <body> tag:

<script type="module">
   const currentCountry = "us"; // Change this to your target country code

   async function initMap() {
      try {
         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 {geoMapHubColoredMarker} = await import('/gmh-plugin/assets/js/script/lib/colored-marker-gmh.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,
         });

         // Register only the plugins you need
         map.registerPlugin(geoMapHubColoredMarker);
         map.registerPlugin(geoMapHubSimpleZoom);
         map.registerPlugin(geoMapHubInteractiveTooltip);

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

   initMap();
</script>

🚫 CORS Error – Avoid `file:///` Access

If you open your .html file directly from the file system, like this:

file:///D:/your-project/index.html

You'll see an error like:

Access to script at 'file:///D:/data/us/map-content-drill-down.js' from origin 'null' has been blocked by CORS policy:
Cross origin requests are only supported for protocol schemes: chrome, chrome-extension, chrome-untrusted, data, http, https, isolated-app.

❓ Why?

JavaScript ES Modules must be loaded over http:// or https:// protocols.
file:// is not a secure context, so browsers block dynamic imports from it.

✅ 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”.

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.

Example Integration for Feature:

To display a feature (e.g. Advanced Zoom, Color Marker ...), your 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 Plugin | Installation</title>
   <link rel="stylesheet" href="/gmh-plugin/assets/css/style.css" />
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-12">
        <h2>Colored Marker</h2>
      </div>
    </div>

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

  <!-- Color Marker -->
  <script type="module">
    const currentCountry = "us"; // Change this to your target country code

    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 {geoMapHubColoredMarker} = await import('/gmh-plugin/assets/js/script/lib/colored-marker-gmh.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(geoMapHubColoredMarker);
        map.registerPlugin(geoMapHubSimpleZoom);
        map.registerPlugin(geoMapHubInteractiveTooltip);

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

    initMap();
  </script>
  <!-- Color Marker -->
</body>
</html>

✅ Testing Checklist

✅ Checkpoint	Description
✔️ SVG loads on page	Map should be visible without zoom/plugins
✔️ Tooltip appears on hover	Provided `interactive-tooltip-gmh.js` is loaded
✔️ Zoom/pan functionality	Confirm plugin is registered
✔️ No console errors	Especially for 404, CORS, or null origin
✔️ Works on different country	Switch country code to de, jp, etc. and test

🧩 Final Notes

Only include plugins you need – don't register unused ones.
Use blank-map-content.js for production instead of the demo file.
Tooltip plugin (interactive-tooltip-gmh.js) is essential for region interactivity - do not skip it if you need hover labels or clickable tooltips.