🔭 Different Projection - GEO Map Hub Plugin

The Different Projections feature enables users to display maps using various geographic projection styles, offering flexibility and accuracy based on the nature and scale of the data. This is particularly useful for tailoring map presentations to specific analytical or visual needs.

Supported Projections

• Natural Earth Projection A visually balanced projection ideal for world maps, providing a realistic and aesthetically pleasing representation of the globe.

  Note: To use this projection, import file like this: world-map/map-content.js

• Miller Projection A cylindrical projection that reduces distortion near the poles, making it suitable for global data with a more uniform scale.

  Note: To use this projection, import file like this: miller-projection-world-map/map-content.js

• Mercator Projection A widely used projection for navigation and web mapping, preserving direction but distorting size near the poles.

  Note: To use this projection, include file like this: mercator-projection-world-map/map-content.js

📁 Folder Structure for Natural Earth Projection

Ensure your project follows this structure:

your-project/
├── gmh-plugin/
│    ├── assets/
│    │    ├── css/
│    │    │    └── style.css
│    │    ├── js/
│    │    │    └── script/
│    │    │    │    ├── geomaphub.js
│    │    │    │    └── lib/
│    │    │    │    │   └── feature-gmh.js // add feature plugin files
│    ├── data/
│    │    ├── world-map/                          ← Natural Earth Projection Map
│    │    │    ├── map-content.js
│    │    │    └── world-map.svg
│ index.html

Here's a working example

<script type="module">
  async function initMap() {
    try {
      // Dynamically import map-specific data
      const {map_config, general_config} = await import(`/gmh-plugin/data/world-map/map-content.js`);
      const {GEOMapHub} = await import('/gmh-plugin/assets/js/script/geomaphub.js');

      // import feature plugins to use

      const map = new GEOMapHub("#svg-wrapper-gmh", {
        svgUrl: `/gmh-plugin/data/world-map/world-map.svg`,
        mapConfig: map_config,
        generalConfig: general_config,
      });

      // Register Plugins

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

  initMap();
</script>

📁 Folder Structure for Miller Projection

Ensure your project follows this structure:

your-project/
├── gmh-plugin/
│    ├── assets/
│    │    ├── css/
│    │    │    └── style.css
│    │    ├── js/
│    │    │    └── script/
│    │    │    │    ├── geomaphub.js
│    │    │    │    └── lib/
│    │    │    │    │   └── feature-gmh.js // add feature plugin files
│    ├── data/
│    │    ├── miller-projection-world-map/                          ← Miller Projection Map
│    │    │    ├── map-content.js
│    │    │    └── miller-projection-world-map.svg
│ index.html

Here's a working example

<script type="module">
  async function initMap() {
    try {
      // Dynamically import map-specific data
      const {map_config, general_config} = await import(`/gmh-plugin/data/miller-projection-world-map/map-content.js`);
      const {GEOMapHub} = await import('/gmh-plugin/assets/js/script/geomaphub.js');

      // import feature plugins to use

      const map = new GEOMapHub("#svg-wrapper-gmh", {
        svgUrl: `/gmh-plugin/data/miller-projection-world-map/miller-projection-world-map.svg`,
        mapConfig: map_config,
        generalConfig: general_config,
      });

      // Register Plugins

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

  initMap();
</script>

📁 Folder Structure for Mercator Projection

Ensure your project follows this structure:

your-project/
├── gmh-plugin/
│    ├── assets/
│    │    ├── css/
│    │    │    └── style.css
│    │    ├── js/
│    │    │    └── script/
│    │    │    │    ├── geomaphub.js
│    │    │    │    └── lib/
│    │    │    │    │   └── feature-gmh.js // add feature plugin files
│    ├── data/
│    │    ├── mercator-projection-world-map/                          ← Mercator Projection Map
│    │    │    ├── map-content.js
│    │    │    └── mercator-projection-world-map.svg
│ index.html

Here's a working example

<script type="module">
  async function initMap() {
    try {
      // Dynamically import map-specific data
      const {map_config, general_config} = await import(`/gmh-plugin/data/mercator-projection-world-map/map-content.js`);
      const {GEOMapHub} = await import('/gmh-plugin/assets/js/script/geomaphub.js');

      // import feature plugins to use

      const map = new GEOMapHub("#svg-wrapper-gmh", {
        svgUrl: `/gmh-plugin/data/mercator-projection-world-map/mercator-projection-world-map.svg`,
        mapConfig: map_config,
        generalConfig: general_config,
      });

      // Register Plugins

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

  initMap();
</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.