🎯 Add Colored Marker - GEO Map Hub Plugin

This guide explains how to add colored markers to regions on your SVG map. Colored markers allow you to highlight specific areas with tooltips, custom shapes, hover effects, and clickable actions.

🧩 What is a Color Marker?

A color marker is a visual element (circle or square) placed on a region within your map. You can define its shape, position, color, size, and even make it interactive with tooltips or links.

📁 Folder & File Requirements

Ensure your project follows this structure:

your-project/
├── gmh-plugin/
│    ├── assets/
│    │    ├── css/
│    │    │    └── style.css
│    │    ├── js/
│    │    │    └── script/
│    │    │    │    ├── geomaphub.js
│    │    │    │    └── lib/
│    │    │    │    │   ├── colored-marker-gmh.js       ← Required
│    │    │    │    │   └── interactive-tooltip-gmh.js  ← Required for interactive (tooltips and links.)
│    ├── data/
│    │    ├── us/
│    │    │    ├── map-content.js                      ← Add marker config here
│    │    │    └── us.svg
│ index.html

✏️ Step-by-Step Instructions

1. Add Color Marker Configuration

Edit /gmh-plugin/data/us/map-content.js and locate the region you want to add the marker to:

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:
      * - color_marker: Basic markers with customizable colors, shapes, and hover effects.
    */
    "markers": [
      {
        "targetClass": "MARKER-US-WA-1",  // Unique identifier for this marker.

        /*
          * Colored Marker Configuration
          * Defines color markers that can be displayed on the map with customizable shapes,
            dimensions, tooltips, and actions on click.
        */
        "color_marker": [
          {
            "targetClass": "CM-US-WA-1", // Unique identifier for the color marker.

            /*
              * Marker Shape
              * Options include "rounded" for circular markers or "cubic" for square markers.
            */
            "shape": "rounded", // Shape of the marker (e.g., "rounded" or "cubic").

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

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

            /*
              * Size Properties
              * Defines the marker's dimensions. Use "radius" for rounded shapes,
                and "width" and "height" for cubic shapes.
            */
            "size": {
              "radius": 6,   // Radius for rounded markers.
              "width": 8,    // Width for cubic markers (if used).
              "height": 8    // Height for cubic markers (if used).
            },

            /*
              * Color Properties
              * Configures the marker's default and hover states.
            */
            "color": {
              "default": "#ec962a", // Default marker color.
              "on_hover": "#005999" // Marker color on hover.
            },

            "cursor": "pointer", // Cursor style when hovering over the marker.

            /*
              * Border (Stroke) Properties
              * Defines the marker's border color and width.
            */
            "stroke": {
              "color": "white", // Border color.
              "width": "1px"    // Border width.
            },

            /*
              * Click Action
              * Specifies what happens when the marker is clicked (e.g., redirect to a URL).
            */
            "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"
            }
          },
        ],
      }
    ]
  },
  {
    "targetClass": "US-AL",  // Unique identifier for region.
    "name": "Alabama",  // Display name for the region.
  }
]

💡 You can add multiple markers under the same region or add markers for multiple regions.

2. Add General Configuration

Still in the same file (map-content.js), include the general_config object:

/*
 * General Configuration
 * This section contains global settings for the map, including
 * IDs for various elements like markers, lines, and tooltips.
 */
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. */
    "marker_id": "US-MARKER-GMH",  /** ID for the marker element. */
    "tooltip_id": "tooltip-gmh",  /** ID for the tooltip element. */
    "custom_tooltip_id": "custom-tooltip-gmh",  /** ID for the tooltip element. */
  },

  /*
    * Color Marker Configuration
    * This section defines the settings for the color and stroke of the markers on the map.
  */
  "color_marker": {
    /*
      * Map Color Settings
      * These define the color for the marker. Currently, only the default color is specified.
    */
    "color": {
      "default": "#f3faff",  /** Default color for the map marker. */
    },

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

3. Create HTML and Script to Load Map

Here's a working example to display the map with the colored marker:

<!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 – Add Color Marker</title>
  <link rel="stylesheet" href="/gmh-plugin/assets/css/style.css" />
</head>
<body>
  <div id="tooltip-gmh"></div> <!-- Don't forget to add this element --->

  <div id="custom-tooltip-gmh"></div> <!-- Don't forget to add this element --->

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

  <script type="module">
    const currentCountry = "us";

    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 { 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(geoMapHubInteractiveTooltip); // Optional, enables tooltip

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

    initMap();
  </script>
</body>
</html>

🎨 Marker Customization Options

⚙️ General Configuration Options general_config

The general_config object defines global map behavior and styling, including SVG IDs, default colors, and stroke settings used across all regions and markers.

🔑 id Section

💡 These IDs must match what's defined inside your actual .svg file.
If you rename id="US-MAP-GMH" in the SVG, you must update svg_id accordingly.

🎨 color_marker Section

🧠 These are global defaults. You can still override them in each marker's own config if needed.

⚠️ 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.

🧪 Final Checklist

✅ Result

If done correctly, you will see a colored marker on Washington that:

• Shows a tooltip when hovered

• Changes color on hover

• Opens Wikipedia in a new tab when clicked