Background Vector
US
Home Maps Features Pricing Contact Add-On
Background Vector

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.

🗺️ Initial Zoom And Center - GEO Map Hub Plugin

The Initial Zoom and Center feature allows you to set the map's starting zoom level and focus on a specific region using its targetClass. You can also define default coordinates (x, y), along with optional color and stroke settings for styling related content outside the map.

📘 What is Initial Zoom and Center?

The Initial Zoom and Center Plugin controls the initial zoom level and map focus position when the map loads. It's used to center the view around a specific region and set an appropriate zoom level to highlight specific areas.

💡 Use Case

  • Focus the map on a central region (like the United States or Europe).

  • Zoom into a specific state or country by default (e.g., Utah).

  • Define the initial map viewport for guided navigation or storytelling.

📁 Folder Structure

Ensure your project follows this structure:

your-project/
├── gmh-plugin/
│    ├── assets/
│    │    ├── css/
│    │    │    └── style.css
│    │    ├── js/
│    │    │    └── script/
│    │    │    │    ├── geomaphub.js
│    │    │    │    └── lib/
│    │    │    │    │   ├── initial-zoom-and-center-gmh.js  ← Required
│    ├── data/
│    │    ├── us/
│    │    │    ├── map-content.js                      ← Add marker config here
│    │    │    └── us.svg
│ index.html
📄 Configuration Breakdown

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

  "initial_zoom_and_center": {
    "zoom": 2,

    "center_state_id": "US-UT",

    "position": {
      "x": 250,
      "y": 50
    },

    /*
     * Color Settings
     * Defines the color properties for the content displayed outside the map, such as the default color,
     * hover color, and active color.
    */
    "color": {
      "default": "#f3faff",     /** Default color for the external content. */
    },

    /*
     * Stroke Settings
     * Defines the border color and width for the external content.
    */
    "stroke": {
      "color": "#6B8B9E",  /** Border color for the external content. */
      "width": "0.8px"     /** Border width for the external content. */
    }
  }
}
Property Description
zoom Initial zoom scale (e.g., 1, 2, 3)
center_state_id State/region to center the map on (e.g., "US-UT">)
position.x X offset for adjusting the center position
position.y Y offset for adjusting the center position
color.default Background color for elements related to the initial view
stroke.color Border color for related content
stroke.width Border width
⚙️ Script Setup
<!-- Initial Zoom and Center -->
<script type="module">
  const currentCountry = "world-map";

  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 {geoMapHubInitialZoomAndCenter} = await import('/gmh-plugin/assets/js/script/lib/initial-zoom-and-center-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(geoMapHubInitialZoomAndCenter);
      map.registerPlugin(geoMapHubInteractiveTooltip);

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

  initMap();
</script>
<!-- Initial Zoom and Center -->

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 – Initial Zoom and Center</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>

  <!-- Initial Zoom and Center -->
  <script type="module">
    const currentCountry = "world-map";

    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 {geoMapHubInitialZoomAndCenter} = await import('/gmh-plugin/assets/js/script/lib/initial-zoom-and-center-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(geoMapHubInitialZoomAndCenter);
        map.registerPlugin(geoMapHubInteractiveTooltip);

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

    initMap();
  </script>
  <!-- Initial Zoom and Center -->
</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
Property Result
zoom: 2 The map is zoomed.
center_state_id The view centers around the state with class US-UT (Utah).
position The map is shifted to (250px, 50px) relative to its origin.
color/stroke These are applied around the map’s outer region (if needed for design).

GEO Map Hub uses cookies to ensure proper functionality and provide an enhanced user experience. By continuing, you consent to the use of all cookies. To learn more, read our Cookie Statement.