svgmap 2.20.0 → 2.21.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "svgmap",
   "description": "svgMap is a JavaScript library that lets you easily create an interactable world map comparing customizable data for each country.",
-  "version": "2.20.0",
+  "version": "2.21.0",
   "type": "module",
   "license": "MIT",
   "keywords": [
@@ -43,12 +43,12 @@
     "prepublishOnly": "npm run build && node test/assets.js"
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^29.0.2",
+    "@rollup/plugin-commonjs": "^29.0.3",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-terser": "^1.0.0",
     "csso": "^5.0.5",
-    "rollup": "^4.60.2",
+    "rollup": "^4.61.0",
     "rollup-plugin-postcss": "^4.0.2",
-    "sass": "^1.99.0"
+    "sass": "^1.100.0"
   }
 }

package/src/js/core/svg-map.js

@@ -101,7 +101,34 @@ export default class svgMap {
       showContinentSelector: false,
 
       // Reset zoom on resize
-      resetZoomOnResize: false
+      resetZoomOnResize: false,
+
+      // Static pins: false | string[] | function(countryID, countryValues) => boolean
+      staticPins: false,
+
+      // Default pin fill color
+      pinColor: '#000000',
+
+      // Default pin stroke color and width (circle pins; width is in screen pixels with non-scaling stroke)
+      pinStrokeColor: '#ffffff',
+      pinStrokeWidth: 1.5,
+
+      // Default pin radius in SVG units (viewBox is 2000 × 1001)
+      pinSize: 8,
+
+      // Custom pin element: function(countryID, countryValues) => SVGElement | null
+      onGetPin: null,
+
+      // Image URL to use as a pin instead of the default circle (can also be set per-country via values[id].pinImage)
+      pinImage: null,
+
+      // Width and height of the pin image in SVG units (viewBox is 2000 × 1001)
+      pinImageWidth: 20,
+      pinImageHeight: 20,
+
+      // Offset from computed pin position, in SVG units (added after auto center or pinX/pinY)
+      pinOffsetX: 0,
+      pinOffsetY: 0
     };
 
     this.options = Object.assign({}, defaultOptions, options);
@@ -953,6 +980,102 @@ export default class svgMap {
 
     // Add map elements
     var countryElements = [];
+
+    const clearActive = function clearActive() {
+      this.mapImage
+        .querySelectorAll('.svgMap-active')
+        .forEach((el) => el.classList.remove('svgMap-active'));
+    }.bind(this);
+
+    const isClickTooltip =
+      this.options.showTooltips && this.options.tooltipTrigger === 'click';
+
+    const getCountryFromEvent = function (e) {
+      return e.target && e.target.closest
+        ? e.target.closest('.svgMap-country')
+        : null;
+    };
+
+    const raiseCountry = function (countryElement, setActive) {
+      if (setActive) {
+        clearActive();
+      }
+      countryElement.parentNode.insertBefore(
+        countryElement,
+        this.persistentTooltipGroup || this.pinGroup || null
+      );
+      if (setActive) {
+        countryElement.classList.add('svgMap-active');
+      }
+    }.bind(this);
+
+    const showCountryTooltip = function (countryElement, e, setActive) {
+      raiseCountry(countryElement, setActive);
+      this.setTooltipContent(this.getTooltipContent(countryElement.dataset.id));
+      this.showTooltip(e);
+    }.bind(this);
+
+    // Touch only: preview tooltip on finger down without marking country active
+    // (active is set on pointerup so link countries keep two-tap navigation)
+    this.mapImage.addEventListener(
+      'pointerdown',
+      (e) => {
+        if (!this.options.showTooltips || e.pointerType !== 'touch') {
+          return;
+        }
+
+        const countryElement = getCountryFromEvent(e);
+        if (!countryElement) {
+          this.hideTooltip();
+          return;
+        }
+
+        showCountryTooltip(countryElement, e, false);
+        this.moveTooltip(e);
+      },
+      { passive: true }
+    );
+
+    this.mapImage.addEventListener(
+      'pointercancel',
+      (e) => {
+        if (e.pointerType === 'touch') {
+          this.hideTooltip();
+        }
+      },
+      { passive: true }
+    );
+
+    // Hover (mouse/pen) and touch drag: raise country + optional floating tooltip
+    this.mapImage.addEventListener(
+      'pointermove',
+      (e) => {
+        const countryElement = getCountryFromEvent(e);
+        if (!countryElement) {
+          clearActive();
+          if (this.options.showTooltips) {
+            this.hideTooltip();
+          }
+          return;
+        }
+
+        const mouseClickMode = e.pointerType === 'mouse' && isClickTooltip;
+
+        // Always raise hovered country (SVG paint order + .svgMap-active stroke)
+        if (!this.options.showTooltips || mouseClickMode) {
+          raiseCountry(countryElement, true);
+          return;
+        }
+
+        showCountryTooltip(countryElement, e, true);
+
+        if (e.pointerType === 'touch') {
+          this.moveTooltip(e);
+        }
+      },
+      { passive: true }
+    );
+
     Object.keys(mapPaths).forEach(
       function (countryID) {
         var countryData = this.mapPaths[countryID];
@@ -970,166 +1093,22 @@ export default class svgMap {
           'id',
           this.id + '-map-country-' + countryID
         );
-        countryElement.setAttribute('data-id', countryID);
+        countryElement.dataset.id = countryID;
         countryElement.classList.add('svgMap-country');
 
         this.mapImage.appendChild(countryElement);
         countryElements.push(countryElement);
 
-        // Add tooltip when touch is used
-        function handlePointerMove(e) {
-          if (e.pointerType === 'touch') return;
-
-          const target = document.elementFromPoint(e.clientX, e.clientY);
-
-          if (
-            !target ||
-            (!target.closest('.svgMap-country') &&
-              !target.closest('.svgMap-tooltip'))
-          ) {
-            this.hideTooltip();
-            document
-              .querySelectorAll('.svgMap-active')
-              .forEach((el) => el.classList.remove('svgMap-active'));
-          }
-        }
-
-        const handlePointerMoveBound = handlePointerMove.bind(this);
-
-        countryElement.addEventListener(
-          'pointerenter',
-          function (e) {
-            if (
-              e.pointerType === 'mouse' &&
-              this.options.showTooltips &&
-              this.options.tooltipTrigger === 'click'
-            ) {
-              return;
-            }
-
-            // Only add pointermove listener for non-touch pointers
-            if (e.pointerType !== 'touch') {
-              document.addEventListener('pointermove', handlePointerMoveBound, {
-                passive: true
-              });
-            }
-
-            document
-              .querySelectorAll('.svgMap-active')
-              .forEach((el) => el.classList.remove('svgMap-active'));
-
-            countryElement.parentNode.insertBefore(
-              countryElement,
-              this.persistentTooltipGroup || null
-            );
-            countryElement.classList.add('svgMap-active');
-
-            const countryID = countryElement.getAttribute('data-id');
-            if (this.options.showTooltips) {
-              this.setTooltipContent(this.getTooltipContent(countryID));
-              this.showTooltip(e);
-
-              // For touch, move tooltip to the touch position and keep it there
-              if (e.pointerType === 'touch') {
-                this.moveTooltip(e);
-              }
-            }
-          }.bind(this)
-        );
-
-        // Handle touch move - update tooltip position while panning
-        countryElement.addEventListener(
-          'touchmove',
-          function (e) {
-            this.moveTooltip(e);
-          }.bind(this),
-          { passive: true }
-        );
-
-        // Handle touch end - remove active state and hide tooltip
-        countryElement.addEventListener(
-          'touchend',
-          function (e) {
-            const touch = e.changedTouches[0];
-            const elementAtEnd = document.elementFromPoint(
-              touch.clientX,
-              touch.clientY
-            );
-
-            // Only hide if touch ended outside the country or tooltip
-            if (
-              !elementAtEnd ||
-              (!elementAtEnd.closest('.svgMap-country') &&
-                !elementAtEnd.closest('.svgMap-tooltip'))
-            ) {
-              this.hideTooltip();
-              document
-                .querySelectorAll('.svgMap-active')
-                .forEach((el) => el.classList.remove('svgMap-active'));
-            }
-          }.bind(this),
-          { passive: true }
-        );
-
-        // Remove pointermove listener when leaving non-touch pointer
-        countryElement.addEventListener(
-          'pointerleave',
-          function (e) {
-            if (e.pointerType !== 'touch') {
-              document.removeEventListener(
-                'pointermove',
-                handlePointerMoveBound
-              );
-              if (
-                !(
-                  e.pointerType === 'mouse' &&
-                  this.options.showTooltips &&
-                  this.options.tooltipTrigger === 'click'
-                )
-              ) {
-                this.hideTooltip();
-                document
-                  .querySelectorAll('.svgMap-active')
-                  .forEach((el) => el.classList.remove('svgMap-active'));
-              }
-            }
-          }.bind(this)
-        );
-
-        document.addEventListener(
-          'pointerover',
-          function (e) {
-            if (e.pointerType !== 'touch') return;
-
-            if (
-              e.target.closest('.svgMap-country') ||
-              e.target.closest('.svgMap-tooltip')
-            ) {
-              return;
-            }
-
-            this.hideTooltip();
-            document
-              .querySelectorAll('.svgMap-active')
-              .forEach((el) => el.classList.remove('svgMap-active'));
-          }.bind(this),
-          { passive: true }
-        );
-
         if (
           this.options.data.values &&
           this.options.data.values[countryID] &&
           this.options.data.values[countryID]['link']
         ) {
-          countryElement.setAttribute(
-            'data-link',
-            this.options.data.values[countryID]['link']
-          );
+          countryElement.dataset.link =
+            this.options.data.values[countryID]['link'];
           if (this.options.data.values[countryID]['linkTarget']) {
-            countryElement.setAttribute(
-              'data-link-target',
-              this.options.data.values[countryID]['linkTarget']
-            );
+            countryElement.dataset.linkTarget =
+              this.options.data.values[countryID]['linkTarget'];
           }
         }
       }.bind(this)
@@ -1143,6 +1122,10 @@ export default class svgMap {
       this.createPersistentTooltips(countryElements);
     }
 
+    if (this.options.staticPins) {
+      this.createStaticPins(countryElements);
+    }
+
     let pointerStart = null;
     let activeCountry = null;
 
@@ -1175,21 +1158,18 @@ export default class svgMap {
       const countryElement = e.target.closest('.svgMap-country');
       if (!countryElement) return;
 
-      const countryID = countryElement.getAttribute('data-id');
-      const link = countryElement.getAttribute('data-link');
-      const linkTarget = countryElement.getAttribute('data-link-target');
+      const countryID = countryElement.dataset.id;
+      const link = countryElement.dataset.link;
+      const linkTarget = countryElement.dataset.linkTarget;
       const hasCallback = typeof this.options.onCountryClick === 'function';
       const hasLink = !!link;
       const isTouch = e.pointerType === 'touch' || e.pointerType === 'pen';
 
-      const isClickTooltipMouse =
-        e.pointerType === 'mouse' &&
-        this.options.showTooltips &&
-        this.options.tooltipTrigger === 'click';
+      const isClickTooltipMouse = e.pointerType === 'mouse' && isClickTooltip;
 
       if (!hasLink && !hasCallback && !isClickTooltipMouse) return;
 
-      if (isClickTooltipMouse && this.options.showTooltips) {
+      if (isClickTooltipMouse) {
         const willNavigate =
           hasLink && countryElement.classList.contains('svgMap-active');
         const shouldFireCallback = hasCallback && (!hasLink || willNavigate);
@@ -1205,12 +1185,10 @@ export default class svgMap {
             if (linkTarget) window.open(link, linkTarget);
             else window.location.href = link;
           } else {
-            this.mapImage
-              .querySelectorAll('.svgMap-country.svgMap-active')
-              .forEach((el) => el.classList.remove('svgMap-active'));
+            clearActive();
             countryElement.parentNode.insertBefore(
               countryElement,
-              this.persistentTooltipGroup || null
+              this.persistentTooltipGroup || this.pinGroup || null
             );
             countryElement.classList.add('svgMap-active');
             this.setTooltipContent(this.getTooltipContent(countryID));
@@ -1221,12 +1199,10 @@ export default class svgMap {
 
         if (callbackResultClick === false) return;
 
-        this.mapImage
-          .querySelectorAll('.svgMap-country.svgMap-active')
-          .forEach((el) => el.classList.remove('svgMap-active'));
+        clearActive();
         countryElement.parentNode.insertBefore(
           countryElement,
-          this.persistentTooltipGroup || null
+          this.persistentTooltipGroup || this.pinGroup || null
         );
         countryElement.classList.add('svgMap-active');
         this.setTooltipContent(this.getTooltipContent(countryID));
@@ -1276,15 +1252,9 @@ export default class svgMap {
     });
 
     this._clickTooltipOutsideHandler = function (ev) {
-      if (ev.pointerType !== 'mouse') return;
-      if (
-        !this.options.showTooltips ||
-        this.options.tooltipTrigger !== 'click' ||
-        !this.tooltip
-      ) {
+      if (!this.tooltip || !this.tooltip.classList.contains('svgMap-active')) {
         return;
       }
-      if (!this.tooltip.classList.contains('svgMap-active')) return;
       var node = ev.target;
       if (
         node &&
@@ -1302,11 +1272,6 @@ export default class svgMap {
           });
       }
     }.bind(this);
-    document.addEventListener(
-      'pointerdown',
-      this._clickTooltipOutsideHandler,
-      true
-    );
 
     // Expose instance
     var me = this;
@@ -1389,7 +1354,7 @@ export default class svgMap {
 
     countryElements.forEach(
       function (countryElement) {
-        var countryID = countryElement.getAttribute('data-id');
+        var countryID = countryElement.dataset.id;
         if (!this.shouldShowTooltipOnLoad(countryID)) {
           return;
         }
@@ -1425,6 +1390,157 @@ export default class svgMap {
     );
   }
 
+  // Create static pins on the map
+
+  createStaticPins(countryElements) {
+    if (this.pinGroup) {
+      this.pinGroup.remove();
+    }
+
+    this.pinGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+    this.pinGroup.classList.add('svgMap-pin-group');
+    this.mapImage.appendChild(this.pinGroup);
+
+    countryElements.forEach(
+      function (countryElement) {
+        var countryID = countryElement.getAttribute('data-id');
+        if (!this.shouldShowPin(countryID)) {
+          return;
+        }
+
+        var countryValues = this.options.data.values[countryID];
+        var cx, cy;
+
+        if (
+          countryValues &&
+          countryValues.pinX != null &&
+          countryValues.pinY != null
+        ) {
+          cx = countryValues.pinX;
+          cy = countryValues.pinY;
+        } else {
+          // Split the path at absolute M commands and use the largest sub-path
+          // to avoid overseas territories (islands, colonies) skewing the center.
+          var d = countryElement.getAttribute('d');
+          var subPaths = d.split(/(?=M)/).filter((s) => s.trim().length > 0);
+          var largestBB = null;
+          var largestArea = -1;
+
+          subPaths.forEach(
+            function (subPath) {
+              var tmp = document.createElementNS(
+                'http://www.w3.org/2000/svg',
+                'path'
+              );
+              tmp.setAttribute('d', subPath);
+              this.mapImage.appendChild(tmp);
+              var bb = tmp.getBBox();
+              var area = bb.width * bb.height;
+              if (area > largestArea) {
+                largestArea = area;
+                largestBB = bb;
+              }
+              this.mapImage.removeChild(tmp);
+            }.bind(this)
+          );
+
+          cx = largestBB.x + largestBB.width / 2;
+          cy = largestBB.y + largestBB.height / 2;
+        }
+
+        var offsetX =
+          countryValues && countryValues.pinOffsetX != null
+            ? countryValues.pinOffsetX
+            : this.options.pinOffsetX;
+        var offsetY =
+          countryValues && countryValues.pinOffsetY != null
+            ? countryValues.pinOffsetY
+            : this.options.pinOffsetY;
+        cx += offsetX;
+        cy += offsetY;
+
+        var color =
+          (countryValues && countryValues.pinColor) || this.options.pinColor;
+        var size =
+          (countryValues && countryValues.pinSize) || this.options.pinSize;
+        var strokeColor =
+          (countryValues && countryValues.pinStrokeColor) ||
+          this.options.pinStrokeColor;
+        var strokeWidth =
+          (countryValues && countryValues.pinStrokeWidth) ||
+          this.options.pinStrokeWidth;
+
+        if (typeof this.options.onGetPin === 'function') {
+          var custom = this.options.onGetPin(countryID, countryValues);
+          if (custom) {
+            custom.setAttribute(
+              'transform',
+              'translate(' + cx + ',' + cy + ')'
+            );
+            this.pinGroup.appendChild(custom);
+            return;
+          }
+        }
+
+        var pinImage =
+          (countryValues && countryValues.pinImage) || this.options.pinImage;
+
+        if (pinImage) {
+          var pinW =
+            (countryValues && countryValues.pinImageWidth) ||
+            this.options.pinImageWidth;
+          var pinH =
+            (countryValues && countryValues.pinImageHeight) ||
+            this.options.pinImageHeight;
+          var img = document.createElementNS(
+            'http://www.w3.org/2000/svg',
+            'image'
+          );
+          img.setAttribute('href', pinImage);
+          img.setAttribute('x', cx - pinW / 2);
+          img.setAttribute('y', cy - pinH / 2);
+          img.setAttribute('width', pinW);
+          img.setAttribute('height', pinH);
+          img.setAttribute('data-id', countryID);
+          img.classList.add('svgMap-pin');
+          this.pinGroup.appendChild(img);
+          return;
+        }
+
+        var circle = document.createElementNS(
+          'http://www.w3.org/2000/svg',
+          'circle'
+        );
+        circle.setAttribute('cx', cx);
+        circle.setAttribute('cy', cy);
+        circle.setAttribute('r', size);
+        circle.setAttribute('fill', color);
+        if (strokeWidth > 0) {
+          circle.setAttribute('stroke', strokeColor);
+          circle.setAttribute('stroke-width', strokeWidth);
+          circle.setAttribute('vector-effect', 'non-scaling-stroke');
+        }
+        circle.setAttribute('data-id', countryID);
+        circle.classList.add('svgMap-pin');
+        this.pinGroup.appendChild(circle);
+      }.bind(this)
+    );
+  }
+
+  // Check if a static pin should be shown for a country
+
+  shouldShowPin(countryID) {
+    var pins = this.options.staticPins;
+    var countryValues = this.options.data.values[countryID];
+    if (Array.isArray(pins)) {
+      return pins.indexOf(countryID) !== -1;
+    }
+    if (typeof pins === 'function') {
+      return pins(countryID, countryValues);
+    }
+    return false;
+  }
+
   // Check if a persistent tooltip should be shown on load
 
   shouldShowTooltipOnLoad(countryID) {
@@ -2434,6 +2550,23 @@ export default class svgMap {
       return;
     }
     this.tooltip.classList.add('svgMap-active');
+
+    if (
+      this.options.showTooltips &&
+      this.options.tooltipTrigger === 'click' &&
+      e.pointerType === 'mouse'
+    ) {
+      // don't register event listener in the same frame
+      // to prevent it from being triggered immediately
+      requestAnimationFrame(() => {
+        document.addEventListener(
+          'pointerdown',
+          this._clickTooltipOutsideHandler,
+          { once: true, passive: true }
+        );
+      });
+    }
+
     this.moveTooltip(e);
   }
 
@@ -2443,7 +2576,12 @@ export default class svgMap {
     if (!this.tooltip) {
       return;
     }
+
     this.tooltip.classList.remove('svgMap-active');
+    document.removeEventListener(
+      'pointerdown',
+      this._clickTooltipOutsideHandler
+    );
   }
 
   // Move the tooltip

package/src/scss/map.scss

@@ -259,3 +259,14 @@
 .svgMap-wrapper.svgMap-country-click-callback .svgMap-map-wrapper .svgMap-country {
   cursor: pointer;
 }
+
+// Static pins
+
+.svgMap-pin-group {
+  pointer-events: none;
+}
+
+.svgMap-pin {
+  vector-effect: non-scaling-stroke;
+  transition: r 250ms;
+}