🔗 Lines Connecting Markers - GEO Map Hub Plugin

This guide explains how to connect markers using customizable lines on your SVG map. You can combine color and vector markers, add tooltips, and define clickable actions with curved or dashed connecting lines.

🌐 What is Lines Connecting Markers?

The Line Connecting Marker Plugin visually links two markers on a map using a curved or straight SVG path line. It allows dynamic storytelling on maps, such as indicating routes, relationships, connections, or flows between two regions.

💡 Use Cases

• ✈️ Flight routes between cities

• 🛣️ Trade routes or logistics paths

• 🧠 Visualization of concept-to-concept connections

• 🛰️ Linking signal/data origins and destinations

• 🔄 Showing dependencies or transitions between regions

📁 Folder Structure

Make sure the following files are correctly placed:

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

✅ Configuration Breakdown

🔹 map_config

export const map_config = [
  {
    "targetClass": "US-WA",  // Unique identifier for region.
    "name": "Washington",  // Display name for the region.
  },
  {
    "targetClass": "US-AL",  // Unique identifier for region.
    "name": "Alabama",  // Display name for the region.
  },
  {
    "targetClass": "US-AK",  // Unique identifier for region.
    "name": "Alaska",  // Display name for the region.
  },
  {
    "targetClass": "US-AZ",  // Unique identifier for region.
    "name": "Arizona",  // Display name for the region.
  }
];

🔹 connecting_lines

/*
 * Line Connecting Marker Configuration
 * This object defines the map's connecting lines, marker configurations,
 * and overall map styles.
*/
export const connecting_lines = {
  /*
   * Map Configuration
   * Specifies the background color and border styling for the map.
  */
  "map": {
    "color": {
      "default": "#f3faff", // Default background color of the map
    },
    "stroke": {
      "color": "#6B8B9E", // Color of the map's border
      "width": "0.8px"    // Width of the map's border
    }
  },

  /*
   * Marker Configuration
   * Defines the types of markers on the map.
  */
  "markers": {
    /*
     * 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-CA-01",  // Unique identifier for the color marker.
        "shape": "rounded",  // Marker shape (e.g., "rounded", "cubic").
        "tooltip": "California",  // Tooltip text displayed on hover.

        // Marker coordinates.
        "position": {
          "x": 80,  // X-coordinate of the marker's position.
          "y": 280  // Y-coordinate of the marker's position.
        },

        // Dimensions.
        "size": {
          // If you are using the rounded marker, then radius will work
          "radius": 6,

          // if you are using cubic then the width and height will be used
          "width": 8,
          "height": 8
        },

        // Color settings for the marker
        "color": {
          "default": "#ec962a",  // Default marker color.
          "on_hover": "#005999" // Hover color.
        },

        "cursor": "pointer",  // Cursor style on hover.

        // Border settings.
        "stroke": {
          "color": "white",
          "width": "1px"
        },

        // Optional
        "on_click": {
          "url": "https://en.wikipedia.org/wiki/California",  // Click action.
          "target": "_blank",  // Opens in a new tab.
          "cursor": "pointer"
        }
      },
    ],

    /*
     * Vector Marker Configuration
     * Defines vector markers on the map, using SVG or other image assets for enhanced customization.
    */
    "vector_marker": [
      {
        "targetClass": "VM-US-TX-04",  // Unique identifier for the vector marker.
        "tooltip": "This is Texas",  // Tooltip text displayed on hover.

        // Source of the vector image
        "src": "assets/images/icons/marker-fill.svg",

        "width": "24px",  // Width of the vector marker.
        "height": "30px",  // Height of the vector marker.

        // Marker coordinates.
        "position": {
          "x": 400,  // X-coordinate of the marker's position.
          "y": 420 // Y-coordinate of the marker's position.
        },

        // Optional
        "on_click": {
          "url": "https://en.wikipedia.org/wiki/New_York",  // Click action.
          "target": "_blank",  // Opens in a new tab.
          "cursor": "pointer"
        }
      },
    ],
  },

  /*
   * Connecting Lines Configuration
   * Defines the lines connecting markers, including their endpoints,
   * radius, and styling.
  */
  "lines": [
    {
      "from": "VM-US-TX-04", // Starting marker ID (Vector Marker in this case)
      "to": "CM-US-CA-01",   // Ending marker ID (Color Marker in this case)
      "radius": 1.5,          // Radius of the line (for curved connections)

      /*
       * Line Stroke Configuration
       * Defines the appearance of the connecting line.
      */
      "stroke": {
        "color": "#005999",      // Color of the line
        "width": "1.5px"       // Width of the line
      },

      "dasharray": "3, 2.5",
    },
  ]
};

🧭 Marker Types Supported

• ✅ color_marker - styled with shapes and solid fills

• ✅ vector_marker - uses external SVGs or images

🔗 Connecting Lines Configuration

🟠 Color Marker Configuration

🧭 Vector Marker Configuration

📶 Connecting Lines Between Markers

🔹 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. */
    "line_connecting_id": "LINE-CONNECTING-GMH",  /** ID for the connecting lines between regions. */
    "marker_id": "US-MARKER-GMH",  /** ID for the marker element. */
  },
}

🛠️ Initialization Script

<!-- Line Connecting Marker -->
<script type="module">
  const currentCountry = "us";

  async function initMap() {
    try {
      // Dynamically import map-specific data
      const {connecting_lines, 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 {geoMapHubLineConnecting} = await import('/gmh-plugin/assets/js/script/lib/line-connecting-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,
        connectingLines: connecting_lines,
        generalConfig: general_config,
      });

      map.registerPlugin(geoMapHubLineConnecting);
      map.registerPlugin(geoMapHubInteractiveTooltip);

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

  initMap();
</script>
<!-- Line Connecting Marker -->

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 – Line Connecting 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>

  <!-- Line Connecting Marker -->
  <script type="module">
    const currentCountry = "us";

    async function initMap() {
      try {
        // Dynamically import map-specific data
        const {connecting_lines, map_config, general_config} = await import(`/data/${currentCountry}/map-content.js`);
        const {GEOMapHub} = await import('/assets/js/script/geomaphub.js');
        const {geoMapHubLineConnecting} = await import('/assets/js/script/lib/line-connecting-gmh.js');
        const {geoMapHubInteractiveTooltip} = await import('/assets/js/script/lib/interactive-tooltip-gmh.js');

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

        map.registerPlugin(geoMapHubLineConnecting);
        map.registerPlugin(geoMapHubInteractiveTooltip);

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

    initMap();
  </script>
  <!-- Line Connecting Marker -->
</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

✅ Vector and color markers are rendered at specific coordinates

✅ Hover tooltips display on markers

✅ Click actions open external links

✅ Connecting lines are drawn between defined markers

✅ Dashed, curved lines are supported