🕹️ Export Map in Image Or PDF Format - GEO Map Hub Plugin

The Export Map feature empowers users to download or print the map in multiple formats, including PNG, JPG, SVG, or as a Printable layout. Configurable via control IDs and style settings, this feature enhances user interaction by allowing easy sharing or offline access to customized maps with just one click.

🌐 What is Export Map?

The Export Map Plugin allows users to export the current state of your SVG-based map to various file formats like PNG, JPG, SVG, or Print it directly from the browser. It's powered by html2canvas and jsPDF for rendering and exporting DOM elements.

💡 Use Case

• Export the map view as an image for reports or presentations.

• Print a physical version of the map.

📁 Folder Structure

Make sure the following files are correctly placed:

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

  /*
   * Export Map Configuration
   * This section defines the export controls and their properties, such as exporting
   * the map as PNG, JPG, SVG, or printing it. It also includes color and stroke
   * settings for the export buttons.
  */
  "export_map": {
    /*
     * Control IDs for Export Options
     * These are the identifiers for the export buttons to trigger actions like
     * exporting the map in different formats.
    */
    "control_id": {
      "export_png": "EXPORT-PNG-GMH",        /** Button ID for exporting the map as PNG. */
      "export_jpg": "EXPORT-JPG-GMH",        /** Button ID for exporting the map as JPG. */
      "export_svg": "EXPORT-SVG-GMH",        /** Button ID for exporting the map as SVG. */
      "export_print": "EXPORT-PRINT-GMH",    /** Button ID for printing the map. */
    },

    /*
     * Color Settings for Export Controls
     * Defines the color properties for the export control buttons, such as the default color
     * and the hover color when the user interacts with them.
    */
    "color": {
      "default": "#f3faff",  /** Default color for the export control buttons. */
      "on_hover": "#005999"   /** Color when hovering over the export control buttons. */
    },

    /*
     * Stroke Settings for Export Controls
     * Defines the border color and width for the export control buttons.
    */
    "stroke": {
      "color": "#6B8B9E",  /** Border color for the export control buttons. */
      "width": "0.8px"     /** Border width for the export control buttons. */
    }
  },
}

⚙️ Initialization Script

<!-- Export Map -->
<script src="/gmh-plugin/assets/js/lib/html2canvas.min.js"></script>
<script src="/gmh-plugin/assets/js/lib/jspdf.debug.js"></script>

<!-- Export Map -->
<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 { geoMapHubExportMap } = await import('/gmh-plugin/assets/js/script/lib/export-map-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(geoMapHubExportMap);
      map.registerPlugin(geoMapHubInteractiveTooltip);

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

  initMap();
</script>
<!-- Export Map -->

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 – Export Map</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 id="EXPORT-PNG-GMH">🖼️ Export PNG</button>
          <button id="EXPORT-JPG-GMH">🖼️ Export JPG</button>
          <button id="EXPORT-SVG-GMH">🖼️ Export SVG</button>
          <button id="EXPORT-PRINT-GMH">🖨️ Print Map</button>
        </div>

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

  <!-- Export Map -->
  <script src="/gmh-plugin/assets/js/lib/html2canvas.min.js"></script>
  <script src="/gmh-plugin/assets/js/lib/jspdf.debug.js"></script>

  <!-- Export Map -->
  <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 {geoMapHubExportMap} = await import('/gmh-plugin/assets/js/script/lib/export-map-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(geoMapHubExportMap);
        map.registerPlugin(geoMapHubInteractiveTooltip);

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

    initMap();
  </script>
  <!-- Export Map -->
</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

• Triggers PNG download of the current map.

• Triggers JPG download of the current map.

• Initiates SVG file download (if supported by plugin logic).

• Opens Print dialog with the map as the printable content.