🧭 Vector Icon Markers - GEO Map Hub Plugin

Vector markers allow you to place custom SVG on the map with full control over size, position, interactivity, and styling. These markers support tooltips, click actions, and scalable dimensions, making them ideal for highlighting landmarks, points of interest, or complex shapes directly on the map.

🌐 What is Vector Marker?

The Vector Icon Marker lets you place SVG-based custom markers anywhere on your map. These markers use scalable vector graphics (e.g., landmarks, icons) for high-resolution, dynamic visuals.

💡 Use Case

• Show famous landmarks (e.g., Statue of Liberty, Golden Gate Bridge).

• Pin city-specific or event-specific icons.

• Make your map more expressive and branded.

🗺️ Example: A Golden Gate Bridge SVG appears over Washington, linking to its Wikipedia page.

📁 Folder Structure

Make sure the following files are correctly placed:

your-project/
├── gmh-plugin/
│    ├── assets/
│    │    ├── css/
│    │    │    └── style.css
│    │    ├── js/
│    │    │    └── script/
│    │    │    │    ├── geomaphub.js
│    │    │    │    └── lib/
│    │    │    │    │   ├── vector-marker-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 map_config

export const map_config = [
  {
    "targetClass": "US-WA",  // Unique identifier for region.
    "name": "Washington",  // Display name for the region.

    /**
     * Marker Configuration
     * 
     * This section defines different types of markers that can be added to the map.
     * Each marker type has its own structure and properties, allowing customization for
     * specific use cases such as displaying images, labels, vectors, or color markers.
     * 
     * Supported Marker Types:
     * - vector_marker: Markers using vector graphics for more complex shapes.
    */
    "markers": [
      {
        "targetClass": "MARKER-US-WA-1",  // Unique identifier for this marker.

        /*
         * Vector Marker Configuration
         * Defines vector markers on the map, using SVG or other image assets for enhanced customization.
        */
        "vector_marker": [
          {
            "targetClass": "VM-US-AZ-4", // Unique identifier for the vector marker.

            "tooltip": "Washington", // Tooltip text displayed when hovering over the marker.

            /*
              * Source of the Vector Marker
              * Specify the path to the SVG or image asset to be used as the marker.
            */
            "src": "assets/images/icons/Golden-Gate-Bridge.svg", // Path to the vector image.

            /*
              * Dimensions
              * Define the width and height of the vector marker for proper scaling.
            */
            "width": "24px",  // Width of the vector marker.
            "height": "24px", // Height of the vector marker.

            /*
              Positioning Properties
              Specifies the marker's coordinates (x, y) for placement on the map.
            */
            "position": {
              "x": 106,  // X-coordinate of the marker's position.
              "y": 56  // Y-coordinate of the marker's position.
            },

            "on_click": {
              "url": "https://en.wikipedia.org/wiki/Washington", // URL to open on click.
              "target": "_blank", // Target for the URL (e.g., "_blank" for new tab, "_self" for same tab).
              "cursor": "pointer"
            }
          },
        ],
      }
    ],
  },
];

🧩 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. */
    "marker_id": "US-MARKER-GMH",  /** ID for the marker element. */
  },

  /*
   * Vector Marker Configuration
   * This section defines the settings for vector markers on the map, 
   * including color and stroke properties.
  */
  "vector_marker": {
    /*
     * Vector Marker Color Settings
     * Defines the default color for vector markers.
    */
    "color": {
      "default": "#f3faff",  /** Default color for vector markers. */
    },

    /*
     * Vector Marker Stroke Settings
     * Defines the border (stroke) properties for the vector markers, including 
     * the color and width of the border.
    */
    "stroke": {
      "color": "#6B8B9E",  /** Border color for the vector marker. */
      "width": "0.8px"     /** Border width for the vector marker. */
    },
  },
}

⚙️ Initialization Script

<!-- Vector Markers -->
<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 {geoMapHubVectorMarker} = await import('/gmh-plugin/assets/js/script/lib/vector-marker-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(geoMapHubVectorMarker);
      map.registerPlugin(geoMapHubInteractiveTooltip);

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

  initMap();
</script>
<!-- Vector Markers -->

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 – Vector Icon Markers</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="svg-wrapper-gmh"></div>
      </div>
    </div>
  </div>

  <!-- Vector Markers -->
  <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 { geoMapHubVectorMarker } = await import('/gmh-plugin/assets/js/script/lib/vector-marker-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(geoMapHubVectorMarker);
        map.registerPlugin(geoMapHubInteractiveTooltip);

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

    initMap();
  </script>
  <!-- Vector Markers -->
</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

• Tooltip appears with region or place name

• Navigates to the URL defined in on_click.url

• Custom SVG image appears at defined coordinates on the map

• Uses stroke and color settings from general_config