svgmap 2.19.3 → 2.20.1

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.19.3",
+  "version": "2.20.1",
   "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.1",
+    "rollup": "^4.61.0",
     "rollup-plugin-postcss": "^4.0.2",
-    "sass": "^1.98.0"
+    "sass": "^1.100.0"
   }
 }

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

@@ -70,6 +70,15 @@ export default class svgMap {
       // Set to true to open the link on mobile devices, set to false (default) to show the tooltip
       touchLink: false,
 
+      // When false, disables hover/touch-following tooltips (not the on-map persistent labels; see persistentTooltips)
+      showTooltips: true,
+
+      // 'hover' (default): mouse shows tooltip on enter. 'click': mouse opens tooltip on click; touch/pen unchanged.
+      tooltipTrigger: 'hover',
+
+      // Persistent on-map tooltips: an array of country IDs, or a function (countryID, countryValues) => boolean
+      persistentTooltips: false,
+
       // Set to true to show the to show a zoom reset button
       showZoomReset: false,
 
@@ -78,6 +87,10 @@ export default class svgMap {
         return null;
       },
 
+      // Called on country click (pointer released without dragging). Receives
+      // (countryID, event). Return false to skip opening data.values[*].link.
+      onCountryClick: null,
+
       // Country specific options
       countries: {
         // Western Sahara: Set to false to combine Morocco (MA) and Western Sahara (EH)
@@ -117,6 +130,9 @@ export default class svgMap {
     // Wrapper element
     this.wrapper = document.getElementById(this.options.targetElementID);
     this.wrapper.classList.add('svgMap-wrapper');
+    if (typeof this.options.onCountryClick === 'function') {
+      this.wrapper.classList.add('svgMap-country-click-callback');
+    }
 
     // Container element
     this.container = document.createElement('div');
@@ -808,7 +824,9 @@ export default class svgMap {
 
   createMap() {
     // Create the tooltip
-    this.createTooltip();
+    if (this.options.showTooltips) {
+      this.createTooltip();
+    }
 
     // Create map wrappers
     this.mapWrapper = this.createElement(
@@ -934,6 +952,103 @@ export default class svgMap {
     }.bind(this);
 
     // 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 || 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];
@@ -951,156 +1066,50 @@ 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);
-
-        // 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) {
-            // 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.appendChild(countryElement);
-            countryElement.classList.add('svgMap-active');
-
-            const countryID = countryElement.getAttribute('data-id');
-            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);
-              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 }
-        );
+        countryElements.push(countryElement);
 
         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)
     );
 
+    var persistent = this.options.persistentTooltips;
+    if (
+      persistent &&
+      (Array.isArray(persistent) || typeof persistent === 'function')
+    ) {
+      this.createPersistentTooltips(countryElements);
+    }
+
     let pointerStart = null;
     let activeCountry = null;
 
-    this.mapImage.addEventListener('pointerdown', e => {
-      // Ignore right click (on desktop it allows inspecting the chart elements without opening the URL)
-      if (e.button !== 0) return;
+    this.mapImage.addEventListener(
+      'pointerdown',
+      (e) => {
+        // Ignore right click (on desktop it allows inspecting the chart elements without opening the URL)
+        if (e.button !== 0) return;
 
-      pointerStart = { x: e.clientX, y: e.clientY };
-    }, { passive: true });
+        pointerStart = { x: e.clientX, y: e.clientY };
+      },
+      { passive: true }
+    );
 
-    this.mapImage.addEventListener('pointerup', e => {
+    this.mapImage.addEventListener('pointerup', (e) => {
       // Ignore right click (on desktop it allows inspecting the chart elements without opening the URL)
       if (e.button !== 0) return;
 
@@ -1118,33 +1127,121 @@ 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 target = countryElement.getAttribute('data-link-target');
-      if (!link) return;
-
+      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' && isClickTooltip;
+
+      if (!hasLink && !hasCallback && !isClickTooltipMouse) return;
+
+      if (isClickTooltipMouse) {
+        const willNavigate =
+          hasLink && countryElement.classList.contains('svgMap-active');
+        const shouldFireCallback = hasCallback && (!hasLink || willNavigate);
+
+        var callbackResultClick;
+        if (shouldFireCallback) {
+          callbackResultClick = this.options.onCountryClick(countryID, e);
+        }
+
+        if (hasLink) {
+          if (callbackResultClick === false) return;
+          if (countryElement.classList.contains('svgMap-active')) {
+            if (linkTarget) window.open(link, linkTarget);
+            else window.location.href = link;
+          } else {
+            clearActive();
+            countryElement.parentNode.insertBefore(
+              countryElement,
+              this.persistentTooltipGroup || null
+            );
+            countryElement.classList.add('svgMap-active');
+            this.setTooltipContent(this.getTooltipContent(countryID));
+            this.showTooltip(e);
+          }
+          return;
+        }
+
+        if (callbackResultClick === false) return;
+
+        clearActive();
+        countryElement.parentNode.insertBefore(
+          countryElement,
+          this.persistentTooltipGroup || null
+        );
+        countryElement.classList.add('svgMap-active');
+        this.setTooltipContent(this.getTooltipContent(countryID));
+        this.showTooltip(e);
+        return;
+      }
+
+      const willNavigate =
+        hasLink &&
+        (!isTouch || countryElement.classList.contains('svgMap-active'));
+
+      const shouldFireCallback =
+        hasCallback && (!hasLink || !isTouch || willNavigate);
+
+      var callbackResult;
+      if (shouldFireCallback) {
+        callbackResult = this.options.onCountryClick(countryID, e);
+      }
+
+      if (!hasLink) return;
+
+      if (callbackResult === false) return;
+
       if (isTouch) {
         // Touch: only open if already active
         if (countryElement.classList.contains('svgMap-active')) {
-          if (target) window.open(link, target);
+          if (linkTarget) window.open(link, linkTarget);
           else window.location.href = link;
         } else {
-          // first tap shows tooltip
+          // first tap shows tooltip (or opens link immediately if tooltips are off)
           if (activeCountry) activeCountry.classList.remove('svgMap-active');
           activeCountry = countryElement;
           countryElement.classList.add('svgMap-active');
-          this.setTooltipContent(this.getTooltipContent(countryID));
-          this.showTooltip(e);
+          if (this.options.showTooltips) {
+            this.setTooltipContent(this.getTooltipContent(countryID));
+            this.showTooltip(e);
+          } else {
+            if (linkTarget) window.open(link, linkTarget);
+            else window.location.href = link;
+          }
         }
       } else {
         // Desktop: open immediately
-        if (target) window.open(link, target);
+        if (linkTarget) window.open(link, linkTarget);
         else window.location.href = link;
       }
     });
 
+    this._clickTooltipOutsideHandler = function (ev) {
+      if (!this.tooltip || !this.tooltip.classList.contains('svgMap-active')) {
+        return;
+      }
+      var node = ev.target;
+      if (
+        node &&
+        node.closest &&
+        (node.closest('.svgMap-country') || node.closest('.svgMap-tooltip'))
+      ) {
+        return;
+      }
+      this.hideTooltip();
+      if (this.mapImage) {
+        this.mapImage
+          .querySelectorAll('.svgMap-country.svgMap-active')
+          .forEach(function (el) {
+            el.classList.remove('svgMap-active');
+          });
+      }
+    }.bind(this);
+
     // Expose instance
     var me = this;
 
@@ -1210,13 +1307,82 @@ export default class svgMap {
     }
   }
 
+  // Create the persistent tooltips
+
+  createPersistentTooltips(countryElements) {
+    if (this.persistentTooltipGroup) {
+      this.persistentTooltipGroup.remove();
+    }
+
+    this.persistentTooltipGroup = document.createElementNS(
+      'http://www.w3.org/2000/svg',
+      'g'
+    );
+    this.persistentTooltipGroup.classList.add('svgMap-persistent-tooltips');
+    this.mapImage.appendChild(this.persistentTooltipGroup);
+
+    countryElements.forEach(
+      function (countryElement) {
+        var countryID = countryElement.dataset.id;
+        if (!this.shouldShowTooltipOnLoad(countryID)) {
+          return;
+        }
+
+        var boundingBox = countryElement.getBBox();
+        var tooltipPosition = {
+          x: boundingBox.x + boundingBox.width / 2,
+          y: boundingBox.y + boundingBox.height / 2
+        };
+
+        var tooltipObject = document.createElementNS(
+          'http://www.w3.org/2000/svg',
+          'foreignObject'
+        );
+        tooltipObject.setAttribute('x', tooltipPosition.x);
+        tooltipObject.setAttribute('y', tooltipPosition.y);
+        tooltipObject.setAttribute('width', 1);
+        tooltipObject.setAttribute('height', 1);
+        tooltipObject.classList.add('svgMap-persistent-tooltip-wrapper');
+
+        var tooltipElement = this.createElement(
+          'div',
+          'svgMap-persistent-tooltip',
+          tooltipObject
+        );
+        tooltipElement.append(
+          this.getTooltipContent(countryID, tooltipElement)
+        );
+        this.createElement('div', 'svgMap-tooltip-pointer', tooltipElement);
+
+        this.persistentTooltipGroup.appendChild(tooltipObject);
+      }.bind(this)
+    );
+  }
+
+  // Check if a persistent tooltip should be shown on load
+
+  shouldShowTooltipOnLoad(countryID) {
+    var persistent = this.options.persistentTooltips;
+    var countryValues = this.options.data.values[countryID];
+
+    if (Array.isArray(persistent)) {
+      return persistent.indexOf(countryID) !== -1;
+    }
+
+    if (typeof persistent === 'function') {
+      return persistent(countryID, countryValues);
+    }
+
+    return false;
+  }
+
   // Create the tooltip content
 
-  getTooltipContent(countryID) {
+  getTooltipContent(countryID, tooltipDiv = this.tooltip) {
     // Custom tooltip
     if (this.options.onGetTooltip) {
       var customDiv = this.options.onGetTooltip(
-        this.tooltip,
+        tooltipDiv,
         countryID,
         this.options.data.values[countryID]
       );
@@ -2198,19 +2364,50 @@ export default class svgMap {
   // Show the tooltip
 
   showTooltip(e) {
+    if (!this.tooltip) {
+      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);
   }
 
   // Hide the tooltip
 
   hideTooltip() {
+    if (!this.tooltip) {
+      return;
+    }
+
     this.tooltip.classList.remove('svgMap-active');
+    document.removeEventListener(
+      'pointerdown',
+      this._clickTooltipOutsideHandler
+    );
   }
 
   // Move the tooltip
 
   moveTooltip(e) {
+    if (!this.tooltip) {
+      return;
+    }
     var x = e.pageX || (e.touches && e.touches[0] ? e.touches[0].pageX : null);
     var y = e.pageY || (e.touches && e.touches[0] ? e.touches[0].pageY : null);
 

package/src/scss/map.scss

@@ -255,3 +255,7 @@
     }
   }
 }
+
+.svgMap-wrapper.svgMap-country-click-callback .svgMap-map-wrapper .svgMap-country {
+  cursor: pointer;
+}

package/src/scss/tooltip.scss

@@ -1,6 +1,7 @@
 @use 'variables' as *;
 
-.svgMap-tooltip {
+.svgMap-tooltip,
+.svgMap-persistent-tooltip {
   box-shadow: 0 0 3px $mapTooltipBoxShadowColor;
   position: absolute;
   z-index: 2;
@@ -8,7 +9,6 @@
   background: $mapTooltipBackgroundColor;
   transform: translate(-50%, -100%);
   border-bottom: 1px solid $mapTooltipColor;
-  display: none;
   pointer-events: none;
   min-width: 60px;
 
@@ -18,10 +18,6 @@
     border-top: 1px solid $mapTooltipColor;
   }
 
-  &.svgMap-active {
-    display: block;
-  }
-
   .svgMap-tooltip-content-container {
     position: relative;
     padding: 10px 20px;
@@ -126,3 +122,27 @@
     }
   }
 }
+
+.svgMap-tooltip {
+  display: none;
+
+  &.svgMap-active {
+    display: block;
+  }
+}
+
+.svgMap-persistent-tooltips,
+.svgMap-persistent-tooltip-wrapper {
+  pointer-events: none;
+}
+
+.svgMap-persistent-tooltip-wrapper {
+  overflow: visible;
+}
+
+.svgMap-persistent-tooltip {
+  display: block;
+  left: 0;
+  top: 0;
+  width: max-content;
+}